Normalization for initial value

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

feature

What’s the current behavior?

1. Value is set on editor
2. Only when the user types something into the editor, the editor.normalizeNode is called for that specific node (and it’s parent nodes)
3. Other nodes that have not been touched stay invalid until e.g. the text of that node is edited

Slate: 0.57.1 Browser: Chrome / Safari / Firefox / Edge OS: Mac / Windows / Linux / iOS / Android

What’s the expected behavior?

There are multiple solutions. I currently have 2 in mind:

1. All nodes are normalized once after the value has been set initially
2. A callback is exposed (e.g. onValueUpdated) where we could add some logic to run Editor.normalize(editor) everytime the value has been updated from outside (e.g. coming from a DB)

[davidruisinger]

After running into other issues with the above workarounds I finally ended up with this:

1. I have my editor component that receives the value as prop from outside
2. I store the “internal” slate value in a react state within my editor component
3. I use useEffect hook to update the internal slate value with the incoming external value

Now here comes the magic part. Instead of just setting the external value on the internal state I use this:

React.useEffect(() => {
    // Slate throws an error if the value on the initial render is invalid
    // so we directly set the value on the editor in order
    // to be able to trigger normalization on the initial value before rendering
    editor.children = externalValue
    Editor.normalize(editor, { force: true })
    // We set the internal value so that the rendering can take over from here
    setInternalSlateValue(editor.children)
}, [externalValue])

[janpaepke]

The solution by @davidruisinger worked great, as I also was running into troubles when building a controlled slate component - when setting the external value to editor.children it skips normalisation.

However I improved it a little, because in his solution the component would always render twice (once with an initial value, and once, when the internal state is set after the useEffect runs).

You can avoid this by doing it in a useMemo.

const slateValue = useMemo(() => {
	// Slate throws an error if the value on the initial render is invalid
	// so we directly set the value on the editor in order
	// to be able to trigger normalization on the initial value before rendering
	editor.children = externalValue;
	Editor.normalize(editor, { force: true });
	// We return the normalized internal value so that the rendering can take over from here
	return editor.children;
}, [editor, externalValue]);

Then I use this on my Slate Component.

<Slate
	editor={editor}
	value={slateValue} // now normalized
	onChange={onChange} // set / update external value
>

hope this helps someone else.