From 3d3938b793a0b54b6921afbc879a2d532356e4b7 Mon Sep 17 00:00:00 2001
From: Henrik Wenz <HaNdTriX@users.noreply.github.com>
Date: Tue, 16 Aug 2022 12:47:07 +0200
Subject: [PATCH] =?UTF-8?q?[Docs]=C2=A0Update=20with-slate=20example=20(#3?=
 =?UTF-8?q?9639)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Changelog

- Migrated `with-slate` example to typescript
- Updated dependencies to latest stable versions
- Added api route to demonstrate saving of `editorState`

## Documentation / Examples

- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
---
 examples/with-slate/package.json              | 13 +++--
 examples/with-slate/pages/api/editor-state.ts | 20 ++++++++
 examples/with-slate/pages/index.js            | 21 --------
 examples/with-slate/pages/index.tsx           | 51 +++++++++++++++++++
 examples/with-slate/tsconfig.json             | 20 ++++++++
 examples/with-slate/types/slate.d.ts          | 14 +++++
 6 files changed, 114 insertions(+), 25 deletions(-)
 create mode 100644 examples/with-slate/pages/api/editor-state.ts
 delete mode 100644 examples/with-slate/pages/index.js
 create mode 100644 examples/with-slate/pages/index.tsx
 create mode 100644 examples/with-slate/tsconfig.json
 create mode 100644 examples/with-slate/types/slate.d.ts

diff --git a/examples/with-slate/package.json b/examples/with-slate/package.json
index cef2d58f3442cbc..4c966383e9d0d34 100644
--- a/examples/with-slate/package.json
+++ b/examples/with-slate/package.json
@@ -7,10 +7,15 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "slate": "^0.76.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "slate": "^0.82.0",
     "slate-history": "0.66.0",
-    "slate-react": "^0.76.1"
+    "slate-react": "^0.82.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.7.5",
+    "@types/react": "18.0.17",
+    "typescript": "4.7.4"
   }
 }
diff --git a/examples/with-slate/pages/api/editor-state.ts b/examples/with-slate/pages/api/editor-state.ts
new file mode 100644
index 000000000000000..0539e503e5c2bb5
--- /dev/null
+++ b/examples/with-slate/pages/api/editor-state.ts
@@ -0,0 +1,20 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+
+export default async function handleEditorStateChange(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method !== 'POST') {
+    return res
+      .setHeader('Allow', ['POST'])
+      .status(405)
+      .end(`Method ${req.method} Not Allowed`)
+  }
+
+  const editorState = JSON.parse(req.body)
+  console.log('TODO: Save editorState on the server', editorState)
+
+  res.json({
+    status: 'ok',
+  })
+}
diff --git a/examples/with-slate/pages/index.js b/examples/with-slate/pages/index.js
deleted file mode 100644
index 444c47acf7efedd..000000000000000
--- a/examples/with-slate/pages/index.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useState } from 'react'
-import { createEditor } from 'slate'
-import { Slate, Editable, withReact } from 'slate-react'
-import { withHistory } from 'slate-history'
-
-export default function IndexPage() {
-  const [editor] = useState(() => withReact(withHistory(createEditor())), [])
-  const [value, setValue] = useState([
-    {
-      children: [
-        { text: 'This is editable plain text, just like a <textarea>!' },
-      ],
-    },
-  ])
-
-  return (
-    <Slate editor={editor} value={value} onChange={setValue}>
-      <Editable placeholder="Enter some plain text..." />
-    </Slate>
-  )
-}
diff --git a/examples/with-slate/pages/index.tsx b/examples/with-slate/pages/index.tsx
new file mode 100644
index 000000000000000..66ea863e1657ecb
--- /dev/null
+++ b/examples/with-slate/pages/index.tsx
@@ -0,0 +1,51 @@
+import { useState } from 'react'
+import { createEditor, Descendant } from 'slate'
+import { Slate, Editable, withReact } from 'slate-react'
+import { withHistory } from 'slate-history'
+import { InferGetServerSidePropsType } from 'next'
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      editorState: [
+        {
+          children: [
+            { text: 'This is editable plain text, just like a <textarea>!' },
+          ],
+        },
+      ],
+    },
+  }
+}
+
+async function saveEditorState(edtorState: Descendant[]) {
+  const response = await fetch('/api/editor-state', {
+    method: 'POST',
+    body: JSON.stringify(edtorState),
+  })
+  return response.json()
+}
+
+export default function IndexPage({
+  editorState,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  const [editor] = useState(() => withReact(withHistory(createEditor())))
+  return (
+    <Slate
+      editor={editor}
+      value={editorState}
+      onChange={async (value) => {
+        const isAstChange = editor.operations.some(
+          (op) => 'set_selection' !== op.type
+        )
+        if (isAstChange) {
+          // You might want to debounce the following call!
+          const responseData = await saveEditorState(value)
+          console.log('Send editor state to the server', responseData)
+        }
+      }}
+    >
+      <Editable placeholder="Enter some plain text..." />
+    </Slate>
+  )
+}
diff --git a/examples/with-slate/tsconfig.json b/examples/with-slate/tsconfig.json
new file mode 100644
index 000000000000000..50bcb22f653d779
--- /dev/null
+++ b/examples/with-slate/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/with-slate/types/slate.d.ts b/examples/with-slate/types/slate.d.ts
new file mode 100644
index 000000000000000..34200917be7b194
--- /dev/null
+++ b/examples/with-slate/types/slate.d.ts
@@ -0,0 +1,14 @@
+import { BaseEditor } from 'slate'
+import { ReactEditor } from 'slate-react'
+import { HistoryEditor } from 'slate-history'
+
+type CustomElement = { type?: 'paragraph'; children: CustomText[] }
+type CustomText = { text: string; bold?: true }
+
+declare module 'slate' {
+  interface CustomTypes {
+    Editor: BaseEditor & ReactEditor & HistoryEditor
+    Element: CustomElement
+    Text: CustomText
+  }
+}