From 4ccc65979a1ab8c0beb2fc54701796f10bc0b9f7 Mon Sep 17 00:00:00 2001
From: Henrik Wenz <HaNdTriX@users.noreply.github.com>
Date: Wed, 9 Sep 2020 20:00:09 +0200
Subject: [PATCH] Update with-slate example (#16959)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Changelog

- Updated slate.js to version 0.58.4
- Removed unused packages (immutable & slate-plain-serializer)
- Simplified example (we don’t need to demonstrate the multi editor case anymore, since this issue is now handled by slate internally)
- Remove deprecated `KeyUtils`
- Removed deprecated Components

## Related:

- https://github.com/ianstormtaylor/slate/issues/870
---
 examples/with-slate/components/NextEditor.js | 19 ------------
 examples/with-slate/lib/useCustomKeygen.js   | 14 ---------
 examples/with-slate/package.json             |  7 ++---
 examples/with-slate/pages/index.js           | 31 ++++++++++++--------
 examples/with-slate/pages/multiple.js        | 18 ------------
 5 files changed, 21 insertions(+), 68 deletions(-)
 delete mode 100644 examples/with-slate/components/NextEditor.js
 delete mode 100644 examples/with-slate/lib/useCustomKeygen.js
 delete mode 100644 examples/with-slate/pages/multiple.js

diff --git a/examples/with-slate/components/NextEditor.js b/examples/with-slate/components/NextEditor.js
deleted file mode 100644
index 8d51aee357fcab..00000000000000
--- a/examples/with-slate/components/NextEditor.js
+++ /dev/null
@@ -1,19 +0,0 @@
-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
diff --git a/examples/with-slate/lib/useCustomKeygen.js b/examples/with-slate/lib/useCustomKeygen.js
deleted file mode 100644
index e706ddbc01ee94..00000000000000
--- a/examples/with-slate/lib/useCustomKeygen.js
+++ /dev/null
@@ -1,14 +0,0 @@
-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
diff --git a/examples/with-slate/package.json b/examples/with-slate/package.json
index ca09f34d27cff2..a9493334f9dfd3 100644
--- a/examples/with-slate/package.json
+++ b/examples/with-slate/package.json
@@ -7,13 +7,12 @@
     "start": "next start"
   },
   "dependencies": {
-    "immutable": "^3.8.2",
     "next": "latest",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
-    "slate": "^0.37.0",
-    "slate-plain-serializer": "^0.5.27",
-    "slate-react": "^0.15.0"
+    "slate": "^0.58.4",
+    "slate-history": "0.58.4",
+    "slate-react": "^0.58.4"
   },
   "license": "MIT"
 }
diff --git a/examples/with-slate/pages/index.js b/examples/with-slate/pages/index.js
index ceb35a9538aa36..edebb65af8818a 100644
--- a/examples/with-slate/pages/index.js
+++ b/examples/with-slate/pages/index.js
@@ -1,19 +1,24 @@
-import Link from 'next/link'
-import NextEditor from '../components/NextEditor'
+import React, { useState, useMemo } from 'react'
+import { createEditor } from 'slate'
+import { Slate, Editable, withReact } from 'slate-react'
+import { withHistory } from 'slate-history'
 
-const IndexPage = (props) => {
+const IndexPage = () => {
+  const [value, setValue] = useState(initialValue)
+  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
   return (
-    <>
-      <Link href="/multiple">
-        <a>Go to multiple</a>
-      </Link>
-      <hr />
-      <NextEditor
-        slateKey="someUniqueKey"
-        defaultValue="This is editable plain text, just like a <textarea>!"
-      />
-    </>
+    <Slate editor={editor} value={value} onChange={(value) => setValue(value)}>
+      <Editable placeholder="Enter some plain text..." />
+    </Slate>
   )
 }
 
+const initialValue = [
+  {
+    children: [
+      { text: 'This is editable plain text, just like a <textarea>!' },
+    ],
+  },
+]
+
 export default IndexPage
diff --git a/examples/with-slate/pages/multiple.js b/examples/with-slate/pages/multiple.js
deleted file mode 100644
index c0e60de637d768..00000000000000
--- a/examples/with-slate/pages/multiple.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import Link from 'next/link'
-import Editor from '../components/NextEditor'
-
-const MultipleEditors = () => {
-  return (
-    <>
-      <Link href="/">
-        <a>Go to Home</a>
-      </Link>
-      <hr />
-      <Editor slateKey="foo" defaultValue="Foo" />
-      <hr />
-      <Editor slateKey="bar" defaultValue="Bar" />
-    </>
-  )
-}
-
-export default MultipleEditors