ckeditor/ckeditor5-react

CKEditor 5 being slow w/large volumes of data

eboblin opened this issue · 3 comments

eboblin commented

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

`

Witoso commented

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: