From 069e296f0aa3792990b8a25a1cfd314c853946fa Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Tue, 19 Apr 2022 15:10:24 +0300
Subject: [PATCH] fix(search): set selected folder & snippet after focus on
 editor after search

---
 src/renderer/components/editor/TheEditor.vue    |  7 ++++++-
 .../components/snippets/SnippetList.vue         | 17 +++++++++++------
 src/shared/types/renderer/composable/index.d.ts |  1 +
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/editor/TheEditor.vue b/src/renderer/components/editor/TheEditor.vue
index c949040b..a8dfb17d 100644
--- a/src/renderer/components/editor/TheEditor.vue
+++ b/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!)
     }
   })
 
diff --git a/src/renderer/components/snippets/SnippetList.vue b/src/renderer/components/snippets/SnippetList.vue
index bdf311d3..f84c082f 100644
--- a/src/renderer/components/snippets/SnippetList.vue
+++ b/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>
 
diff --git a/src/shared/types/renderer/composable/index.d.ts b/src/shared/types/renderer/composable/index.d.ts
index 218c1f37..6e62693f 100644
--- a/src/shared/types/renderer/composable/index.d.ts
+++ b/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
 }