diff --git a/examples/with-slate/CustomKeygenEditor/index.js b/examples/with-slate/CustomKeygenEditor/index.js
new file mode 100644
index 00000000..3ac2aeb4
--- /dev/null
+++ b/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
+ }
+}
+
+export default CustomKeygenEditor
diff --git a/examples/with-slate/pages/index.js b/examples/with-slate/pages/index.js
index a117d174..1194f936 100644
--- a/examples/with-slate/pages/index.js
+++ b/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 (
-
+
+
+ Go to multiple
+
+
+
)
}
diff --git a/examples/with-slate/pages/multiple.js b/examples/with-slate/pages/multiple.js
new file mode 100644
index 00000000..1ef75155
--- /dev/null
+++ b/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 (
+
+
+ Go to Home
+
+ {Object.keys(content).map((key, idx) => (
+
+ ))}
+
+ )
+ }
+}
+
+export default MultipleEditors