Assign ID to headers with CustomHTMLRenderer (dullage#84)

Gedulis12 · Aug 7, 2023 · 26e6b56 · 26e6b56
1 parent 851c640
commit 26e6b56
Showing 1 changed file with 26 additions and 1 deletion.
diff --git a/flatnotes/src/components/NoteViewerEditor.vue b/flatnotes/src/components/NoteViewerEditor.vue
@@ -178,6 +178,27 @@ import { Viewer } from "@toast-ui/vue-editor";
 import api from "../api";
 import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js";
 
+const customHTMLRenderer = {
+  heading( node, { entering, getChildrenText } ) {
+    const tagName = `h${node.level}`;
+
+    if (entering) {
+      return {
+        type: 'openTag',
+        tagName,
+        attributes: {
+          id: getChildrenText(node)
+    	      .toLowerCase()
+              .replace(/[^a-z0-9-\s]*/g, '')
+              .trim()
+              .replace(/\s/g, '-')
+        }
+      };
+    }
+    return { type: 'closeTag', tagName };
+  }
+};
+
 export default {
   components: {
     Viewer,
@@ -190,6 +211,7 @@ export default {
   },
 
   data: function () {
+
     return {
       editMode: false,
       draftSaveTimeout: null,
@@ -200,10 +222,13 @@ export default {
       noteLoadFailedIcon: null,
       noteLoadFailedMessage: "Failed to load Note",
       viewerOptions: {
+	customHTMLRenderer: customHTMLRenderer,
         plugins: [codeSyntaxHighlight],
         extendedAutolinks: true,
       },
-      editorOptions: { plugins: [codeSyntaxHighlight] },
+      editorOptions: {
+        customHTMLRenderer: customHTMLRenderer,
+        plugins: [codeSyntaxHighlight] },
     };
   },