Feature: Add page anchors and inter page links

css/prosemirror.scss

@@ -256,6 +256,33 @@ 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;
+			}
+		}
+	}
+
 }
 
 .ProseMirror-focused .ProseMirror-gapcursor {

package.json

@@ -70,7 +70,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/EditorFactory.js

@@ -40,6 +40,10 @@ import TableHeadRow from './nodes/TableHeadRow.js'
 import TableRow from './nodes/TableRow.js'
 /* eslint-enable import/no-named-as-default */
 
+// fixing "The type 'EditorState' is undefined"
+import { EditorState } from 'prosemirror-state'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+
 import { Editor } from '@tiptap/core'
 import { Strong, Italic, Strike, Link, Underline } from './marks/index.js'
 import {
@@ -76,7 +80,32 @@ const loadSyntaxHighlight = async (language) => {
 	}
 }
 
-const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditing, currentDirectory }) => {
+const editorDecorations = (/** @param {EditorState} state */ state) => {
+	const decorations = []
+	state.doc.descendants((node, pos) => {
+		if (node.type.name === Heading.name && node.attrs?.id) {
+			decorations.push(
+				Decoration.widget(pos + 1, () => {
+					const link = document.createElement('a')
+					link.ariaHidden = true
+					link.href = `#${node.attrs.id}`
+					link.classList.add('anchor-link')
+					link.title = t('text', 'Permalink')
+					link.appendChild(document.createTextNode('#'))
+					return link
+				}, {
+					side: -1,
+					key: `${pos}#${node.attrs.id}`, // Prevent decoration rendering loops
+				})
+			)
+			return false
+		}
+		return true
+	})
+	return decorations.length > 0 ? DecorationSet.create(state.doc, decorations) : null
+}
+
+const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditing, currentDirectory, isRichWorkspace }) => {
 	let richEditingExtensions = []
 	if (enableRichEditing) {
 		richEditingExtensions = [
@@ -169,7 +198,7 @@ const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditi
 		]
 	}
 	extensions = extensions || []
-	return new Editor({
+	const editor = new Editor({
 		content,
 		onCreate,
 		onUpdate,
@@ -179,6 +208,12 @@ const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditi
 			...richEditingExtensions,
 		].concat(extensions),
 	})
+
+	if (!isRichWorkspace) {
+		editor.view.props.decorations = editorDecorations
+	}
+
+	return editor
 }
 
 const SerializeException = function(message) {

src/components/EditorWrapper.vue

@@ -408,6 +408,7 @@ export default {
 					loadSyntaxHighlight(language).then(() => {
 						this.$editor = createEditor({
 							content,
+							isRichWorkspace: this.isRichWorkspace,
 							onCreate: ({ editor }) => {
 								this.$syncService.state = editor.state
 								this.$syncService.startSync()

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

src/plugins/link.js

@@ -19,6 +19,12 @@ const clickHandler = ({ editor }) => {
 					event.stopPropagation()
 
 					if (event.button === 0 && !event.ctrlKey && htmlHref.startsWith(window.location.origin)) {
+						if (window.location.href.split('#')[0] === htmlHref.split('#')[0]) {
+							// Inter-page link, so move to location
+							window.open(htmlHref, '_self')
+							return
+						}
+
 						const query = OC.parseQueryString(htmlHref)
 						const fragment = OC.parseQueryString(htmlHref.split('#').pop())
 						if (query.dir && fragment.relPath) {