From 4632d7d4abde3cef265c11b2932f6ff81c49c54c Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 25 Nov 2022 21:29:42 +0800
Subject: [PATCH] feat: chars counter, close #64

---
 components/publish/PublishWidget.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index 800edf31..dcf84815 100644
--- a/components/publish/PublishWidget.vue
+++ b/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 />