Keyboard navigation improvements across all editors
TiptapEditor.vue (central — applies to all three editors): - Escape inside editor blurs it and emits 'escape' event to parent TagInput.vue (central — applies everywhere tags are used): - ArrowUp/ArrowDown navigate autocomplete suggestion list with visual highlight - Enter confirms the keyboard-selected suggestion instead of typed text NoteEditorView, TaskEditorView, WorkspaceNoteEditor (per-editor wiring): - @escape on TiptapEditor returns focus to the title input (ref="titleRef") - Ctrl+E from title input or editor main column jumps focus into editor body - Ctrl+S on title input saves (was already on editor area; now consistent) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -100,6 +100,7 @@ async function toggleSubTask(sub: SubTask) {
|
||||
const showPreview = ref(true);
|
||||
const sidebarOpen = ref(true);
|
||||
const editorRef = ref<InstanceType<typeof TiptapEditor> | null>(null);
|
||||
const titleRef = ref<HTMLInputElement | null>(null);
|
||||
const tiptapEditor = computed<Editor | null>(() => {
|
||||
return (editorRef.value?.editor as Editor | undefined) ?? null;
|
||||
});
|
||||
@@ -392,8 +393,11 @@ useEditorGuards(dirty, save);
|
||||
v-model="title"
|
||||
type="text"
|
||||
placeholder="Task title"
|
||||
ref="titleRef"
|
||||
class="title-input"
|
||||
@input="markDirty"
|
||||
@keydown.ctrl.s.prevent="save"
|
||||
@keydown.ctrl.e.prevent="tiptapEditor?.commands.focus()"
|
||||
/>
|
||||
|
||||
</div><!-- /editor-header: title only -->
|
||||
@@ -402,7 +406,7 @@ useEditorGuards(dirty, save);
|
||||
<div class="task-body">
|
||||
|
||||
<!-- ── Main column ─────────────────────────────────────────── -->
|
||||
<div class="task-main">
|
||||
<div class="task-main" @keydown.ctrl.e.prevent="tiptapEditor?.commands.focus()">
|
||||
|
||||
<!-- Write / Preview tabs + toolbar sit above the editor -->
|
||||
<div class="body-tabs-row">
|
||||
@@ -434,6 +438,7 @@ useEditorGuards(dirty, save);
|
||||
placeholder="Describe this task..."
|
||||
@update:modelValue="onBodyUpdate"
|
||||
@selectionChange="onSelectionChange"
|
||||
@escape="titleRef?.focus()"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user