Slate-react is an uncontrolled component in v0.67+

[antsago]

Description
If you initiate a value change from outside of slate by calling setValue (e.g. from within a setTimeout), the value does not change, making the slate component behave as if it was an uncontrolled component. I've reproed it with slate-react 0.67.0 and later, but found it working with slate-react 0.66.7 and prior.

Recording

Enregistrement.de.l.ecran.2022-01-04.a.10.31.27.PM.mov

Sandbox
https://codesandbox.io/s/slate-reproductions-forked-4vb05

Steps
To reproduce the behavior:

1. Refresh the page (from the sandbox)
2. Wait for two seconds
3. See the text fail to change but the corresponding message appear in the console

Expectation
The value the editor displays should change to match what the value passed to it.

Environment

• Slate Version: 0.67.0-0.72.3
• Operating System: macOS
• Browser: Chrome

Context
The idea is to change the editor text from external (non-slate) events; the use of setTimeout is just a simple way of imitating that, not the actual use-case. I've also managed to get around it by wrapping Slate and Editor (and the createEditor useMemo) within another component and forcing it to re-render by giving it a key and changing it every time.

[dylans]

See the discussion in #4540 for why this was changed.

[antsago]

@dylans thanks for pointing it out! I'll close this issue now and sorry I couldn't find the previous issues (of which there are quite a lot!). From what I read, rather than setValue, we should use something like:

  const externalSetValue = useCallback(
    (newValue) => {
      editor.children = newValue
      setValue(newValue)
    },
    [editor]
  )

Should I send a pr updating the documentation with that snippet?

[dylans]

No worries. A PR updating the docs would be amazing, thanks!