TypeError: Node element must be in editor

[lintonpinto]

Hi guys, I'm getting this TypeError when I delete images using the backspace / delete key.

Steps to replicate:

• Insert an image
• Click on the inserted image in the editor and press the Delete or Backspace button

I'm using React with Next.js

Would really appreciate any suggestions or help. Thanks

Unhandled Runtime Error
TypeError: Node element must be in editor

Call Stack
Object.t.error
.next\static\chunks\vendors-node_modules_jodit-react_build_jodit-react_js.js (10:52091)
e.select
/_next/static/chunks/vendors-node_modules_jodit-react_build_jodit-react_js.js (29:247562)
t.onDelete
.next\static\chunks\vendors-node_modules_jodit-react_build_jodit-react_js.js (10:507341)
HTMLDivElement.<anonymous>
/_next/static/chunks/vendors-node_modules_jodit-react_build_jodit-react_js.js (29:506456)
HTMLDivElement.v
.next\static\chunks\vendors-node_modules_jodit-react_build_jodit-react_js.js (10:47219)

[andremanuel]

I'm having the same issue, does someone find any solution for this? Thanks

[thomasFjorstad]

I fixed it with ` onBlur={(newContent) => setEditorText(newContent)}``

[MrArun005]

I fixed it with ` onBlur={(newContent) => setEditorText(newContent)}``

Hey, i did the same but it is not working for me, can you please let me know what is newContent and setEditorText here.

[thomasFjorstad]

I fixed it with ` onBlur={(newContent) => setEditorText(newContent)}``

Hey, i did the same but it is not working for me, can you please let me know what is newContent and setEditorText here.

const [editorText, setEditorText] = useState<string>("");
"newContent"  = What we got from JoditEditors onBlur func.

[Mitesh2001]

I resolved this issue by using a ref for the JoditEditor instance. Instead of relying solely on the component's internal state, I created a useRef hook to directly access the editor instance. This gives React better control over Jodit’s state, preventing issues when interacting with media elements like deleting media files.

const editor = useRef<Jodit | null>(null);

<JoditEditor
  ref={editor}
  value={content}
  config={config}
  onBlur={(newContent) => setJournalText(newContent)}
/>