Fix with-slate example (#8566)

examples/with-slate/CustomKeygenEditor/index.js

@@ -1,28 +0,0 @@
-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/components/NextEditor.js

@@ -0,0 +1,19 @@
+import React, { useState } from 'react'
+import Plain from 'slate-plain-serializer'
+import { Editor } from 'slate-react'
+import useCustomKeygen from '../lib/useCustomKeygen'
+
+const NextEditor = ({ slateKey, defaultValue, ...props }) => {
+  useCustomKeygen(slateKey)
+  const [state, setState] = useState(() => Plain.deserialize(defaultValue))
+
+  return (
+    <Editor
+      placeholder='Enter some plain text...'
+      value={state}
+      onChange={({ value }) => setState(value)}
+    />
+  )
+}
+
+export default NextEditor

examples/with-slate/lib/useCustomKeygen.js

@@ -0,0 +1,14 @@
+import { useRef } from 'react'
+import { KeyUtils } from 'slate'
+
+const useCustomKeygen = uniqueKey => {
+  const ref = useRef(null)
+  if (!ref.current || ref.current !== uniqueKey) {
+    let n = 0
+    const keygen = () => `${uniqueKey}${n++}`
+    KeyUtils.setGenerator(keygen)
+    ref.current = uniqueKey
+  }
+}
+
+export default useCustomKeygen

examples/with-slate/pages/index.js

@@ -1,43 +1,20 @@
 import React from 'react'
 import Link from 'next/link'
-import Plain from 'slate-plain-serializer'
-import { Editor } from 'slate-react'
-import { KeyUtils } from 'slate'
+import NextEditor from '../components/NextEditor'
 
-class Index extends React.Component {
-  constructor (props) {
-    super(props)
-
-    // In order to allow ssr we need to reset the key
-    // generating function to its initial state.
-    KeyUtils.resetGenerator()
-
-    // Deserialize the initial editor value.
-    this.state = {
-      value: Plain.deserialize(
-        'This is editable plain text, just like a <textarea>!'
-      )
-    }
-  }
-
-  render () {
-    return (
-      <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>
-    )
-  }
-
-  onChange = ({ value }) => {
-    this.setState({ value })
-  }
+const IndexPage = props => {
+  return (
+    <React.Fragment>
+      <Link href='/multiple'>
+        <a>Go to multiple</a>
+      </Link>
+      <hr />
+      <NextEditor
+        slateKey='someUniqueKey'
+        defaultValue='This is editable plain text, just like a <textarea>!'
+      />
+    </React.Fragment>
+  )
 }
 
-export default Index
+export default IndexPage

examples/with-slate/pages/multiple.js

@@ -1,12 +1,6 @@
 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.'
-}
+import Editor from '../components/NextEditor'
 
 class MultipleEditors extends React.Component {
   render () {
@@ -15,14 +9,10 @@ class MultipleEditors extends React.Component {
         <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 }}
-          />
-        ))}
+        <hr />
+        <Editor slateKey='foo' defaultValue='Foo' />
+        <hr />
+        <Editor slateKey='bar' defaultValue='Bar' />
       </React.Fragment>
     )
   }