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 <[email protected]> Signed-off-by: Max <[email protected]>
nextcloud · Dec 19, 2024 · 2c673b6 · 2c673b6
1 parent c76f190
commit 2c673b6
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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,15 +24,15 @@ 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 },
 		])
 	})
 
 	it('returns paragraphs with a single preview', () => {
 		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,18 +51,19 @@ 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 },
 		])
 	})
 
 	it('returns previews mixed with paragraphs with a single link', () => {
 		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 },
 		])
 	})