diff --git a/cypress/e2e/nodes/Preview.spec.js b/cypress/e2e/nodes/Preview.spec.js index 45e8eef66c6..4fcade14a9f 100644 --- a/cypress/e2e/nodes/Preview.spec.js +++ b/cypress/e2e/nodes/Preview.spec.js @@ -129,6 +129,21 @@ describe('Preview extension', { retries: 0 }, () => { }) + describe('insertPreview command', { retries: 0 }, () => { + + it('is available in commands', () => { + expect(editor.commands).to.have.property('insertPreview') + }) + + it('inserts a preview', () => { + editor.commands.clearContent() + editor.commands.insertPreview('https://nextcloud.com') + editor.commands.setTextSelection(1) + expectPreview() + }) + + }) + /** * Expect a preview in the editor. */ diff --git a/src/components/Menu/ActionInsertLink.vue b/src/components/Menu/ActionInsertLink.vue index 7b6ba543b75..48b746698b1 100644 --- a/src/components/Menu/ActionInsertLink.vue +++ b/src/components/Menu/ActionInsertLink.vue @@ -219,7 +219,7 @@ export default { .then(link => { const chain = this.$editor.chain() if (this.$editor.view.state?.selection.empty) { - chain.focus().insertContent(link + ' ').run() + chain.focus().insertPreview(link).run() } else { chain.setLink({ href: link }).focus().run() } diff --git a/src/components/Suggestion/LinkPicker/suggestions.js b/src/components/Suggestion/LinkPicker/suggestions.js index 519eac9b647..01f9bea3857 100644 --- a/src/components/Suggestion/LinkPicker/suggestions.js +++ b/src/components/Suggestion/LinkPicker/suggestions.js @@ -86,7 +86,8 @@ export default () => createSuggestions({ editor .chain() .focus() - .insertContentAt(range, content + ' ') + .deleteRange(range) + .insertPreview(link) .run() }) .catch(error => { diff --git a/src/nodes/Preview.js b/src/nodes/Preview.js index 666395904d4..0ef5d199170 100644 --- a/src/nodes/Preview.js +++ b/src/nodes/Preview.js @@ -62,6 +62,7 @@ export default Node.create({ state.write('[') state.text(node.textContent, false) state.write(`](${node.attrs.href} (${node.attrs.title}))`) + state.closeBlock(node) }, addCommands() { @@ -84,13 +85,32 @@ export default Node.create({ * */ unsetPreview: () => ({ state, chain }) => { - console.info(this.attributes) return isActive(this.name, this.attributes, state) && chain() .setNode('paragraph') .run() }, + /** + * Insert a preview for given link. + * + */ + insertPreview: (link) => ({ state, chain }) => { + return chain() + .insertContent({ + type: 'preview', + attrs: { href: link, title: 'preview' }, + content: [{ + type: 'text', + marks: [{ + type: 'link', + attrs: { href: link }, + }], + text: link, + }], + }) + .run() + }, } }, })