From 0a79f4dc28bd98da5b42bfc0bda51fb6ba6bd802 Mon Sep 17 00:00:00 2001
From: Piotrek Tomczewski <piotr.tomczewski@noaignite.com>
Date: Fri, 6 Jan 2023 22:38:01 +0100
Subject: [PATCH] feat(publish): add hashtag autocomplete (#837)

---
 components/publish/PublishWidget.vue | 7 ++++---
 composables/tiptap.ts                | 4 ----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index 00485874..1c9a937e 100644
--- a/components/publish/PublishWidget.vue
+++ b/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') }}
diff --git a/composables/tiptap.ts b/composables/tiptap.ts
index fe3d9ae0..0c454bee 100644
--- a/composables/tiptap.ts
+++ b/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',