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 />);