fix: resolve the issue of generated titles missing id

console/packages/editor/src/extensions/heading/index.ts

@@ -1,4 +1,4 @@
-import type { Editor, Range } from "@/tiptap/vue-3";
+import { mergeAttributes, type Editor, type Range } from "@/tiptap/vue-3";
 import TiptapParagraph from "@/extensions/paragraph";
 import TiptapHeading from "@tiptap/extension-heading";
 import type { HeadingOptions } from "@tiptap/extension-heading";
@@ -15,8 +15,24 @@ import MdiFormatHeader6 from "~icons/mdi/format-header-6";
 import { markRaw } from "vue";
 import { i18n } from "@/locales";
 import type { ExtensionOptions } from "@/types";
+import { Decoration, DecorationSet, Plugin, PluginKey } from "@/tiptap";
+import { ExtensionHeading } from "..";
+import { generateAnchor } from "@/utils";
 
 const Blockquote = TiptapHeading.extend<ExtensionOptions & HeadingOptions>({
+  renderHTML({ node, HTMLAttributes }) {
+    const hasLevel = this.options.levels.includes(node.attrs.level);
+    const level = hasLevel ? node.attrs.level : this.options.levels[0];
+    const id = generateAnchor(node.textContent);
+    HTMLAttributes.id = id;
+
+    return [
+      `h${level}`,
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      0,
+    ];
+  },
+
   addOptions() {
     return {
       ...this.parent?.(),
@@ -265,6 +281,32 @@ const Blockquote = TiptapHeading.extend<ExtensionOptions & HeadingOptions>({
   addExtensions() {
     return [TiptapParagraph];
   },
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey("generate-heading-id"),
+        props: {
+          decorations: (state) => {
+            const { doc } = state;
+            const decorations: Decoration[] = [];
+            doc.descendants((node, pos) => {
+              if (node.type.name === ExtensionHeading.name) {
+                const id = generateAnchor(node.textContent);
+                if (node.attrs.id !== id) {
+                  decorations.push(
+                    Decoration.node(pos, pos + node.nodeSize, {
+                      id,
+                    })
+                  );
+                }
+              }
+            });
+            return DecorationSet.create(doc, decorations);
+          },
+        },
+      }),
+    ];
+  },
 });
 
 export default Blockquote;

console/packages/editor/src/utils/index.ts

@@ -1 +1,2 @@
 export * from "./delete-node";
+export * from "./anchor";

console/src/components/editor/DefaultEditor.vue

@@ -47,7 +47,6 @@ import {
   ToolbarItem,
   Plugin,
   PluginKey,
-  Decoration,
   DecorationSet,
 } from "@halo-dev/richtext-editor";
 import {
@@ -90,7 +89,6 @@ import type { PluginModule } from "@halo-dev/console-shared";
 import { useDebounceFn, useLocalStorage } from "@vueuse/core";
 import { onBeforeUnmount } from "vue";
 import { usePermission } from "@/utils/permission";
-import { generateAnchor } from "@/utils/anchor";
 
 const { t } = useI18n();
 const { currentUserHasPermission } = usePermission();
@@ -295,35 +293,25 @@ onMounted(() => {
         addProseMirrorPlugins() {
           return [
             new Plugin({
-              key: new PluginKey("generate-heading-id"),
+              key: new PluginKey("get-heading-id"),
               props: {
                 decorations: (state) => {
                   const headings: HeadingNode[] = [];
                   const { doc } = state;
-                  const decorations: Decoration[] = [];
-                  doc.descendants((node, pos) => {
+                  doc.descendants((node) => {
                     if (node.type.name === ExtensionHeading.name) {
-                      const id = generateAnchor(node.textContent);
-                      if (node.attrs.id !== id) {
-                        decorations.push(
-                          Decoration.node(pos, pos + node.nodeSize, {
-                            id,
-                          })
-                        );
-                      }
-
                       headings.push({
                         level: node.attrs.level,
                         text: node.textContent,
-                        id,
+                        id: node.attrs.id,
                       });
                     }
                   });
                   headingNodes.value = headings;
                   if (!selectedHeadingNode.value) {
                     selectedHeadingNode.value = headings[0];
                   }
-                  return DecorationSet.create(doc, decorations);
+                  return DecorationSet.empty;
                 },
               },
             }),