From 87059c9b462348aaa70226b59061dcdf8f72a7a3 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Thu, 11 Mar 2021 00:47:58 +0100
Subject: [PATCH 1/3] add anchors to table of contents (wip)

---
 .../NodeViews/TableOfContents/Component.vue   | 40 +++++++++++++++----
 .../TableOfContents/TableOfContents.js        | 15 +++++++
 .../Guide/NodeViews/TableOfContents/index.vue |  2 +-
 3 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/docs/src/demos/Guide/NodeViews/TableOfContents/Component.vue b/docs/src/demos/Guide/NodeViews/TableOfContents/Component.vue
index 00dcfb3f..22ea1f62 100644
--- a/docs/src/demos/Guide/NodeViews/TableOfContents/Component.vue
+++ b/docs/src/demos/Guide/NodeViews/TableOfContents/Component.vue
@@ -7,7 +7,9 @@
         v-for="(heading, index) in headings"
         :key="index"
       >
-        {{ heading.text }}
+        <a :href="`#${heading.id}`">
+          {{ heading.text }}
+        </a>
       </li>
     </ul>
   </node-view-wrapper>
@@ -38,17 +40,41 @@ export default {
     handleUpdate() {
       const headings = []
 
-      this.editor.state.doc.descendants(node => {
+      this.editor.state.doc.descendants((node, pos) => {
         if (node.type.name === 'heading') {
+          const id = `heading-${headings.length + 1}`
+
+          if (node.attrs.id !== id) {
+            this.updateNodeAttributes(node, pos, {
+              id,
+            })
+          }
+
           headings.push({
             level: node.attrs.level,
             text: node.textContent,
+            id,
           })
         }
       })
 
       this.headings = headings
     },
+    updateNodeAttributes(node, pos, attributes) {
+      const { state } = this.editor.view
+      const transaction = state.tr.setNodeMarkup(pos, undefined, {
+        ...node.attrs,
+        ...attributes,
+      })
+
+      console.log(pos, undefined, {
+        ...node.attrs,
+        ...attributes,
+      })
+
+      // TODO: Why is that not needed? 🤔
+      this.editor.view.dispatch(transaction)
+    },
   },
 
   mounted() {
@@ -58,10 +84,6 @@ export default {
 }
 </script>
 
-<style>
-
-</style>
-
 <style lang="scss">
 /* Basic editor styles */
 .ProseMirror {
@@ -84,7 +106,7 @@ export default {
 
     &::before {
       display: block;
-      content: "In this document";
+      content: "Table of Contents";
       font-weight: 700;
       letter-spacing: 0.025rem;
       font-size: 0.75rem;
@@ -94,6 +116,10 @@ export default {
   }
 
   &__item {
+    a:hover {
+      opacity: 0.5;
+    }
+
     &--3 {
       padding-left: 1rem;
     }
diff --git a/docs/src/demos/Guide/NodeViews/TableOfContents/TableOfContents.js b/docs/src/demos/Guide/NodeViews/TableOfContents/TableOfContents.js
index 94a612c4..c686545f 100644
--- a/docs/src/demos/Guide/NodeViews/TableOfContents/TableOfContents.js
+++ b/docs/src/demos/Guide/NodeViews/TableOfContents/TableOfContents.js
@@ -24,4 +24,19 @@ export default Node.create({
   addNodeView() {
     return VueNodeViewRenderer(Component)
   },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: [
+          'heading',
+        ],
+        attributes: {
+          id: {
+            default: null,
+          },
+        },
+      },
+    ]
+  },
 })
diff --git a/docs/src/demos/Guide/NodeViews/TableOfContents/index.vue b/docs/src/demos/Guide/NodeViews/TableOfContents/index.vue
index 9db45b5f..2b8cb8b4 100644
--- a/docs/src/demos/Guide/NodeViews/TableOfContents/index.vue
+++ b/docs/src/demos/Guide/NodeViews/TableOfContents/index.vue
@@ -27,7 +27,6 @@ export default {
         TableOfContents,
       ],
       content: `
-        <toc></toc>
         <h2>1 heading</h2>
         <p>paragraph</p>
         <h3>1.1 heading</h3>
@@ -38,6 +37,7 @@ export default {
         <p>paragraph</p>
         <h3>2.1 heading</h3>
         <p>paragraph</p>
+        <toc></toc>
       `,
     })
   },

From c592dca6c0d508bf9f3b1c204794adcd44ef7376 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Fri, 12 Mar 2021 21:05:38 +0100
Subject: [PATCH 2/3] clean up

---
 .../src/demos/Guide/NodeViews/TableOfContents/Component.vue | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/docs/src/demos/Guide/NodeViews/TableOfContents/Component.vue b/docs/src/demos/Guide/NodeViews/TableOfContents/Component.vue
index 22ea1f62..980dbbac 100644
--- a/docs/src/demos/Guide/NodeViews/TableOfContents/Component.vue
+++ b/docs/src/demos/Guide/NodeViews/TableOfContents/Component.vue
@@ -67,12 +67,6 @@ export default {
         ...attributes,
       })
 
