Editor loose focus || Storing content is not working

[ajayahara]

Look the below example for solution:-

import { useState, useRef, useMemo} from 'react';
import JoditEditor from 'jodit-react';
const JoditEditorJsx = ({placeholder}) => {
    const editor = useRef(null);
    const [content, setContent] = useState('');

    const config = useMemo(()=>{
        return {
            readonly: false,
            placeholder: placeholder||'Start typings...',
            height:'500px',
            theme:'dark'
        }
    },[placeholder])

    return (
       <>
        <JoditEditor
            ref={editor}
            value={content}
            config={config}
            tabIndex={1}
            onBlur={newContent => setContent(newContent)}
            onChange={(newContent) =>{setContent(newContent)}}
        />
        <div>
            <h2>Result from JoditEditor</h2>
            <div>
                {
                    content
                }
            </div>
        </div>
       </>
    );
}

export default JoditEditorJsx

[alyvofficial]

Thank u!