fix(search): set selected folder & snippet after focus on editor after search

Author: antonreshetov

src/renderer/components/editor/TheEditor.vue

@@ -46,6 +46,7 @@ import parserMarkdown from 'prettier/parser-markdown'
 import parserPostcss from 'prettier/parser-postcss'
 import parserYaml from 'prettier/parser-yaml'
 import { emitter } from '@/composable'
+import { useFolderStore } from '@/store/folders'
 
 interface Props {
   lang: Language
@@ -69,6 +70,7 @@ const emit = defineEmits<Emits>()
 
 const appStore = useAppStore()
 const snippetStore = useSnippetStore()
+const folderStore = useFolderStore()
 
 const editorRef = ref()
 const cursorPosition = reactive({
@@ -136,9 +138,12 @@ const init = async () => {
   editor.selection.on('changeCursor', () => {
     getCursorPosition()
   })
-  editor.on('focus', () => {
+  editor.on('focus', async () => {
     if (snippetStore.searchQuery?.length) {
       snippetStore.searchQuery = undefined
+      folderStore.selectId(snippetStore.selected!.folderId)
+      await snippetStore.setSnippetsByFolderIds()
+      emitter.emit('scroll-to:snippet', snippetStore.selectedId!)
     }
   })
 

src/renderer/components/snippets/SnippetList.vue

@@ -45,6 +45,11 @@ const listRef = ref()
 const bodyRef = ref<HTMLElement>()
 const gutterRef = ref()
 
+const scrollToSnippet = (id: string) => {
+  const el = document.querySelector<HTMLElement>(`[data-id='${id}']`)
+  if (el?.offsetTop) setScrollPosition(bodyRef.value!, el.offsetTop)
+}
+
 onMounted(() => {
   interact(listRef.value).resizable({
     allowFrom: gutterRef.value,
@@ -62,20 +67,20 @@ onMounted(() => {
 
 watch(
   () => appStore.isInit,
-  () => {
-    const el = document.querySelector<HTMLElement>(
-      `[data-id='${snippetStore.selectedId!}']`
-    )
-    if (el?.offsetTop) setScrollPosition(bodyRef.value!, el.offsetTop)
-  }
+  () => scrollToSnippet(snippetStore.selectedId!)
 )
 
 emitter.on('folder:click', () => {
   setScrollPosition(bodyRef.value!, 0)
 })
 
+emitter.on('scroll-to:snippet', (id: string) => {
+  scrollToSnippet(id)
+})
+
 onUnmounted(() => {
   emitter.off('folder:click')
+  emitter.off('scroll-to:snippet')
 })
 </script>
 

src/shared/types/renderer/composable/index.d.ts

@@ -4,5 +4,6 @@ export type EmitterEvents = {
   'folder:click': any
   'folder:rename': string
   'scroll-to:folder': string
+  'scroll-to:snippet': string
   'search:focus': boolean
 }