toc fixes

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "trilium",
-  "version": "0.51.2",
+  "version": "0.52.0-beta",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "trilium",
-      "version": "0.51.2",
+      "version": "0.52.0-beta",
       "hasInstallScript": true,
       "license": "AGPL-3.0-only",
       "dependencies": {

src/public/app/widgets/basic_widget.js

@@ -103,10 +103,22 @@ class BasicWidget extends Component {
         this.$widget.toggleClass('hidden-int', !show);
     }
 
+    isHiddenInt() {
+        return this.$widget.hasClass('hidden-int');
+    }
+
     toggleExt(show) {
         this.$widget.toggleClass('hidden-ext', !show);
     }
 
+    isHiddenExt() {
+        return this.$widget.hasClass('hidden-ext');
+    }
+
+    canBeShown() {
+        return !this.isHiddenInt() && !this.isHiddenExt();
+    }
+
     isVisible() {
         return this.$widget.is(":visible");
     }

src/public/app/widgets/collapsible_widget.js

@@ -35,8 +35,4 @@ export default class CollapsibleWidget extends NoteContextAwareWidget {
 
     /** for overriding */
     async doRenderBody() {}
-
-    isExpanded() {
-        return this.$bodyWrapper.hasClass("show");
-    }
 }

src/public/app/widgets/containers/right_pane_container.js

@@ -11,7 +11,9 @@ export default class RightPaneContainer extends FlexContainer {
     }
 
     isEnabled() {
-        return super.isEnabled() && this.children.length > 0 && !!this.children.find(ch => ch.isEnabled());
+        return super.isEnabled()
+            && this.children.length > 0
+            && !!this.children.find(ch => ch.isEnabled() && ch.canBeShown());
     }
 
     handleEventInChildren(name, data) {
@@ -21,13 +23,20 @@ export default class RightPaneContainer extends FlexContainer {
             // right pane is displayed only if some child widget is active
             // we'll reevaluate the visibility based on events which are probable to cause visibility change
             // but these events needs to be finished and only then we check
-            promise.then(() => {
+            promise.then(() => this.reevaluateIsEnabledCommand());
-                this.toggleInt(this.isEnabled());
-
-                splitService.setupRightPaneResizer();
-            });
         }
 
         return promise;
     }
+
+    reevaluateIsEnabledCommand() {
+        const oldToggle = !this.isHiddenInt();
+        const newToggle = this.isEnabled();
+
+        if (oldToggle !== newToggle) {
+            this.toggleInt(newToggle);
+
+            splitService.setupRightPaneResizer();
+        }
+    }
 }

src/public/app/widgets/toc.js

