From 2c673b6b7bb6e1ad7b76686c6dc39fcd094aa13e Mon Sep 17 00:00:00 2001
From: Peter Birrer <peter.birrer@optonic.com>
Date: Wed, 18 Dec 2024 11:18:12 +0100
Subject: [PATCH] feat(editor): add "Open in new tab" option for link previews

- Enhanced `PreviewOptions.vue` to include a new "Open in new tab" button for link previews.
  - Introduced the `openLink` method to open the link in a new browser tab.
  - Added `OpenIcon` for the button to improve UI consistency.
  - New `href` prop added to handle link URLs dynamically.

- Updated `extractLinkParagraphs.js` to extract `href` attributes from nodes.
  - Ensures link previews include the necessary `href` for the "Open in new tab" action.

These changes improve the user experience by allowing quick access to link previews in the editor, streamlining navigation workflows.

Signed-off-by: Peter Birrer <peter.birrer@optonic.com>
Signed-off-by: Max <max@nextcloud.com>
---
 src/components/Editor/PreviewOptions.vue      | 19 ++++++++++++++++++
 src/plugins/extractLinkParagraphs.js          |  3 ++-
 .../plugins/extractLinkParagraphs.spec.js     | 20 ++++++++++---------
 3 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/components/Editor/PreviewOptions.vue b/src/components/Editor/PreviewOptions.vue
index 33bc96dbf87..a0636d38f8f 100644
--- a/src/components/Editor/PreviewOptions.vue
+++ b/src/components/Editor/PreviewOptions.vue
@@ -27,6 +27,14 @@
 				{{ t('text', 'Show link preview') }}
 			</NcActionRadio>
 			<NcActionSeparator />
+			<NcActionButton v-if="href"
+				:close-after-click="true"
+				@click="openLink">
+				<template #icon>
+					<OpenIcon :size="20" />
+				</template>
+				{{ t('text','Open in new tab') }}
+			</NcActionButton>
 			<NcActionButton close-after-click="true" @click="deleteNode">
 				<template #icon>
 					<DeleteIcon :size="20" />
@@ -41,6 +49,7 @@
 import { NcActions, NcActionButton, NcActionRadio, NcActionCaption, NcActionSeparator } from '@nextcloud/vue'
 import DotsVerticalIcon from 'vue-material-design-icons/DotsVertical.vue'
 import DeleteIcon from 'vue-material-design-icons/Delete.vue'
+import OpenIcon from 'vue-material-design-icons/OpenInNew.vue'
 
 export default {
 	name: 'PreviewOptions',
@@ -53,6 +62,7 @@ export default {
 		NcActionRadio,
 		NcActionSeparator,
 		DeleteIcon,
+		OpenIcon,
 	},
 
 	props: {
@@ -72,6 +82,11 @@ export default {
 			type: Object,
 			required: true,
 		},
+		href: {
+			type: String,
+			required: false,
+			default: '',
+		},
 	},
 
 	data() {
@@ -100,6 +115,10 @@ export default {
 				to: this.offset + this.nodeSize,
 			})
 		},
+		openLink() {
+			if (!this.href) return
+			window.open(this.href, '_blank').focus()
+		},
 	},
 }
 </script>
diff --git a/src/plugins/extractLinkParagraphs.js b/src/plugins/extractLinkParagraphs.js
index 738c8bf4647..4b1d5e41db8 100644
--- a/src/plugins/extractLinkParagraphs.js
+++ b/src/plugins/extractLinkParagraphs.js
@@ -20,16 +20,17 @@ export default function extractLinkParagraphs(doc) {
 				offset,
 				nodeSize: node.nodeSize,
 				type: 'text-only',
+				href: extractHref(node.firstChild),
 			}))
 		} else if (node.type.name === 'preview') {
 			paragraphs.push(Object.freeze({
 				offset,
 				nodeSize: node.nodeSize,
 				type: 'link-preview',
+				href: node.attrs.href,
 			}))
 		}
 	})
-
 	return paragraphs
 }
 
diff --git a/src/tests/plugins/extractLinkParagraphs.spec.js b/src/tests/plugins/extractLinkParagraphs.spec.js
index a29183ca831..861a5665706 100644
--- a/src/tests/plugins/extractLinkParagraphs.spec.js
+++ b/src/tests/plugins/extractLinkParagraphs.spec.js
@@ -9,8 +9,9 @@ import Preview from '../../nodes/Preview.js'
 import createCustomEditor from '../testHelpers/createCustomEditor.ts'
 
 describe('extractLinkParagraphs', () => {
-	const link = '<a href="https://nextcloud.com">Link</a>'
-	const preview = '<a href="https://nextcloud.com" title="preview">Link</a>'
+	const href = 'https://nextcloud.com'
+	const link = `<a href="${href}">Link</a>`
+	const preview = `<a href="${href}" title="preview">Link</a>`
 
 	it('returns an empty array for an empty doc', () => {
 		const doc = prepareDoc('')
@@ -23,7 +24,7 @@ describe('extractLinkParagraphs', () => {
 		const doc = prepareDoc(content)
 		const paragraphs = extractLinkParagraphs(doc)
 		expect(paragraphs).toEqual([
-			{ offset: 0, type: 'text-only', nodeSize: 6 },
+			{ href, offset: 0, type: 'text-only', nodeSize: 6 },
 		])
 	})
 
@@ -31,7 +32,7 @@ describe('extractLinkParagraphs', () => {
 		const doc = prepareDoc(preview)
 		const paragraphs = extractLinkParagraphs(doc)
 		expect(paragraphs).toEqual([
-			{ offset: 0, type: 'link-preview', nodeSize: 6 },
+			{ href, offset: 0, type: 'link-preview', nodeSize: 6 },
 		])
 	})
 
@@ -40,7 +41,7 @@ describe('extractLinkParagraphs', () => {
 		const doc = prepareDoc(content)
 		const paragraphs = extractLinkParagraphs(doc)
 		expect(paragraphs).toEqual([
-			{ offset: 0, type: 'text-only', nodeSize: 7 },
+			{ href, offset: 0, type: 'text-only', nodeSize: 7 },
 		])
 	})
 
@@ -50,8 +51,8 @@ describe('extractLinkParagraphs', () => {
 		const doc = prepareDoc(content)
 		const paragraphs = extractLinkParagraphs(doc)
 		expect(paragraphs).toEqual([
-			{ offset: 0, type: 'text-only', nodeSize: 6 },
-			{ offset: 6, type: 'text-only', nodeSize: 6 },
+			{ href, offset: 0, type: 'text-only', nodeSize: 6 },
+			{ href, offset: 6, type: 'text-only', nodeSize: 6 },
 		])
 	})
 
@@ -59,9 +60,10 @@ describe('extractLinkParagraphs', () => {
 		const content = `<p>${link}</p>${preview}`
 		const doc = prepareDoc(content)
 		const paragraphs = extractLinkParagraphs(doc)
+
 		expect(paragraphs).toEqual([
-			{ offset: 0, type: 'text-only', nodeSize: 6 },
-			{ offset: 6, type: 'link-preview', nodeSize: 6 },
+			{ href, offset: 0, type: 'text-only', nodeSize: 6 },
+			{ href, offset: 6, type: 'link-preview', nodeSize: 6 },
 		])
 	})