slate: Modification to onChange cannot get latest state

Do you want to request a feature or report a bug?

Bug 🐛

What’s the current behavior?

If I have a state which should update for each onChange() call on the editor, the onChange() only has access to the initial state. It also somehow reverts to the barebones editor state during this behavior.

Cannot find a descendant at path [0] in node: 
{
  children: [],
  operations: [],
  selection: null,
  marks: null,
  history: {
    undos: [],
    redos: []
  }
}

GIF of issue in action

Apr-17-2020 15-35-34

Sandbox of issue reproduction

https://codesandbox.io/s/slate-repo-irmerk-17-04-2020-mebkd

Information about your OS, browser, Slate version, etc.

Slate: 0.57.1 Browser: Chrome OS: Mac

What’s the expected behavior?

Slate should handle updating of the editor without losing its current value, selection, etc when one of the custom high order functions wrapping the creation of the editor changes

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 1
Comments: 17 (5 by maintainers)

Most upvoted comments

I am seeing this same behavior whenever my app hot module reloads. In my case the steps to reproduce are:

Begin typing in an editor.
Make a change in code and save to trigger hot module reload.
After a successful bundle rebuild, the page attempts to refresh and the following error is thrown: Cannot find a descendant at path [0] in node: {"children":[],"operations":[],"selection":null,"marks":null}.

This is confusing since I initialize the editor with a default value of [{ type: 'paragraph', children: [{ text: '' }] }], so where is the editor getting the value reported in the error message?

+11

jonathaneckman on Sep 7, 2020

The resolution with issues relating to CRA was to utilize useRef instead of useMemo.

const editorRef = useRef() if (!editorRef.current) editorRef.current = withReact(createEditor()); const editor = editorRef.current;Ï

CloudDrivenSolutions on Sep 8, 2021

@mikestopcontinues You could try importing your module dynamically and disabling SSR

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello3'),
  { ssr: false }
)

martonlanga on Dec 16, 2020

How to fix it in CRA-driven project?

Dem0n3D on Jan 6, 2021