@@ -26,11 +26,11 @@ const TPL = `<div class="toc-widget">
         }
         
         .toc ol {
-            padding-left: 20px;
+            padding-left: 25px;
         }
         
         .toc > ol {
-            padding-left: 0;
+            padding-left: 10px;
         }
     </style>
 
@@ -75,7 +75,10 @@ function findHeadingElementByIndex(parent, headingIndex) {
         // "H" plus the level, eg "H2", "H3", "H2", etc and not nested wrt the
         // heading level. If a heading node is found, decrement the headingIndex
         // until zero is reached
-        if (child.tagName.match(/H\d+/) !== null) {
+
+        console.log(child.tagName, headingIndex);
+
+        if (child.tagName.match(/H\d+/i) !== null) {
             if (headingIndex === 0) {
                 headingElement = child;
                 break;
@@ -86,6 +89,8 @@ function findHeadingElementByIndex(parent, headingIndex) {
     return headingElement;
 }
 
+const MIN_HEADING_COUNT = 3;
+
 export default class TocWidget extends CollapsibleWidget {
     get widgetTitle() {
         return "Table of Contents";
@@ -94,7 +99,7 @@ export default class TocWidget extends CollapsibleWidget {
     isEnabled() {
         return super.isEnabled()
             && this.note.type === 'text'
-            && !this.note.hasLabel('noTocWidget');
+            && !this.note.hasLabel('noToc');
     }
 
     async doRenderBody() {
@@ -103,21 +108,23 @@ export default class TocWidget extends CollapsibleWidget {
     }
 
     async refreshWithNote(note) {
-        let toc = "";
+        let $toc = "", headingCount = 0;
         // Check for type text unconditionally in case alwaysShowWidget is set
         if (this.note.type === 'text') {
             const { content } = await note.getNoteComplement();
-            toc = await this.getToc(content);
+            ({$toc, headingCount} = await this.getToc(content));
         }
 
-        this.$toc.html(toc);
+        this.$toc.html($toc);
+        this.toggleInt(headingCount >= MIN_HEADING_COUNT);
+        this.triggerCommand("reevaluateIsEnabled");
     }
 
     /**
      * Builds a jquery table of contents.
      *
      * @param {String} html Note's html content
-     * @returns {jQuery} ordered list table of headings, nested by heading level
+     * @returns {$toc: jQuery, headingCount: integer} ordered list table of headings, nested by heading level
      *         with an onclick event that will cause the document to scroll to
      *         the desired position.
      */
@@ -133,7 +140,8 @@ export default class TocWidget extends CollapsibleWidget {
         // Note heading 2 is the first level Trilium makes available to the note
         let curLevel = 2;
         const $ols = [$toc];
-        for (let m = null, headingIndex = 0; ((m = headingTagsRegex.exec(html)) !== null); ++headingIndex) {
+        let headingCount;
+        for (let m = null, headingIndex = 0; ((m = headingTagsRegex.exec(html)) !== null); headingIndex++) {
             //
             // Nest/unnest whatever necessary number of ordered lists
             //
@@ -164,7 +172,18 @@ export default class TocWidget extends CollapsibleWidget {
             }).mouseout(function () {
                 $(this).css("font-weight", "normal");
             });
-            $li.on("click", async () => {
+            $li.on("click", () => this.jumpToHeading(headingIndex));
+            $ols[$ols.length - 1].append($li);
+            headingCount = headingIndex;
+        }
+
+        return {
+            $toc,
+            headingCount
+        };
+    }
+
+    async jumpToHeading(headingIndex) {
         // A readonly note can change state to "readonly disabled
         // temporarily" (ie "edit this note" button) without any
         // intervening events, do the readonly calculation at navigation
@@ -173,8 +192,9 @@ export default class TocWidget extends CollapsibleWidget {
         const isReadOnly = await this.noteContext.isReadOnly();
 
         if (isReadOnly) {
-                    const readonlyTextElement = await this.noteContext.getContentElement();
+            const $readonlyTextContent = await this.noteContext.getContentElement();
-                    const headingElement = findHeadingElementByIndex(readonlyTextElement, headingIndex);
+
+            const headingElement = findHeadingElementByIndex($readonlyTextContent[0], headingIndex);
 
             if (headingElement != null) {
                 headingElement.scrollIntoView();
@@ -239,17 +259,13 @@ export default class TocWidget extends CollapsibleWidget {
                 textEditor.editing.view.scrollToTheSelection();
             }
         }
-            });
-            $ols[$ols.length - 1].append($li);
-        }
-
-        return $toc;
     }
 
     async entitiesReloadedEvent({loadResults}) {
-        if (loadResults.isNoteContentReloaded(this.noteId)
+        if (loadResults.isNoteContentReloaded(this.noteId)) {
-            || loadResults.getAttributes().find(attr => attr.type === 'label'
+            await this.refresh();
-                                                        && attr.name.toLowerCase().includes('readonly')
+        } else if (loadResults.getAttributes().find(attr => attr.type === 'label'
+            && (attr.name.toLowerCase().includes('readonly') || attr.name === 'noToc')
             && attributeService.isAffecting(attr, this.note))) {
 
             await this.refresh();

src/public/stylesheets/style.css

@@ -943,7 +943,6 @@ input {
     border: 0;
     height: 100%;
     overflow: auto;
-    max-height: 300px;
 }
 
 #right-pane .card-body ul {