Add visible and clickable links for the page anchors

Handle inter-page links properly and use a heading view
for displaying links and link anchors. Implements #2173

Also fix link handling, to scroll to selected header when
clicking on an anchor link (`#some-id`).

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>

src/helpers/links.js

@@ -56,6 +56,9 @@ const domHref = function(node) {
 	if (ref.match(/^[a-zA-Z]*:/)) {
 		return ref
 	}
+	if (ref.startsWith('#')) {
+		return ref
+	}
 	const match = ref.match(/^([^?]*)\?fileId=(\d+)/)
 	if (match) {
 		const [, relPath, id] = match
@@ -82,9 +85,10 @@ const openLink = function(event, _attrs) {
 	const linkElement = event.target.closest('a')
 	const htmlHref = linkElement.href
 	const query = OC.parseQueryString(htmlHref)
-	const fragment = OC.parseQueryString(htmlHref.split('#').pop())
-	if (query.dir && fragment.relPath) {
-		const filename = fragment.relPath.split('/').pop()
+	const fragment = htmlHref.split('#').pop()
+	const fragmentQuery = OC.parseQueryString(fragment)
+	if (query?.dir && fragmentQuery?.relPath) {
+		const filename = fragmentQuery.relPath.split('/').pop()
 		const path = `${query.dir}/${filename}`
 		document.title = `${filename} - ${OC.theme.title}`
 		if (window.location.pathname.match(/apps\/files\/$/)) {
@@ -95,7 +99,7 @@ const openLink = function(event, _attrs) {
 		OCA.Viewer.open({ path })
 		return
 	}
-	if (query.fileId) {
+	if (query?.fileId) {
 		// open the direct file link
 		window.open(generateUrl(`/f/${query.fileId}`))
 		return
@@ -104,6 +108,13 @@ const openLink = function(event, _attrs) {
 		console.error('Invalid link', htmlHref)
 		return false
 	}
+	if (fragment) {
+		const el = document.getElementById(fragment)
+		if (el) {
+			el.scrollIntoView()
+			return
+		}
+	}
 	window.open(htmlHref)
 	return true
 }

src/nodes/Heading/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', 'Link to this section')"
+			@click.stop="click">{{ linkSymbol }}</a>
+		<NodeViewContent />
+	</NodeViewWrapper>
+</template>
+
+<script>
+import Vue from 'vue'
+import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'
+import { useEditorMixin } from '../../components/Editor.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.45;
+		}
+	}
+
+	// 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/nodes/Heading/index.js

@@ -1,8 +1,18 @@
 import TipTapHeading from '@tiptap/extension-heading'
+import { VueNodeViewRenderer } from '@tiptap/vue-2'
 import debounce from 'debounce'
+
+import HeadingView from './HeadingView.vue'
 import { setHeadings, extractHeadings } from './extractor.js'
 
 const Heading = TipTapHeading.extend({
+	addOptions() {
+		return {
+			...this.parent?.(),
+			linkSymbol: '#',
+		}
+	},
+
 	addAttributes() {
 		return {
 			...this.parent(),
@@ -16,6 +26,11 @@ const Heading = TipTapHeading.extend({
 			},
 		}
 	},
+
+	addNodeView() {
+		return VueNodeViewRenderer(HeadingView)
+	},
+
 	addKeyboardShortcuts() {
 		return this.options.levels.reduce((items, level) => ({
 			...items,

src/plugins/link.js

@@ -15,7 +15,6 @@ const clickHandler = ({ editor, type, onClick }) => {
 					console.debug(link)
 					return false
 				}
-
 				// We use custom onClick handler only for left clicks
 				if (event.button === 0 && !event.ctrlKey) {
 					event.stopPropagation()