From e41a02893fbc13f41c8632ce70b7c2b20586be96 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 2 Feb 2025 18:33:58 +0200
Subject: [PATCH] feat(in-app-help): enable table of contents

---
 src/public/app/components/app_context.ts   | 12 +++++-----
 src/public/app/widgets/toc.js              | 28 +++++++++++++++++-----
 src/public/app/widgets/type_widgets/doc.ts | 11 +++++++++
 3 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/src/public/app/components/app_context.ts b/src/public/app/components/app_context.ts
index 2be0d986b..694840f28 100644
--- a/src/public/app/components/app_context.ts
+++ b/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;
     };
diff --git a/src/public/app/widgets/toc.js b/src/public/app/widgets/toc.js
index 8d9823fd9..7eeed355c 100644
--- a/src/public/app/widgets/toc.js
+++ b/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);
diff --git a/src/public/app/widgets/type_widgets/doc.ts b/src/public/app/widgets/type_widgets/doc.ts
index a3e6a7c2b..8d45591d5 100644
--- a/src/public/app/widgets/type_widgets/doc.ts
+++ b/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);
+    }
+
 }