feat(editor): focus editor from created item title (#855)

Author: antonreshetov

src/renderer/components/editor/Editor.vue

@@ -348,6 +348,17 @@ function setLanguage(language: Language) {
   editor?.setOption('mode', language)
 }
 
+function focusEditor() {
+  isShowCodeImage.value = false
+  isShowJsonVisualizer.value = false
+
+  nextTick(() => {
+    requestAnimationFrame(() => {
+      editor?.focus()
+    })
+  })
+}
+
 async function format() {
   const availableLang: Language[] = [
     'css',
@@ -497,7 +508,10 @@ onMounted(() => {
     data-editor
     class="grid h-full grid-rows-[auto_1fr_auto] overflow-hidden pt-[var(--content-top-offset)]"
   >
-    <EditorHeader v-if="isShowHeader" />
+    <EditorHeader
+      v-if="isShowHeader"
+      @focus-editor="focusEditor"
+    />
     <div
       v-show="isShowEditor"
       class="flex min-h-0 flex-1 flex-col overflow-auto"

src/renderer/components/editor/header/Header.vue

@@ -25,6 +25,10 @@ import {
   getEntryNameValidationIssue,
 } from '~/shared/entryNameValidation'
 
+const emit = defineEmits<{
+  focusEditor: []
+}>()
+
 const {
   displayedSnippets,
   selectedSnippet,
@@ -157,6 +161,20 @@ function onNameBlur() {
   isFocusedSnippetName.value = false
 }
 
+function onNameKeydown(event: KeyboardEvent) {
+  if (
+    (event.key !== 'Enter' && event.key !== 'Tab')
+    || event.shiftKey
+    || nameValidationIssue.value
+    || hasNameConflict.value
+  ) {
+    return
+  }
+
+  event.preventDefault()
+  emit('focusEditor')
+}
+
 const isShowJsonVisualizerAction = computed(
   () => selectedSnippetContent.value?.language === 'json',
 )
@@ -235,6 +253,7 @@ function onJsonVisualizerToggle() {
               :select="isFocusedSnippetName"
               @focus="onSnippetNameFocus"
               @blur="onNameBlur"
+              @keydown="onNameKeydown"
             />
           </UiInputValidationTooltip>
         </div>

src/renderer/components/notes/NotesEditor.vue

@@ -377,6 +377,16 @@ watch(isDark, () => {
   applyExternalState(content.value)
 })
 
+function focusEditor() {
+  nextTick(() => {
+    view?.focus()
+  })
+}
+
+defineExpose({
+  focusEditor,
+})
+
 async function syncNavigationNoteUIStateRegistration(noteId = props.noteId) {
   unregisterNavigationNoteUIState?.()
   unregisterNavigationNoteUIState = undefined

src/renderer/components/notes/NotesEditorPane.vue

@@ -193,6 +193,8 @@ const isNameValidationTooltipOpen = computed(() => {
   return isNameFocused.value && Boolean(nameValidationMessage.value)
 })
 
+const notesEditorRef = useTemplateRef('notesEditorRef')
+
 function onNoteNameFocus() {
   isNameFocused.value = true
   onNameFocus()
@@ -208,6 +210,24 @@ function onNameBlur() {
   isFocusedNoteName.value = false
 }
 
+function onNameKeydown(event: KeyboardEvent) {
+  if (
+    (event.key !== 'Enter' && event.key !== 'Tab')
+    || event.shiftKey
+    || nameValidationIssue.value
+    || hasNameConflict.value
+  ) {
+    return
+  }
+
+  event.preventDefault()
+  hideNotesViewModes()
+
+  nextTick(() => {
+    notesEditorRef.value?.focusEditor()
+  })
+}
+
 const editorContent = ref('')
 // id заметки, контент которой сейчас находится в редакторе: меняется только
 // вместе с editorContent, когда полная запись уже загружена.
@@ -314,6 +334,7 @@ onBeforeUnmount(() => {
                 :select="isFocusedNoteName"
                 @focus="onNoteNameFocus"
                 @blur="onNameBlur"
+                @keydown="onNameKeydown"
               />
             </UiInputValidationTooltip>
           </div>
@@ -366,6 +387,7 @@ onBeforeUnmount(() => {
       >
         <div class="min-h-0">
           <NotesEditor
+            ref="notesEditorRef"
             v-model:content="content"
             :mode="notesEditorMode"
             :note-id="editorNoteId"