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;

web/core/components/pages/editor/header/info-popover.tsx

@@ -22,8 +22,10 @@ export const PageInfoPopover: React.FC<Props> = (props) => {
     placement: "bottom-start",
   });
 
+  const documentsInfo = editorRef?.getDocumentInfo() || { words: 0, characters: 0, paragraphs: 0 };
+
   const secondsToReadableTime = () => {
-    const wordsCount = editorRef?.documentInfo.words || 0;
+    const wordsCount = documentsInfo.words;
     const readTimeInSeconds = Number(getReadTimeFromWordsCount(wordsCount).toFixed(0));
     return readTimeInSeconds < 60 ? `${readTimeInSeconds}s` : `${Math.ceil(readTimeInSeconds / 60)}m`;
   };
@@ -32,17 +34,17 @@ export const PageInfoPopover: React.FC<Props> = (props) => {
     {
       key: "words-count",
       title: "Words",
-      info: editorRef?.documentInfo.words,
+      info: documentsInfo.words,
     },
     {
       key: "characters-count",
       title: "Characters",
-      info: editorRef?.documentInfo.characters,
+      info: documentsInfo.characters,
     },
     {
       key: "paragraphs-count",
       title: "Paragraphs",
-      info: editorRef?.documentInfo.paragraphs,
+      info: documentsInfo.paragraphs,
     },
     {
       key: "read-time",