Api for setting value from an external change

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

Feature request

What’s the current behavior?

There doesn’t appear to be a way to set the editor value externally e.g. from a prop change or other event that would warrant updating the value from outside the editor.

–>

Slate: 0.XX.X Browser: Chrome / Safari / Firefox / Edge OS: Mac / Windows / Linux / iOS / Android

What’s the expected behavior?

We should have a way to set the value externally.

One proposal that has been made is to be able to configure the editor as a controlled component, but there are likely tradeoffs with this. This issue is not intended to champion that particular proposal but rather to discuss what the “right” api might be. e.g. there could be options to call a method on the editor or something more imperative.

NOTE: The idea has been discussed in #3200 of possibly using changes to defaultValue as a way to set the value externally, but the current behavior seems consistent with other uncontrolled components in React.

[ianstormtaylor]

Here’s what the <Slate> component would look like as a controlled component, for those who are interested: https://github.com/ianstormtaylor/slate/pull/3216

[timothyarmes]

Yes. I asked Ian on Slack why he chose to go with an uncontrolled component. He said:

I changed it to being an uncontrolled because to me it seemed like the architecture was asking for it for a few reasons…

(a) We’ve always had an onChange handler. And whenever it was called, the editor.value property was already the new value, so re-sending it as a prop was only a little trick to get React to re-render, but the editor itself already had the new value. So on every render pass we’d do editor.value = props.value just to be sure it was the latest

(b) When moving the selection to editor.selection (and paving the way for other non-core tracked properties), we no longer have a single value prop that can be passed in. You’d need to pass in children and selection. And if you use any plugins that extend the editor with other tracked properties, you’d need to pass those in as well

I’m down to try to work around those issues though, if someone wants to take a crack at it We could potentially not special case any prop on <Slate> such that it passed children={children} selection={selection} through just fine But if you also gave it annotations={annotations} it would attach that to the editor too And it could be the one to set the props on the editor instance instead, so that <Editable> didn’t have to do it It means that you’d need to keep a state for selections as well in your top-level component: const [children, setChildren] = useState([]) const [selection, setSelection] = useState(null)

<Slate 
  children={children} 
  selection={selection}
  onChange={editor => {
    setChildren(editor.children)
    setSelection(editor.selection)
  }}

… (And for any other potential plugin props, but that’s an edge case anyways)