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]>

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>

src/plugins/extractLinkParagraphs.js

@@ -20,12 +20,14 @@ 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: extractHref(node.firstChild),
 			}))
 		}
 	})