feat(publish): add hashtag autocomplete (#837)
parent
5e38a768c9
commit
0a79f4dc28
|
@ -56,6 +56,7 @@ const { editor } = useTiptap({
|
||||||
onPaste: handlePaste,
|
onPaste: handlePaste,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const characterCount = $computed(() => htmlToText(editor.value?.getHTML() || '').length)
|
||||||
let isUploading = $ref<boolean>(false)
|
let isUploading = $ref<boolean>(false)
|
||||||
let isExceedingAttachmentLimit = $ref<boolean>(false)
|
let isExceedingAttachmentLimit = $ref<boolean>(false)
|
||||||
let failed = $ref<FileUploadError[]>([])
|
let failed = $ref<FileUploadError[]>([])
|
||||||
|
@ -312,8 +313,8 @@ defineExpose({
|
||||||
|
|
||||||
<div flex-auto />
|
<div flex-auto />
|
||||||
|
|
||||||
<div dir="ltr" pointer-events-none pe-1 pt-2 text-sm tabular-nums text-secondary flex gap-0.5>
|
<div dir="ltr" pointer-events-none pe-1 pt-2 text-sm tabular-nums text-secondary flex gap-0.5 :class="{ 'text-rose-500': characterCount > characterLimit }">
|
||||||
{{ editor?.storage.characterCount.characters() }}<span text-secondary-light>/</span><span text-secondary-light>{{ characterLimit }}</span>
|
{{ characterCount ?? 0 }}<span text-secondary-light>/</span><span text-secondary-light>{{ characterLimit }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<CommonTooltip placement="top" :content="$t('tooltip.add_content_warning')">
|
<CommonTooltip placement="top" :content="$t('tooltip.add_content_warning')">
|
||||||
|
@ -347,7 +348,7 @@ defineExpose({
|
||||||
|
|
||||||
<button
|
<button
|
||||||
btn-solid rounded-3 text-sm w-full md:w-fit
|
btn-solid rounded-3 text-sm w-full md:w-fit
|
||||||
:disabled="isEmpty || isUploading || (draft.attachments.length === 0 && !draft.params.status)"
|
:disabled="isEmpty || isUploading || (draft.attachments.length === 0 && !draft.params.status) || characterCount > characterLimit"
|
||||||
@click="publish"
|
@click="publish"
|
||||||
>
|
>
|
||||||
{{ !draft.editingStatus ? $t('action.publish') : $t('action.save_changes') }}
|
{{ !draft.editingStatus ? $t('action.publish') : $t('action.save_changes') }}
|
||||||
|
|
|
@ -4,7 +4,6 @@ import Document from '@tiptap/extension-document'
|
||||||
import Paragraph from '@tiptap/extension-paragraph'
|
import Paragraph from '@tiptap/extension-paragraph'
|
||||||
import Text from '@tiptap/extension-text'
|
import Text from '@tiptap/extension-text'
|
||||||
import Mention from '@tiptap/extension-mention'
|
import Mention from '@tiptap/extension-mention'
|
||||||
import CharacterCount from '@tiptap/extension-character-count'
|
|
||||||
import HardBreak from '@tiptap/extension-hard-break'
|
import HardBreak from '@tiptap/extension-hard-break'
|
||||||
import Bold from '@tiptap/extension-bold'
|
import Bold from '@tiptap/extension-bold'
|
||||||
import Italic from '@tiptap/extension-italic'
|
import Italic from '@tiptap/extension-italic'
|
||||||
|
@ -61,9 +60,6 @@ export function useTiptap(options: UseTiptapOptions) {
|
||||||
Placeholder.configure({
|
Placeholder.configure({
|
||||||
placeholder: placeholder.value,
|
placeholder: placeholder.value,
|
||||||
}),
|
}),
|
||||||
CharacterCount.configure({
|
|
||||||
limit: characterLimit.value,
|
|
||||||
}),
|
|
||||||
CodeBlockShiki,
|
CodeBlockShiki,
|
||||||
Extension.create({
|
Extension.create({
|
||||||
name: 'api',
|
name: 'api',
|
||||||
|
|
Loading…
Reference in New Issue