feat(publish): add hashtag autocomplete (#837)

components/publish/PublishWidget.vue

@@ -56,6 +56,7 @@ const { editor } = useTiptap({
   onPaste: handlePaste,
 })
 
+const characterCount = $computed(() => htmlToText(editor.value?.getHTML() || '').length)
 let isUploading = $ref<boolean>(false)
 let isExceedingAttachmentLimit = $ref<boolean>(false)
 let failed = $ref<FileUploadError[]>([])
@@ -312,8 +313,8 @@ defineExpose({
 
         <div flex-auto />
 
-        <div dir="ltr" pointer-events-none pe-1 pt-2 text-sm tabular-nums text-secondary flex gap-0.5>
-          {{ editor?.storage.characterCount.characters() }}<span text-secondary-light>/</span><span text-secondary-light>{{ characterLimit }}</span>
+        <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 }">
+          {{ characterCount ?? 0 }}<span text-secondary-light>/</span><span text-secondary-light>{{ characterLimit }}</span>
         </div>
 
         <CommonTooltip placement="top" :content="$t('tooltip.add_content_warning')">
@@ -347,7 +348,7 @@ defineExpose({
 
         <button
           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"
         >
           {{ !draft.editingStatus ? $t('action.publish') : $t('action.save_changes') }}

composables/tiptap.ts

@@ -4,7 +4,6 @@ import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import Mention from '@tiptap/extension-mention'
-import CharacterCount from '@tiptap/extension-character-count'
 import HardBreak from '@tiptap/extension-hard-break'
 import Bold from '@tiptap/extension-bold'
 import Italic from '@tiptap/extension-italic'
@@ -61,9 +60,6 @@ export function useTiptap(options: UseTiptapOptions) {
       Placeholder.configure({
         placeholder: placeholder.value,
       }),
-      CharacterCount.configure({
-        limit: characterLimit.value,
-      }),
       CodeBlockShiki,
       Extension.create({
         name: 'api',