diff --git a/app/assets/javascripts/components/NoteTags.tsx b/app/assets/javascripts/components/NoteTags.tsx index 6c4390dc0..83b2d2759 100644 --- 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,6 +16,11 @@ const NoteTags = observer(({ application, appState }: Props) => { const { activeNoteTags } = appState.notes; const lastTagRef = useRef(); + const onTagBackspacePress = async (tag: SNTag) => { + await appState.notes.removeTagFromActiveNote(tag); + lastTagRef.current?.focus(); + }; + return (
{activeNoteTags.map((tag, index) => ( @@ -22,6 +28,11 @@ const NoteTags = observer(({ application, appState }: Props) => { 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); + } + }} > {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 index 08bb56d29..5bcf531c1 100644 --- 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 { + 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 index 405db34f8..df7ded8e6 100644 --- 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