Merge pull request #7203 from nextcloud/backport/7188/stable31

[stable31] feat(link): Toggle link on selection with Mod-K shortcut

Author: mejo-

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>

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

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,

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