-      console.log(pos, undefined, {
-        ...node.attrs,
-        ...attributes,
-      })
-
-      // TODO: Why is that not needed? 🤔
       this.editor.view.dispatch(transaction)
     },
   },

From 5f54a86da7329410b35da36d609c06971594ded0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 12 Mar 2021 23:52:54 +0100
Subject: [PATCH 3/3] fix bug

---
 .../NodeViews/TableOfContents/Component.vue   | 23 ++++++-------------
 .../Guide/NodeViews/TableOfContents/index.vue |  2 +-
 2 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/docs/src/demos/Guide/NodeViews/TableOfContents/Component.vue b/docs/src/demos/Guide/NodeViews/TableOfContents/Component.vue
index 22ea1f62..07e6e780 100644
--- a/docs/src/demos/Guide/NodeViews/TableOfContents/Component.vue
+++ b/docs/src/demos/Guide/NodeViews/TableOfContents/Component.vue
@@ -39,13 +39,15 @@ export default {
   methods: {
     handleUpdate() {
       const headings = []
+      const transaction = this.editor.state.tr
 
       this.editor.state.doc.descendants((node, pos) => {
         if (node.type.name === 'heading') {
           const id = `heading-${headings.length + 1}`
 
           if (node.attrs.id !== id) {
-            this.updateNodeAttributes(node, pos, {
+            transaction.setNodeMarkup(pos, undefined, {
+              ...node.attrs,
               id,
             })
           }
@@ -58,28 +60,17 @@ export default {
         }
       })
 
-      this.headings = headings
-    },
-    updateNodeAttributes(node, pos, attributes) {
-      const { state } = this.editor.view
-      const transaction = state.tr.setNodeMarkup(pos, undefined, {
-        ...node.attrs,
-        ...attributes,
-      })
+      transaction.setMeta('preventUpdate', true)
 
-      console.log(pos, undefined, {
-        ...node.attrs,
-        ...attributes,
-      })
-
-      // TODO: Why is that not needed? 🤔
       this.editor.view.dispatch(transaction)
+
+      this.headings = headings
     },
   },
 
   mounted() {
     this.editor.on('update', this.handleUpdate)
-    this.handleUpdate()
+    this.$nextTick(this.handleUpdate)
   },
 }
 </script>
diff --git a/docs/src/demos/Guide/NodeViews/TableOfContents/index.vue b/docs/src/demos/Guide/NodeViews/TableOfContents/index.vue
index 2b8cb8b4..9db45b5f 100644
--- a/docs/src/demos/Guide/NodeViews/TableOfContents/index.vue
+++ b/docs/src/demos/Guide/NodeViews/TableOfContents/index.vue
@@ -27,6 +27,7 @@ export default {
         TableOfContents,
       ],
       content: `
+        <toc></toc>
         <h2>1 heading</h2>
         <p>paragraph</p>
         <h3>1.1 heading</h3>
@@ -37,7 +38,6 @@ export default {
         <p>paragraph</p>
         <h3>2.1 heading</h3>
         <p>paragraph</p>
-        <toc></toc>
       `,
     })
   },