instanceRef.current is undefined

Environment

• @editorjs/editorjs version: ^2.23.2
• react-editor-js version: ^2.0.6

Describe

I’m trying to get the data when hitting save. But I get this error: Unhandled Rejection (TypeError): Cannot read properties of undefined (reading ‘save’)

I followed this example and this other one (both I found in other issues), but nothing seems to work.

My code:

import { createReactEditorJS } from 'react-editor-js'
import Image from '@editorjs/image'

const Editor = createReactEditorJS()

const instanceRef = useRef(null);

async function handleSave() {
  const savedData = await instanceRef.current.save();
  console.log("savedData", savedData);
}

<Button color='primary' className='text-nowrap px-1 btn-sm' onClick={handleSave} outline>

<Editor
  placeholder="Enunciado da alternativa"
  tools={{ image: Image }}
  instanceRef={instance => (instanceRef.current = instance)}
/>

When I press the button:

[codigoisaac]

@quatre29 @AlbinoGeek I just switched to TinyMCE (best decision ever). Thanks, guys.

[codigoisaac]

@AlbinoGeek I see, and you have good points, but I tried some editors (draftjs, quill, editorjs), and TinyMCE was and it’s being the best experience. I needed to implement image upload and image resize, and it simply was so painful to find information and to implement it with others, and none of them has image resize, except TinyMCE and Draftjs-plugins - but Draftjs-plugins has a documentation that doesn’t work and Draftjs is being discontinued by Facebook…

With TinyMCE things just worked and we could move on to actually building our software.