Merge pull request #5846 from nextcloud/fix/smart_picker_preview

fix(SmartPicker): Insert smart picker links as preview per default

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.
 	 */

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()
 					}

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 => {

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()
+			},
 		}
 	},
 })