feat: add keyboard shortcut to toggle task description edit (#2332)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2332
Reviewed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

src/components/input/editor.vue

@@ -16,14 +16,29 @@
 		<p class="has-text-centered has-text-grey is-italic my-5" v-if="showPreviewText">
 			{{ emptyText }}
 			<template v-if="isEditEnabled">
-				<ButtonLink @click="toggleEdit" class="d-print-none">{{ $t('input.editor.edit') }}</ButtonLink>.
+				<ButtonLink
+					@click="toggleEdit"
+					v-shortcut="editShortcut"
+					class="d-print-none">
+					{{ $t('input.editor.edit') }}
+				</ButtonLink>.
 			</template>
 		</p>
 
 		<ul class="actions d-print-none" v-if="bottomActions.length > 0">
 			<li v-if="isEditEnabled && !showPreviewText && showSave">
-				<BaseButton v-if="showEditButton" @click="toggleEdit">{{ $t('input.editor.edit') }}</BaseButton>
+				<BaseButton
-				<BaseButton v-else-if="isEditActive" @click="toggleEdit" class="done-edit">{{ $t('misc.save') }}</BaseButton>
+					v-if="showEditButton"
+					@click="toggleEdit"
+					v-shortcut="editShortcut">
+					{{ $t('input.editor.edit') }}
+				</BaseButton>
+				<BaseButton
+					v-else-if="isEditActive"
+					@click="toggleEdit"
+					class="done-edit">
+					{{ $t('misc.save') }}
+				</BaseButton>
 			</li>
 			<li v-for="(action, k) in bottomActions" :key="k">
 				<BaseButton @click="action.action">{{ action.title }}</BaseButton>
@@ -32,7 +47,11 @@
 		<template v-else-if="isEditEnabled && showSave">
 			<ul v-if="showEditButton" class="actions d-print-none">
 				<li>
-					<BaseButton @click="toggleEdit">{{ $t('input.editor.edit') }}</BaseButton>
+					<BaseButton
+						@click="toggleEdit"
+						v-shortcut="editShortcut">
+						{{ $t('input.editor.edit') }}
+					</BaseButton>
 				</li>
 			</ul>
 			<x-button
@@ -110,6 +129,12 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		// If a key is passed the editor will go in "edit" mode when the key is pressed.
+		// Disabled if an empty string is passed.
+		editShortcut: {
+			type: String,
+			default: '',
+		},
 	},
 	emits: ['update:modelValue', 'change'],
 	computed: {

src/components/misc/keyboard-shortcuts/shortcuts.ts

@@ -136,6 +136,10 @@ export const KEYBOARD_SHORTCUTS : ShortcutGroup[] = [
 				title: 'keyboardShortcuts.task.reminder',
 				keys: ['alt', 'r'],
 			},
+			{
+				title: 'keyboardShortcuts.task.description',
+				keys: ['e'],
+			},
 		],
 	},
 ]

src/components/tasks/partials/description.vue

@@ -24,6 +24,7 @@
 			:placeholder="$t('task.description.placeholder')"
 			:empty-text="$t('task.description.empty')"
 			:show-save="true"
+			edit-shortcut="e"
 			v-model="task.description"
 		/>
 	</div>

src/directives/shortcut.ts

@@ -4,6 +4,9 @@ import {isAppleDevice} from '@/helpers/isAppleDevice'
 
 const directive: Directive = {
 	mounted(el, {value}) {
+		if(value === '') {
+			return
+		}
 		if (isAppleDevice() && value.includes('Control')) {
 			value = value.replace('Control', 'Meta')
 		}

src/i18n/lang/en.json

@@ -873,7 +873,8 @@
       "related": "Modify related tasks of this task",
       "color": "Change the color of this task",
       "move": "Move this task to another list",
-      "reminder": "Manage reminders of this task"
+      "reminder": "Manage reminders of this task",
+      "description": "Toggle editing of the task description"
     },
     "list": {
       "title": "List Views",