diff --git a/cypress/e2e/nodes/Preview.spec.js b/cypress/e2e/nodes/Preview.spec.js index 74d3c41d893..b7ac7b3c4b1 100644 --- a/cypress/e2e/nodes/Preview.spec.js +++ b/cypress/e2e/nodes/Preview.spec.js @@ -142,6 +142,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 17155eb148b..fdefa6d1889 100644 --- a/src/components/Menu/ActionInsertLink.vue +++ b/src/components/Menu/ActionInsertLink.vue @@ -233,7 +233,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 702ea3144b5..2f1f9b7055f 100644 --- a/src/components/Suggestion/LinkPicker/suggestions.js +++ b/src/components/Suggestion/LinkPicker/suggestions.js @@ -102,7 +102,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 d4fc60861a8..2e66041e998 100644 --- a/src/nodes/Preview.js +++ b/src/nodes/Preview.js @@ -79,6 +79,7 @@ export default Node.create({ state.write('[') state.text(node.textContent, false) state.write(`](${node.attrs.href} (${node.attrs.title}))`) + state.closeBlock(node) }, addCommands() { @@ -101,13 +102,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() + }, } }, })