From a6ca3661f0238517d8cac3ec76efcd05ffdc32a2 Mon Sep 17 00:00:00 2001
From: Arman Hashemi <ahhdev@gmail.com>
Date: Tue, 19 Jul 2022 10:56:32 +0430
Subject: [PATCH] feat: add character counter

---
 package.json                             |  1 +
 src/components/editor/RichTextEditor.tsx | 16 ++++++++--------
 src/components/editor/TitleEditor.tsx    | 22 ++++++++++++++++------
 yarn.lock                                |  8 ++++++++
 4 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index ffec6d8..e6c48b4 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tiptap/extension-character-count": "^2.0.0-beta.31",
     "@tiptap/extension-code-block-lowlight": "^2.0.0-beta.73",
     "@tiptap/extension-document": "^2.0.0-beta.17",
     "@tiptap/extension-heading": "^2.0.0-beta.29",
diff --git a/src/components/editor/RichTextEditor.tsx b/src/components/editor/RichTextEditor.tsx
index e9ebb18..85f5fa6 100644
--- a/src/components/editor/RichTextEditor.tsx
+++ b/src/components/editor/RichTextEditor.tsx
@@ -1,4 +1,5 @@
 import Placeholder from "@tiptap/extension-placeholder";
+import CharacterCount from "@tiptap/extension-character-count";
 
 import { useEditor, EditorContent } from "@tiptap/react";
 import { useEditorStore } from "../../global-stores/useEditorStore";
@@ -13,14 +14,9 @@ export const RichTextEditor = () => {
 
   const editor = useEditor({
     content: editorContent,
-    editorProps: {
-      attributes: {
-        class:
-          "mx-auto px-1 sm:px-2 pb-4 prose prose-sm sm:prose-base md:prose-md prose-stone prose-img:mx-auto prose-img:mb-2 prose-a:text-rose-500 prose-img:rounded prose-figcaption:text-center",
-      },
-    },
     extensions: [
       RichText,
+      CharacterCount,
       Placeholder.configure({
         placeholder: "یه چیزی بنویس...",
       }),
@@ -36,8 +32,12 @@ export const RichTextEditor = () => {
       <div>
         <TitleEditor />
         <Toolbar editor={editor} />
-        <div className="mt-6" />
-        <EditorContent editor={editor} />
+        <div className="mt-6 mx-auto px-1 sm:px-2 pb-4 prose prose-sm sm:prose-base md:prose-md prose-stone prose-img:mx-auto prose-img:mb-2 prose-a:text-rose-500 prose-img:rounded prose-figcaption:text-center">
+          <EditorContent editor={editor} />
+          <div className="text-gray-400">
+            {editor.storage.characterCount.words()} کلمه
+          </div>
+        </div>
       </div>
     )
   );
diff --git a/src/components/editor/TitleEditor.tsx b/src/components/editor/TitleEditor.tsx
index 5d210c6..37beca4 100644
--- a/src/components/editor/TitleEditor.tsx
+++ b/src/components/editor/TitleEditor.tsx
@@ -1,6 +1,7 @@
 import Placeholder from "@tiptap/extension-placeholder";
 import Heading from "@tiptap/extension-heading";
 import Text from "@tiptap/extension-text";
+import CharacterCount from "@tiptap/extension-character-count";
 
 import { Document } from "@tiptap/extension-document";
 import { useEditor, EditorContent } from "@tiptap/react";
@@ -8,6 +9,8 @@ import { useEditor, EditorContent } from "@tiptap/react";
 import { TextDirection } from "./extensions/TextDirection";
 import { useEditorStore } from "../../global-stores/useEditorStore";
 
+const limit = 100;
+
 export const TitleEditor = () => {
   const setTitle = useEditorStore((s) => s.setTitleHtml);
   const title = useEditorStore((s) => s.titleHtml);
@@ -18,11 +21,6 @@ export const TitleEditor = () => {
 
   const editor = useEditor({
     content: title,
-    editorProps: {
-      attributes: {
-        class: "prose prose-sm sm:prose-base mx-auto py-8",
-      },
-    },
     extensions: [
       TitleDocument,
       Text,
@@ -33,6 +31,9 @@ export const TitleEditor = () => {
       Placeholder.configure({
         placeholder: "عنوان ...",
       }),
+      CharacterCount.configure({
+        limit,
+      }),
     ],
     onUpdate({ editor }) {
       const html = editor.getHTML();
@@ -40,5 +41,14 @@ export const TitleEditor = () => {
     },
   });
 
-  return <EditorContent className="text-x" editor={editor} />;
+  return (
+    editor && (
+      <div className="prose prose-sm sm:prose-base mx-auto py-8">
+        <EditorContent editor={editor} />
+        <div className="text-gray-400">
+          {editor.storage.characterCount.characters()}/{limit} کاراکتر
+        </div>
+      </div>
+    )
+  );
 };
diff --git a/yarn.lock b/yarn.lock
index 184a9a7..82ad36c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -354,6 +354,14 @@
   resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-2.0.0-beta.29.tgz#640883e4fffc1a86c7cbd78792688e7edee5ee41"
   integrity sha512-R8VB2l1ZB6VeGWx/t/04nBS5Wg3qjIDEZCpPihj2fccJOw99Lu0Ub2UJg/SfdGmeNNpBh4ZYYFv1g/XjyzlXKg==
 
+"@tiptap/extension-character-count@^2.0.0-beta.31":
+  version "2.0.0-beta.31"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-character-count/-/extension-character-count-2.0.0-beta.31.tgz#fac9ba809ddc38cf67c8a05a42d94e062a1967d2"
+  integrity sha512-NNA9MN1IjZe+yYQLuYVAg9RNG/3RonYrHiM5mL6vsegd+PF4uMqyZLgsM0/9dMhxh9K/pDPaCRxhuDoZC8V1wA==
+  dependencies:
+    prosemirror-model "1.18.1"
+    prosemirror-state "1.4.1"
+
 "@tiptap/extension-code-block-lowlight@^2.0.0-beta.73":
   version "2.0.0-beta.73"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block-lowlight/-/extension-code-block-lowlight-2.0.0-beta.73.tgz#3f4711fadb1a1f51efbf58389216e6c8bca83d84"