Make component errors audible, perform state changes in timeout

app/assets/javascripts/app/controllers/editor.js

@@ -516,11 +516,17 @@ angular.module('app')
       } else if(component.area == "editor-editor") {
         // An editor is already active, ensure the potential replacement is explicitely enabled for this item
         // We also check if the selectedEditor is active. If it's inactive, we want to treat it as an external reference wishing to deactivate this editor (i.e componentView)
-        if(this.selectedEditor && this.selectedEditor.active) {
-          if(component.isExplicitlyEnabledForItem(this.note)) {
-            this.selectedEditor = component;
+        if(this.selectedEditor && this.selectedEditor == component && component.active == false) {
+          this.selectedEditor = null;
+        } 
+        else if(this.selectedEditor) {
+          if(this.selectedEditor.active) {
+            if(component.isExplicitlyEnabledForItem(this.note)) {
+              this.selectedEditor = component;
+            }
           }
-        } else {
+        }
+        else {
           // If no selected editor, let's see if the incoming one is a candidate
           if(component.active && this.note && (component.isExplicitlyEnabledForItem(this.note) || component.isDefaultEditor())) {
             this.selectedEditor = component;

app/assets/javascripts/app/services/componentManager.js

@@ -251,6 +251,11 @@ class ComponentManager {
       // Native extension running in web, prefix current host
       origin = window.location.href + origin;
     }
+
+    if(!component.window) {
+      alert(`Standard Notes is trying to communicate with ${component.name}, but an error is occurring. Please restart this extension and try again.`)
+    }
+
     component.window.postMessage(message, origin);
   }
 
@@ -285,6 +290,7 @@ class ComponentManager {
   handleMessage(component, message) {
 
     if(!component) {
+      alert("An extension is trying to communicate with Standard Notes, but there is an error establishing a bridge. Please restart the app and try again.");
       if(this.loggingEnabled) {
         console.log("Component not defined, returning");
       }
@@ -748,13 +754,28 @@ class ComponentManager {
     this.postActiveThemeToComponent(component);
   }
 
-  activateComponent(component, dontSync = false) {
+  /* Performs func in timeout, but syncronously, if used `await waitTimeout` */
+  async waitTimeout(func) {
+    return new Promise((resolve, reject) => {
+      this.timeout(() => {
+        func();
+        resolve();
+      });
+    })
+  }
+
+
+  async activateComponent(component, dontSync = false) {
     var didChange = component.active != true;
 
     component.active = true;
     for(var handler of this.handlers) {
       if(handler.areas.includes(component.area) || handler.areas.includes("*")) {
-        handler.activationHandler(component);
+        // We want to run the handler in a $timeout so the UI updates, but we also don't want it to run asyncronously
+        // so that the steps below this one are run before the handler. So we run in a waitTimeout.
+        await this.waitTimeout(() => {
+          handler.activationHandler(component);
+        })
       }
     }
 
@@ -772,14 +793,16 @@ class ComponentManager {
     }
   }
 
-  deactivateComponent(component, dontSync = false) {
+  async deactivateComponent(component, dontSync = false) {
     var didChange = component.active != false;
     component.active = false;
     component.sessionKey = null;
 
-    for(var handler of this.handlers) {
+    for(let handler of this.handlers) {
       if(handler.areas.includes(component.area) || handler.areas.includes("*")) {
-        handler.activationHandler(component);
+        await this.waitTimeout(() => {
+          handler.activationHandler(component);
+        })
       }
     }
 
@@ -803,15 +826,17 @@ class ComponentManager {
     }
   }
 
-  reloadComponent(component) {
+  async reloadComponent(component) {
     //
     // Do soft deactivate
     //
     component.active = false;
 
-    for(var handler of this.handlers) {
+    for(let handler of this.handlers) {
       if(handler.areas.includes(component.area) || handler.areas.includes("*")) {
-        handler.activationHandler(component);
+        await this.waitTimeout(() => {
+          handler.activationHandler(component);
+        })
       }
     }
 
@@ -831,11 +856,13 @@ class ComponentManager {
     // Do soft activate
     //
 
-    this.timeout(() => {
+    this.timeout(async () => {
       component.active = true;
       for(var handler of this.handlers) {
         if(handler.areas.includes(component.area) || handler.areas.includes("*")) {
-          handler.activationHandler(component);
+          await this.waitTimeout(() => {
+            handler.activationHandler(component);
+          })
         }
       }