CKEditor 5 being slow w/large volumes of data
eboblin opened this issue · 3 comments
When i paste 10-15 pages of word document into CKEditor react component, it becomes slow with any operations (insert new content, delete, etc). It can be noticed even on react demo page of ckeditor. Things are ok on non-react ckeditor. Any suggestions on what causes this and how this can be fixed? react component 6.0.1
Here's my component code just in case (i think it does not matter as react ckeditor demo behaves the same way)
`
import { observer } from 'mobx-react-lite';
import { useRef, useEffect } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from 'ckeditor5-custom-build/build/ckeditor';
const CKEditorComponent = observer((props) => {
const editorRef = useRef();
const defaultPlaceholders = {
placeholders: {
name: 'Имя',
email: 'Мейл',
phone: 'Телефон'
},
}
const handleSaveEvent = () => {
if (editorRef.current) {
const data = editorRef.current.getData();
console.log(data);
props?.onChange?.({ name: 'ckEditorSaveClicked', payload: data, stateChange: { data } })
}
};
const readyHandler = (editor) => {
editorRef.current = editor;
editor.on('saveEvent', handleSaveEvent);
editor.editing.view.change((writer) => {
writer.setStyle(
"height",
props.height + "px",
editor.editing.view.document.getRoot()
);
});
}
useEffect(() => {
const editor = editorRef.current;
return () => {
if (editor) {
editor.model.document.off('saveEvent', handleSaveEvent);
}
};
}, []);
return (
<CKEditor
editor={ClassicEditor}
data={props.data || ''}
onReady={readyHandler}
config={props.placeholders || defaultPlaceholders}
/>
)
})
export default CKEditorComponent
`
Hey, thanks for reaching out. Before jumping to suggestions, I have a couple of follow-up questions:
- Which demo are you referring to?
- What's the content? Is it plan text or a more complex document?
What could influence performance:
- Saving mechanism, I'm a bit unsure looking at your component when do you save and if it's debounced, but
getData
can take some time with the large/complex documents. Check the autosave feature. - Watchdog, while an important component, could affect performance. You could try to disable it with the newest version (meanwhile, we are working on Watchdog's performance improvements)