diff --git a/package.json b/package.json
index 4348bc122..247197080 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "@halo-dev/api-client": "^0.0.41",
     "@halo-dev/components": "workspace:*",
     "@halo-dev/console-shared": "workspace:*",
-    "@halo-dev/richtext-editor": "^0.0.0-alpha.8",
+    "@halo-dev/richtext-editor": "^0.0.0-alpha.11",
     "@tiptap/extension-character-count": "^2.0.0-beta.199",
     "@uppy/core": "^3.0.4",
     "@uppy/dashboard": "^3.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a1b0ff344..335f763fd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,7 +16,7 @@ importers:
       '@halo-dev/api-client': ^0.0.41
       '@halo-dev/components': workspace:*
       '@halo-dev/console-shared': workspace:*
-      '@halo-dev/richtext-editor': ^0.0.0-alpha.8
+      '@halo-dev/richtext-editor': ^0.0.0-alpha.11
       '@iconify-json/mdi': ^1.1.34
       '@iconify-json/vscode-icons': ^1.1.16
       '@rushstack/eslint-patch': ^1.2.0
@@ -111,7 +111,7 @@ importers:
       '@halo-dev/api-client': 0.0.41
       '@halo-dev/components': link:packages/components
       '@halo-dev/console-shared': link:packages/shared
-      '@halo-dev/richtext-editor': 0.0.0-alpha.8_vue@3.2.41
+      '@halo-dev/richtext-editor': 0.0.0-alpha.11_vue@3.2.41
       '@tiptap/extension-character-count': 2.0.0-beta.199
       '@uppy/core': 3.0.4
       '@uppy/dashboard': 3.1.0_@uppy+core@3.0.4
@@ -1957,33 +1957,33 @@ packages:
     resolution: {integrity: sha512-YpwoIyT+6BjNEfhQqZPSG7dewmC9AE7wxc/uaIRcVZdKr0C4GLmbiBKGOFFnVWIYr42islhMWjqYCGaiJSzkUg==}
     dev: false
 
-  /@halo-dev/richtext-editor/0.0.0-alpha.8_vue@3.2.41:
-    resolution: {integrity: sha512-3lENKyg6UqXpxUWCfhefQ3xx2e1jOzj/2TUBpblaRToP2WZSAw8wpcG5m3gTqsp5+0lHLtfrpgTvSr3KYO+08w==}
+  /@halo-dev/richtext-editor/0.0.0-alpha.11_vue@3.2.41:
+    resolution: {integrity: sha512-JtUBwzTp57lrBi3HUvypQaMyZIU/g9KER34PRoYgtc+12Uhjq7XXosrtaOrEL1pHjYPqyjxawUyPUJuzXONuig==}
     peerDependencies:
       vue: ^3.2.37
     dependencies:
       '@tiptap/core': 2.0.0-beta.195
-      '@tiptap/extension-blockquote': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
-      '@tiptap/extension-bold': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
-      '@tiptap/extension-bullet-list': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
-      '@tiptap/extension-code': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
-      '@tiptap/extension-code-block': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
-      '@tiptap/extension-code-block-lowlight': 2.0.0-beta.195_ndbd4h3iw4l6bgxmwshcxebdty
-      '@tiptap/extension-document': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
-      '@tiptap/extension-dropcursor': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
-      '@tiptap/extension-gapcursor': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
-      '@tiptap/extension-hard-break': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
-      '@tiptap/extension-heading': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
-      '@tiptap/extension-history': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
-      '@tiptap/extension-horizontal-rule': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
+      '@tiptap/extension-blockquote': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
+      '@tiptap/extension-bold': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
+      '@tiptap/extension-bullet-list': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
+      '@tiptap/extension-code': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
+      '@tiptap/extension-code-block': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
+      '@tiptap/extension-code-block-lowlight': 2.0.0-beta.195_tmbwbnesgmzomdlloh7t4ntnfa
+      '@tiptap/extension-document': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
+      '@tiptap/extension-dropcursor': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
+      '@tiptap/extension-gapcursor': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
+      '@tiptap/extension-hard-break': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
+      '@tiptap/extension-heading': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
+      '@tiptap/extension-history': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
+      '@tiptap/extension-horizontal-rule': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
       '@tiptap/extension-image': 2.0.0-beta.195_ujyaqudhnf6lg6m3pea2tubg4a
-      '@tiptap/extension-italic': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
+      '@tiptap/extension-italic': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
       '@tiptap/extension-link': 2.0.0-beta.195_ujyaqudhnf6lg6m3pea2tubg4a
-      '@tiptap/extension-list-item': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
-      '@tiptap/extension-ordered-list': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
-      '@tiptap/extension-paragraph': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
+      '@tiptap/extension-list-item': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
+      '@tiptap/extension-ordered-list': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
+      '@tiptap/extension-paragraph': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
       '@tiptap/extension-placeholder': 2.0.0-beta.195_ujyaqudhnf6lg6m3pea2tubg4a
-      '@tiptap/extension-strike': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
+      '@tiptap/extension-strike': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
       '@tiptap/extension-subscript': 2.0.0-beta.195_ujyaqudhnf6lg6m3pea2tubg4a
       '@tiptap/extension-superscript': 2.0.0-beta.195_ujyaqudhnf6lg6m3pea2tubg4a
       '@tiptap/extension-table': 2.0.0-beta.195_ujyaqudhnf6lg6m3pea2tubg4a
@@ -1992,14 +1992,13 @@ packages:
       '@tiptap/extension-table-row': 2.0.0-beta.195_ujyaqudhnf6lg6m3pea2tubg4a
       '@tiptap/extension-task-item': 2.0.0-beta.195_ujyaqudhnf6lg6m3pea2tubg4a
       '@tiptap/extension-task-list': 2.0.0-beta.195_ujyaqudhnf6lg6m3pea2tubg4a
-      '@tiptap/extension-text': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
+      '@tiptap/extension-text': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
       '@tiptap/extension-text-align': 2.0.0-beta.195_ujyaqudhnf6lg6m3pea2tubg4a
       '@tiptap/extension-underline': 2.0.0-beta.195_ujyaqudhnf6lg6m3pea2tubg4a
       '@tiptap/suggestion': 2.0.0-beta.195_ujyaqudhnf6lg6m3pea2tubg4a
       '@tiptap/vue-3': 2.0.0-beta.195_halyxqfan7x4orbb3jo3vn6fii
       floating-vue: 2.0.0-beta.20_vue@3.2.41
-      github-markdown-css: 5.1.0
-      katex: 0.16.2
+      katex: 0.16.3
       lowlight: 2.7.0
       tippy.js: 6.3.7
       vue: 3.2.41
