Issue with multiple, successive instances

When creating multiple instances of the slate Editor, one after the other, the additional instances are non-editable. Instead, when you try to focus them, they focus the original instance instead. (I have tested this issue in Safari and Chrome)

I have created a fiddle that reproduces this issue: https://jsfiddle.net/rossfishkind/yhzgjj82/35/

To reproduce in the fiddle:

1. Tap the “Add Editor Instance” button to add the first instance.
2. Once the instance appears, type some text into the editor.
3. Now, tap the “Add Editor Instance” button again.
4. Try to focus the new instance or enter text.

You will notice that it doesn’t work. It keeps focusing the first instance of the editor instead of the one you are selecting.

For what it’s worth, within my actual code, if you were to refresh the page after having created the instances, you can edit them normally, the issue only occurs if creating them successively without a refresh or un-mounting and mounting the parent component.

Any help would be much appreciated 😃

Thank you!

[pizn]

Because you use the same initialValue for every instances, and the Editor instances will use the document key for selection target.

Now you have two way to fixed this question:

1. When you insert a new editor, you can change the document’s key value, like this:

const initialValue = () => Value.fromJSON({
  document: {
    key: `${+(new Date())}`,,
    nodes: [
      {
        kind: 'block',
        type: 'paragraph',
        nodes: [
          {
            kind: 'text',
            leaves: [{ text: '' }]
          }
        ]
      }
    ]
  }
})
...
increment = () => {
  	const editors = [...this.state.editors, { content: initialValue() }];
  	this.setState({
    	editors,
    });
  }

1. Use resetKeyGenerator and setKeyGenerator to change the default key.

[rossfishkind]

@oyeanuj I used resetKeyGenerator within componentDidMount in the parent component that wrapped my slate instances together, and I used setKeyGenerator on initialization of my app like so:

setKeyGenerator(() => rand());

where my rand() function returns a random alphanumeric string to associate with any slate instances. Hope that helps!