From 42256a80db25fd655cb99ca105ca45655032e5bf Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Mon, 15 Jan 2024 11:52:10 +0100
Subject: [PATCH] feat(editor): Use custom implementation of a bubble plugin
 for the link bubble

Signed-off-by: Jonas <jonas@freesources.org>
---
 src/components/Editor/ContentContainer.vue    |   3 -
 ...{LinkViewBubble.vue => LinkBubbleView.vue} | 251 ++++++++++--------
 src/extensions/LinkBubble.js                  |  27 ++
 src/extensions/LinkBubblePluginView.js        | 225 ++++++++++++++++
 src/extensions/RichText.js                    |   2 +
 5 files changed, 387 insertions(+), 121 deletions(-)
 rename src/components/Link/{LinkViewBubble.vue => LinkBubbleView.vue} (52%)
 create mode 100644 src/extensions/LinkBubble.js
 create mode 100644 src/extensions/LinkBubblePluginView.js

diff --git a/src/components/Editor/ContentContainer.vue b/src/components/Editor/ContentContainer.vue
index 8d0311e0a02..9daf5e587e5 100644
--- a/src/components/Editor/ContentContainer.vue
+++ b/src/components/Editor/ContentContainer.vue
@@ -34,7 +34,6 @@
 			role="document"
 			class="editor__content text-editor__content"
 			:editor="$editor" />
-		<LinkViewBubble />
 		<div class="text-editor__content-wrapper__right" />
 	</div>
 </template>
@@ -44,14 +43,12 @@ import { EditorContent } from '@tiptap/vue-2'
 import { useEditorMixin } from '../Editor.provider.js'
 import { useOutlineStateMixin } from './Wrapper.provider.js'
 import EditorOutline from './EditorOutline.vue'
