fix: prevent name input from losing trailing spaces while typing (#719)

Author: antonreshetov

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

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import { useApp, useSnippets, useSnippetUpdate } from '@/composables'
+import {
+  useApp,
+  useEditableField,
+  useSnippets,
+  useSnippetUpdate,
+} from '@/composables'
 import { i18n } from '@/electron'
 
 import {
@@ -30,11 +35,13 @@ const { addToUpdateQueue } = useSnippetUpdate()
 
 const isShowDescription = ref(false)
 
-const name = computed({
-  get() {
-    return selectedSnippet?.value?.name
-  },
-  set(v: string) {
+const {
+  model: name,
+  onFocus: onNameFocus,
+  onBlur,
+} = useEditableField(
+  () => selectedSnippet?.value?.name,
+  (v) => {
     addToUpdateQueue(selectedSnippet.value!.id, {
       name: v,
       description: selectedSnippet.value!.description,
@@ -43,7 +50,12 @@ const name = computed({
       isFavorites: selectedSnippet.value!.isFavorites,
     })
   },
-})
+)
+
+function onNameBlur() {
+  onBlur()
+  isFocusedSnippetName.value = false
+}
 
 const isShowJsonVisualizerAction = computed(
   () => selectedSnippetContent.value?.language === 'json',
@@ -86,7 +98,8 @@ function onJsonVisualizerToggle() {
         variant="ghost"
         class="w-full truncate px-0"
         :select="isFocusedSnippetName"
-        @blur="isFocusedSnippetName = false"
+        @focus="onNameFocus"
+        @blur="onNameBlur"
       />
       <div class="ml-2 flex">
         <UiActionButton

src/renderer/components/notes/NotesEditorPane.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import * as Select from '@/components/ui/shadcn/select'
-import { useNotes, useNotesApp, useNoteUpdate } from '@/composables'
+import {
+  useEditableField,
+  useNotes,
+  useNotesApp,
+  useNoteUpdate,
+} from '@/composables'
 import { i18n } from '@/electron'
 import { router, RouterName } from '@/router'
 import {
@@ -75,16 +80,23 @@ function onPresentationToggle() {
   router.push({ name: RouterName.notesPresentation })
 }
 
-const name = computed({
-  get() {
-    return selectedNote.value?.name
-  },
-  set(v: string) {
+const {
+  model: name,
+  onFocus: onNameFocus,
+  onBlur,
+} = useEditableField(
+  () => selectedNote.value?.name,
+  (v) => {
     if (selectedNote.value) {
       addToUpdateQueue(selectedNote.value.id, { name: v })
     }
   },
-})
+)
+
+function onNameBlur() {
+  onBlur()
+  isFocusedNoteName.value = false
+}
 
 const editorContent = ref('')
 
@@ -128,7 +140,8 @@ const textStats = computed(() => getTextStats(content.value))
           variant="ghost"
           class="w-full truncate px-0"
           :select="isFocusedNoteName"
-          @blur="isFocusedNoteName = false"
+          @focus="onNameFocus"
+          @blur="onNameBlur"
         />
         <div class="ml-2 flex h-7 items-center">
           <UiActionButton

src/renderer/composables/index.ts

@@ -3,6 +3,7 @@ export * from './spaces/notes'
 export * from './useApp'
 export * from './useCopyToClipboard'
 export * from './useDialog'
+export * from './useEditableField'
 export * from './useEditor'
 export * from './useFolders'
 export * from './useNotesEditor'

src/renderer/composables/useEditableField.ts

@@ -0,0 +1,37 @@
+type SourceFn = () => string | undefined
+
+export function useEditableField(
+  source: SourceFn,
+  onUpdate: (value: string) => void,
+) {
+  const localValue = ref('')
+  const isFocused = ref(false)
+
+  watch(
+    source,
+    (newValue) => {
+      if (!isFocused.value) {
+        localValue.value = newValue ?? ''
+      }
+    },
+    { immediate: true },
+  )
+
+  const model = computed({
+    get: () => localValue.value,
+    set: (v: string) => {
+      localValue.value = v
+      onUpdate(v)
+    },
+  })
+
+  function onFocus() {
+    isFocused.value = true
+  }
+
+  function onBlur() {
+    isFocused.value = false
+  }
+
+  return { model, onFocus, onBlur }
+}