Feature: Add IDs to headings to allow inter-page links

Implements the anchors needed for inter-page links, closes #2173.
IDs are generated using a similar slugify function github and
gitlab use.
For initial content markdownit-anchor is used.

Signed-off-by: Ferdinand Thiessen <[email protected]>

package.json

@@ -69,7 +69,8 @@
 		"escape-html": "^1.0.3",
 		"highlight.js": "^10.7.2",
 		"lowlight": "^1.20.0",
-		"markdown-it": "^13.0.0",
+		"markdown-it": "^13.0.1",
+		"markdown-it-anchor": "^8.6.4",
 		"markdown-it-container": "^3.0.0",
 		"markdown-it-task-lists": "^2.1.1",
 		"prosemirror-collab": "^1.2.2",

src/markdownit/index.js

@@ -1,15 +1,22 @@
 import MarkdownIt from 'markdown-it'
+import anchor from 'markdown-it-anchor'
 import taskLists from 'markdown-it-task-lists'
 import underline from './underline.js'
 import splitMixedLists from './splitMixedLists.js'
 import callouts from './callouts.js'
 
+import { slugify } from '../nodes/Heading.js'
+
 const markdownit = MarkdownIt('commonmark', { html: false, breaks: false })
 	.enable('strikethrough')
 	.enable('table')
 	.use(taskLists, { enable: true, labelAfter: true })
 	.use(splitMixedLists)
 	.use(underline)
 	.use(callouts)
+	.use(anchor, {
+		level: 1,
+		slugify,
+	})
 
 export default markdownit

src/nodes/Heading.js

@@ -1,6 +1,21 @@
 import TipTapHeading from '@tiptap/extension-heading'
+import { Plugin } from 'prosemirror-state'
 
-const Heading = TipTapHeading.extend({
+// Same style as used by gitlab and github, both support unicode letters (incl. mark)
+const slugify = (str) => String(str).toLowerCase().replace(/[^\p{Letter}\p{Mark}\w\s-]/gu, '').trim().replace(/\s+/g, '-')
+
+const uniqueSlug = (slug, slugs) => {
+	let uniq = slug
+	let idx = 1
+	while (Object.prototype.hasOwnProperty.call(slugs, uniq)) {
+		uniq = `${slug}-${idx}`
+		idx += 1
+	}
+	slugs[uniq] = true
+	return uniq
+}
+
+const HeadingWithAnchor = TipTapHeading.extend({
 
 	addKeyboardShortcuts() {
 		return this.options.levels.reduce((items, level) => ({
@@ -9,6 +24,56 @@ const Heading = TipTapHeading.extend({
 		}), {})
 	},
 
+	addStorage() {
+		return {
+			slugs: {}, // used for the parseHTML function
+		}
+	},
+
+	addAttributes() {
+		return {
+			...this.parent?.(),
+			tabindex: {
+				default: -1,
+			},
+			id: {
+				default: null,
+				parseHTML: (element) => {
+					return uniqueSlug(slugify(element.innerText), this.storage.slugs)
+				},
+			},
+		}
+	},
+
+	addProseMirrorPlugins() {
+		return [
+			new Plugin({
+				appendTransaction(transactions, oldState, newState) {
+					const slugs = {}
+					const tr = newState.tr
+					let modified = false
+
+					newState.doc.descendants(
+						(node, pos) => {
+							if (node.type.name === TipTapHeading.name) {
+								if (node.textContent.length > 0) {
+									const slug = uniqueSlug(slugify(node.textContent), slugs)
+									if (node.attrs?.id !== slug) {
+										tr.setNodeMarkup(pos, undefined, { ...node.attrs, id: slug })
+										modified = true
+									}
+								}
+								return false
+							}
+							return true
+						}
+					)
+					return modified ? tr : null
+				},
+			}),
+		]
+	},
 })
 
-export default Heading
+export { slugify, HeadingWithAnchor }
+export default HeadingWithAnchor