Skip to content
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

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

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="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" />
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,6 +62,7 @@
NcActionRadio,
NcActionSeparator,
DeleteIcon,
OpenIcon,
},

props: {
Expand All @@ -72,6 +82,11 @@
type: Object,
required: true,
},
href: {
type: String,
required: false,
default: '',
},
},

data() {
Expand Down Expand Up @@ -100,6 +115,10 @@
to: this.offset + this.nodeSize,
})
},
openLink() {
if (!this.href) return
window.open(this.href, '_blank').focus()
},

Check warning on line 121 in src/components/Editor/PreviewOptions.vue

View check run for this annotation

Codecov / codecov/patch

src/components/Editor/PreviewOptions.vue#L118-L121 

Added lines #L118 - L121 were not covered by tests
},
}
</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) {
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
}

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([
{ 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 },
])
})

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

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

Expand Down
Loading