feat(in-app-help): enable table of contents

src/public/app/components/app_context.ts

@@ -61,8 +61,8 @@ export interface NoteCommandData extends CommandData {
     viewScope?: ViewScope;
 }
 
-export interface ExecuteCommandData extends CommandData {
-    resolve: unknown;
+export interface ExecuteCommandData<T> extends CommandData {
+    resolve: (data: T) => void
 }
 
 /**
@@ -151,12 +151,12 @@ export type CommandMappings = {
         callback: (value: NoteDetailWidget | PromiseLike<NoteDetailWidget>) => void;
     };
     executeWithTextEditor: CommandData &
-        ExecuteCommandData & {
+        ExecuteCommandData<TextEditor> & {
             callback?: GetTextEditorCallback;
         };
-    executeWithCodeEditor: CommandData & ExecuteCommandData;
-    executeWithContentElement: CommandData & ExecuteCommandData;
-    executeWithTypeWidget: CommandData & ExecuteCommandData;
+    executeWithCodeEditor: CommandData & ExecuteCommandData<null>;
+    executeWithContentElement: CommandData & ExecuteCommandData<JQuery<HTMLElement>>;
+    executeWithTypeWidget: CommandData & ExecuteCommandData<null>;
     addTextToActiveEditor: CommandData & {
         text: string;
     };

src/public/app/widgets/toc.js

@@ -25,26 +25,26 @@ const TPL = `<div class="toc-widget">
     <style>
         .toc-widget {
             padding: 10px;
-            contain: none; 
+            contain: none;
             overflow: auto;
             position: relative;
         }
-        
+
         .toc ol {
             padding-left: 25px;
         }
-        
+
         .toc > ol {
             padding-left: 20px;
         }
-        
+
         .toc li {
             cursor: pointer;
             text-align: justify;
             word-wrap: break-word;
             hyphens: auto;
         }
-        
+
         .toc li:hover {
             font-weight: bold;
         }
@@ -75,7 +75,15 @@ export default class TocWidget extends RightPanelWidget {
     }
 
     isEnabled() {
-        return super.isEnabled() && this.note.type === "text" && !this.noteContext.viewScope.tocTemporarilyHidden && this.noteContext.viewScope.viewMode === "default";
+        if (!super.isEnabled()) {
+            return false;
+        }
+
+        const isHelpNote = (this.note.type === "doc" && this.note.noteId.startsWith("_help"));
+        const isTextNote = (this.note.type === "text");
+        const isNoteSupported = isTextNote || isHelpNote;
+
+        return isNoteSupported && !this.noteContext.viewScope.tocTemporarilyHidden && this.noteContext.viewScope.viewMode === "default";
     }
 
     async doRenderBody() {
@@ -104,6 +112,14 @@ export default class TocWidget extends RightPanelWidget {
         if (this.note.type === "text") {
             const { content } = await note.getBlob();
             ({ $toc, headingCount } = await this.getToc(content));
+        } else if (this.note.type === "doc") {
+            const $contentEl = await this.noteContext.getContentElement();
+            if ($contentEl) {
+                const content = $contentEl.html();
+                ({ $toc, headingCount } = await this.getToc(content));
+            } else {
+                console.warn("Unable to get content element for doctype");
+            }
         }
 
         this.$toc.html($toc);

src/public/app/widgets/type_widgets/doc.ts

@@ -1,3 +1,4 @@
+import type { EventData } from "../../components/app_context.js";
 import type FNote from "../../entities/fnote.js";
 import { applySyntaxHighlight } from "../../services/syntax_highlight.js";
 import TypeWidget from "./type_widget.js";
@@ -71,4 +72,14 @@ export default class DocTypeWidget extends TypeWidget {
         applySyntaxHighlight(this.$content);
     }
 
+    async executeWithContentElementEvent({ resolve, ntxId }: EventData<"executeWithContentElement">) {
+        if (!this.isNoteContext(ntxId)) {
+            return;
+        }
+
+        await this.initialized;
+
+        resolve(this.$content);
+    }
+
 }