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:
@@ -47,6 +47,7 @@ const saving = ref(false);
|
||||
const tagSuggestions = useTagSuggestions(noteTitle, noteBody, noteTags, () => { dirty.value = true; });
|
||||
|
||||
// TipTap editor ref (for MarkdownToolbar)
|
||||
const titleRef = ref<HTMLInputElement | null>(null);
|
||||
const editorRef = ref<InstanceType<typeof TiptapEditor> | null>(null);
|
||||
const tiptapEditor = computed<Editor | null>(() =>
|
||||
(editorRef.value?.editor as Editor | undefined) ?? null
|
||||
@@ -252,10 +253,12 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
|
||||
|
||||
<div class="note-title-row">
|
||||
<input
|
||||
ref="titleRef"
|
||||
v-model="noteTitle"
|
||||
class="note-title-input"
|
||||
placeholder="Note title"
|
||||
@keydown.ctrl.s.prevent="saveNote"
|
||||
@keydown.ctrl.e.prevent="editorRef?.editor?.commands.focus()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -308,8 +311,8 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
|
||||
<button class="btn-dismiss-suggestions" @click="linkSuggestions = []">✕</button>
|
||||
</div>
|
||||
|
||||
<div class="editor-area" @keydown.ctrl.s.prevent="saveNote">
|
||||
<TiptapEditor ref="editorRef" v-model="noteBody" />
|
||||
<div class="editor-area" @keydown.ctrl.s.prevent="saveNote" @keydown.ctrl.e.prevent="editorRef?.editor?.commands.focus()">
|
||||
<TiptapEditor ref="editorRef" v-model="noteBody" @escape="titleRef?.focus()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user