From 9df63431d951c5f438f3c7d1c2257d86b0c1db9a Mon Sep 17 00:00:00 2001 From: Palanikannan M Date: Mon, 9 Sep 2024 15:34:08 +0530 Subject: [PATCH 1/2] fix: character count to work properly on editor rerenders and read only mode --- .../src/core/extensions/read-only-extensions.tsx | 2 ++ packages/editor/src/core/hooks/use-editor.ts | 10 ++++++---- packages/editor/src/core/hooks/use-read-only-editor.ts | 10 ++++++---- packages/editor/src/core/types/editor.ts | 2 +- .../components/pages/editor/header/info-popover.tsx | 8 ++++---- 5 files changed, 19 insertions(+), 13 deletions(-) diff --git a/packages/editor/src/core/extensions/read-only-extensions.tsx b/packages/editor/src/core/extensions/read-only-extensions.tsx index e646ed56e1f..68e3f7d6888 100644 --- a/packages/editor/src/core/extensions/read-only-extensions.tsx +++ b/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, ]; diff --git a/packages/editor/src/core/hooks/use-editor.ts b/packages/editor/src/core/hooks/use-editor.ts index e1349b9c1ec..c12e612fe17 100644 --- a/packages/editor/src/core/hooks/use-editor.ts +++ b/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] diff --git a/packages/editor/src/core/hooks/use-read-only-editor.ts b/packages/editor/src/core/hooks/use-read-only-editor.ts index 5e81675b963..b6081a51032 100644 --- a/packages/editor/src/core/hooks/use-read-only-editor.ts +++ b/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, + }; }, })); diff --git a/packages/editor/src/core/types/editor.ts b/packages/editor/src/core/types/editor.ts index 8045de945b7..f6c790305f3 100644 --- a/packages/editor/src/core/types/editor.ts +++ b/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; diff --git a/web/core/components/pages/editor/header/info-popover.tsx b/web/core/components/pages/editor/header/info-popover.tsx index 1a2c928c5f5..e731bade95a 100644 --- a/web/core/components/pages/editor/header/info-popover.tsx +++ b/web/core/components/pages/editor/header/info-popover.tsx @@ -23,7 +23,7 @@ export const PageInfoPopover: React.FC = (props) => { }); const secondsToReadableTime = () => { - const wordsCount = editorRef?.documentInfo.words || 0; + const wordsCount = editorRef?.getDocumentInfo().words || 0; const readTimeInSeconds = Number(getReadTimeFromWordsCount(wordsCount).toFixed(0)); return readTimeInSeconds < 60 ? `${readTimeInSeconds}s` : `${Math.ceil(readTimeInSeconds / 60)}m`; }; @@ -32,17 +32,17 @@ export const PageInfoPopover: React.FC = (props) => { { key: "words-count", title: "Words", - info: editorRef?.documentInfo.words, + info: editorRef?.getDocumentInfo().words, }, { key: "characters-count", title: "Characters", - info: editorRef?.documentInfo.characters, + info: editorRef?.getDocumentInfo().characters, }, { key: "paragraphs-count", title: "Paragraphs", - info: editorRef?.documentInfo.paragraphs, + info: editorRef?.getDocumentInfo().paragraphs, }, { key: "read-time", From 50d429c09f070ba132fb85cff2e2dca9a7345833 Mon Sep 17 00:00:00 2001 From: Palanikannan M Date: Mon, 9 Sep 2024 15:47:31 +0530 Subject: [PATCH 2/2] fix: desctructing properly at the start --- .../components/pages/editor/header/info-popover.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/web/core/components/pages/editor/header/info-popover.tsx b/web/core/components/pages/editor/header/info-popover.tsx index e731bade95a..e295d8ea278 100644 --- a/web/core/components/pages/editor/header/info-popover.tsx +++ b/web/core/components/pages/editor/header/info-popover.tsx @@ -22,8 +22,10 @@ export const PageInfoPopover: React.FC = (props) => { placement: "bottom-start", }); + const documentsInfo = editorRef?.getDocumentInfo() || { words: 0, characters: 0, paragraphs: 0 }; + const secondsToReadableTime = () => { - const wordsCount = editorRef?.getDocumentInfo().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) => { { key: "words-count", title: "Words", - info: editorRef?.getDocumentInfo().words, + info: documentsInfo.words, }, { key: "characters-count", title: "Characters", - info: editorRef?.getDocumentInfo().characters, + info: documentsInfo.characters, }, { key: "paragraphs-count", title: "Paragraphs", - info: editorRef?.getDocumentInfo().paragraphs, + info: documentsInfo.paragraphs, }, { key: "read-time",