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',