feat: characters and words count in info bar

package.json

@@ -53,6 +53,7 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@tiptap/core": "^2.0.2",
+    "@tiptap/extension-character-count": "^2.0.2",
     "@tiptap/extension-placeholder": "^2.0.2",
     "@tiptap/extension-underline": "^2.0.2",
     "@tiptap/pm": "^2.0.2",

src/extensions.ts

@@ -1,5 +1,6 @@
 import type { Extensions } from "@tiptap/core";
 import StarterKit from "@tiptap/starter-kit";
 import { Underline } from "@tiptap/extension-underline";
+import { CharacterCount } from "@tiptap/extension-character-count";
 
-export const extensions: Extensions = [StarterKit, Underline];
+export const extensions: Extensions = [StarterKit, Underline, CharacterCount];

src/tiptap-editor.vue

@@ -203,6 +203,10 @@
     </div>
 
     <editor-content class="tiptap-editor__content" :editor="editor" />
+
+    <div class="tiptap-editor__info">
+      {{ editor.storage.characterCount.characters() }} chars, {{ editor.storage.characterCount.words() }} words
+    </div>
   </div>
 </template>
 
@@ -239,6 +243,20 @@
     border-color: var(--border-normal);
   }
 
+  &__info {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    min-height: 30px;
+    padding: 0 8px;
+    background-color: var(--background-subdued);
+    color: var(--foreground-subdued);
+    border-top: 2px solid var(--border-normal);
+    font-family: var(--family-monospace);
+    font-size: 12px;
+  }
+
   &__toolbar {
     --v-button-background-color: transparent;
     --v-button-color: var(--foreground-normal);