Not working with React.StrictMode

xahin96 commented 1 year ago

Environment

@editorjs/editorjs version: 2.26.5
react-editor-js version: 2.1.0
react version: 18.2.0
react-dom version: 18.2.0

Code

Editor Component

import { createReactEditorJS } from 'react-editor-js'
import { EDITOR_JS_TOOLS } from './tools'
import { useState, useEffect, useRef, useCallback } from 'react'

const ReactEditorJS = createReactEditorJS()

export default function REJS() {
  const initialData = {
    ...
  }

  const [called, setCalled] = useState(false)

  const editorCore = useRef(null)
  const reload = useRef(false)

  useEffect(() => {
    if (reload.current == false) {
      reload.current = true
    }
  }, [])

  const handleInitialize = useCallback((instance) => {
    console.log('ins=>', instance)
    editorCore.current = instance
  }, [])

  const handleSave = useCallback(async () => {
    const savedData = await editorCore.current.save()
    console.log('=>', savedData)
  }, [])

  return (
    <ReactEditorJS
      tools={EDITOR_JS_TOOLS}
      onInitialize={handleInitialize}
      onChange={handleSave}
      data={initialData}
      placeholder="Start writing or click + for more options"
    />
  )
}

App component

import REJS from './components/React Editor JS/rejs'

function App() {
  return (
    <div className="App">
      Hello
      <div>
        Start
        <REJS />
        End
      </div>
    </div>
  );
}

export default App;

Describe

I'm trying to use the default functionalities but while using strict mode, the editor is not loading on the DOM. With strict mode: Without strict mode: