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..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?.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) => { { 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",