feat: tagbook open autofocus tag searcher

Author: betterRunner

src/content-scripts/renderer/popup/tag-book/index.vue

@@ -62,6 +62,11 @@ export default {
       height: `${TAG_BOOK_HEIGHT}px`,
       minHeight: `${TAG_BOOK_HEIGHT}px`,
     });
+    watch(() => props.noteId, () => {
+      if (props.noteId) {
+        mitt.emit('tag-search-focus');
+      }
+    })
     watch(
       () => props.coor,
       () => {

src/content-scripts/renderer/popup/tag-book/tag-searcher.vue

@@ -2,7 +2,9 @@
   <div class="tag-searcher-wrapper">
     <el-input
       v-model="searchText"
+      ref="taginput"
       size="mini"
+      autofocus
       placeholder="create or search tag.."
       @keydown.enter="handleEnter"
     ></el-input>
@@ -33,6 +35,10 @@ export default {
         });
       }
     );
+    const taginput = ref(null);
+    mitt.on('tag-search-focus', () => {
+      (taginput.value as unknown as HTMLElement)?.focus();
+    })
     const handleEnter = () => {
       if (!searchText.value) return;
 
@@ -44,6 +50,7 @@ export default {
     });
 
     return {
+      taginput,
       searchText,
       handleEnter,
     };

todo.md

@@ -7,6 +7,7 @@
 - [x] open link brings the note-id so can jump to note also
 - [x] delete the tag while deleting a note who is the only one that owns this tag
 - [x] searching notes
+- [x] tag search auto focus
 - [ ] more precise rects selection rather than coor (select the real dom by text)
 - [ ] screenshot features
   - https://javascript.plainenglish.io/a-better-alternative-to-html2canvas-in-vuejs-3-e0686755d56e