craft.js

craft.js copied to clipboard

The drag and drop stopped working for me when I upgraded to React v18.x

Works fine with v17.x

@prevwong

Interestingly I seem to be having the opposite problem. I can't disable the drag and drop in React 18 🤔

After upgrading to React 18 the enabled={false} prop on the Editor no longer works for me with "@craftjs/core": "0.2.0-beta.4",

Changing absolutely nothing but these 3 lines of code is the difference between editing being disabled correctly, and not being disabled at all:

With react18 and react-dom@18 installed, if I render my app like this (in the react@17 mode) or if I downgrade to React@17 and do this. It works fine and editing is disabled as expected.

ReactDOM.render(<App />, document.getElementById('root'))

However if I change to the React@18 method of rendering and "activate" react 18, it breaks:

ReactDOM.render(<App />, document.getElementById('root'))

const container = document.getElementById('root') const root = createRoot(container) root.render(<App />)

My simple Editor looks like:

<Editor resolver={elementsResolver} enabled={false} // This breaks when upgrading to react 18.

<FrameContainer id="portalRoot">
  <Frame data={nodeTree} />
</FrameContainer>

```

I also tried implementing the hacky workaround that fixed this same issue in version 0.2.0-beta.3 (before the latest beta version which fixed this for React 17):

const PortalFrame: React.FC<IProps> = (props) => {
  const { actions } = useEditor()

  useEffect(() => {
    setTimeout(() => {
      actions.setOptions((options) => (options.enabled = true))
      actions.setOptions((options) => (options.enabled = false))
    })
  }, [])

  return <Frame {...props} />
}

But this workaround no longer fixes it in React 18 :(

This is now blocking us from upgrading to React 18, with no way to disable editing when we want to render the editorState.

I can confirm that drag & drop doesn't work with react@18. When you switch to [email protected], it works fine.

Nowadays when you create a new React app (whether using create-react-app or nextjs) it's been bootstraped with react@18. So, it was really confusing to me trying to figure out what am I doing wrong - mainly since the example app works. That eventually helped me to notice the different versions of React.

Hey folks, just tried it out with React v18. It seems like dnd doesn't work when StrictMode is enabled https://codesandbox.io/s/craftjs-react-18-5gmiqe?file=/src/index.js (when StrictMode is disabled, everything works as usual).

I will try to take a look at why it's not working in strict mode.

Hi @prevwong, when using react@18 something is wrong with rendering the config components: Input cursor are jumping to the end of input fields if using a value from node props.

 const {
    actions: { setProp },
    props,
  } = useNode((node) => ({
    props: node.data.props,
  }));

...
<input
  value={props.text}
  onChange={(e) => setProp((props) => (props.text = e.target.value))}
/>

Example repository: https://github.com/Jank1310/craftjs-react18-input-bug Just select a button and try to insert some text at the beginning of the input field

Hi @prevwong, I confirm the cursor jumping issue on react@18, I have the same issue with @Jank1310

Alright folks, released the fix in 0.2.0-beta.8! Craft should work with React 18 now 🤞