feat: remove tag on backspace press

standardnotes · May 26, 2021 · 69c9247 · 69c9247
1 parent d6f1cc3
commit 69c9247
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/app/assets/javascripts/components/NoteTags.tsx b/app/assets/javascripts/components/NoteTags.tsx
@@ -5,6 +5,7 @@ import { Icon } from './Icon';
 import { AutocompleteTagInput } from './AutocompleteTagInput';
 import { WebApplication } from '@/ui_models/application';
 import { useRef } from 'preact/hooks';
+import { SNTag } from '@standardnotes/snjs';
 
 type Props = {
   application: WebApplication;
@@ -15,13 +16,23 @@ const NoteTags = observer(({ application, appState }: Props) => {
   const { activeNoteTags } = appState.notes;
   const lastTagRef = useRef<HTMLButtonElement>();
 
+  const onTagBackspacePress = async (tag: SNTag) => {
+    await appState.notes.removeTagFromActiveNote(tag);
+    lastTagRef.current?.focus();
+  };
+
   return (
     <div className="flex flex-wrap">
       {activeNoteTags.map((tag, index) => (
         <button
           className={`bg-contrast border-0 rounded text-xs color-text p-1 flex items-center 
             mt-2 mr-2 cursor-pointer hover:bg-secondary-contrast focus:bg-secondary-contrast`}
           ref={index === activeNoteTags.length - 1 ? lastTagRef : undefined}
+          onKeyUp={(event) => {
+            if (event.key === 'Backspace') {
+              onTagBackspacePress(tag);
+            }
+          }}
         >
           <Icon type="hashtag" className="sn-icon--small color-neutral mr-1" />
           {tag.title}

diff --git a/app/assets/javascripts/ui_models/app_state/notes_state.ts b/app/assets/javascripts/ui_models/app_state/notes_state.ts
@@ -158,7 +158,7 @@ export class NotesState {
   reloadActiveNoteTags(): void {
     const { activeNote } = this;
     if (activeNote) {
-      this.activeNoteTags = this.application.getSortedTagsForNote(activeNote)
+      this.activeNoteTags = this.application.getSortedTagsForNote(activeNote);
     } 
   }
 
@@ -379,6 +379,18 @@ export class NotesState {
     }
   }
 
+  async removeTagFromActiveNote(tag: SNTag): Promise<void> {
+    const { activeNote } = this;
+    if (activeNote) {
+      await this.application.changeItem(tag.uuid, (mutator) => {
+        mutator.removeItemAsRelationship(activeNote);
+      });
+      this.application.sync();
+      this.reloadActiveNoteTags();
+    }
+  }
+
+
   setShowProtectedWarning(show: boolean): void {
     this.showProtectedWarning = show;
   }

diff --git a/app/assets/javascripts/views/editor_group/editor_group_view.ts b/app/assets/javascripts/views/editor_group/editor_group_view.ts
@@ -1,4 +1,3 @@
-import { WebApplication } from '@/ui_models/application';
 import { WebDirective } from './../../types';
 import template from './editor-group-view.pug';
 import { Editor } from '@/ui_models/editor';
@@ -15,7 +14,7 @@ class EditorGroupViewCtrl extends PureViewCtrl<unknown, {
     super($timeout);
     this.state = {
       showMultipleSelectedNotes: false
-    }
+    };
   }
 
   $onInit() {