I use CKEditor5 on a react project. Each time a user opens the editor page the browser's memory usage increases. I put editor.destroy() to cleanup the state. But it seems it has no effect on memory usage because problem goes on.
It starts with a memory usage around 300 mb and then, after opening and closing tens of different pages with editor content, it goes up the 2000 mb or more.
What could be the reason?
// ... other packages
import { CKEditor } from '@ckeditor/ckeditor5-react';
import Editor from 'ckeditor5-custom-build/build/ckeditor';
function EditorPage(props) {
const { editorContent } = useSelector(({ publisher }) => publisher.board);
const [edited, setEdited] = useState(false);
const [content, setContent] = useState('');
const [editor, setEditor] = useState(undefined);
useEffect(() => {
function handleSetContent() {
const mContent = editorContent.type === 'q' ? editorContent.question.name : editorContent.option.desc;
setContent(mContent);
}
if (editor && editorContent) handleSetContent();
return () => {
if (editor) {
editor.destroy()
}
};
}, [dispatch, editor, editorContent]);
//** cleaned remaining code here//
return (
<div className="flex flex-1 flex-auto flex-col w-full h-full relative">
<CKEditor
editor={Editor}
config={editorConfiguration}
data={content}
onReady={editor => {
// You can store the "editor" and use when it is needed.
setEditor(editor);
}}
onChange={(event, editor) => {
const data = editor.getData();
setContent(data);
setEdited(true);
//console.log({ event, editor, data });
}}
onBlur={(event, editor) => {
//console.log('Blur.', editor);
}}
onFocus={(event, editor) => {
//console.log('Focus.', editor);
}}
/>
</div>
);
}
export default EditorPage;