Fix editor component stack reload issue

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

@@ -27,7 +27,6 @@ angular.module('app')
 
     this.spellcheck = true;
     this.componentManager = componentManager;
-    this.componentStack = [];
 
     $rootScope.$on("sync:taking-too-long", function(){
       this.syncTakingTooLong = true;
@@ -425,16 +424,7 @@ angular.module('app')
       if(component.area === "note-tags") {
         // Autocomplete Tags
         this.tagsComponent = component.active ? component : null;
-      } else if(component.area == "editor-stack") {
-        // Stack
-        if(component.active) {
-          if(!_.find(this.componentStack, component)) {
-            this.componentStack.push(component);
-          }
-        } else {
-          _.pull(this.componentStack, component);
-        }
-      } else {
+      } else if(component.area == "editor-editor") {
         // Editor
         if(component.active && this.note && (component.isExplicitlyEnabledForItem(this.note) || component.isDefaultEditor())) {
           this.selectedEditor = component;
@@ -493,21 +483,17 @@ angular.module('app')
     }.bind(this)});
 
     this.reloadComponentContext = function() {
+      // componentStack is used by the template to ng-repeat
+      this.componentStack = componentManager.componentsForArea("editor-stack");
+      for(var component of this.componentStack) {
+        if(component.active) {
+          component.hidden = component.isExplicitlyDisabledForItem(this.note);
+        }
+      }
+
       componentManager.contextItemDidChangeInArea("note-tags");
       componentManager.contextItemDidChangeInArea("editor-stack");
       componentManager.contextItemDidChangeInArea("editor-editor");
-
-      var stack = componentManager.componentsForArea("editor-stack");
-      for(var component of stack) {
-        if(component.active) {
-          var disabledForItem = component.isExplicitlyDisabledForItem(this.note);
-          if(disabledForItem) {
-            component.hidden = true;
-          } else {
-            component.hidden = false;
-          }
-        }
-      }
     }
 
     this.toggleStackComponentForCurrentItem = function(component) {

app/assets/javascripts/app/directives/views/editorMenu.js

@@ -5,7 +5,8 @@ class EditorMenu {
     this.templateUrl = "directives/editor-menu.html";
     this.scope = {
       callback: "&",
-      selectedEditor: "="
+      selectedEditor: "=",
+      currentItem: "="
     };
   }
 
@@ -49,6 +50,7 @@ class EditorMenu {
         currentDefault.setAppDataItem("defaultEditor", false);
         currentDefault.setDirty(true);
       }
+
       component.setAppDataItem("defaultEditor", true);
       component.setDirty(true);
       syncManager.sync("makeEditorDefault");
@@ -64,6 +66,10 @@ class EditorMenu {
       $scope.defaultEditor = null;
     }
 
+    $scope.stackComponentEnabled = function(component) {
+      return component.active && !component.isExplicitlyDisabledForItem($scope.currentItem);
+    }
+
   }
 
 }

app/assets/templates/directives/editor-menu.html.haml

@@ -14,10 +14,11 @@
 
       %a.no-decoration{"ng-if" => "editors.length == 0", "href" => "https://standardnotes.org/extensions", "target" => "blank"}
         %menu-row{"title" => "'Download More Editors'"}
+
     .section{"ng-if" => "stack.length > 0"}
       .header
         %h4.title Editor Stack
       %menu-row{"ng-repeat" => "component in stack", "ng-click" => "selectComponent($event, component)", "title" => "component.name",
-      "circle" => "component.active ? 'success' : 'danger'"}
+      "circle" => "stackComponentEnabled(component) ? 'success' : 'danger'"}
         .column{"ng-if" => "component.conflict_of"}
           %strong.red.medium{"ng-if" => "component.conflict_of"} Conflicted copy

app/assets/templates/editor.html.haml

@@ -34,7 +34,7 @@
 
         .item{"ng-click" => "ctrl.onEditorMenuClick()", "ng-class" => "{'selected' : ctrl.showEditorMenu}", "click-outside" => "ctrl.showEditorMenu = false;", "is-open" => "ctrl.showEditorMenu"}
           .label Editor
-          %editor-menu{"ng-if" => "ctrl.showEditorMenu", "callback" => "ctrl.editorMenuOnSelect", "selected-editor" => "ctrl.selectedEditor"}
+          %editor-menu{"ng-if" => "ctrl.showEditorMenu", "callback" => "ctrl.editorMenuOnSelect", "selected-editor" => "ctrl.selectedEditor", "current-item" => "ctrl.note"}
 
         .item{"ng-click" => "ctrl.showExtensions = !ctrl.showExtensions; ctrl.showMenu = false; ctrl.showEditorMenu = false;", "ng-class" => "{'selected' : ctrl.showExtensions}", "click-outside" => "ctrl.showExtensions = false;", "is-open" => "ctrl.showExtensions"}
           .label Actions