Better expiration handling

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

@@ -488,7 +488,8 @@ angular.module('app')
         this.tagsComponent = component.active ? component : null;
       } else if(component.area == "editor-editor") {
         // An editor is already active, ensure the potential replacement is explicitely enabled for this item
-        if(this.selectedEditor) {
+        // 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;
           }

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

@@ -79,7 +79,7 @@ class ComponentView {
     }
 
     $scope.$on("ext-reload-complete", () => {
-      $scope.reloadStatus();
+      $scope.reloadStatus(false);
     })
 
     $scope.reloadComponent = function() {
@@ -87,7 +87,7 @@ class ComponentView {
       componentManager.reloadComponent($scope.component);
     }
 
-    $scope.reloadStatus = function() {
+    $scope.reloadStatus = function(doManualReload = true) {
       let component = $scope.component;
       $scope.reloading = true;
       let previouslyValid = $scope.componentValid;
@@ -116,9 +116,9 @@ class ComponentView {
         }
       }
 
-      if(expired && !$scope.triedReloading) {
+      if(expired && doManualReload) {
         // Try reloading, handled by footer, which will open Extensions window momentarily to pull in latest data
-        $scope.triedReloading = true;
+        // Upon completion, this method, reloadStatus, will be called, upon where doManualReload will be false to prevent recursion.
         $rootScope.$broadcast("reload-ext-data");
       }
 
@@ -133,14 +133,18 @@ class ComponentView {
       return url;
     }
 
-    $scope.$on("$destroy", function() {
-      // console.log("Deregistering handler", $scope.identifier, $scope.component.name);
+    $scope.destroy = function() {
       componentManager.deregisterHandler($scope.identifier);
       if($scope.component && !$scope.manualDealloc) {
         componentManager.deactivateComponent($scope.component, true);
       }
 
       desktopManager.deregisterUpdateObserver($scope.updateObserver);
+    }
+
+    $scope.$on("$destroy", function() {
+      // console.log("Deregistering handler", $scope.identifier, $scope.component.name);
+      $scope.destroy();
     });
   }
 

app/assets/stylesheets/app/_modals.scss

@@ -99,7 +99,11 @@
 .component-view {
   flex-grow: 1;
   display: flex;
-  // overflow: auto; // not sure why we need this. Removed because it creates unncessary scroll bars. Tested on folders extension, creates horizontal scrollbar at bottom on windows
+
+  // not sure why we need this. Removed because it creates unncessary scroll bars. Tested on folders extension, creates horizontal scrollbar at bottom on windows
+  // overflow: auto;
+  // Update: we needed that because when we display the expired Extended view, it allows it to scroll vertically.
+  overflow-y: auto;
 
   .sn-component {
     min-width: 100%;

app/assets/templates/directives/component-view.html.haml

@@ -26,11 +26,23 @@
           .spinner.info.small{"ng-if" => "reloading"}
 
         .panel-row
-        .panel-row
-          .panel-column
-            %p <strong>Otherwise</strong>, please follow the steps below to disable any external editors, so you can edit your note using the plain text editor instead.
+        .panel-section
+          %p{"ng-if" => "component.isEditor()"}
+            <strong>Otherwise</strong>, please follow the steps below to disable any external editors,
+            so you can edit your note using the plain text editor instead.
+
+          %p To temporarily disable this extension:
+
+          .panel-row
+            .button.info{"ng-click" => "destroy()"}
+              .label Disable Extension
+            .spinner.info.small{"ng-if" => "reloading"}
+
+          .panel-row
+
+          %div{"ng-if" => "component.isEditor()"}
+            %p To disassociate this note from this editor:
 
-            %p
             %ol
               %li Click the "Editor" menu item above (under the note title).
               %li Select "Plain Editor".