remove old link when editing

cypress/e2e/nodes/Links.spec.js → cypress/e2e/Links.spec.js

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { randUser } from '../../utils/index.js'
+import { randUser } from '../utils/index.js'
 
 const user = randUser()
 const fileName = 'empty.md'

cypress/e2e/marks/Link.spec.js

@@ -0,0 +1,45 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import Markdown from './../../../src/extensions/Markdown.js'
+import { Italic, Link } from './../../../src/marks/index.js'
+import { createCustomEditor } from './../../support/components.js'
+import { loadMarkdown, expectMarkdown } from '../nodes/helpers.js'
+
+describe('Link marks', { retries: 0 }, () => {
+	const editor = createCustomEditor({
+		content: '',
+		extensions: [Markdown, Link, Italic],
+	})
+
+	describe('insertOrSetLink command', { retries: 0 }, () => {
+		it('is available in commands', () => {
+			expect(editor.commands).to.have.property('insertOrSetLink')
+		})
+
+		it('can run on normal paragraph', () => {
+			prepareEditor('hello\n', 3)
+			expect(editor.can().insertOrSetLink()).toBe(true)
+		})
+
+		it('will insert a link in a normal paragraph', () => {
+			prepareEditor('hello\n', 3)
+			editor.commands.insertOrSetLink('https://nextcloud.com', {
+				href: 'https://nextcloud.com',
+			})
+			expectMarkdown(editor, 'he\n\n<https://nextcloud.com>\n\nllo')
+		})
+	})
+
+	/**
+	 *
+	 * @param {*} input markdown content
+	 * @param {*} position cursor pos
+	 */
+	function prepareEditor(input, position = 1) {
+		loadMarkdown(editor, input)
+		editor.commands.setTextSelection(position)
+	}
+})

src/components/Menu/ActionInsertLink.vue

@@ -189,24 +189,7 @@
 			// Avoid issues when parsing urls later on in markdown that might be entered in an invalid format (e.g. "mailto: [email protected]")
 			const href = url.replaceAll(' ', '%20')
 			const chain = this.$editor.chain()
-			// Check if any text is selected, if not insert the link using the given text property
-			if (this.$editor.view.state?.selection.empty) {
-				chain.insertContent({
-					type: 'paragraph',
-					content: [{
-						type: 'text',
-						marks: [{
-							type: 'link',
-							attrs: {
-								href,
-							},
-						}],
-						text,
-					}],
-				})
-			} else {
-				chain.setLink({ href })
-			}
+			chain.insertOrSetLink(text, { href })
 			chain.focus().run()
 		},
 		/**

src/marks/Link.js

@@ -3,10 +3,10 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { markInputRule } from '@tiptap/core'
 import TipTapLink from '@tiptap/extension-link'
 import { domHref, parseHref } from './../helpers/links.js'
 import { linkClicking } from '../plugins/links.js'
+import { markInputRule, getMarkRange, isMarkActive } from '@tiptap/core'
 
 const PROTOCOLS_TO_LINK_TO = ['http:', 'https:', 'mailto:', 'tel:']
 
@@ -87,6 +87,37 @@
 			}),
 		]
 	},
+	addCommands() {
+		return {
+			insertOrSetLink: (text, attrs) => ({ state, chain, commands }) => {
+				// Check if any text is selected,
+				// if not insert the link using the given text property
+				if (state.selection.empty) {
+					if (isMarkActive(state, this.name)) {
+
+						// get current href to check what to replace, assumes there's only one link mark on the anchor
+						let href = ''
+						state.selection.$anchor.marks().forEach(item => {
+							if (item.attrs.href && item.type.name === 'link') {
+								href = item.attrs.href
+							}
+						})
+						commands.deleteRange(getMarkRange(state.selection.$anchor, state.schema.marks.link, { href }))
+					}
+					return chain().insertContent({
+						type: 'text',
+						marks: [{
+							type: 'link',
+							attrs,
+						}],
+						text,
+					})
+				} else {
+					return commands.setLink(attrs)
+				}
+			},
+		}
+	},
 
 	addProseMirrorPlugins() {
 		const plugins = this.parent()

src/tests/marks/Link.spec.js

@@ -0,0 +1,106 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import Link from './../../marks/Link.js'
+import Underline from '../../marks/Underline.js'
+import createCustomEditor from '../testHelpers/createCustomEditor.ts'
+
+describe('Link extension integrated in the editor', () => {
+	it('should have link available in commands', () => {
+		const editor = createCustomEditor('<p><a href="nextcloud.com">Test</a> HELLO WORLD</p>', [Link])
+		expect(editor.commands).toHaveProperty('insertOrSetLink')
+	})
+
+	it('should update link if anchor has mark', () => {
+		const editor = createCustomEditor(
+			'<p><a href="nextcloud.com">Te<u>s</u>t</a> HELLO WORLD</p>',
+			[Link, Underline],
+		)
+		editor.commands.setTextSelection(3)
+		editor.commands.insertOrSetLink('updated.de', { href: 'updated.de' })
+		expect(editor.getJSON()).toEqual({
+			content: [
+				{
+					content: [
+						{
+							marks: [
+								{ attrs: { href: 'updated.de', title: null }, type: 'link' },
+							],
+							text: 'updated.de',
+							type: 'text',
+						},
+						{ text: ' HELLO WORLD', type: 'text' },
+					],
+					type: 'paragraph',
+				},
+			],
+			type: 'doc',
+		})
+	})
+
+	it('Should only update link the anchor is on', () => {
+		const editor = createCustomEditor(
+		  '<p><a href="nextcloud.com">Test</a><a href="not-nextcloud.com">second link</a></p>',
+			[Link],
+		)
+		editor.commands.setTextSelection(3)
+		editor.commands.insertOrSetLink('updated.de', { href: 'updated.de' })
+		expect(editor.getJSON()).toEqual({
+			content: [
+				{
+					content: [
+						{
+							marks: [
+								{ attrs: { href: 'updated.de', title: null }, type: 'link' },
+							],
+							text: 'updated.de',
+							type: 'text',
+						},
+						{
+							marks: [
+								{
+									attrs: {
+										href: 'not-nextcloud.com',
+										title: null,
+									},
+									type: 'link',
+								},
+							],
+							text: 'second link',
+							type: 'text',
+						},
+					],
+					type: 'paragraph',
+				},
+			],
+			type: 'doc',
+		})
+	})
+
+	it('should insert new link if none at anchor', () => {
+		const editor = createCustomEditor(
+			'<p><a href="nextcloud.com">Test</a> HELLO WORLD</p>',
+			[Link],
+		)
+		editor.commands.setTextSelection(10)
+		expect(editor.getJSON()).toEqual({
+			content: [
+				{
+					content: [
+						{
+							marks: [
+								{ attrs: { href: 'nextcloud.com', title: null }, type: 'link' },
+							],
+							text: 'Test',
+							type: 'text',
+						},
+						{ text: ' HELLO WORLD', type: 'text' },
+					],
+					type: 'paragraph',
+				},
+			],
+			type: 'doc',
+		})
+	})
+})