fix: character count to work properly on editor rerenders and read only mode (#5554)

* fix: character count to work properly on editor rerenders and read only mode

* fix: desctructing properly at the start

packages/editor/src/core/extensions/read-only-extensions.tsx

@@ -1,3 +1,4 @@
+import CharacterCount from "@tiptap/extension-character-count";
 import TaskItem from "@tiptap/extension-task-item";
 import TaskList from "@tiptap/extension-task-list";
 import TextStyle from "@tiptap/extension-text-style";
@@ -104,4 +105,5 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
     mentionHighlights: mentionConfig.mentionHighlights,
     readonly: true,
   }),
+  CharacterCount,
 ];

packages/editor/src/core/hooks/use-editor.ts

@@ -230,10 +230,12 @@ export const useEditor = (props: CustomEditorProps) => {
           editor.chain().focus().deleteRange({ from, to }).insertContent(contentHTML).run();
         }
       },
-      documentInfo: {
-        characters: editorRef.current?.storage?.characterCount?.characters?.() ?? 0,
-        paragraphs: getParagraphCount(editorRef.current?.state),
-        words: editorRef.current?.storage?.characterCount?.words?.() ?? 0,
+      getDocumentInfo: () => {
+        return {
+          characters: editorRef?.current?.storage?.characterCount?.characters?.() ?? 0,
+          paragraphs: getParagraphCount(editorRef?.current?.state),
+          words: editorRef?.current?.storage?.characterCount?.words?.() ?? 0,
+        };
       },
     }),
     [editorRef, savedSelection, fileHandler.upload]

packages/editor/src/core/hooks/use-read-only-editor.ts

@@ -82,10 +82,12 @@ export const useReadOnlyEditor = ({
       if (!editorRef.current) return;
       scrollSummary(editorRef.current, marking);
     },
-    documentInfo: {
-      characters: editorRef.current?.storage?.characterCount?.characters?.() ?? 0,
-      paragraphs: getParagraphCount(editorRef.current?.state),
-      words: editorRef.current?.storage?.characterCount?.words?.() ?? 0,
+    getDocumentInfo: () => {
+      return {
+        characters: editorRef?.current?.storage?.characterCount?.characters?.() ?? 0,
+        paragraphs: getParagraphCount(editorRef?.current?.state),
+        words: editorRef?.current?.storage?.characterCount?.words?.() ?? 0,
+      };
     },
   }));
 

packages/editor/src/core/types/editor.ts

@@ -20,7 +20,7 @@ export type EditorReadOnlyRefApi = {
   clearEditor: (emitUpdate?: boolean) => void;
   setEditorValue: (content: string) => void;
   scrollSummary: (marking: IMarking) => void;
-  documentInfo: {
+  getDocumentInfo: () => {
     characters: number;
     paragraphs: number;
     words: number;