Add multiple Editors example (#6031)

examples/with-slate/CustomKeygenEditor/index.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import Plain from 'slate-plain-serializer'
+import { KeyUtils } from 'slate'
+import { Editor } from 'slate-react'
+
+class CustomKeygenEditor extends React.Component {
+  constructor (props) {
+    super(props)
+    let key = 0
+    const keygen = () => {
+      key += 1
+      return props.uniqueId + key // custom keys
+    }
+    KeyUtils.setGenerator(keygen)
+    this.initialValue = Plain.deserialize(props.content)
+  }
+  render () {
+    return <Editor placeholder='Enter some plain text...' defaultValue={this.initialValue} style={this.props.style} />
+  }
+}
+
+export default CustomKeygenEditor

examples/with-slate/pages/index.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import Link from 'next/link'
 import Plain from 'slate-plain-serializer'
 import { Editor } from 'slate-react'
 import { KeyUtils } from 'slate'
@@ -21,11 +22,16 @@ class Index extends React.Component {
 
   render () {
     return (
-      <Editor
-        placeholder='Enter some plain text...'
-        value={this.state.value}
-        onChange={this.onChange}
-      />
+      <React.Fragment>
+        <Link href='/multiple'>
+          <a>Go to multiple</a>
+        </Link>
+        <Editor
+          placeholder='Enter some plain text...'
+          value={this.state.value}
+          onChange={this.onChange}
+        />
+      </React.Fragment>
     )
   }
 

examples/with-slate/pages/multiple.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import Link from 'next/link'
+import CustomKeygenEditor from './CustomKeygenEditor'
+
+const content = {
+  'first-editor': 'This example shows how to have multiple instances of the editor.',
+  'second-editor': 'Without a custom key generator, you could not focus here.'
+}
+
+class MultipleEditors extends React.Component {
+  render () {
+    return (
+      <React.Fragment>
+        <Link href='/'>
+          <a>Go to Home</a>
+        </Link>
+        {Object.keys(content).map((key, idx) => (
+          <CustomKeygenEditor key={idx} uniqueId={key} content={content[key]} style={{ margin: 20 }} />
+        ))}
+      </React.Fragment>
+    )
+  }
+}
+
+export default MultipleEditors