Add an `editor` prop to the `Editor` react component.

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

Feature

What’s the expected behavior?

Currently, you can only get the editor controller instance by using refs. I think being able to instantiate your Editor controller above your component in the tree, and pass it as a prop to the editor would improve the ergonomics a bit when you need to interact with your editor outside of plugins. This can also sort of be accomplished with renderEditor, but at the expense of a bit of clarity.

Example:

function App() {
  const editor = new SlateEditor({plugins})
 
  return (
    <Editor
         editor={editor} // could be `controller` maybe?
    />
  )
}

If this were implemented, we could remove ref support and cleanup the editor component code a bit. You could still technically do the same thing, you’d just have grab the editor from the props of your ref vs acting on your ref directly.

Thoughts?

[brendancarney]

I’ve been thinking about this more and doing some experimenting in our code base. I do think we should work away from the ref approach for a couple reasons:

• Function components can’t have refs, and while react will support classes for a long time, it’s clear the future is all components being functions, and there are at least a few bugs that I know could be solved cleanly with hooks in the editor component.
• It’s not very ergonomic. I think we can come up with a better way that will be less confusing for new users.

I’m not sure if this is best, but here’s what I’m thinking so far:

Basic Usage

import { useSlate, Editor } from "slate-react"

function App() {
  const editor = useSlate({ plugins: [], ...otherOptions}) 

  return <Editor editor={editor} />
}

This way, editor always exists vs in the ref approach where Editor has to render first.

[brendancarney]

A few thoughts in response:

View-layer-specific props I think there are two options here. One is that these are defined in the hook, and the hook also gives you a component:

const [Editor, controller] = useSlate({ plugins, spellCheck: false})

The other is that anything that gets passed directly to the DOM node is passed to the component. I think it should behave this way either way, so it makes sense to support it.

Value Yes, I think you’d pass value to the hook also. For default value, we could still support that with state inside the hook.

I’d like to introduce a useEditor() hook later for accessing the editor

I do exactly this in our application. I love it. I’d recommend useSlate as the main hook.

---

I’m down to put some time into working out a proof of concept whether we go this way or not. The biggest thing for me is getting ConvertKit’s editors up to date with the latest versions first, so it might be a little bit before I get started.