fix: handle retrieving deleted components

app/assets/javascripts/services/themeManager.ts

@@ -7,7 +7,7 @@ import {
   SNTheme,
   ComponentArea,
   removeFromArray,
-  ApplicationEvent,
+  ApplicationEvent
 } from 'snjs';
 import { AppStateEvent } from '@/ui_models/app_state';
 
@@ -85,11 +85,11 @@ export class ThemeManager extends ApplicationService {
     this.unregisterComponent = this.application!.componentManager!.registerHandler({
       identifier: 'themeManager',
       areas: [ComponentArea.Themes],
-      activationHandler: (component) => {
+      activationHandler: (uuid, component) => {
-        if (component.active) {
+        if (component?.active) {
           this.activateTheme(component as SNTheme);
         } else {
-          this.deactivateTheme(component.uuid);
+          this.deactivateTheme(uuid);
         }
       }
     });

app/assets/javascripts/views/editor/editor_view.ts

@@ -59,8 +59,8 @@ type NoteStatus = {
 
 type EditorState = {
   stackComponents: SNComponent[]
-  activeEditorComponent?: SNComponent
+  editorComponent?: SNComponent
-  activeTagsComponent?: SNComponent
+  tagsComponent?: SNComponent
   saveError?: any
   noteStatus?: NoteStatus
   tagsAsStrings?: string
@@ -74,9 +74,11 @@ type EditorState = {
   showSessionHistory: boolean
   altKeyDown: boolean
   spellcheck: boolean
-  /** Setting to false then true will allow the current editor component-view to be destroyed
+  /**
-   * then re-initialized. Used when changing between component editors. */
+   * Setting to false then true will allow the current editor component-view to be destroyed
-  editorComponentUnloading: boolean
+   * then re-initialized. Used when changing between component editors.
+   */
+  editorUnloading: boolean
   /** Setting to true then false will allow the main content textarea to be destroyed
    * then re-initialized. Used when reloading spellcheck status. */
   textareaUnloading: boolean
@@ -112,7 +114,6 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> {
   private removeTrashKeyObserver?: any
   private removeDeleteKeyObserver?: any
   private removeTabObserver?: any
-  private removeComponentGroupObserver: any
 
   private removeTagsObserver!: () => void
   private removeComponentsObserver!: () => void
@@ -148,8 +149,6 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> {
     this.removeComponentsObserver();
     (this.removeTagsObserver as any) = undefined;
     (this.removeComponentsObserver as any) = undefined;
-    this.removeComponentGroupObserver();
-    this.removeComponentGroupObserver = undefined;
     this.removeAltKeyObserver();
     this.removeAltKeyObserver = undefined;
     this.removeTrashKeyObserver();
@@ -204,25 +203,6 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> {
         }
       }
     });
-    this.removeComponentGroupObserver = this.componentGroup.addChangeObserver(
-      async () => {
-        const currentEditor = this.activeEditorComponent;
-        const newEditor = this.componentGroup.activeComponentForArea(ComponentArea.Editor);
-        if (currentEditor && newEditor && currentEditor.uuid !== newEditor.uuid) {
-          /** Unload current component view so that we create a new one,
-           * then change the active editor */
-          await this.setState({
-            editorComponentUnloading: true
-          });
-        }
-        this.setState({
-          activeEditorComponent: newEditor,
-          activeTagsComponent: this.componentGroup.activeComponentForArea(ComponentArea.NoteTags),
-          /** Stop unloading, if we were already unloading */
-          editorComponentUnloading: false
-        });
-      }
-    )
   }
 
   /** @override */
@@ -239,7 +219,7 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> {
       showSessionHistory: false,
       altKeyDown: false,
       noteStatus: undefined,
-      editorComponentUnloading: false,
+      editorUnloading: false,
       textareaUnloading: false,
       mutable: {
         tagsString: ''
@@ -288,18 +268,6 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> {
     }
   }
 
-  get activeEditorComponent() {
-    return this.state.activeEditorComponent;
-  }
-
-  get activeTagsComponent() {
-    return this.state.activeTagsComponent;
-  }
-
-  get componentGroup() {
-    return this.application.componentGroup;
-  }
-
   async handleEditorNoteChange() {
     this.cancelPendingSetStatus();
     await this.setState({
@@ -313,37 +281,15 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> {
     const note = this.editor.note;
     this.editorValues.title = note.title;
     this.editorValues.text = note.text;
-    await this.reloadComponentEditorState();
+    this.reloadEditor();
     this.reloadTagsString();
     this.reloadPreferences();
-    this.reloadComponentContext();
+    this.reloadStackComponents();
     if (note.safeText().length === 0) {
       this.focusTitle();
     }
   }
 
-  async reloadComponentEditorState(): Promise<{ editor?: SNComponent, changed: boolean }> {
-    const editor = this.application.componentManager!.editorForNote(this.note);
-    if (!editor) {
-      let changed: boolean;
-      if (this.activeEditorComponent) {
-        await this.componentGroup.deactivateComponentForArea(ComponentArea.Editor);
-        changed = true;
-      } else {
-        changed = false;
-      }
-      return { editor, changed };
-    }
-
-    if (editor.uuid === this.activeEditorComponent?.uuid) {
-      /** Same editor, no change */
-      return { editor, changed: false };
-    }
-
-    await this.componentGroup.activateComponent(editor);
-    return { editor, changed: true };
-  }
-
   /**
    * Because note.locked accesses note.content.appData,
    * we do not want to expose the template to direct access to note.locked,
@@ -383,30 +329,34 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> {
       ContentType.Component,
       async (items) => {
         if (!this.note) return;
-        this.setState({
+        this.reloadStackComponents();
-          stackComponents: sortAlphabetically(
-            this.application.componentManager!.componentsForArea(ComponentArea.EditorStack)
-              .filter(component => component.active)
-          )
-        });
-        this.reloadComponentContext();
         this.reloadNoteTagsComponent();
-        /** Observe editor changes to see if the current note should update its editor */
+        this.reloadEditor();
-        const components = items as SNComponent[];
-        const editors = components.filter((component) => {
-          return component.isEditor();
-        });
-        if (editors.length) {
-          /** Find the most recent editor for note */
-          const { editor, changed } = await this.reloadComponentEditorState();
-          if (!editor && changed) {
-            this.reloadFont();
-          }
-        }
       }
     );
   }
 
+  private async reloadEditor() {
+    const newEditor = this.application.componentManager!.editorForNote(this.note);
+    const currentEditor = this.state.editorComponent;
+    if (currentEditor?.uuid !== newEditor?.uuid) {
+      await this.setState({
+        editorComponent: newEditor,
+        /** Unload current component view so that we create a new one */
+        editorUnloading: true
+      });
+      if (newEditor && !newEditor.active) {
+        await this.application.componentManager?.activateComponent(newEditor.uuid);
+      }
+      await this.setState({
+        /** Reload component view */
+        editorUnloading: false
+      });
+      this.reloadFont();
+      this.application.componentManager!.contextItemDidChangeInArea(ComponentArea.Editor);
+    }
+  }
+
   setMenuState(menu: string, state: boolean) {
     this.setState({
       [menu]: state
@@ -443,14 +393,13 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> {
           noteMutator.prefersPlainEditor = true;
         })
       }
-      if (this.activeEditorComponent?.isExplicitlyEnabledForItem(this.note.uuid)) {
+      if (this.state.editorComponent?.isExplicitlyEnabledForItem(this.note.uuid)) {
-        await this.disassociateComponentWithCurrentNote(this.activeEditorComponent);
+        await this.disassociateComponentWithCurrentNote(this.state.editorComponent);
       }
-      await this.reloadComponentEditorState();
       this.reloadFont();
     }
     else if (component.area === ComponentArea.Editor) {
-      const currentEditor = this.activeEditorComponent;
+      const currentEditor = this.state.editorComponent;
       if (currentEditor && component !== currentEditor) {
         await this.disassociateComponentWithCurrentNote(currentEditor);
       }
@@ -462,7 +411,6 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> {
         })
       }
       await this.associateComponentWithCurrentNote(component);
-      await this.reloadComponentEditorState();
     }
     else if (component.area === ComponentArea.EditorStack) {
       await this.toggleStackComponentForCurrentItem(component);
@@ -1048,10 +996,10 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> {
         ComponentArea.Editor
       ],
       contextRequestHandler: (componentUuid) => {
-        const currentEditor = this.activeEditorComponent;
+        const currentEditor = this.state.editorComponent;
         if (
           componentUuid === currentEditor?.uuid ||
-          componentUuid === this.activeTagsComponent?.uuid ||
+          componentUuid === this.state.tagsComponent?.uuid ||
           Uuids(this.state.stackComponents).includes(componentUuid)
         ) {
           return this.note;
@@ -1103,20 +1051,25 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> {
   }
 
   reloadNoteTagsComponent() {
-    const components = this.application.componentManager!
+    const [tagsComponent] =
-      .componentsForArea(ComponentArea.NoteTags);
+      this.application.componentManager!.componentsForArea(ComponentArea.NoteTags);
-    for (const component of components) {
+    if (tagsComponent?.uuid !== this.state.tagsComponent?.uuid) {
-      if (component.active) {
+      this.setState({
-        this.componentGroup.activateComponent(component);
+        tagsComponent: tagsComponent?.active ? tagsComponent : undefined
-      } else {
+      });
-        this.componentGroup.deactivateComponent(component);
-      }
     }
+    this.application.componentManager!.contextItemDidChangeInArea(ComponentArea.NoteTags);
   }
 
-  reloadComponentContext() {
+  reloadStackComponents() {
+    this.setState({
+      stackComponents: sortAlphabetically(
+        this.application.componentManager!.componentsForArea(ComponentArea.EditorStack)
+          .filter(component => component.active)
+      )
+    });
     if (this.note) {
-      for (const component of this.state.stackComponents!) {
+      for (const component of this.state.stackComponents) {
         if (component.active) {
           this.application.componentManager!.setComponentHidden(
             component,
@@ -1125,9 +1078,7 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> {
         }
       }
     }
-    this.application.componentManager!.contextItemDidChangeInArea(ComponentArea.NoteTags);
     this.application.componentManager!.contextItemDidChangeInArea(ComponentArea.EditorStack);
-    this.application.componentManager!.contextItemDidChangeInArea(ComponentArea.Editor);
   }
 
 
@@ -1140,9 +1091,6 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> {
     if (hidden || !component.active) {
       this.application.componentManager!.setComponentHidden(component, false);
       await this.associateComponentWithCurrentNote(component);
-      if (!component.active) {
-        this.componentGroup!.activateComponent(component);
-      }
       this.application.componentManager!.contextItemDidChangeInArea(ComponentArea.EditorStack);
     } else {
       this.application.componentManager!.setComponentHidden(component, true);

app/assets/javascripts/views/footer/footer_view.ts

@@ -10,7 +10,8 @@ import {
   ComponentArea,
   ComponentAction,
   topLevelCompare,
-  CollectionSort
+  CollectionSort,
+  ComponentMutator,
 } from 'snjs';
 import template from './footer-view.pug';
 import { AppStateEvent, EventSource } from '@/ui_models/app_state';
@@ -20,7 +21,6 @@ import {
   STRING_CONFIRM_APP_QUIT_DURING_UPGRADE
 } from '@/strings';
 import { PureViewCtrl } from '@Views/abstract/pure_view_ctrl';
-import { ComponentMutator } from '@node_modules/snjs/dist/@types/models';
 
 type DockShortcut = {
   name: string,
@@ -250,13 +250,11 @@ class FooterViewCtrl extends PureViewCtrl {
     this.unregisterComponent = this.application!.componentManager!.registerHandler({
       identifier: 'room-bar',
       areas: [ComponentArea.Rooms, ComponentArea.Modal],
-      activationHandler: () => { },
       actionHandler: (component, action, data) => {
         if (action === ComponentAction.SetSize) {
           /** Do comparison to avoid repetitive calls by arbitrary component */
           if (!topLevelCompare(component.getLastSize(), data)) {
-            this.application!.changeItem(component.uuid, (m) => {
+            this.application!.changeItem<ComponentMutator>(component.uuid, (mutator) => {
-              const mutator = m as ComponentMutator;
               mutator.setLastSize(data);
             })
           }

app/assets/javascripts/views/tags/tags_view.ts

@@ -8,15 +8,15 @@ import {
   SNSmartTag,
   ComponentArea,
   SNComponent,
-  WebPrefKey
+  WebPrefKey,
+  UuidString,
+  TagMutator
 } from 'snjs';
 import template from './tags-view.pug';
 import { AppStateEvent } from '@/ui_models/app_state';
 import { PANEL_NAME_TAGS } from '@/views/constants';
 import { STRING_DELETE_TAG } from '@/strings';
 import { PureViewCtrl } from '@Views/abstract/pure_view_ctrl';
-import { UuidString } from '@node_modules/snjs/dist/@types/types';
-import { TagMutator } from '@node_modules/snjs/dist/@types/models/app/tag';
 import { confirmDialog } from '@/services/alertService';
 
 type NoteCounts = Partial<Record<string, number>>
@@ -239,7 +239,7 @@ class TagsViewCtrl extends PureViewCtrl {
     this.unregisterComponent = this.application.componentManager!.registerHandler({
       identifier: 'tags',
       areas: [ComponentArea.TagsList],
-      activationHandler: (component) => {
+      activationHandler: (_, component) => {
         this.component = component;
       },
       contextRequestHandler: () => {
@@ -321,9 +321,8 @@ class TagsViewCtrl extends PureViewCtrl {
       );
       return;
     };
-    await this.application.changeAndSaveItem(tag.uuid, (mutator) => {
+    await this.application.changeAndSaveItem<TagMutator>(tag.uuid, (mutator) => {
-      const tagMutator = mutator as TagMutator;
+      mutator.title = newTitle;
-      tagMutator.title = newTitle;
     });
     await this.setTagState({
       editingTag: undefined
@@ -347,9 +346,8 @@ class TagsViewCtrl extends PureViewCtrl {
       return;
     };
     const insertedTag = await this.application.insertItem(newTag);
-    const changedTag = await this.application.changeItem(insertedTag.uuid, (m) => {
+    const changedTag = await this.application.changeItem<TagMutator>(insertedTag.uuid, (m) => {
-      const mutator = m as TagMutator;
+      m.title = newTitle;
-      mutator.title = newTitle
     });
     await this.setTagState({
       templateTag: undefined,