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,22 +26,34 @@
           .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
-              %ol
-                %li Click the "Editor" menu item above (under the note title).
-                %li Select "Plain Editor".
-                %li Repeat this for every note you'd like to access. You can also delete the editor completely to disable it for all notes. To do so, click "Extensions" in the lower left corner of the app, then, for every editor, click "Uninstall".
+          %p To temporarily disable this extension:
 
-            %p
-              Need help? Please email us at
-              %a{"href" => "mailto:hello@standardnotes.org", "target" => "_blank"} hello@standardnotes.org
-              or check out the
-              %a{"href" => "https://standardnotes.org/help", "target" => "_blank"} Help
-              page.
+          .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:
+
+            %ol
+              %li Click the "Editor" menu item above (under the note title).
+              %li Select "Plain Editor".
+              %li Repeat this for every note you'd like to access. You can also delete the editor completely to disable it for all notes. To do so, click "Extensions" in the lower left corner of the app, then, for every editor, click "Uninstall".
+
+          %p
+            Need help? Please email us at
+            %a{"href" => "mailto:hello@standardnotes.org", "target" => "_blank"} hello@standardnotes.org
+            or check out the
+            %a{"href" => "https://standardnotes.org/help", "target" => "_blank"} Help
+            page.
 
 .sn-component{"ng-if" => "error == 'offline-restricted'"}
   .panel.static