From: Pietro Bonaldo Gregori <redacted>
Date: Sun, 2 Jul 2023 13:24:03 +0000 (+0000)
Subject: Assign ID to headers with CustomHTMLRenderer (#84)
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=82f20fe627a4c28b19ea63ff004bc658bc785f93;p=flatnotes.git

Assign ID to headers with CustomHTMLRenderer (#84)
---

diff --git a/flatnotes/src/components/NoteViewerEditor.vue b/flatnotes/src/components/NoteViewerEditor.vue
index b1a42e4..f3225d7 100644
--- 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] },
     };
   },