@@ -2651,16 +2650,16 @@ packages:
       prosemirror-view: 1.26.2
     dev: false
 
-  /@tiptap/extension-blockquote/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
-    resolution: {integrity: sha512-FWlSR4TwSbYj8Ukc82M9s4qx+yFNoDTBjvsM8rA+6JxBJikSIiwOD5ht71oylA2rojWMQx75IZlYe6IBqqko0A==}
+  /@tiptap/extension-blockquote/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
+    resolution: {integrity: sha512-BbHKaIkVYgJCV5giJC3/bdXMZWxFylLKiAbOGSGwIsnnS5/oL+V4XN6hqcIDBxlcj3MQ/d9zG0+mvFyjRssAkg==}
     peerDependencies:
       '@tiptap/core': ^2.0.0-beta.1
     dependencies:
       '@tiptap/core': 2.0.0-beta.195
     dev: false
 
-  /@tiptap/extension-bold/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
-    resolution: {integrity: sha512-yVXIH6ccTqiUe9c+7gMsYS77MxmgnP7mAcj59hPR9tSjSk9ymzrfFr9sXiWZ455HJmKuvkEBSPtMzqr8P7fWOA==}
+  /@tiptap/extension-bold/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
+    resolution: {integrity: sha512-l513jgGLmt8C69Yuh5Et7a46Tn8QpW4q1HhZK6ih0ajNT+L5Xk0CSxEK/K5EmHSACPhwqjsJztLpGjAdoOn0mA==}
     peerDependencies:
       '@tiptap/core': ^2.0.0-beta.193
     dependencies:
@@ -2678,8 +2677,8 @@ packages:
       tippy.js: 6.3.7
     dev: false
 
