How to Put Multiple Editors on the Same Page

To put multiple editors on the same page, you need to have a separate value for each. You also cannot initialize the editors with the same initial value.

So this won’t work:

  const value = Value.fromJson(initalValue)

  const App = () => (
    <div>
      <Editor value={value}/>
      <Editor value={value}/>
    </div>
  )

The reason for this is that when calling Value.fromJSON, Slate builds the value with unique keys. If these keys are shared across multiple editors, Slate won’t know which node is the correct one when you’re editing. See this CodeSandbox for a working example:

Created by Brendan Carney