Can't update editor value with api

[sanj44]

when updating value of Editor with api returned data or load from local storage it doesn't update or retender to show that data in editor, was working fine with slate-react@0.65.2 but updating version greater > 0.70.0 with plate 8 introduced this issue.

[zbeyens]

Thanks for the issue. Can you provide a sandbox?

[deyayan]

@zbeyens I am experiencing the same problem. Just curious, is it because of this change: ianstormtaylor/slate#4540

If so what can we do to achieve the requirement?

[mallison]

I've created a minimal reproduction https://codesandbox.io/s/affectionate-worker-i5nyb?file=/src/App.js

Clicking the button updates the value state but the update is not reflected in Plate.

[zbeyens]

From @dylans on Slack:

Yes, treating Slate as a controlled component didn't actually work as expected, so it was made more explicit that it's an uncontrolled components. There's a documentation update for Slate and a pile of issues people opened that I commented on. See ianstormtaylor/slate#4540 and friends

[afrou04]

https://docs.slatejs.org/walkthroughs/06-saving-to-a-database

I had the same problem. I solved it by using resetNodes.

  /**
  * resetNodes resets the value of the editor.
  * It should be noted that passing the `at` parameter may cause a "Cannot resolve a DOM point from Slate point" error.
  */
  resetNodes<T extends Node>(
    editor: Editor,
    options: {
      nodes?: Node | Node[],
      at?: Location
    } = {}
  ): void {
    const children = [...editor.children]

    children.forEach((node) => editor.apply({ type: 'remove_node', path: [0], node }))

    if (options.nodes) {
      const nodes = Node.isNode(options.nodes) ? [options.nodes] : options.nodes

      nodes.forEach((node, i) => editor.apply({ type: 'insert_node', path: [i], node: node }))
    }

    const point = options.at && Point.isPoint(options.at)
      ? options.at
      : Editor.end(editor, [])

    if (point) {
      Transforms.select(editor, point)
    }
  }

If you want to completely initialize the editor, you can do the following.

import { getPlateActions } from '@udecode/plate'

const { resetEditor, value } = getPlateActions(editorId)

value(initialValue)
resetEditor()

[linonetwo]

And maybe rename it to make it clear:

const { resetEditor, value: updateEditorValue } = getPlateActions(editorID);

Also, attache my example of loading new value if store changed by other client:

  const editorID = props.currentTiddler;
  const { resetEditor, value: updateEditorValue } = getPlateActions(editorID);
  // Add the initial value when setting up our state.
  const [currentAst, setCurrentAst] = useState<Array<TNode<AnyObject>>>(deserialize(props.tiddlerText));
  /** current text is only used for compare, we don't want it trigger rerender, so use ref to store it */
  const currentTextRef = useRef<string>(props.tiddlerText);
  // update current value from props
  useEffect(() => {
    // there will be cases that triple return replaced with double return (trim),  cause here rerender, but I think it is ok, not so frequent
    if (currentTextRef.current !== props.tiddlerText) {
      const newValue = deserialize(props.tiddlerText);
      setCurrentAst(newValue);
      updateEditorValue(newValue);
      resetEditor();
    }
  }, [props.tiddlerText, currentTextRef, updateEditorValue, resetEditor]);
  const onChange = useDebouncedCallback(
    (newValue: Array<TNode<AnyObject>>) => {
      setCurrentAst(newValue);
      const newText = serialize(newValue);
      props.saver.onSave(newText);
      currentTextRef.current = newText;
    },
    [props.saver.onSave],
    props.saver.interval,
  );