fix: deactivate themes on signout

app/assets/javascripts/directives/views/revisionPreviewModal.ts

@@ -72,8 +72,8 @@ class RevisionPreviewModalCtrl implements RevisionPreviewScope {
       this.unregisterComponent = this.componentManager.registerHandler({
         identifier: editorCopy.uuid,
         areas: [ComponentArea.Editor],
-        contextRequestHandler: (component) => {
+        contextRequestHandler: (componentUuid) => {
-          if (component === this.editor) {
+          if (componentUuid === this.editor?.uuid) {
             return this.note;
           }
         },

app/assets/javascripts/services/themeManager.ts

@@ -6,6 +6,8 @@ import {
   ApplicationService,
   SNTheme,
   ComponentArea,
+  removeFromArray,
+  ApplicationEvent,
 } from 'snjs';
 import { AppStateEvent } from '@/ui_models/app_state';
 
@@ -13,23 +15,28 @@ const CACHED_THEMES_KEY = 'cachedThemes';
 
 export class ThemeManager extends ApplicationService {
 
-  private activeThemes: SNTheme[]
+  private activeThemes: string[] = []
   private unsubState!: () => void
   private unregisterDesktop!: () => void
   private unregisterComponent!: () => void
 
-  constructor(application: WebApplication) {
+  /** @override */
-    super(application);
+  async onAppLaunch() {
-    this.activeThemes = [];
+    super.onAppLaunch();
-    setImmediate(() => {
+    this.unsubState = this.webApplication.getAppState().addObserver(
-      this.unsubState = this.webApplication.getAppState().addObserver(
+      async (eventName) => {
-        async (eventName) => {
+        if (eventName === AppStateEvent.DesktopExtsReady) {
-          if (eventName === AppStateEvent.DesktopExtsReady) {
+          this.activateCachedThemes();
-            this.activateCachedThemes();
-          }
         }
-      );
+      }
-    });
+    );
+  }
+
+  onAppEvent(event: ApplicationEvent) {
+    super.onAppEvent(event);
+    if (event === ApplicationEvent.SignedOut) {
+      this.deactivateAllThemes();
+    }
   }
 
   get webApplication() {
@@ -68,7 +75,7 @@ export class ThemeManager extends ApplicationService {
     this.unregisterDesktop = this.webApplication.getDesktopService()
       .registerUpdateObserver((component) => {
         if (component.active && component.isTheme()) {
-          this.deactivateTheme(component as SNTheme);
+          this.deactivateTheme(component.uuid);
           setTimeout(() => {
             this.activateTheme(component as SNTheme);
           }, 10);
@@ -82,28 +89,25 @@ export class ThemeManager extends ApplicationService {
         if (component.active) {
           this.activateTheme(component as SNTheme);
         } else {
-          this.deactivateTheme(component as SNTheme);
+          this.deactivateTheme(component.uuid);
         }
       }
     });
   }
 
-  public deactivateAllThemes() {
+  private deactivateAllThemes() {
-    const activeThemes = this.application!.componentManager!.getActiveThemes();
+    for (const uuid of this.activeThemes) {
-    for (const theme of activeThemes) {
+      this.deactivateTheme(uuid, false);
-      if (theme) {
-        this.application!.componentManager!.deregisterComponent(theme.uuid);
-      }
     }
     this.activeThemes = [];
     this.decacheThemes();
   }
 
   private activateTheme(theme: SNTheme, writeToCache = true) {
-    if (this.activeThemes.find((t) => t.uuid === theme.uuid)) {
+    if (this.activeThemes.find((uuid) => uuid === theme.uuid)) {
       return;
     }
-    this.activeThemes.push(theme);
+    this.activeThemes.push(theme.uuid);
     const url = this.application!.componentManager!.urlForComponent(theme)!;
     const link = document.createElement('link');
     link.href = url;
@@ -117,18 +121,21 @@ export class ThemeManager extends ApplicationService {
     }
   }
 
-  private deactivateTheme(theme: SNTheme) {
+  private deactivateTheme(uuid: string, recache = true) {
-    const element = document.getElementById(theme.uuid) as HTMLLinkElement;
+    const element = document.getElementById(uuid) as HTMLLinkElement;
     if (element) {
       element.disabled = true;
       element.parentNode!.removeChild(element);
     }
-    _.remove(this.activeThemes, { uuid: theme.uuid });
+    removeFromArray(this.activeThemes, uuid);
-    this.cacheThemes();
+    if (recache) {
+      this.cacheThemes();
+    }
   }
 
   private async cacheThemes() {
-    const mapped = await Promise.all(this.activeThemes.map(async (theme) => {
+    const themes = this.application!.getAll(this.activeThemes) as SNTheme[];
+    const mapped = await Promise.all(themes.map(async (theme) => {
       const payload = theme.payloadRepresentation();
       const processedPayload = await this.application!.protocolService!.payloadByEncryptingPayload(
         payload,
@@ -144,10 +151,12 @@ export class ThemeManager extends ApplicationService {
   }
 
   private async decacheThemes() {
-    return this.application!.removeValue(
+    if (this.application) {
-      CACHED_THEMES_KEY,
+      return this.application.removeValue(
-      StorageValueModes.Nonwrapped
+        CACHED_THEMES_KEY,
-    );
+        StorageValueModes.Nonwrapped
+      );
+    }
   }
 
   private async getCachedThemes() {

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

@@ -1030,12 +1030,12 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope {
         ComponentArea.EditorStack,
         ComponentArea.Editor
       ],
-      contextRequestHandler: (component) => {
+      contextRequestHandler: (componentUuid) => {
         const currentEditor = this.activeEditorComponent;
         if (
-          component.uuid === currentEditor?.uuid ||
+          componentUuid === currentEditor?.uuid ||
-          component.uuid === this.activeTagsComponent?.uuid ||
+          componentUuid === this.activeTagsComponent?.uuid ||
-          Uuids(this.getState().activeStackComponents).includes(component.uuid)
+          Uuids(this.getState().activeStackComponents).includes(componentUuid)
         ) {
           return this.note;
         }