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"
/>
)
}
import REJS from './components/React Editor JS/rejs'
function App() {
return (
<div className="App">
Hello
<div>
Start
<REJS />
End
</div>
</div>
);
}
export default App;
Environment
Code
Editor Component
App component
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: