feat: chars counter, close #64

components/publish/PublishWidget.vue

@@ -3,6 +3,7 @@ import type { CreateStatusParams, StatusVisibility } from 'masto'
 import { fileOpen } from 'browser-fs-access'
 import { useDropZone } from '@vueuse/core'
 import { EditorContent } from '@tiptap/vue-3'
+import { POST_CHARS_LIMIT } from '~~/constants'
 
 const {
   draftKey,
@@ -167,10 +168,15 @@ onUnmounted(() => {
           >
         </div>
 
-        <EditorContent
-          :editor="editor"
-          :class="isExpanded ? 'min-h-120px' : ''"
-        />
+        <div relative>
+          <EditorContent
+            :editor="editor"
+            :class="isExpanded ? 'min-h-120px' : ''"
+          />
+          <div v-if="isExpanded" absolute right-0 bottom-0 pointer-events-none text-sm op25>
+            {{ POST_CHARS_LIMIT - editor?.storage.characterCount.characters() }}
+          </div>
+        </div>
 
         <div v-if="isUploading" flex gap-1 items-center text-sm p1 text-primary>
           <div i-ri:loader-2-fill animate-spin />