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:
2026-03-07 18:46:08 -05:00
parent 0e9ab84afb
commit 659c08def5
5 changed files with 48 additions and 10 deletions
+6 -1
View File
@@ -36,6 +36,7 @@ const showPreview = ref(false);
const sidebarOpen = ref(true);
const showHistory = ref(false);
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;
});
@@ -325,11 +326,14 @@ onUnmounted(() => assist.clearSelection());
<button v-if="isEditing" class="btn-history" @click="showHistory = true">History</button>
</div>
<input
ref="titleRef"
v-model="title"
type="text"
placeholder="Title"
class="title-input"
@input="markDirty"
@keydown.ctrl.s.prevent="save"
@keydown.ctrl.e.prevent="tiptapEditor?.commands.focus()"
/>
</div>
@@ -337,7 +341,7 @@ onUnmounted(() => assist.clearSelection());
<div class="note-body">
<!-- Main column -->
<div class="note-main">
<div class="note-main" @keydown.ctrl.e.prevent="tiptapEditor?.commands.focus()">
<div class="body-tabs-row">
<div class="editor-tabs">
<button :class="['tab', { active: !showPreview }]" @click="showPreview = false">Write</button>
@@ -366,6 +370,7 @@ onUnmounted(() => assist.clearSelection());
placeholder="Write your note in Markdown..."
@update:modelValue="onBodyUpdate"
@selectionChange="onSelectionChange"
@escape="titleRef?.focus()"
/>
</div>
<div