`value` should be renamed to `initialValue`

[macrozone]

Problem

https://github.com/ianstormtaylor/slate/pull/4922 introduced a massive breaking change for consumers of slate, e.g. for https://github.com/react-page/react-page/issues/1188

Problem is that the meaning of value has changed, slate is unfortunatly no longer a controlled component (which was a far better design overall).

Solution

value needs to be renamed to initialValue to avoid confusion. As slate is still on a 0.x version, this should be done in a breaking change as https://github.com/ianstormtaylor/slate/pull/4922 was already breaking.

this makes a clear cut and opens up better apis to partially restore the old, more powerful api.

Alternatives

keeping value as it is is not a good idea. This will just spread further confusion. When its named value it should be controlled, uncontrolled should not be named value.

Context

You can restore the old behavior by setting editor.children, but it not always rerenders properly.

Update:

I managed to update ReactPage to use editor.children and could remove some workarounds which were probably there because of problems related to syncing our state to the state of slate. Its still a bit ugly, but its a bit simpler then before.

We have similar challenges in ReactPage surrounding syncing the passed value to the editor state in a "controlled" manner, so i totally understand the struggles. I still think following "the principle of least surprise" would either demand that value is renamed to initialValue and/or (much better) value controlling the state like before.

[doei]

I'm new to Slate, and I'm guessing this is the reason why I can't get the onChange prop to work ?

I made a simple codebox example of what I'm trying to do.

Does this mean the deserialisation should always be done before rendering the editor ?

[macrozone]

I'm new to Slate, and I'm guessing this is the reason why I can't get the onChange prop to work ?

I made a simple codebox example of what I'm trying to do.

Does this mean the deserialisation should always be done before rendering the editor ?

kindof yes, its really sad that slate is now a uncontrolled component. That will lead to a lot of unexpected bugs.

In your codebox, this workaround works:

import { Slate, Editable, withReact, ReactEditor } from "slate-react";

// in your useEffect ...

    console.log("setting value", res);
        editor.children = res.result;
        ReactEditor.focus(editor);

[sws797]

I render two editors that share one value, and want to make changes in one editor while the other editor synchronizes the changes.

I tried

useEffect(() => {
  editor.children = value;
}, [editor, value]);

it will always be one letter slower in another editor.

I also tried to add a key={JSON.stringify(value)} to <Slate>, which effectively synchronizes the value of the two editors, and the cursor appears to have no errors. But I don't think it's reliable.

Is there no better way at present?😂

I found out someone else did it too, https://github.com/ianstormtaylor/slate/issues/4612#issuecomment-1348310378