-import LinkViewBubble from '../Link/LinkViewBubble.vue'
 
 export default {
 	name: 'ContentContainer',
 	components: {
 		EditorContent,
 		EditorOutline,
-		LinkViewBubble,
 	},
 	mixins: [useEditorMixin, useOutlineStateMixin],
 	computed: {
diff --git a/src/components/Link/LinkViewBubble.vue b/src/components/Link/LinkBubbleView.vue
similarity index 52%
rename from src/components/Link/LinkViewBubble.vue
rename to src/components/Link/LinkBubbleView.vue
index ffab138f0cd..30368d79e30 100644
--- a/src/components/Link/LinkViewBubble.vue
+++ b/src/components/Link/LinkBubbleView.vue
@@ -1,89 +1,96 @@
 <template>
-	<BubbleMenu v-if="$editor"
-		ref="bubbleContainer"
-		:editor="$editor"
-		:should-show="shouldShow"
-		:tippy-options="tippyOptions()"
-		class="link-view-bubble">
-		<div :key="key">
-			<div class="link-view-bubble__header">
-				<!-- copy link -->
-				<NcActions>
-					<NcActionButton :title="copyLinkTooltip"
-						:aria-label="copyLinkTooltip"
-						@click="copyLink">
+	<div :key="key" class="link-view-bubble">
+		<!-- link header with buttons -->
+		<div class="link-view-bubble__header">
+			<!-- copy link -->
+			<NcActions>
+				<NcActionButton :title="copyLinkTooltip"
+					:aria-label="copyLinkTooltip"
+					@click="copyLink">
+					<template #icon>
+						<CheckIcon v-if="copySuccess" :size="20" />
+						<NcLoadingIcon v-else-if="copyLoading" :size="20" />
+						<ContentCopyIcon v-else :size="20" />
+					</template>
+				</NcActionButton>
+			</NcActions>
+
+			<!-- edit/save -->
+			<template v-if="isEditable">
+				<NcActions v-if="!edit">
+					<NcActionButton :title="t('text', 'Edit link')"
+						:aria-label="t('text', 'Edit link')"
+						@click="startEdit">
 						<template #icon>
-							<CheckIcon v-if="copySuccess" :size="20" />
-							<NcLoadingIcon v-else-if="copyLoading" :size="20" />
-							<ContentCopyIcon v-else :size="20" />
+							<PencilIcon :size="20" />
+						</template>
+					</NcActionButton>
+				</NcActions>
+				<NcActions v-else>
+					<NcActionButton :title="t('text', 'Save changes')"
+						:aria-label="t('text', 'Save changes')"
+						@click="updateLink">
+						<template #icon>
+							<CheckIcon :size="20" />
 						</template>
 					</NcActionButton>
 				</NcActions>
 
-				<!-- edit/save -->
-				<template v-if="isEditable">
-					<NcActions v-if="!edit">
-						<NcActionButton :title="t('text', 'Edit link')"
-							:aria-label="t('text', 'Edit link')"
-							@click="startEdit">
-							<template #icon>
-								<PencilIcon :size="20" />
-							</template>
-						</NcActionButton>
-					</NcActions>
-					<NcActions v-else>
-						<NcActionButton :title="t('text', 'Save changes')"
-							:aria-label="t('text', 'Save changes')"
-							@click="updateLink">
-							<template #icon>
-								<CheckIcon :size="20" />
-							</template>
-						</NcActionButton>
-					</NcActions>
-
-					<!-- remove link / dismiss changes -->
-					<NcActions v-if="!edit">
-						<NcActionButton :title="t('text', 'Remove link')"
-							:aria-label="t('text', 'Remove link')"
-							@click="removeLink">
-							<template #icon>
-								<LinkOffIcon :size="20" />
-							</template>
-						</NcActionButton>
-					</NcActions>
-					<NcActions v-else>
-						<NcActionButton :title="t('text', 'Cancel')"
-							:aria-label="t('text', 'Cancel')"
-							@click="stopEdit">
-							<template #icon>
-								<CloseIcon :size="20" />
-							</template>
-						</NcActionButton>
-					</NcActions>
-				</template>
-			</div>
-			<div v-if="isEditable && edit" class="link-view-bubble__edit">
-				<NcTextField name="text"
-					:label="t('text', 'Text')"
-					:value.sync="newText"
-					@keypress.enter.prevent="updateLink" />
-				<NcTextField name="newHref"
-					:label="t('text', 'URL')"
-					:value.sync="newHref"
-					@keypress.enter.prevent="updateLink" />
-			</div>
-			<NcReferenceList v-else
-				:text="href"
-				:limit="1"
-				class="link-view-bubble__reference-list" />
+				<!-- remove link / dismiss changes -->
+				<NcActions v-if="!edit">
+					<NcActionButton :title="t('text', 'Remove link')"
+						:aria-label="t('text', 'Remove link')"
+						@click="removeLink">
+						<template #icon>
+							<LinkOffIcon :size="20" />
+						</template>
+					</NcActionButton>
+				</NcActions>
+				<NcActions v-else>
+					<NcActionButton :title="t('text', 'Cancel')"
+						:aria-label="t('text', 'Cancel')"
+						@click="stopEdit">
+						<template #icon>
+							<CloseIcon :size="20" />
+						</template>
+					</NcActionButton>
+				</NcActions>
+			</template>
 		</div>
-	</BubbleMenu>
+
+		<!-- link edit form -->
+		<div v-if="isEditable && edit" class="link-view-bubble__edit">
+			<NcTextField name="text"
+				:label="t('text', 'Text')"
+				:value.sync="newText"
+				@keypress.enter.prevent="updateLink" />
+			<NcTextField name="newHref"
+				:label="t('text', 'URL')"
+				:value.sync="newHref"
+				@keypress.enter.prevent="updateLink" />
+		</div>
+
+		<!-- link preview (if authenticated) -->
+		<NcReferenceList v-else-if="isLoggedIn"
+			:text="href"
+			:limit="1"
+			class="link-view-bubble__reference-list" />
+
+		<!-- link with URL (is unauthenticated) -->
+		<a v-else :href="href" rel="noopener noreferrer" target="_blank" class="href-widget">
+			<div class="href-widget--details">
+				<p class="href-widget--name">{{ href }}</p>
+				<p class="href-widget--link">{{ href }}</p>
+			</div>
+		</a>
+	</div>
 </template>
 
 <script>
-import { BubbleMenu } from '@tiptap/vue-2'
 import { NcActionButton, NcActions, NcLoadingIcon, NcTextField } from '@nextcloud/vue'
 import { NcReferenceList } from '@nextcloud/vue/dist/Components/NcRichText.js'
+import { getCurrentUser } from '@nextcloud/auth'
+import { translate as t } from '@nextcloud/l10n'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
 import ContentCopyIcon from 'vue-material-design-icons/ContentCopy.vue'
@@ -91,13 +98,11 @@ import LinkOffIcon from 'vue-material-design-icons/LinkOff.vue'
 import PencilIcon from 'vue-material-design-icons/Pencil.vue'
 
 import CopyToClipboardMixin from '../../mixins/CopyToClipboardMixin.js'
-import { useEditorMixin } from '../Editor.provider.js'
 
 export default {
-	name: 'LinkViewBubble',
+	name: 'LinkBubbleView',
 
 	components: {
-		BubbleMenu,
 		CheckIcon,
 		CloseIcon,
 		ContentCopyIcon,
@@ -112,17 +117,30 @@ export default {
 
 	mixins: [
 		CopyToClipboardMixin,
-		useEditorMixin,
 	],
 
+	props: {
+		editor: {
+			type: Object,
+			required: true,
+		},
+		href: {
+			type: String,
+			default: null,
+		},
+		text: {
+			type: String,
+			default: null,
+		},
+	},
+
 	data() {
 		return {
 			isEditable: false,
 			edit: false,
-			href: null,
 			newHref: null,
-			text: '',
 			newText: '',
+			isLoggedIn: !!getCurrentUser(),
 		}
 	},
 
@@ -144,6 +162,7 @@ export default {
 
 	watch: {
 		href() {
+			console.debug('LinkBubbleView href changes', this.href, this.text)
 			this.edit = false
 			this.newHref = null
 			this.newText = ''
@@ -151,18 +170,20 @@ export default {
 	},
 
 	beforeMount() {
-		this.isEditable = this.$editor.isEditable
-		this.$editor.on('update', ({ editor }) => {
+		this.isEditable = this.editor.isEditable
+		this.editor.on('update', ({ editor }) => {
 			this.isEditable = editor.isEditable
 		})
 	},
 
 	methods: {
+		t,
+
 		/**
 		 * Get text node with link mark from selection
 		 */
 		textLinkNodeFromSelection() {
-			const { selection } = this.$editor.state
+			const { selection } = this.editor.state
 			const { $from, $to } = selection
 
 			const node = $from.parent.child($from.index())
@@ -180,42 +201,13 @@ export default {
 			return node
 		},
 
-		shouldShow({ view, state, from, to }) {
-			let node
-			try {
-				node = this.textLinkNodeFromSelection()
-			} catch (error) {
-				this.resetBubble()
-				return false
-			}
-
-			const hasBubbleFocus = this.$refs.bubbleContainer.$el.contains(document.activeElement)
-			const hasEditorFocus = view.hasFocus() || hasBubbleFocus
-			if (!hasEditorFocus) {
-				this.resetBubble()
-				return false
-			}
-
-			this.text = node.textContent
-			this.href = node.marks.find(m => m.type.name === 'link').attrs.href
-			return true
-		},
-
 		resetBubble() {
+			console.debug('reset link view bubble')
 			this.edit = false
-			this.href = null
 			this.newHref = null
-			this.text = ''
 			this.newText = ''
 		},
 
-		tippyOptions() {
-			return {
-				placement: 'bottom',
-				duration: 100,
-			}
-		},
-
 		async copyLink() {
 			await this.copyToClipboard(this.href)
 		},
@@ -237,14 +229,13 @@ export default {
 				this.replaceLinkNode(this.newText, this.newHref)
 			} else if (this.href !== this.newHref) {
 				this.setLinkUrl(this.newHref)
-				this.href = this.newHref
 			}
 			this.stopEdit()
 		},
 
 		replaceLinkNode(text, href) {
 			// Copy original node and replace text and href
-			const { selection } = this.$editor.state
+			const { selection } = this.editor.state
 			const { $from } = selection
 
 			let textNodeJSON
@@ -267,7 +258,7 @@ export default {
 			const pos = $from.pos - $from.textOffset + 1
 
 			// Replace node
-			this.$editor.chain()
+			this.editor.chain()
 				.extendMarkRange('link')
 				.insertContent(textNodeJSON)
 				.focus(pos)
@@ -275,11 +266,11 @@ export default {
 		},
 
 		setLinkUrl(href) {
-			this.$editor.chain().extendMarkRange('link').setLink({ href }).focus().run()
+			this.editor.chain().extendMarkRange('link').setLink({ href }).focus().run()
 		},
 
 		removeLink() {
-			this.$editor.chain().unsetLink().focus().run()
+			this.editor.chain().unsetLink().focus().run()
 			this.stopEdit()
 		},
 	},
@@ -293,6 +284,7 @@ export default {
 	background-color: var(--color-main-background);
 	border-radius: var(--border-radius-large);
 	filter: drop-shadow(0 1px 10px var(--color-box-shadow));
+	box-sizing: initial !important;
 
 	&__header {
 		display: flex;
@@ -312,5 +304,28 @@ export default {
 			margin-bottom: 12px;
 		}
 	}
+
+	.href-widget {
+		width: 100%;
+		display: flex;
+
+		&--details {
+			padding: calc(var(--default-grid-baseline, 4px) * 2);
+			width: 60%;
+		}
+
+		&--name {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			font-weight: bold;
+		}
+
+		&--link {
+			color: var(--color-text-maxcontrast);
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
 }
 </style>
diff --git a/src/extensions/LinkBubble.js b/src/extensions/LinkBubble.js
new file mode 100644
index 00000000000..ed4a9b7151c
--- /dev/null
+++ b/src/extensions/LinkBubble.js
@@ -0,0 +1,27 @@
+import { Extension } from '@tiptap/core'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import LinkBubblePluginView from './LinkBubblePluginView.js'
+
+const LinkBubble = Extension.create({
+	name: 'linkViewBubble',
+
+	addOptions() {
+		return {
+			pluginKey: 'linkViewBubble',
+		}
+	},
+
+	addProseMirrorPlugins() {
+		return [
+			new Plugin({
+				key: new PluginKey(this.options.pluginKey),
+				view: (view) => new LinkBubblePluginView({
+					editor: this.editor,
+					view,
+				}),
+			}),
+		]
+	},
+})
+
+export default LinkBubble
diff --git a/src/extensions/LinkBubblePluginView.js b/src/extensions/LinkBubblePluginView.js
new file mode 100644
index 00000000000..e5efcd368d5
--- /dev/null
+++ b/src/extensions/LinkBubblePluginView.js
@@ -0,0 +1,225 @@
+import { VueRenderer } from '@tiptap/vue-2'
+import tippy from 'tippy.js'
+import LinkBubbleView from '../components/Link/LinkBubbleView.vue'
+
+class LinkBubblePluginView {
+
+	component = null
+	preventHide = false
+	updateDebounceTimer = undefined
+	updateDelay = 250
+
+	constructor({ editor, view }) {
+		this.editor = editor
+		this.view = view
+
+		this.component = new VueRenderer(LinkBubbleView, {
+			parent: this.editor.contentComponent,
+			propsData: {
+				editor: this.editor,
+				href: null,
+				text: null,
+			},
+		})
+
+		this.component.element.addEventListener('mousedown', this.mousedownHandler, { capture: true })
+		this.view.dom.addEventListener('dragstart', this.dragstartHandler)
+		this.view.dom.addEventListener('click', this.clickHandler)
+		this.editor.on('focus', this.focusHandler)
+		this.editor.on('blur', this.blurHandler)
+	}
+
+	mousedownHandler = () => {
+		this.preventHide = true
+	}
+
+	dragstartHandler = () => {
+		this.hide()
+	}
+
+	// Required for read-only mode on Firefox. For some reason, editor selection doesn't get
+	// updated when clicking a link in read-only mode on Firefox.
+	clickHandler = (event) => {
+		// Only regard left clicks without Ctrl
+		if (event.button !== 0 || event.ctrlKey) {
+			return false
+		}
+
+		// Only regard clicks that resolve to a prosemirror position
+		const { pos } = this.editor.view.posAtCoords({ left: event.clientX, top: event.clientY })
+		if (!pos) {
+			return false
+		}
+
+		// Derive link from position of click instead of using `getAttribute()` (like Tiptap handleClick does)
+		// In Firefox, `getAttribute()` doesn't work in read-only mode as clicking on links doesn't update selection/cursor.
+		const clickedPos = this.editor.view.state.doc.resolve(pos)
+
+		// we use `setTimeout` to make sure `selection` is already updated
+		setTimeout(() => this.updateFromClick(this.editor.view, clickedPos))
+	}
+
+	focusHandler = () => {
+		// we use `setTimeout` to make sure `selection` is already updated
+		setTimeout(() => this.update(this.editor.view))
+	}
+
+	blurHandler = ({ event }) => {
+		if (this.preventHide) {
+			this.preventHide = false
+			return
+		}
+
+		if (event?.relatedTarget && this.component.element.parentNode?.contains(event.relatedTarget)) {
+			return
+		}
+
+		this.hide()
+	}
+
+	tippyBlurHandler = (event) => {
+		this.blurHandler({ event })
+	}
+
+	createTooltip() {
+		const { element: editorElement } = this.editor.options
+		const editorIsAttached = !!editorElement.parentElement
+
+		if (this.tippy || !editorIsAttached) {
+			return
+		}
+
+		this.tippy = tippy(editorElement, {
+			duration: 100,
+			getReferenceClientRect: null,
+			content: this.component.element,
+			interactive: true,
+			trigger: 'manual',
+			placement: 'bottom',
+			hideOnClick: 'toggle',
+		})
+
+		// maybe we have to hide tippy on its own blur event as well
+		if (this.tippy.popper.firstChild) {
+			(this.tippy.popper.firstChild).addEventListener('blur', this.tippyBlurHandler)
+		}
+	}
+
+	update(view, oldState) {
+		const { composing } = view
+		const selectionChanged = !oldState?.selection.eq(view.state.selection)
+		const docChanged = !oldState?.doc.eq(view.state.doc)
+		const isSame = !selectionChanged && !docChanged
+
+		if (composing || isSame) {
+			return
+		}
+
+		if (this.updateDebounceTimer) {
+			clearTimeout(this.updateDebounceTimer)
+		}
+
+		this.updateDebounceTimer = window.setTimeout(() => {
+			this.updateFromSelection(view)
+		}, this.updateDelay)
+	}
+
+	updateFromSelection(view) {
+		const { state } = view
+		const { selection } = state
+
+		// support for CellSelections
+		const { ranges } = selection
+		const from = Math.min(...ranges.map(range => range.$from.pos))
+
+		const resolvedPos = view.state.doc.resolve(from)
+		const nodeStartPos = resolvedPos.pos - resolvedPos.textOffset
+		const linkNode = this.textLinkNodeFromSelection(selection)
+
+		const isLink = linkNode?.marks.some(m => m.type.name === 'link')
+		const hasBubbleFocus = this.component.element.contains(document.activeElement)
+		const hasEditorFocus = view.hasFocus() || hasBubbleFocus
+		const shouldShow = isLink && hasEditorFocus
+
+		this.updateTooltip(view, shouldShow, linkNode, nodeStartPos)
+	}
+
+	updateFromClick(view, clickedLinkPos) {
+		const nodeStartPos = clickedLinkPos.pos - clickedLinkPos.textOffset
+		const linkNode = clickedLinkPos.parent.maybeChild(clickedLinkPos.index())
+
+		const shouldShow = linkNode?.marks.some(m => m.type.name === 'link')
+
+		this.updateTooltip(this.editor.view, shouldShow, linkNode, nodeStartPos)
+	}
+
+	textLinkNodeFromSelection = (selection) => {
+		const { $from, $to } = selection
+
+		const node = $from.parent.child($from.index())
+
+		const nodeStart = $from.pos - $from.textOffset
+		const nodeEnd = nodeStart + node.nodeSize
+
+		if ($to.pos > nodeEnd) {
+			// Selection spans further than one text node
+			return
+		}
+
+		if (!node?.isText || !node.marks.some(m => m.type.name === 'link')) {
+			// Node at selection is not a text node with link mark
+			return
+		}
+
+		return node
+	}
+
+	updateTooltip = (view, shouldShow, linkNode, nodeStartPos) => {
+		this.createTooltip()
+
+		if (!shouldShow || !linkNode) {
+			this.hide()
+			return
+		}
+
+		let referenceEl = view.nodeDOM(nodeStartPos)
+		if (Object.prototype.toString.call(referenceEl) === '[object Text]') {
+			referenceEl = referenceEl.parentElement
+		}
+		const clientRect = referenceEl.getBoundingClientRect()
+
+		this.component.updateProps({
+			href: linkNode.marks.find(m => m.type.name === 'link').attrs.href,
+			text: linkNode.textContent,
+		})
+
+		this.tippy?.setProps({
+			getReferenceClientRect: () => clientRect,
+		})
+
+		this.show()
+	}
+
+	show() {
+		this.tippy?.show()
+	}
+
+	hide() {
+		this.tippy?.hide()
+	}
+
+	destroy() {
+		if (this.tippy?.popper.firstChild) {
+			(this.tippy.popper.firstChild).removeEventListener('blur', this.tippyBlurHandler)
+		}
+		this.tippy?.destroy()
+		this.component.element.removeEventListener('mousedown', this.mousedownHandler, { capture: true })
+		this.view.dom.removeEventListener('dragstart', this.dragstartHandler)
+		this.view.dom.removeEventListener('click', this.clickHandler)
+		this.editor.off('focus', this.focusHandler)
+		this.editor.off('blur', this.blurHandler)
+	}
+
+}
+
+export default LinkBubblePluginView
diff --git a/src/extensions/RichText.js b/src/extensions/RichText.js
index 61f54e8ce7b..d3bb572a6af 100644
--- a/src/extensions/RichText.js
+++ b/src/extensions/RichText.js
@@ -44,6 +44,7 @@ import Image from './../nodes/Image.js'
 import ImageInline from './../nodes/ImageInline.js'
 import KeepSyntax from './KeepSyntax.js'
 import LinkPicker from './../extensions/LinkPicker.js'
+import LinkBubble from './../extensions/LinkBubble.js'
 import ListItem from '@tiptap/extension-list-item'
 import Markdown from './../extensions/Markdown.js'
 import Mention from './../extensions/Mention.js'
@@ -119,6 +120,7 @@ export default Extension.create({
 				validate: href => /^https?:\/\//.test(href),
 				relativePath: this.options.relativePath,
 			}),
+			LinkBubble,
 			this.options.editing
 				? Placeholder.configure({
 					emptyNodeClass: 'is-empty',