From 90f7d62300c543a75b5a4000eba6528e3e9755d4 Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Wed, 20 Mar 2024 13:57:27 +0100
Subject: [PATCH 1/3] fix(preview): 5522 - hide preview toggle if not available

Signed-off-by: Max <max@nextcloud.com>
---
 src/nodes/ParagraphView.vue | 63 +++++++++----------------------------
 src/nodes/Preview.js        |  5 ++-
 2 files changed, 18 insertions(+), 50 deletions(-)

diff --git a/src/nodes/ParagraphView.vue b/src/nodes/ParagraphView.vue
index ff7ae1e7f14..7ab9052c4be 100644
--- a/src/nodes/ParagraphView.vue
+++ b/src/nodes/ParagraphView.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<NodeViewWrapper class="vue-component" as="p">
-		<PreviewOptions v-if="editor.isEditable && href"
+		<PreviewOptions v-if="editor.isEditable && canConvertToPreview"
 			:value.sync="value"
 			@open="editor.commands.hideLinkBubble()"
 			@update:value="convertToPreview" />
@@ -48,29 +48,25 @@ export default {
 	props: nodeViewProps,
 	data() {
 		return {
-			href: null,
+			canConvertToPreview: null,
 			isLoggedIn: getCurrentUser(),
 			value: 'text-only',
 		}
 	},
 	watch: {
 		node: {
-			handler(newNode) {
-				if (!newNode?.textContent) {
-					this.href = ''
-					return
-				}
-				this.debouncedUpdateText(newNode)
+			handler() {
+				this.debouncedUpdateText()
 			},
 		},
 	},
 	beforeCreate() {
-		this.debouncedUpdateText = debounce((newNode) => {
-			this.href = this.getTextReference(this.node)
+		this.debouncedUpdateText = debounce(() => {
+			this.canConvertToPreview = this.checkAvailability()
 		}, 500)
 	},
 	created() {
-		this.href = this.getTextReference(this.node)
+		this.canConvertToPreview = this.checkAvailability()
 	},
 	beforeUnmount() {
 		this.debouncedUpdateText?.cancel()
@@ -84,44 +80,13 @@ export default {
 				.setPreview()
 				.run()
 		},
-		getTextReference(node) {
-			if (!node?.childCount) {
-				return null
-			}
-
-			// Only regard paragraphs with exactly one text node (ignoring whitespace-only nodes)
-			let textNode
-			for (let i = 0; i < node.childCount; i++) {
-				const childNode = node.child(i)
-
-				// Disregard paragraphs with non-text nodes
-				if (childNode.type.name !== 'text') {
-					return null
-				}
-
-				// Ignore children with empty text
-				if (!childNode.textContent.trim()) {
-					continue
-				}
-
-				// Disregard paragraphs with more than one text nodes
-				if (textNode) {
-					return null
-				}
-
-				textNode = childNode
-			}
-
-			// Check if the text node is a link
-			const linkMark = textNode?.marks.find((m) => m.type.name === 'link')
-			const href = linkMark?.attrs?.href
-
-			if (href) {
-				const url = new URL(href, window.location)
-				return url.href
-			}
-
-			return null
+		checkAvailability() {
+			return this.editor
+				.can()
+				.chain()
+				.setTextSelection(this.getPos() + 1)
+				.setPreview()
+				.run()
 		},
 	},
 }
diff --git a/src/nodes/Preview.js b/src/nodes/Preview.js
index d48e9208ed0..efd378d319a 100644
--- a/src/nodes/Preview.js
+++ b/src/nodes/Preview.js
@@ -148,7 +148,7 @@ function previewPossible({ selection }) {
 	if (hasOtherContent($from.parent)) {
 		return false
 	}
-	const href = extractHref($from.nodeAfter)
+	const href = extractHref($from.nodeAfter || $from.nodeBefore)
 	if (!href || href.startsWith('#')) {
 		return false
 	}
@@ -171,6 +171,9 @@ function hasOtherContent(node) {
  * @return {string} The href of the link mark of the node
  */
 function extractHref(node) {
+	if (!node) {
+		return undefined
+	}
 	const link = node.marks.find(mark => mark.type.name === 'link')
 	return link?.attrs.href
 }

From 886094cbf78c2d81bb1090f5575027494e919c4e Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Thu, 21 Mar 2024 15:48:43 +0100
Subject: [PATCH 2/3] fix(links): only allow converting selected links to
 preview

This makes the check for `can().setTextSelection()` a lot easier
as we do not need to change the selection to be within the link.

Signed-off-by: Max <max@nextcloud.com>
---
 src/nodes/ParagraphView.vue | 39 +++++++++++++++++++++----------------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/nodes/ParagraphView.vue b/src/nodes/ParagraphView.vue
index 7ab9052c4be..421c1e28d39 100644
--- a/src/nodes/ParagraphView.vue
+++ b/src/nodes/ParagraphView.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<NodeViewWrapper class="vue-component" as="p">
-		<PreviewOptions v-if="editor.isEditable && canConvertToPreview"
+		<PreviewOptions v-if="editor.isEditable && isSelected && canConvertToPreview"
 			:value.sync="value"
 			@open="editor.commands.hideLinkBubble()"
 			@update:value="convertToPreview" />
@@ -33,9 +33,7 @@
 <script>
 import { NodeViewContent, nodeViewProps, NodeViewWrapper } from '@tiptap/vue-2'
 import PreviewOptions from '../components/Editor/PreviewOptions.vue'
-import { useEditorMixin } from '../components/Editor.provider.js'
 import { getCurrentUser } from '@nextcloud/auth'
-import debounce from 'debounce'
 
 export default {
 	name: 'ParagraphView',
@@ -44,11 +42,11 @@ export default {
 		NodeViewContent,
 		PreviewOptions,
 	},
-	mixins: [useEditorMixin],
 	props: nodeViewProps,
 	data() {
 		return {
 			canConvertToPreview: null,
+			isSelected: false,
 			isLoggedIn: getCurrentUser(),
 			value: 'text-only',
 		}
@@ -56,25 +54,29 @@ export default {
 	watch: {
 		node: {
 			handler() {
-				this.debouncedUpdateText()
+				if (this.isSelected) {
+					this.canConvertToPreview = this.checkAvailability()
+				}
+			},
+		},
+		isSelected: {
+			handler(value) {
+				if (value) {
+					this.canConvertToPreview = this.checkAvailability()
+				}
 			},
 		},
 	},
-	beforeCreate() {
-		this.debouncedUpdateText = debounce(() => {
-			this.canConvertToPreview = this.checkAvailability()
-		}, 500)
-	},
-	created() {
-		this.canConvertToPreview = this.checkAvailability()
+	mounted() {
+		this.editor.on('selectionUpdate', this.checkSelection)
 	},
 	beforeUnmount() {
-		this.debouncedUpdateText?.cancel()
+		this.editor.off('selectionUpdate', this.checkSelection)
 	},
 	methods: {
 		convertToPreview(...args) {
 			console.info(...args)
-			this.$editor.chain()
+			this.editor.chain()
 				.focus()
 				.setTextSelection(this.getPos() + 1)
 				.setPreview()
@@ -83,10 +85,13 @@ export default {
 		checkAvailability() {
 			return this.editor
 				.can()
-				.chain()
-				.setTextSelection(this.getPos() + 1)
 				.setPreview()
-				.run()
+		},
+		checkSelection() {
+			const { selection } = this.editor.state
+			const start = selection.$from.parent
+			const end = selection.$to.parent
+			this.isSelected = (this.node === start) && (this.node === end)
 		},
 	},
 }

From 2f19e4104d51704f17823747dda1d1dfaebe2f90 Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Thu, 21 Mar 2024 15:52:49 +0100
Subject: [PATCH 3/3] fix(links): set preview if whitespace after link selected

Signed-off-by: Max <max@nextcloud.com>
---
 src/nodes/Preview.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/nodes/Preview.js b/src/nodes/Preview.js
index efd378d319a..f385c01f1bf 100644
--- a/src/nodes/Preview.js
+++ b/src/nodes/Preview.js
@@ -148,7 +148,7 @@ function previewPossible({ selection }) {
 	if (hasOtherContent($from.parent)) {
 		return false
 	}
-	const href = extractHref($from.nodeAfter || $from.nodeBefore)
+	const href = extractHref($from.parent.firstChild)
 	if (!href || href.startsWith('#')) {
 		return false
 	}