react-editor-js icon indicating copy to clipboard operation
react-editor-js copied to clipboard

Not working with React.StrictMode

Open xahin96 opened this issue 1 year ago • 7 comments

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: image Without strict mode: image

xahin96 avatar Mar 05 '23 12:03 xahin96

Currently facing the same issue. Simple new NextJS installation.

remoblaser avatar Mar 08 '23 23:03 remoblaser

May I ask how to solve this problem

hellosch avatar Apr 12 '23 09:04 hellosch

I see, just remove<React. StrictMode>

hellosch avatar Apr 12 '23 09:04 hellosch

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.

gauravsaluja2006 avatar Jul 04 '23 13:07 gauravsaluja2006

Any way to do this while not removing strict mode?

matteobaldini avatar Jul 05 '23 22:07 matteobaldini

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

TechQuery avatar Aug 29 '23 19:08 TechQuery

any solution other than removing strict mode?

ZulluBalti avatar Jul 07 '24 08:07 ZulluBalti