From 510ea289c57465af30175b07826addeeeba86113 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Tue, 6 May 2025 13:08:32 +0200
Subject: [PATCH] feat(link): Toggle link on selection with Mod-K shortcut

Acts only upon selection as inserting a link with empty title creates an
invisible link, resulting in bad user experience in the WYSIWYG editor.

Fixes: #7152

Signed-off-by: Jonas <jonas@freesources.org>
---
 src/components/HelpModal.vue           |  6 +++++-
 src/components/Link/LinkBubbleView.vue | 17 ++++++++++++++++-
 src/components/Menu/entries.js         |  2 ++
 src/marks/Link.js                      | 14 ++++++++++++++
 4 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index ae0cad4967b..2e332ce7cb7 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -190,7 +190,11 @@
 					<td>
 						<code>[Title](https://example.org)</code>
 					</td>
-					<td v-if="!isMobileCached" />
+					<td v-if="!isMobileCached">
+						<kbd>{{ ctrlOrModKey }}</kbd>
+						+
+						<kbd>K</kbd>
+					</td>
 				</tr>
 				<tr>
 					<td>{{ t('text', 'Insert emoji') }}</td>
diff --git a/src/components/Link/LinkBubbleView.vue b/src/components/Link/LinkBubbleView.vue
index ed5bd188b39..8ffaaa33b8d 100644
--- a/src/components/Link/LinkBubbleView.vue
+++ b/src/components/Link/LinkBubbleView.vue
@@ -67,7 +67,8 @@
 
 		<!-- link edit form -->
 		<div v-if="isEditable && edit" class="link-view-bubble__edit">
-			<NcTextField name="newHref"
+			<NcTextField ref="hrefField"
+				name="newHref"
 				:label="t('text', 'URL')"
 				:value.sync="newHref"
 				@keypress.enter.prevent="updateLink" />
@@ -174,6 +175,7 @@ export default {
 	watch: {
 		key() {
 			this.resetBubble()
+			this.startEditIfEmpty()
 		},
 	},
 
@@ -184,6 +186,10 @@ export default {
 		})
 	},
 
+	mounted() {
+		this.startEditIfEmpty()
+	},
+
 	methods: {
 		t,
 
@@ -204,6 +210,15 @@ export default {
 		startEdit() {
 			this.edit = true
 			this.newHref = this.href
+			this.$nextTick(() => {
+				this.$refs.hrefField.focus()
+			})
+		},
+
+		startEditIfEmpty() {
+			if (this.isEditable && !this.href) {
+				this.startEdit()
+			}
 		},
 
 		stopEdit() {
diff --git a/src/components/Menu/entries.js b/src/components/Menu/entries.js
index f44cbf3a229..7457c550296 100644
--- a/src/components/Menu/entries.js
+++ b/src/components/Menu/entries.js
@@ -400,6 +400,8 @@ export const MenuEntries = [
 	{
 		key: 'insert-link',
 		label: t('text', 'Insert link'),
+		keyChar: 'k',
+		keyModifiers: [MODIFIERS.Mod],
 		isActive: 'link',
 		icon: LinkIcon,
 		component: ActionInsertLink,
diff --git a/src/marks/Link.js b/src/marks/Link.js
index 1878f43958b..08b2a3a5ee9 100644
--- a/src/marks/Link.js
+++ b/src/marks/Link.js
@@ -88,6 +88,20 @@ const Link = TipTapLink.extend({
 		]
 	},
 
+	addKeyboardShortcuts() {
+		return {
+			'Mod-k': () => {
+				const { empty } = this.editor.state.selection
+				if (empty) {
+					console.debug('empty selection')
+					return false
+				}
+				console.debug('toggle link for selection')
+				return this.editor.commands.toggleLink({ href: '' })
+			},
+		}
+	},
+
 	addProseMirrorPlugins() {
 		const plugins = this.parent()
 			// remove upstream link click handle plugin