react-editor-js
react-editor-js copied to clipboard
Not working with React.StrictMode
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:
Currently facing the same issue. Simple new NextJS installation.
May I ask how to solve this problem
I see, just remove<React. StrictMode>
Thanks! I was wondering what i did wrong. Not sure what's causing this, even i had to remove <React. StrictMode> to get it to work.
Any way to do this while not removing strict mode?
Currently facing the same issue. Simple new NextJS installation.
@remoblaser To shut down React Strict Mode for now: https://nextjs.org/docs/pages/api-reference/next-config-js/reactStrictMode
any solution other than removing strict mode?