From 68ceef68e1177dc0d26177aafeca6e11370b66d9 Mon Sep 17 00:00:00 2001
From: astenmies <33988299+astenmies@users.noreply.github.com>
Date: Fri, 11 Jan 2019 13:48:46 +0100
Subject: [PATCH] Add multiple Editors example (#6031)
---
.../with-slate/CustomKeygenEditor/index.js | 22 ++++++++++++++++
examples/with-slate/pages/index.js | 16 ++++++++----
examples/with-slate/pages/multiple.js | 25 +++++++++++++++++++
3 files changed, 58 insertions(+), 5 deletions(-)
create mode 100644 examples/with-slate/CustomKeygenEditor/index.js
create mode 100644 examples/with-slate/pages/multiple.js
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