Feature: Add page anchors and inter page links

package.json

@@ -78,6 +78,7 @@
     "@tiptap/suggestion": "^2.0.0-beta.97",
     "@tiptap/vue-2": "^2.0.0-beta.84",
     "markdown-it": "^13.0.1",
+    "markdown-it-anchor": "^8.6.4",
     "markdown-it-container": "^3.0.0",
     "markdown-it-front-matter": "^0.2.3",
     "path-normalize": "^6.0.6",

src/markdownit/index.js

@@ -1,10 +1,13 @@
 import MarkdownIt from 'markdown-it'
+import anchor from 'markdown-it-anchor'
 import taskLists from '@hedgedoc/markdown-it-task-lists'
 import underline from './underline.js'
 import splitMixedLists from './splitMixedLists.js'
 import callouts from './callouts.js'
 import keepSyntax from './keepSyntax.js'
 
+import { slugify } from '../nodes/Heading/slug.js'
+
 const markdownit = MarkdownIt('commonmark', { html: false, breaks: false })
 	.enable('strikethrough')
 	.enable('table')
@@ -13,5 +16,9 @@ const markdownit = MarkdownIt('commonmark', { html: false, breaks: false })
 	.use(underline)
 	.use(callouts)
 	.use(keepSyntax)
+	.use(anchor, {
+		level: 1,
+		slugify,
+	})
 
 export default markdownit

src/nodes/Heading/index.js

@@ -3,6 +3,13 @@ import debounce from 'debounce'
 import { setHeadings, extractHeadings } from './extractor.js'
 
 const Heading = TipTapHeading.extend({
+	addOptions() {
+		return {
+			...this.parent?.(),
+			linkSymbol: '#',
+		}
+	},
+
 	addAttributes() {
 		return {
 			...this.parent(),
@@ -16,6 +23,7 @@ const Heading = TipTapHeading.extend({
 			},
 		}
 	},
+
 	addKeyboardShortcuts() {
 		return this.options.levels.reduce((items, level) => ({
 			...items,

src/nodes/HeadingView.vue

@@ -0,0 +1,112 @@
+<!--
+  - @copyright Copyright (c) 2022
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<NodeViewWrapper ref="content"
+		:as="domElement"
+		v-bind="node.attrs"
+		tabindex="-1">
+		<a aria-hidden="true"
+			class="anchor-link"
+			:href="href"
+			:title="t('text', 'Permalink')"
+			@click.stop="click">{{ linkSymbol }}</a>
+		<NodeViewContent />
+	</NodeViewWrapper>
+</template>
+
+<script>
+import Vue from 'vue'
+import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'
+import { useEditorMixin } from '../components/EditorWrapper.provider.js'
+
+export default Vue.extend({
+	name: 'HeadingView',
+	components: {
+		NodeViewWrapper,
+		NodeViewContent,
+	},
+	mixins: [useEditorMixin],
+	props: {
+		node: {
+			type: Object,
+			required: true,
+		},
+		extension: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	computed: {
+		href() {
+			return `#${this.node.attrs.id}`
+		},
+		domElement() {
+			const hasLevel = this.extension.options.levels.includes(this.node.attrs.level)
+			const level = hasLevel ? this.node.attrs.level : this.extension.options.levels[0]
+			return `h${level}`
+		},
+		linkSymbol() {
+			return this.extension.options.linkSymbol
+		},
+		t: () => window.t,
+	},
+
+	methods: {
+		click() {
+			this.$refs.content.$el.scrollIntoView()
+			window.location.hash = this.href
+		},
+	},
+})
+</script>
+
+<style scoped lang="scss">
+div.ProseMirror {
+	/* Anchor links */
+	h1, h2, h3, h4, h5, h6 {
+		.anchor-link {
+			opacity: 0;
+			padding: 0;
+			left: -18px;
+			font-size: max(1em, 16px);
+			position: absolute;
+			text-decoration: none;
+			transition-duration: .15s;
+			transition-property: opacity;
+			transition-timing-function: cubic-bezier(.4,0,.2,1);
+		}
+
+		&:hover .anchor-link {
+			opacity: 0.25;
+		}
+	}
+
+	// Shrink clickable area of anchor permalinks while editing
+	&.ProseMirror-focused[contenteditable="true"] {
+		h1,h2,h3,h4,h5,h6 {
+			.anchor-link {
+				width: fit-content;
+			}
+		}
+	}
+}
+</style>

src/tests/markdown.spec.js

@@ -45,8 +45,13 @@ describe('Commonmark', () => {
 			const expected = entry.markdown.includes('__')
 				? entry.html.replace(/<strong>/g, '<u>').replace(/<\/strong>/g, '</u>')
 				: entry.html
-			// Ignore special markup for untouched markdown
-			expect(markdownit.render(entry.markdown).replace(/<span class="keep-md">([^<]+)<\/span>/g, '$1')).toBe(expected)
+			try {
+				// Ignore special markup for untouched markdown
+				expect(markdownit.render(entry.markdown).replace(/<span class="keep-md">([^<]+)<\/span>/g, '$1')).toBe(expected)
+			} catch {
+				// Header anchors
+				expect(markdownit.render(entry.markdown).replace(/ id=\"[^\"]*\" tabindex=\"-1\"/g, '')).toBe(expected)
+			}
 		})
 	})
 })