Improvement: Omit initialValue for pre-initialized editor instances

[mkoskim]

Problem

SlateJS forces initialValue for editors, which have been initialized already, e.g.

...
const editor = withReact(createEditor())
editor.children = buffer
...

Omitting unnecessary initial value gives error:

...
return <Slate editor={editor}>...</Slate>
...

Error: [Slate] initialValue is invalid! Expected a list of elements but got: undefined

Solution

In case initialValue is omitted (undefined), use editor.children directly. If it contains valid value (list of elements), go forward.

Workaround

The workaround is to give dummy initial value:

<Slate editor={editor} initialValue={editor.children}>

Context

I'm working with text editor: https://github.com/mkoskim/mawejs/tree/master

What I need, is programmatically attach buffers and onChange callbacks to editor instances, and then render them in a loop - or that is the current plan. The reason is that I have pressure to add more editable buffers, and thus I'd like to bind the editors to the buffers when loading them. Thus I'd like to omit the initialValue properties when rendering editors, they already have the buffer they need to edit.

Furthermore, I need editor instances also for programmatically modify buffers, e.g. for drag-and-drop. Using editor instances to modify their corresponding buffers is almost mandatory to trigger correct re-rendering.

[12joan]

The trouble with making initialValue optional is that we can't detect at runtime (and certainly not at the type level) whether the passed editor object has a meaningful children property. This is because the default value of editor.children as returned by createEditor is [], which in some cases may be a valid initial value (such as when the true initial value is loaded asynchronously using slate-yjs or similar).

We could entirely remove the error when initialValue is absent and make the property optional, only overriding editor.children if it's present, but then the editor would have an empty initial value and the developer would be unwarned if they forget to supply the initial value through either method.

[mkoskim]

Fair enough. It just feel bit strange, that you need to pass obsolete (ever-changing) property to React component. I guess it is not possible to change the createEditor() default value to undefined?

[12joan]

Changing createEditor wouldn't be a good solution, since that would be a breaking change (not necessarily a bad thing by itself) and it would also require changing the type of editor.children to be Descendant[] | undefined, which is a much larger change and one that would cause a lot of problems.

I suppose one solution would be to make initialValue optional, always use initialValue if present, and to show an error message if initialValue is undefined and editor.children is [] that reads thusly:

editor.children is empty and no initialValue was provided. If this is intentional, pass initialValue={[]} to the Slate component.

[mkoskim]

Yeah... Yes, I wouldn't change the createEditor behaviour, it is too deep down, and the suggestion concerns only React Slate component and its initialValue property.

IMO the cleanest solution would make it optional. Thinking about it, if the developer sees empty editor instance, I could think that s/he starts wondering where s/he has initialized the editor, and then either add the children "manually", or use initialValue property.

Your another solution sounds good, too, that is, it gives warning/error if editor children are still in default state. For me, it sounds bit complex, as in all the other components you are using, you have to give the data you want to process with the component somehow, one way or another.