binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

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

* fix: desctructing properly at the start
This commit is contained in:
M. Palanikannan 2024-09-09 19:59:07 +05:30 • committed by GitHub
parent 7c3fc690e9
commit 4d38a10f8b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 21 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/editor/src/core/extensions/read-only-extensions.tsx
View file

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

10
packages/editor/src/core/hooks/use-editor.ts
View file

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

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

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

2
packages/editor/src/core/types/editor.ts
View file

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

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

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