Update with-slate example (#16959)

## 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:

- ianstormtaylor/slate#870

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"
 }

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