From 5539e969e9c2dcc8b8b177e0323a17ad94204f92 Mon Sep 17 00:00:00 2001
From: vagusx <vagusxl@gmail.com>
Date: Tue, 25 Jul 2023 14:14:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=20h1=20=E5=88=B0=20h?=
 =?UTF-8?q?6=20=E7=9A=84=E5=89=AA=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/editor/deserialize.ts | 18 ++++++++++++++++++
 src/pages/sandbox/index.tsx          |  5 +++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/editor/deserialize.ts b/src/components/editor/deserialize.ts
index cc01cf47..4f8edeab 100644
--- a/src/components/editor/deserialize.ts
+++ b/src/components/editor/deserialize.ts
@@ -1,5 +1,16 @@
 import { jsx } from 'slate-hyperscript';
 
+function nodeNameToHeadingJsx(nodeName: string, children: any[]) {
+  return {
+    H1: jsx('element', { type: 'heading-one' }, children),
+    H2: jsx('element', { type: 'heading-two' }, children),
+    H3: jsx('element', { type: 'heading-three' }, children),
+    H4: jsx('element', { type: 'heading-four' }, children),
+    H5: jsx('element', { type: 'heading-five' }, children),
+    H6: jsx('element', { type: 'heading-six' }, children),
+  }[nodeName];
+}
+
 type SlateJSXElement = ReturnType<typeof jsx>;
 const deserialize = (el: Node): SlateJSXElement | string | null => {
   // 递归到 children 时直接返回 textContent string 格式
@@ -46,6 +57,13 @@ const deserialize = (el: Node): SlateJSXElement | string | null => {
         },
         children,
       );
+    case 'H1':
+    case 'H2':
+    case 'H3':
+    case 'H4':
+    case 'H5':
+    case 'H6':
+      return nodeNameToHeadingJsx(htmlElement.nodeName, children);
     default:
       return jsx('element', { type: 'paragraph' }, [ htmlElement.textContent || '' ]);
   }
diff --git a/src/pages/sandbox/index.tsx b/src/pages/sandbox/index.tsx
index b3d024de..2f621cd3 100644
--- a/src/pages/sandbox/index.tsx
+++ b/src/pages/sandbox/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import 'antd/dist/antd.css';
 import './index.module.less';
 
@@ -8,4 +8,5 @@ import App from './App';
 const importAll = (r: any) => r.keys().forEach(r);
 importAll(require.context('@/assets/icons', false, /\.png$/));
 
-ReactDOM.render(<App />, document.getElementById('ReactApp'));
+const root = createRoot(document.getElementById('ReactApp'));
+root.render(<App />);