Component stack dock fixes

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

@@ -27,6 +27,7 @@ angular.module('app')
 
     this.spellcheck = true;
     this.componentManager = componentManager;
+    this.componentStack = [];
 
     $rootScope.$on("sync:taking-too-long", function(){
       this.syncTakingTooLong = true;
@@ -88,11 +89,14 @@ angular.module('app')
       }
     });
 
-    // Observe editor changes to see if the current note should update its editor
 
     modelManager.addItemSyncObserver("editor-component-observer", "SN|Component", (allItems, validItems, deletedItems, source) => {
       if(!this.note) { return; }
 
+      // Reload componentStack in case new ones were added or removed
+      this.reloadComponentStackArray();
+
+      // Observe editor changes to see if the current note should update its editor
       var editors = allItems.filter(function(item) {
         return item.isEditor();
       });
@@ -683,15 +687,18 @@ angular.module('app')
       }
     }});
 
-
-    this.reloadComponentContext = function() {
-      // componentStack is used by the template to ng-repeat
+    this.reloadComponentStackArray = function() {
       this.componentStack = componentManager.componentsForArea("editor-stack").sort((a, b) => {
         // Careful here. For some reason (probably because re-assigning array everytime quickly destroys componentView elements, causing deallocs),
         // sorting by updated_at (or any other property that may always be changing)
         // causes weird problems with ext communication when changing notes or activating/deactivating in quick succession
         return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
       });
+    }
+
+    this.reloadComponentContext = function() {
+      // componentStack is used by the template to ng-repeat
+      this.reloadComponentStackArray();
       /*
       In the past, we were doing this looping code even if the note wasn't currently defined.
       The problem is if an editor stack item loaded first, requested to stream items, and the note was undefined,
@@ -717,13 +724,15 @@ angular.module('app')
     }
 
     this.toggleStackComponentForCurrentItem = function(component) {
-      if(component.hidden) {
+      // If it's hidden, we want to show it
+      // If it's not active, then hidden won't be set, and we mean to activate and show it.
+      if(component.hidden || !component.active) {
         // Unhide, associate with current item
         component.hidden = false;
+        this.associateComponentWithCurrentNote(component);
         if(!component.active) {
           componentManager.activateComponent(component);
         }
-        this.associateComponentWithCurrentNote(component);
         componentManager.contextItemDidChangeInArea("editor-stack");
       } else {
         // not hidden, hide