-  /@tiptap/extension-bullet-list/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
-    resolution: {integrity: sha512-T+/pWQNlCz6AsIlx/Aryy3+HUYxMAgS7bTa069GbRAxb0K7aS3+5j9CXfVxUhC+Q+pIqCNUx86MzcY6ea//MBQ==}
+  /@tiptap/extension-bullet-list/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
+    resolution: {integrity: sha512-gGRQRqdQqCZQstB3ztSy8yzIdm5/5IIYxhCuFNb3Z9c9p/CzyRmaNqa7XkRLrXSajp4lS0OH8RkFUJqL6U+/9w==}
     peerDependencies:
       '@tiptap/core': ^2.0.0-beta.193
     dependencies:
@@ -2695,21 +2694,21 @@ packages:
       prosemirror-state: 1.4.1
     dev: false
 
-  /@tiptap/extension-code-block-lowlight/2.0.0-beta.195_ndbd4h3iw4l6bgxmwshcxebdty:
+  /@tiptap/extension-code-block-lowlight/2.0.0-beta.195_tmbwbnesgmzomdlloh7t4ntnfa:
     resolution: {integrity: sha512-GolPGlT9wNu9eol7K3i5Oj8woeDE8KM8jaLZT/+Bos0WJGw++atzvlYq7g6SdPxHJl64Q2phWAlx9zvlM/yhXg==}
     peerDependencies:
       '@tiptap/core': ^2.0.0-beta.193
       '@tiptap/extension-code-block': ^2.0.0-beta.193
     dependencies:
       '@tiptap/core': 2.0.0-beta.195
-      '@tiptap/extension-code-block': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
+      '@tiptap/extension-code-block': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
       prosemirror-model: 1.18.1
       prosemirror-state: 1.4.1
       prosemirror-view: 1.26.2
     dev: false
 
-  /@tiptap/extension-code-block/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
-    resolution: {integrity: sha512-whDf00B7WkM8pA/f+zyuTa4660mht58DFokBAcWLwmdt8w1r+SDp1C3pZG2AD9pAXMXdfm6DcRNNNgbr4KZ03Q==}
+  /@tiptap/extension-code-block/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
+    resolution: {integrity: sha512-ZfftYE1kHA2pD46hXDkeYd1vuxp3bJLS854B2yHfw1cp3JVDjMXzm4Mzg7zLfr+YV1dT/N/fUfdCg38fqEUCyA==}
     peerDependencies:
       '@tiptap/core': ^2.0.0-beta.193
     dependencies:
@@ -2717,24 +2716,24 @@ packages:
       prosemirror-state: 1.4.1
     dev: false
 
-  /@tiptap/extension-code/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
-    resolution: {integrity: sha512-Azp7ohHCOSVCt48MEBGXiyjaCr50Iw1TCZg8R3uubuHviYbhXQo2vD1z9Njsp1yKYCkO5lc11rvr675U6V4aog==}
+  /@tiptap/extension-code/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
+    resolution: {integrity: sha512-P1U/xYD0MLT7JU2OHb3QoW7+JiPZXizFG/gTYmAHQV/gLH87cmflI7pPnloBdTkeIF0Q/cd6sSd75V9FxR4XJA==}
     peerDependencies:
       '@tiptap/core': ^2.0.0-beta.193
     dependencies:
       '@tiptap/core': 2.0.0-beta.195
     dev: false
 
-  /@tiptap/extension-document/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
-    resolution: {integrity: sha512-q6z+71hgqMKxmi0F+9G4IYarSAGzK99EwvSAcbKa2lld9KS7NEXc2vHPaqECdInnIIziTZfoyBjz/G6weyNXXw==}
+  /@tiptap/extension-document/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
+    resolution: {integrity: sha512-l/3k9N2O4wIMQoN/SM3aIBwOhZ2KRxQoqGJfsbAUUwBURBDiT4N2VZaNiJC/w3xCVQXIxHSIlqtm9ZBcZeiH/Q==}
     peerDependencies:
       '@tiptap/core': ^2.0.0-beta.193
     dependencies:
       '@tiptap/core': 2.0.0-beta.195
     dev: false
 
-  /@tiptap/extension-dropcursor/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
-    resolution: {integrity: sha512-8vIeOkPuonZuK0byEsX8R4c25GAGr6PW/h6+UND2eBhn2TNwiteknJQAawqY17hHVLkUlFcwGt+lt+hmo+zR2A==}
+  /@tiptap/extension-dropcursor/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
+    resolution: {integrity: sha512-RhdYm0yBJxVLECaHWsZcBIwRJUoUqZ79jvs+kUVodxHW4+IxRAgEA+lImr0GD+kk8aX5Mrk8YhWuUUeu5nzpTg==}
     peerDependencies:
       '@tiptap/core': ^2.0.0-beta.193
     dependencies:
@@ -2753,8 +2752,8 @@ packages:
       tippy.js: 6.3.7
     dev: false
 
-  /@tiptap/extension-gapcursor/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
-    resolution: {integrity: sha512-6N76xaMGXLjkQN7iSKRrzKICUqiVgARV0PYO9E6uX48/Q5LPXjk48T5fsUbUeT2u+XvJc1nT0m8CMPeRH+3dQA==}
+  /@tiptap/extension-gapcursor/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
+    resolution: {integrity: sha512-0TDpDfDyay+IbD+wJMsBJ2c0Cq0NtllUOxbi0NPjjWW94Jrvs1yqUSzX4Qp9m5MW8qP24IV6krgZBM1JyQc6ng==}
     peerDependencies:
       '@tiptap/core': ^2.0.0-beta.193
     dependencies:
@@ -2762,24 +2761,24 @@ packages:
       prosemirror-gapcursor: 1.3.1
     dev: false
 
-  /@tiptap/extension-hard-break/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
-    resolution: {integrity: sha512-f8BdsqQ4oxXxD5c63guaEz6P+Em7tVHwrc/VnVL79YYKzlzAdg+sIOLTFABuhuGaQHT+jn4dXrBT6rSUyjUcBw==}
+  /@tiptap/extension-hard-break/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
+    resolution: {integrity: sha512-DF2wDo/+gSYRhzGowCvZJk3/j/zYJ22BHxZpkAEmLJ69mWSIqZv3S2/brujnNmnji9c3/+JN7ppPSeVykz0b9Q==}
     peerDependencies:
       '@tiptap/core': ^2.0.0-beta.193
     dependencies:
       '@tiptap/core': 2.0.0-beta.195
     dev: false
 
-  /@tiptap/extension-heading/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
-    resolution: {integrity: sha512-WZOyDPqbdav3K/IKEhdgwIFXrC1eyikMHk4ulXNHhrroNnT9SNVvSBu5vFS2fAA9ynLRAIs0Ita5RX50Zo0qEw==}
+  /@tiptap/extension-heading/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
+    resolution: {integrity: sha512-WGQ7ET2TBpldrD8JX37OXHXq05LU3OWItIVBs9nKGh4otZTUwPtwfOyMlFfA+IMfQif+ilwLGvUC6EHOw/LwxQ==}
     peerDependencies:
       '@tiptap/core': ^2.0.0-beta.193
     dependencies:
       '@tiptap/core': 2.0.0-beta.195
     dev: false
 
-  /@tiptap/extension-history/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
-    resolution: {integrity: sha512-bBCP+Gk3T8kTBmgebRsPM8/w/m6R1FpkPp9n9SEIMxAKqNqBWShyJOaDaCTqmKvOKM+HqG3D7qdS/smqlN+u/w==}
+  /@tiptap/extension-history/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
+    resolution: {integrity: sha512-oZMjKHFqqZuUuf0+IG5+OoKw9DIGilG+v8cm2JK9XnxF5CxF6HIXNDWl3552wRIA+Ro7fBRJEJ//hfJzp0Uhjw==}
     peerDependencies:
       '@tiptap/core': ^2.0.0-beta.193
     dependencies:
@@ -2787,8 +2786,8 @@ packages:
       prosemirror-history: 1.3.0
     dev: false
 
-  /@tiptap/extension-horizontal-rule/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
-    resolution: {integrity: sha512-UFG+asi5cEsVBG1dETnAfC+iSKfegl2A5wKJmGRQk5tiEg8HBpOAcsI1C0W+9+NnwDhpbEHTn64MLs74PnPZHA==}
+  /@tiptap/extension-horizontal-rule/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
+    resolution: {integrity: sha512-ISQndGiC6Y3+Ds3OJHKa2iB7s4FkRQxn8US/Hhj4yK7DOifoykLOrgDghwLu0H0dSM8KNb9caYEtmj64vDogNg==}
     peerDependencies:
       '@tiptap/core': ^2.0.0-beta.193
     dependencies:
@@ -2804,8 +2803,8 @@ packages:
       '@tiptap/core': 2.0.0-beta.195
     dev: false
 
-  /@tiptap/extension-italic/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
-    resolution: {integrity: sha512-2IUI7iaXRX2PsnizfDjDhbJ84Ws8OKCb4N5H5ofXv4wPQN6vbt+8Vd0Wwa0FcgWHk7RB8Jk5YX8znwUUHeyUWA==}
+  /@tiptap/extension-italic/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
+    resolution: {integrity: sha512-jaYJr5ZMxU2swK6h1XJr6Wb1LlWOWbvsX/wo59iZ9KVv1AHiKZlCMcWGThy4aoAs/CUT11pB8qbzyOO163LHZg==}
     peerDependencies:
       '@tiptap/core': ^2.0.0-beta.193
     dependencies:
@@ -2823,24 +2822,24 @@ packages:
       prosemirror-state: 1.4.1
     dev: false
 
-  /@tiptap/extension-list-item/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
-    resolution: {integrity: sha512-2P7LeHGbsfSAjdEGinyk7jxSqWHDTF+E1R6Vd+FhpDGdcGoEwYD0QEVIXF3nMPzkYtCYXGfeqasvuf0+bEdyqQ==}
+  /@tiptap/extension-list-item/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
+    resolution: {integrity: sha512-rzcz5MJgoX1M9M9e1iruyRxcwYyYmdCXsl9gB8hhJYh4R+AW1peRmHJ3vVX5oPZXg/tXOMTv/or2x8v30c9tJw==}
     peerDependencies:
       '@tiptap/core': ^2.0.0-beta.193
     dependencies:
       '@tiptap/core': 2.0.0-beta.195
     dev: false
 
-  /@tiptap/extension-ordered-list/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
-    resolution: {integrity: sha512-k3DvzfVuZQYr5jcqVnrDT95lTcnuTW6YOcL4mtAWklnWWSVosZ0rDVlVqMuVA/MwTPr57sNTpzb5OM8WN6U/rA==}
+  /@tiptap/extension-ordered-list/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
+    resolution: {integrity: sha512-ciQhBRtNUudQyCgvQKRZ1WbV7Q9IZP82GHEsk+wScZgI0SsrGY8pnfJT7CyF8aPIjkQkccozKVTbyMrjBOqWSw==}
     peerDependencies:
       '@tiptap/core': ^2.0.0-beta.193
     dependencies:
       '@tiptap/core': 2.0.0-beta.195
     dev: false
 
-  /@tiptap/extension-paragraph/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
-    resolution: {integrity: sha512-skCdQdZYuWYUmY/4QI1zR8dA+Icu9gerghYv5zGQKJ0DTgGa/FtBelPX6ahEy9EP08/LcRvCuM68ysus6Ouo3g==}
+  /@tiptap/extension-paragraph/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
+    resolution: {integrity: sha512-+BoMCaxlsHqw065zTUNd+ywkvFJzNKbTY461/AlKX2dgHeaO8doXHDQK+9icOpibQvrKaMhOJmuBTgGlJlUUgw==}
     peerDependencies:
       '@tiptap/core': ^2.0.0-beta.193
     dependencies:
@@ -2858,8 +2857,8 @@ packages:
       prosemirror-view: 1.26.2
     dev: false
 
-  /@tiptap/extension-strike/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
-    resolution: {integrity: sha512-/Lr8UtOJpybeS2TmztPI0ggBOXkY/qy/9rafJLNZgiVAYguGNWD7BTVZxzJtBG3h4lzqSWvHV0mOANXp/vtOIQ==}
+  /@tiptap/extension-strike/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
+    resolution: {integrity: sha512-KyN5+d9o9FGvrSiSuh81oo4+XjMDsZVY4UHc9lBY0nAzaGAkJOwkCjk40RfyO5ZJ2GdEEQ6Nh/3YqVMcJTY+rA==}
     peerDependencies:
       '@tiptap/core': ^2.0.0-beta.193
     dependencies:
@@ -2943,8 +2942,8 @@ packages:
       '@tiptap/core': 2.0.0-beta.195
     dev: false
 
-  /@tiptap/extension-text/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
-    resolution: {integrity: sha512-yNu5/YyEZfCmjAF/N/XbpU8DtRusu0gjQTbdhId1G8GgGpkECYUPS2VGNH4WxfFjJAdMOAUpLFqbmPAn0cXerw==}
+  /@tiptap/extension-text/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
+    resolution: {integrity: sha512-ntOqEhkBjDHrdzxvpPe4U1JB5GgE9/yyWqWdgzSL9lpSndRTJN1xQLOmyuv0qsLqOgBHn1YITHvaxPb3t8FrFw==}
     peerDependencies:
       '@tiptap/core': ^2.0.0-beta.193
     dependencies:
@@ -5888,10 +5887,6 @@ packages:
       assert-plus: 1.0.0
     dev: true
 
-  /github-markdown-css/5.1.0:
-    resolution: {integrity: sha512-QLtORwHHtUHhPMHu7i4GKfP6Vx5CWZn+NKQXe+cBhslY1HEt0CTEkP4d/vSROKV0iIJSpl4UtlQ16AD8C6lMug==}
-    dev: false
-
   /glob-parent/5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -6681,8 +6676,8 @@ packages:
     resolution: {integrity: sha512-iLt/RPnrazs4D4IVaO1Hac2W/WH9SiCT3CuhX9hip0xWVnUe+28Lyse4w/OxjSwdZ0CzduimWPMZH/KwxnCAEw==}
     dev: true
 
-  /katex/0.16.2:
-    resolution: {integrity: sha512-70DJdQAyh9EMsthw3AaQlDyFf54X7nWEUIa5W+rq8XOpEk//w5Th7/8SqFqpvi/KZ2t6MHUj4f9wLmztBmAYQA==}
+  /katex/0.16.3:
+    resolution: {integrity: sha512-3EykQddareoRmbtNiNEDgl3IGjryyrp2eg/25fHDEnlHymIDi33bptkMv6K4EOC2LZCybLW/ZkEo6Le+EM9pmA==}
     hasBin: true
     dependencies:
       commander: 8.3.0
diff --git a/src/components/editor/DefaultEditor.vue b/src/components/editor/DefaultEditor.vue
new file mode 100644
index 000000000..f2e18ae96
--- /dev/null
+++ b/src/components/editor/DefaultEditor.vue
@@ -0,0 +1,485 @@
+<script lang="ts" setup>
+import {
+  Extension,
+  RichTextEditor,
+  useEditor,
+  ExtensionBlockquote,
+  ExtensionBold,
+  ExtensionBulletList,
+  ExtensionCode,
+  ExtensionDocument,
+  ExtensionDropcursor,
+  ExtensionGapcursor,
+  ExtensionHardBreak,
+  ExtensionHeading,
+  ExtensionHistory,
+  ExtensionHorizontalRule,
+  ExtensionItalic,
+  ExtensionListItem,
+  ExtensionOrderedList,
+  ExtensionParagraph,
+  ExtensionStrike,
+  ExtensionText,
+  ExtensionImage,
+  ExtensionTaskList,
+  ExtensionTaskItem,
+  ExtensionLink,
+  ExtensionTextAlign,
+  ExtensionUnderline,
+  ExtensionTable,
+  ExtensionTableHeader,
+  ExtensionTableCell,
+  ExtensionTableRow,
+  ExtensionSubscript,
+  ExtensionSuperscript,
+  ExtensionPlaceholder,
+  ExtensionCommands,
+  CommandsSuggestion,
+  CommandHeader1,
+  CommandHeader2,
+  CommandHeader3,
+  CommandHeader4,
+  CommandHeader5,
+  CommandHeader6,
+  CommandCodeBlock,
+  ExtensionCodeBlock,
+  lowlight,
+  UndoMenuItem,
+  RedoMenuItem,
+  BoldMenuItem,
+  ItalicMenuItem,
+  UnderlineMenuItem,
+  StrikeMenuItem,
+  QuoteMenuItem,
+  CodeMenuItem,
+  SuperScriptMenuItem,
+  SubScriptMenuItem,
+  CodeBlockMenuItem,
+  HeadingMenuItem,
+  AlignLeftMenuItem,
+  AlignCenterMenuItem,
+  AlignRightMenuItem,
+  AlignJustifyMenuItem,
+} from "@halo-dev/richtext-editor";
+import {
+  IconCalendar,
+  IconCharacterRecognition,
+  IconLink,
+  IconUserFollow,
+  VTabItem,
+  VTabs,
+} from "@halo-dev/components";
+import AttachmentSelectorModal from "@/modules/contents/attachments/components/AttachmentSelectorModal.vue";
+import ExtensionCharacterCount from "@tiptap/extension-character-count";
+import MdiFileImageBox from "~icons/mdi/file-image-box";
+import MdiFormatHeader1 from "~icons/mdi/format-header-1";
+import MdiFormatHeader2 from "~icons/mdi/format-header-2";
+import MdiFormatHeader3 from "~icons/mdi/format-header-3";
+import MdiFormatHeader4 from "~icons/mdi/format-header-4";
+import MdiFormatHeader5 from "~icons/mdi/format-header-5";
+import MdiFormatHeader6 from "~icons/mdi/format-header-6";
+import { computed, markRaw, nextTick, ref, watch } from "vue";
+import { formatDatetime } from "@/utils/date";
+import { useAttachmentSelect } from "@/modules/contents/attachments/composables/use-attachment";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string;
+    owner?: string;
+    permalink?: string;
+    publishTime?: string | null;
+  }>(),
+  {
+    modelValue: "",
+    owner: undefined,
+    permalink: undefined,
+    publishTime: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  (event: "update:modelValue", value: string): void;
+  (event: "update", value: string): void;
+}>();
+
+interface HeadingNode {
+  id: string;
+  level: number;
+  text: string;
+}
+
+const headingIcons = {
+  1: markRaw(MdiFormatHeader1),
+  2: markRaw(MdiFormatHeader2),
+  3: markRaw(MdiFormatHeader3),
+  4: markRaw(MdiFormatHeader4),
+  5: markRaw(MdiFormatHeader5),
+  6: markRaw(MdiFormatHeader6),
+};
+
+const headingNodes = ref<HeadingNode[]>();
+const selectedHeadingNode = ref<HeadingNode>();
+const extraActiveId = ref("toc");
+const attachmentSelectorModal = ref(false);
+
+const editor = useEditor({
+  content: props.modelValue,
+  extensions: [
+    ExtensionBlockquote,
+    ExtensionBold,
+    ExtensionBulletList,
+    ExtensionCode,
+    ExtensionDocument,
+    ExtensionDropcursor,
+    ExtensionGapcursor,
+    ExtensionHardBreak,
+    ExtensionHeading,
+    ExtensionHistory,
+    ExtensionHorizontalRule,
+    ExtensionItalic,
+    ExtensionListItem,
+    ExtensionOrderedList,
+    ExtensionParagraph,
+    ExtensionStrike,
+    ExtensionText,
+    ExtensionImage.configure({
+      inline: true,
+      HTMLAttributes: {
+        loading: "lazy",
+      },
+    }),
+    ExtensionTaskList,
+    ExtensionTaskItem,
+    ExtensionLink.configure({
+      autolink: true,
+      openOnClick: false,
+    }),
+    ExtensionTextAlign.configure({
+      types: ["heading", "paragraph"],
+    }),
+    ExtensionUnderline,
+    ExtensionTable.configure({
+      resizable: true,
+    }),
+    ExtensionTableHeader,
+    ExtensionTableCell,
+    ExtensionTableRow,
+    ExtensionSubscript,
+    ExtensionSuperscript,
+    ExtensionPlaceholder.configure({
+      placeholder: "输入 / 以选择输入类型",
+    }),
+    ExtensionCommands.configure({
+      suggestion: {
+        ...CommandsSuggestion,
+        items: ({ query }: { query: string }) => {
+          return [
+            CommandHeader1,
+            CommandHeader2,
+            CommandHeader3,
+            CommandHeader4,
+            CommandHeader5,
+            CommandHeader6,
+            CommandCodeBlock,
+          ].filter((item) =>
+            [...item.keywords, item.title].some((keyword) =>
+              keyword.includes(query)
+            )
+          );
+        },
+      },
+    }),
+    ExtensionCodeBlock.configure({
+      lowlight,
+    }),
+    ExtensionCharacterCount,
+    Extension.create({
+      addGlobalAttributes() {
+        return [
+          {
+            types: ["heading"],
+            attributes: {
+              id: {
+                default: null,
+              },
+            },
+          },
+        ];
+      },
+    }),
+  ],
+  autofocus: "start",
+  onUpdate: () => {
+    emit("update:modelValue", editor.value?.getHTML() + "");
+    emit("update", editor.value?.getHTML() + "");
+    nextTick(() => {
+      handleGenerateTableOfContent();
+    });
+  },
+});
+
+const toolbarMenuItems = computed(() => {
+  if (!editor.value) return [];
+  return [
+    UndoMenuItem(editor.value),
+    RedoMenuItem(editor.value),
+    BoldMenuItem(editor.value),
+    ItalicMenuItem(editor.value),
+    UnderlineMenuItem(editor.value),
+    StrikeMenuItem(editor.value),
+    QuoteMenuItem(editor.value),
+    CodeMenuItem(editor.value),
+    SuperScriptMenuItem(editor.value),
+    SubScriptMenuItem(editor.value),
+    CodeBlockMenuItem(editor.value),
+    HeadingMenuItem(editor.value),
+    AlignLeftMenuItem(editor.value),
+    AlignCenterMenuItem(editor.value),
+    AlignRightMenuItem(editor.value),
+    AlignJustifyMenuItem(editor.value),
+    {
+      type: "button",
+      icon: markRaw(MdiFileImageBox),
+      title: "SuperScript",
+      action: () => (attachmentSelectorModal.value = true),
+      isActive: () => false,
+    },
+  ];
+});
+
+const bubbleMenuItems = computed(() => {
+  if (!editor.value) return [];
+  return [
+    BoldMenuItem(editor.value),
+    ItalicMenuItem(editor.value),
+    UnderlineMenuItem(editor.value),
+    StrikeMenuItem(editor.value),
+    QuoteMenuItem(editor.value),
+    CodeMenuItem(editor.value),
+    CodeBlockMenuItem(editor.value),
+    SuperScriptMenuItem(editor.value),
+    SubScriptMenuItem(editor.value),
+    AlignLeftMenuItem(editor.value),
+    AlignCenterMenuItem(editor.value),
+    AlignRightMenuItem(editor.value),
+    AlignJustifyMenuItem(editor.value),
+  ];
+});
+
+const handleGenerateTableOfContent = () => {
+  if (!editor.value) {
+    return;
+  }
+
+  const headings: HeadingNode[] = [];
+  const transaction = editor.value.state.tr;
+
+  editor.value.state.doc.descendants((node, pos) => {
+    if (node.type.name === "heading") {
+      const id = `heading-${headings.length + 1}`;
+
+      if (node.attrs.id !== id) {
+        transaction?.setNodeMarkup(pos, undefined, {
+          ...node.attrs,
+          id,
+        });
+      }
+
+      headings.push({
+        level: node.attrs.level,
+        text: node.textContent,
+        id,
+      });
+    }
+  });
+
+  transaction.setMeta("addToHistory", false);
+  transaction.setMeta("preventUpdate", true);
+
+  editor.value.view.dispatch(transaction);
+
+  headingNodes.value = headings;
+
+  if (!selectedHeadingNode.value) {
+    selectedHeadingNode.value = headings[0];
+  }
+};
+
+const handleSelectHeadingNode = (node: HeadingNode) => {
+  selectedHeadingNode.value = node;
+  document.getElementById(node.id)?.scrollIntoView({ behavior: "smooth" });
+};
+
+const { onAttachmentSelect } = useAttachmentSelect(editor);
+
+watch(
+  () => props.modelValue,
+  () => {
+    if (props.modelValue !== editor.value?.getHTML()) {
+      editor.value?.commands.setContent(props.modelValue);
+      nextTick(() => {
+        handleGenerateTableOfContent();
+      });
+    }
+  }
+);
+</script>
+
+<template>
+  <AttachmentSelectorModal
+    v-model:visible="attachmentSelectorModal"
+    @select="onAttachmentSelect"
+  />
+  <RichTextEditor
+    v-if="editor"
+    :editor="editor"
+    :toolbar-menu-items="toolbarMenuItems"
+    :bubble-menu-items="bubbleMenuItems"
+  >
+    <template #extra>
+      <div class="h-full w-72 overflow-y-auto border-l bg-white">
+        <VTabs v-model:active-id="extraActiveId" type="outline">
+          <VTabItem id="toc" label="大纲">
+            <div class="p-1 pt-0">
+              <ul class="space-y-1">
+                <li
+                  v-for="(node, index) in headingNodes"
+                  :key="index"
+                  :class="[
+                    { 'bg-gray-100': node.id === selectedHeadingNode?.id },
+                  ]"
+                  class="group cursor-pointer truncate rounded-base px-1.5 py-1 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+                  @click="handleSelectHeadingNode(node)"
+                >
+                  <div
+                    :style="{
+                      paddingLeft: `${(node.level - 1) * 0.8}rem`,
+                    }"
+                    class="flex items-center gap-2"
+                  >
+                    <component
+                      :is="headingIcons[node.level]"
+                      class="h-4 w-4 rounded-sm bg-gray-100 p-0.5 group-hover:bg-white"
+                      :class="[
+                        { '!bg-white': node.id === selectedHeadingNode?.id },
+                      ]"
+                    />
+                    <span class="flex-1 truncate">{{ node.text }}</span>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </VTabItem>
+          <VTabItem id="information" label="详情">
+            <div class="flex flex-col gap-2 p-1 pt-0">
+              <div class="grid grid-cols-2 gap-2">
+                <div
+                  class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
+                >
+                  <div class="flex items-center justify-between">
+                    <div
+                      class="text-sm text-gray-500 group-hover:text-gray-900"
+                    >
+                      字符数
+                    </div>
+                    <div class="rounded bg-gray-200 p-0.5">
+                      <IconCharacterRecognition
+                        class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
+                      />
+                    </div>
+                  </div>
+                  <div class="text-base font-medium text-gray-900">
+                    {{ editor.storage.characterCount.characters() }}
+                  </div>
+                </div>
+                <div
+                  class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
+                >
+                  <div class="flex items-center justify-between">
+                    <div
+                      class="text-sm text-gray-500 group-hover:text-gray-900"
+                    >
+                      词数
+                    </div>
+                    <div class="rounded bg-gray-200 p-0.5">
+                      <IconCharacterRecognition
+                        class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
+                      />
+                    </div>
+                  </div>
+                  <div class="text-base font-medium text-gray-900">
+                    {{ editor.storage.characterCount.words() }}
+                  </div>
+                </div>
+              </div>
+
+              <div v-if="publishTime" class="grid grid-cols-1 gap-2">
+                <div
+                  class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
+                >
+                  <div class="flex items-center justify-between">
+                    <div
+                      class="text-sm text-gray-500 group-hover:text-gray-900"
+                    >
+                      发布时间
+                    </div>
+                    <div class="rounded bg-gray-200 p-0.5">
+                      <IconCalendar
+                        class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
+                      />
+                    </div>
+                  </div>
+                  <div class="text-base font-medium text-gray-900">
+                    {{ formatDatetime(publishTime) || "未发布" }}
+                  </div>
+                </div>
+              </div>
+              <div v-if="owner" class="grid grid-cols-1 gap-2">
+                <div
+                  class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
+                >
+                  <div class="flex items-center justify-between">
+                    <div
+                      class="text-sm text-gray-500 group-hover:text-gray-900"
+                    >
+                      创建者
+                    </div>
+                    <div class="rounded bg-gray-200 p-0.5">
+                      <IconUserFollow
+                        class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
+                      />
+                    </div>
+                  </div>
+                  <div class="text-base font-medium text-gray-900">
+                    {{ owner }}
+                  </div>
+                </div>
+              </div>
+              <div v-if="permalink" class="grid grid-cols-1 gap-2">
+                <div
+                  class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
+                >
+                  <div class="flex items-center justify-between">
+                    <div
+                      class="text-sm text-gray-500 group-hover:text-gray-900"
+                    >
+                      访问链接
+                    </div>
+                    <div class="rounded bg-gray-200 p-0.5">
+                      <IconLink
+                        class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
+                      />
+                    </div>
+                  </div>
+                  <div class="text-sm text-gray-900 hover:text-blue-600">
+                    {{ permalink }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </VTabItem>
+        </VTabs>
+      </div>
+    </template>
+  </RichTextEditor>
+</template>
diff --git a/src/components/global-search/GlobalSearchModal.vue b/src/components/global-search/GlobalSearchModal.vue
index cb88c5a6d..9a7b3ae1c 100644
--- a/src/components/global-search/GlobalSearchModal.vue
+++ b/src/components/global-search/GlobalSearchModal.vue
@@ -62,6 +62,8 @@ const searchResults = computed((): SearchableItem[] => {
 });
 
 const handleBuildSearchIndex = () => {
+  fuse.remove(() => true);
+
   const routes = router.getRoutes().filter((route) => {
     return !!route.meta?.title && route.meta?.searchable;
   });
diff --git a/src/modules/contents/pages/SinglePageEditor.vue b/src/modules/contents/pages/SinglePageEditor.vue
index d7e6ae4f0..fe1790b42 100644
--- a/src/modules/contents/pages/SinglePageEditor.vue
+++ b/src/modules/contents/pages/SinglePageEditor.vue
@@ -6,22 +6,15 @@ import {
   VButton,
   IconSave,
 } from "@halo-dev/components";
+import DefaultEditor from "@/components/editor/DefaultEditor.vue";
 import SinglePageSettingModal from "./components/SinglePageSettingModal.vue";
 import PostPreviewModal from "../posts/components/PostPreviewModal.vue";
-import AttachmentSelectorModal from "../attachments/components/AttachmentSelectorModal.vue";
-import {
-  allExtensions,
-  RichTextEditor,
-  useEditor,
-} from "@halo-dev/richtext-editor";
 import type { SinglePageRequest } from "@halo-dev/api-client";
 import { v4 as uuid } from "uuid";
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { apiClient } from "@/utils/api-client";
 import { useRouteQuery } from "@vueuse/router";
 import cloneDeep from "lodash.clonedeep";
-import { useAttachmentSelect } from "../attachments/composables/use-attachment";
-import MdiFileImageBox from "~icons/mdi/file-image-box";
 
 const initialFormState: SinglePageRequest = {
   page: {
@@ -61,37 +54,11 @@ const formState = ref<SinglePageRequest>(cloneDeep(initialFormState));
 const saving = ref(false);
 const settingModal = ref(false);
 const previewModal = ref(false);
-const attachmentSelectorModal = ref(false);
 
 const isUpdateMode = computed(() => {
   return !!formState.value.page.metadata.creationTimestamp;
 });
 
-// Editor
-const editor = useEditor({
-  content: formState.value.content.raw,
-  extensions: [...allExtensions],
-  autofocus: "start",
-  onUpdate: () => {
-    formState.value.content.raw = editor.value?.getHTML() + "";
-  },
-});
-
-watch(
-  () => formState.value.content.raw,
-  (newValue) => {
-    const isSame = editor.value?.getHTML() === newValue;
-
-    if (isSame) {
-      return;
-    }
-
-    editor.value?.commands.setContent(newValue as string, false);
-  }
-);
-
-const { onAttachmentSelect } = useAttachmentSelect(editor);
-
 const routeQueryName = useRouteQuery<string>("name");
 
 const handleSave = async () => {
@@ -172,10 +139,6 @@ onMounted(async () => {
     @saved="onSettingSaved"
   />
   <PostPreviewModal v-model:visible="previewModal" />
-  <AttachmentSelectorModal
-    v-model:visible="attachmentSelectorModal"
-    @select="onAttachmentSelect"
-  />
   <VPageHeader title="自定义页面">
     <template #icon>
       <IconPages class="mr-2 self-center" />
@@ -204,19 +167,11 @@ onMounted(async () => {
     </template>
   </VPageHeader>
   <div class="editor border-t" style="height: calc(100vh - 3.5rem)">
-    <RichTextEditor
-      v-if="editor"
-      :editor="editor"
-      :additional-menu-items="[
-        {
-          type: 'button',
-          icon: MdiFileImageBox,
-          title: 'SuperScript',
-          action: () => (attachmentSelectorModal = true),
-          isActive: () => false,
-        },
-      ]"
-    >
-    </RichTextEditor>
+    <DefaultEditor
+      v-model="formState.content.raw"
+      :owner="formState.page.spec.owner"
+      :permalink="formState.page.status?.permalink"
+      :publish-time="formState.page.spec.publishTime"
+    />
   </div>
 </template>
diff --git a/src/modules/contents/posts/PostEditor.vue b/src/modules/contents/posts/PostEditor.vue
index d61fcf4bf..2c7d9274b 100644
--- a/src/modules/contents/posts/PostEditor.vue
+++ b/src/modules/contents/posts/PostEditor.vue
@@ -1,42 +1,20 @@
 <script lang="ts" setup>
 import {
   IconBookRead,
-  IconCalendar,
-  IconCharacterRecognition,
-  IconLink,
   IconSave,
-  IconUserFollow,
   VButton,
   VPageHeader,
   VSpace,
-  VTabItem,
-  VTabs,
 } from "@halo-dev/components";
+import DefaultEditor from "@/components/editor/DefaultEditor.vue";
 import PostSettingModal from "./components/PostSettingModal.vue";
 import PostPreviewModal from "./components/PostPreviewModal.vue";
-import AttachmentSelectorModal from "../attachments/components/AttachmentSelectorModal.vue";
 import type { PostRequest } from "@halo-dev/api-client";
-import { computed, markRaw, nextTick, onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref } from "vue";
 import cloneDeep from "lodash.clonedeep";
 import { apiClient } from "@/utils/api-client";
 import { useRouteQuery } from "@vueuse/router";
 import { v4 as uuid } from "uuid";
-import {
-  allExtensions,
-  Extension,
-  RichTextEditor,
-  useEditor,
-} from "@halo-dev/richtext-editor";
-import ExtensionCharacterCount from "@tiptap/extension-character-count";
-import { formatDatetime } from "@/utils/date";
-import { useAttachmentSelect } from "../attachments/composables/use-attachment";
-import MdiFileImageBox from "~icons/mdi/file-image-box";
-import MdiFormatHeader1 from "~icons/mdi/format-header-1";
-import MdiFormatHeader2 from "~icons/mdi/format-header-2";
-import MdiFormatHeader3 from "~icons/mdi/format-header-3";
-import MdiFormatHeader4 from "~icons/mdi/format-header-4";
-import MdiFormatHeader5 from "~icons/mdi/format-header-5";
-import MdiFormatHeader6 from "~icons/mdi/format-header-6";
 
 const initialFormState: PostRequest = {
   post: {
@@ -78,118 +56,11 @@ const formState = ref<PostRequest>(cloneDeep(initialFormState));
 const settingModal = ref(false);
 const previewModal = ref(false);
 const saving = ref(false);
-const extraActiveId = ref("toc");
-const attachmentSelectorModal = ref(false);
 
 const isUpdateMode = computed(() => {
   return !!formState.value.post.metadata.creationTimestamp;
 });
 
-interface HeadingNode {
-  id: string;
-  level: number;
-  text: string;
-}
-
-const headingIcons = {
-  1: markRaw(MdiFormatHeader1),
-  2: markRaw(MdiFormatHeader2),
-  3: markRaw(MdiFormatHeader3),
-  4: markRaw(MdiFormatHeader4),
-  5: markRaw(MdiFormatHeader5),
-  6: markRaw(MdiFormatHeader6),
-};
-
-const headingNodes = ref<HeadingNode[]>();
-const selectedHeadingNode = ref<HeadingNode>();
-const editor = useEditor({
-  content: formState.value.content.raw,
-  extensions: [
-    ...allExtensions,
-    ExtensionCharacterCount,
-    Extension.create({
-      addGlobalAttributes() {
-        return [
-          {
-            types: ["heading"],
-            attributes: {
-              id: {
-                default: null,
-              },
-            },
-          },
-        ];
-      },
-    }),
-  ],
-  autofocus: "start",
-  onUpdate: () => {
-    formState.value.content.raw = editor.value?.getHTML() + "";
-    nextTick(() => {
-      handleGenerateTableOfContent();
-    });
-  },
-});
-
-watch(
-  () => formState.value.content.raw,
-  (newValue) => {
-    const isSame = editor.value?.getHTML() === newValue;
-
-    if (isSame) {
-      return;
-    }
-
-    editor.value?.commands.setContent(newValue as string, false);
-  }
-);
-
-const { onAttachmentSelect } = useAttachmentSelect(editor);
-
-const handleGenerateTableOfContent = () => {
-  if (!editor.value) {
-    return;
-  }
-
-  const headings: HeadingNode[] = [];
-  const transaction = editor.value.state.tr;
-
-  editor.value.state.doc.descendants((node, pos) => {
-    if (node.type.name === "heading") {
-      const id = `heading-${headings.length + 1}`;
-
-      if (node.attrs.id !== id) {
-        transaction?.setNodeMarkup(pos, undefined, {
-          ...node.attrs,
-          id,
-        });
-      }
-
-      headings.push({
-        level: node.attrs.level,
-        text: node.textContent,
-        id,
-      });
-    }
-  });
-
-  transaction.setMeta("addToHistory", false);
-  transaction.setMeta("preventUpdate", true);
-
-  editor.value.view.dispatch(transaction);
-
-  headingNodes.value = headings;
-
-  if (!selectedHeadingNode.value) {
-    selectedHeadingNode.value = headings[0];
-  }
-};
-
-const handleSelectHeadingNode = (node: HeadingNode) => {
-  selectedHeadingNode.value = node;
-  document.getElementById(node.id)?.scrollIntoView({ behavior: "smooth" });
-};
-
 const handleSave = async () => {
   try {
     saving.value = true;
@@ -261,7 +132,6 @@ onMounted(async () => {
 
     // fetch post content
     await handleFetchContent();
-    handleGenerateTableOfContent();
   }
 });
 </script>
@@ -273,10 +143,6 @@ onMounted(async () => {
     @saved="onSettingSaved"
   />
   <PostPreviewModal v-model:visible="previewModal" :post="formState.post" />
-  <AttachmentSelectorModal
-    v-model:visible="attachmentSelectorModal"
-    @select="onAttachmentSelect"
-  />
   <VPageHeader title="文章">
     <template #icon>
       <IconBookRead class="mr-2 self-center" />
@@ -305,167 +171,11 @@ onMounted(async () => {
     </template>
   </VPageHeader>
   <div class="editor border-t" style="height: calc(100vh - 3.5rem)">
-    <RichTextEditor
-      v-if="editor"
-      :editor="editor"
-      :additional-menu-items="[
-        {
-          type: 'button',
-          icon: MdiFileImageBox,
-          title: 'SuperScript',
-          action: () => (attachmentSelectorModal = true),
-          isActive: () => false,
-        },
-      ]"
-    >
-      <template #extra>
-        <div class="h-full w-72 overflow-y-auto border-l bg-white">
-          <VTabs v-model:active-id="extraActiveId" type="outline">
-            <VTabItem id="toc" label="大纲">
-              <div class="p-1 pt-0">
-                <ul class="space-y-1">
-                  <li
-                    v-for="(node, index) in headingNodes"
-                    :key="index"
-                    :class="[
-                      { 'bg-gray-100': node.id === selectedHeadingNode?.id },
-                    ]"
-                    class="group cursor-pointer truncate rounded-base px-1.5 py-1 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
-                    @click="handleSelectHeadingNode(node)"
-                  >
-                    <div
-                      :style="{
-                        paddingLeft: `${(node.level - 1) * 0.8}rem`,
-                      }"
-                      class="flex items-center gap-2"
-                    >
-                      <component
-                        :is="headingIcons[node.level]"
-                        class="h-4 w-4 rounded-sm bg-gray-100 p-0.5 group-hover:bg-white"
-                        :class="[
-                          { '!bg-white': node.id === selectedHeadingNode?.id },
-                        ]"
-                      />
-                      <span class="flex-1 truncate">{{ node.text }}</span>
-                    </div>
-                  </li>
-                </ul>
-              </div>
-            </VTabItem>
-            <VTabItem id="information" label="详情">
-              <div class="flex flex-col gap-2 p-1 pt-0">
-                <div class="grid grid-cols-2 gap-2">
-                  <div
-                    class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
-                  >
-                    <div class="flex items-center justify-between">
-                      <div
-                        class="text-sm text-gray-500 group-hover:text-gray-900"
-                      >
-                        字符数
-                      </div>
-                      <div class="rounded bg-gray-200 p-0.5">
-                        <IconCharacterRecognition
-                          class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
-                        />
-                      </div>
-                    </div>
-                    <div class="text-base font-medium text-gray-900">
-                      {{ editor.storage.characterCount.characters() }}
-                    </div>
-                  </div>
-                  <div
-                    class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
-                  >
-                    <div class="flex items-center justify-between">
-                      <div
-                        class="text-sm text-gray-500 group-hover:text-gray-900"
-                      >
-                        词数
-                      </div>
-                      <div class="rounded bg-gray-200 p-0.5">
-                        <IconCharacterRecognition
-                          class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
-                        />
-                      </div>
-                    </div>
-                    <div class="text-base font-medium text-gray-900">
-                      {{ editor.storage.characterCount.words() }}
-                    </div>
-                  </div>
-                </div>
-
-                <div class="grid grid-cols-1 gap-2">
-                  <div
-                    class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
-                  >
-                    <div class="flex items-center justify-between">
-                      <div
-                        class="text-sm text-gray-500 group-hover:text-gray-900"
-                      >
-                        发布时间
-                      </div>
-                      <div class="rounded bg-gray-200 p-0.5">
-                        <IconCalendar
-                          class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
-                        />
-                      </div>
-                    </div>
-                    <div class="text-base font-medium text-gray-900">
-                      {{
-                        formatDatetime(formState.post.spec.publishTime) ||
-                        "未发布"
-                      }}
-                    </div>
-                  </div>
-                </div>
-                <div class="grid grid-cols-1 gap-2">
-                  <div
-                    class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
-                  >
-                    <div class="flex items-center justify-between">
-                      <div
-                        class="text-sm text-gray-500 group-hover:text-gray-900"
-                      >
-                        创建者
-                      </div>
-                      <div class="rounded bg-gray-200 p-0.5">
-                        <IconUserFollow
-                          class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
-                        />
-                      </div>
-                    </div>
-                    <div class="text-base font-medium text-gray-900">
-                      {{ formState.post.spec.owner }}
-                    </div>
-                  </div>
-                </div>
-                <div class="grid grid-cols-1 gap-2">
-                  <div
-                    class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
-                  >
-                    <div class="flex items-center justify-between">
-                      <div
-                        class="text-sm text-gray-500 group-hover:text-gray-900"
-                      >
-                        访问链接
-                      </div>
-                      <div class="rounded bg-gray-200 p-0.5">
-                        <IconLink
-                          class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
-                        />
-                      </div>
-                    </div>
-                    <div class="text-sm text-gray-900 hover:text-blue-600">
-                      {{ formState.post.status?.["permalink"] }}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </VTabItem>
-          </VTabs>
-        </div>
-      </template>
-    </RichTextEditor>
+    <DefaultEditor
+      v-model="formState.content.raw"
+      :owner="formState.post.spec.owner"
+      :permalink="formState.post.status?.permalink"
+      :publish-time="formState.post.spec.publishTime"
+    />
   </div>
 </template>