feat: add tag on dropdown option click

app/assets/javascripts/components/AutocompleteTagInput.tsx

@@ -18,7 +18,8 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
 }) => {
   const [searchQuery, setSearchQuery] = useState('');
   const [dropdownVisible, setDropdownVisible] = useState(false);
-  const [dropdownMaxHeight, setDropdownMaxHeight] = useState<number | 'auto'>('auto');
+  const [dropdownMaxHeight, setDropdownMaxHeight] =
+    useState<number | 'auto'>('auto');
 
   const getActiveNoteTagResults = (query: string) => {
     const { activeNote } = appState.notes;
@@ -38,7 +39,7 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
   const showDropdown = () => {
     const { clientHeight } = document.documentElement;
     const inputRect = inputRef.current.getBoundingClientRect();
-    setDropdownMaxHeight(clientHeight - inputRect.bottom - 32*2);
+    setDropdownMaxHeight(clientHeight - inputRect.bottom - 32 * 2);
     setDropdownVisible(true);
   };
 
@@ -53,10 +54,7 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
 
   return (
     <form onSubmit={(event) => event.preventDefault()} className="mt-2">
-      <Disclosure
-        open={dropdownVisible}
-        onChange={showDropdown}
-      >
+      <Disclosure open={dropdownVisible} onChange={showDropdown}>
         <input
           ref={inputRef}
           className="min-w-80 text-xs no-border h-7 focus:outline-none focus:shadow-none focus:border-bottom"
@@ -82,6 +80,7 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
                   key={tag.uuid}
                   className={`flex items-center border-0 focus:inner-ring-info cursor-pointer
                   hover:bg-contrast color-text bg-transparent px-3 text-left py-1.5`}
+                  onClick={() => appState.notes.addTagToActiveNote(tag)}
                   onBlur={closeOnBlur}
                 >
                   <Icon type="hashtag" className="color-neutral mr-2" />

app/assets/javascripts/ui_models/app_state/notes_state.ts

@@ -46,6 +46,7 @@ export class NotesState {
       selectedNotesCount: computed,
       trashedNotesCount: computed,
 
+      reloadActiveNoteTags: action,
       setContextMenuOpen: action,
       setContextMenuPosition: action,
       setContextMenuMaxHeight: action,
@@ -154,6 +155,13 @@ export class NotesState {
     }
   }
 
+  async reloadActiveNoteTags(): Promise<void> {
+    const { activeNote } = this;
+    if (activeNote) {
+      this.activeNoteTags = this.application.getAppState().getNoteTags(activeNote);
+    } 
+  }
+
   private async openEditor(noteUuid: string): Promise<void> {
     if (this.activeEditor?.note?.uuid === noteUuid) {
       return;
@@ -171,10 +179,7 @@ export class NotesState {
       this.activeEditor.setNote(note);
     }
     
-    runInAction(() => {
-      this.activeNoteTags = this.application.getAppState().getNoteTags(note);
-    });
-
+    this.reloadActiveNoteTags();
     await this.onActiveEditorChanged();
 
     if (note.waitingForKey) {
@@ -361,6 +366,16 @@ export class NotesState {
     );
   }
 
+  async addTagToActiveNote(tag: SNTag): Promise<void> {
+    const { activeNote } = this;
+    if (activeNote) {
+      await this.application.changeItem(tag.uuid, (mutator) => {
+        mutator.addItemAsRelationship(activeNote);
+      });
+      this.reloadActiveNoteTags();
+    }
+  }
+
   setShowProtectedWarning(show: boolean): void {
     this.showProtectedWarning = show;
   }

app/assets/javascripts/views/editor/editor-view.pug

@@ -48,21 +48,10 @@
               ng-style="self.notesLocked && {'pointer-events' : 'none'}",
               application='self.application'
               )
-          div.flex
-            note-tags(
-              application='self.application'
-              app-state='self.appState'
-            )
-            input.tags-input(
-              ng-blur='self.onTagsInputBlur()',
-              ng-disabled='self.noteLocked',
-              ng-if='!self.state.tagsComponent',
-              ng-keyup='$event.keyCode == 13 && $event.target.blur();',
-              ng-model='self.editorValues.tagsInputValue',
-              placeholder='#tags',
-              spellcheck='false',
-              type='text'
-              )
+          note-tags(
+            application='self.application'
+            app-state='self.appState'
+          )
       div.flex.items-center
         #save-status
           .message(