Merge pull request #6674 from pbirrer/feature/add-open-link-preview-o…

…ption feat(editor): add "Open in new tab" option for link previews
nextcloud · Feb 5, 2025 · 622d508 · 622d508
2 parents 2b2266c + 79550c4
commit 622d508
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
+				@click="openLink">
+				<template #icon>
+					<OpenIcon :size="20" />
+				</template>
+				{{ t('text','Open in new tab') }}
+			</NcActionButton>
 			<NcActionButton close-after-click @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,13 +62,19 @@ export default {
 		NcActionRadio,
 		NcActionSeparator,
 		DeleteIcon,
+		OpenIcon,
 	},
 
 	props: {
 		type: {
 			type: String,
 			required: true,
 		},
+		href: {
+			type: String,
+			required: false,
+			default: '',
+		},
 	},
 
 	data() {
@@ -79,6 +94,10 @@ export default {
 		deleteNode() {
 			this.$emit('delete')
 		},
+		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) {
 				pos,
 				nodeSize: node.nodeSize,
 				type: 'text-only',
+				href: extractHref(node.firstChild),
 			}))
 		} else if (node.type.name === 'preview') {
 			paragraphs.push(Object.freeze({
 				pos,
 				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([
-			{ pos: 0, type: 'text-only', nodeSize: 6 },
+			{ href, pos: 0, type: 'text-only', nodeSize: 6 },
 		])
 	})
 
 	it('returns paragraphs with a single preview', () => {
 		const doc = prepareDoc(preview)
 		const paragraphs = extractLinkParagraphs(doc)
 		expect(paragraphs).toEqual([
-			{ pos: 0, type: 'link-preview', nodeSize: 6 },
+			{ href, pos: 0, type: 'link-preview', nodeSize: 6 },
 		])
 	})
 
@@ -40,7 +41,7 @@ describe('extractLinkParagraphs', () => {
 		const doc = prepareDoc(content)
 		const paragraphs = extractLinkParagraphs(doc)
 		expect(paragraphs).toEqual([
-			{ pos: 0, type: 'text-only', nodeSize: 7 },
+			{ href, pos: 0, type: 'text-only', nodeSize: 7 },
 		])
 	})
 
@@ -50,18 +51,19 @@ describe('extractLinkParagraphs', () => {
 		const doc = prepareDoc(content)
 		const paragraphs = extractLinkParagraphs(doc)
 		expect(paragraphs).toEqual([
-			{ pos: 0, type: 'text-only', nodeSize: 6 },
-			{ pos: 6, type: 'text-only', nodeSize: 6 },
+			{ href, pos: 0, type: 'text-only', nodeSize: 6 },
+			{ href, pos: 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([
-			{ pos: 0, type: 'text-only', nodeSize: 6 },
-			{ pos: 6, type: 'link-preview', nodeSize: 6 },
+			{ href, pos: 0, type: 'text-only', nodeSize: 6 },
+			{ href, pos: 6, type: 'link-preview', nodeSize: 6 },
 		])
 	})