Skip to content

feat(editor): add "Open in new tab" option for link previews #6674

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
max-nextcloud merged 1 commit into from
Feb 5, 2025
Merged

feat(editor): add "Open in new tab" option for link previews #6674

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions src/components/Editor/PreviewOptions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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',
Expand All @@ -53,13 +62,19 @@ export default {
NcActionRadio,
NcActionSeparator,
DeleteIcon,
OpenIcon,
},

props: {
type: {
type: String,
required: true,
},
href: {
type: String,
required: false,
default: '',
},
},

data() {
Expand All @@ -79,6 +94,10 @@ export default {
deleteNode() {
this.$emit('delete')
},
openLink() {
if (!this.href) return
window.open(this.href, '_blank').focus()
},
},
}
</script>
Expand Down
3 changes: 2 additions & 1 deletion src/plugins/extractLinkParagraphs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

Expand Down
20 changes: 11 additions & 9 deletions src/tests/plugins/extractLinkParagraphs.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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('')
Expand All @@ -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 },
])
})

Expand All @@ -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 },
])
})

Expand All @@ -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 },
])
})

Expand Down