fix #4085 -- jupyter2/toc: include all headers

- this works well, but is missing one thing, which is that if you have a
  large markdown cell and click on a subheader, it scrolls the cell into
  view, but NOT the exact header you clicked on.

Author: williamstein

src/packages/frontend/components/table-of-contents.tsx

@@ -9,7 +9,7 @@ import { CSS, React, TypedMap } from "../app-framework";
 import { Markdown } from "./markdown";
 
 export interface TableOfContentsEntry {
-  id: string; // id that is unique across the table of contents
+  id: string; // id that is jumped to when entry is clicked -- must be unique across the table of contents
   value: string; // contents of the heading -- a 1-line string formatted using markdown (will be rendered using markdown)
   level?: 1 | 2 | 3 | 4 | 5 | 6; // optional heading size/level
   icon?: IconName; // default "minus" (a dash)
@@ -31,7 +31,7 @@ export const TableOfContents: React.FC<Props> = React.memo(
     function renderHeader(
       level: 1 | 2 | 3 | 4 | 5 | 6,
       value: string,
-      icon: IconName | undefined
+      icon: IconName | undefined,
     ): JSX.Element {
       if (level < 1) level = 1;
       if (level > 6) level = 6;
@@ -114,5 +114,5 @@ export const TableOfContents: React.FC<Props> = React.memo(
         {entries}
       </div>
     );
-  }
+  },
 );

src/packages/frontend/frame-editors/jupyter-editor/table-of-contents.tsx

@@ -23,7 +23,10 @@ export const TableOfContents: React.FC<Props> = React.memo(
       "contents",
     ]);
 
-    async function jump_to_cell(id: string, extra = "top" as "top"): Promise<void> {
+    async function jump_to_cell(
+      id: string,
+      extra = "top" as "top",
+    ): Promise<void> {
       actions.jump_to_cell(id, extra);
       // stupid hack due to rendering/windowing delays...
       await delay(100);
@@ -34,7 +37,13 @@ export const TableOfContents: React.FC<Props> = React.memo(
       <TOC
         contents={contents}
         style={{ fontSize: `${font_size - 6}px` }}
-        scrollTo={({ id, extra }) => jump_to_cell(id, extra)}
+        scrollTo={({ id, extra }) => {
+          // TODO: ignore markdown_id for now -- we just jump to the markdown cell, but not the exact heading
+          // in that cell, for now.
+          // markdown_id is string rep of number of block reference into the rendered markdown.
+          const { cell_id /*, markdown_id*/ } = JSON.parse(id);
+          jump_to_cell(cell_id, extra);
+        }}
       />
     );
   },

src/packages/frontend/frame-editors/markdown-editor/actions.ts

@@ -186,7 +186,7 @@ export class Actions extends CodeEditorActions<MarkdownEditorState> {
     this.set_active_id(id, true);
   }
 
-  public updateTableOfContents(force: boolean = false): void {
+  updateTableOfContents = (force: boolean = false): void => {
     if (this._state == "closed" || this._syncstring == null) {
       // no need since not initialized yet or already closed.
       return;
@@ -202,7 +202,7 @@ export class Actions extends CodeEditorActions<MarkdownEditorState> {
       parseTableOfContents(this._syncstring.to_str()),
     ) as any;
     this.setState({ contents });
-  }
+  };
 
   public async scrollToHeading(entry: TableOfContentsEntry): Promise<void> {
     const id = this.show_focused_frame_of_type("slate");
@@ -214,8 +214,15 @@ export class Actions extends CodeEditorActions<MarkdownEditorState> {
       await delay(1);
       editor = this.getSlateEditor(id);
     }
-    if (editor == null) return;
-    scrollToHeading(editor, parseInt(entry.id));
+    if (editor == null) {
+      return;
+    }
+    const n = parseInt(entry.id);
+    scrollToHeading(editor, n);
+    // this is definitely necessary in case the editor wasn't opened, and doesn't
+    // hurt if it is.
+    await delay(1);
+    scrollToHeading(editor, n);
   }
 
   // for rendered markdown, switch frame type so that this rendered view

src/packages/frontend/jupyter/browser-actions.ts

@@ -33,7 +33,7 @@ import {
   get_local_storage,
   set_local_storage,
 } from "../misc/local-storage";
-import { parse_headings } from "./contents";
+import { parseHeadings } from "./contents";
 import { webapp_client } from "@cocalc/frontend/webapp-client";
 import { bufferToBase64, base64ToBuffer } from "@cocalc/util/base64";
 import { reuseInFlight } from "@cocalc/util/reuse-in-flight";
@@ -931,7 +931,7 @@ export class JupyterActions extends JupyterActions0 {
     if (cells == null) return;
     const cell_list = this.store.get("cell_list");
     if (cell_list == null) return;
-    const contents = fromJS(parse_headings(cells, cell_list));
+    const contents = fromJS(parseHeadings(cells, cell_list));
     this.setState({ contents });
   }
 

src/packages/frontend/jupyter/contents.ts

@@ -9,6 +9,7 @@ Parse the Table of Contents information from the notebook structure.
 
 import { List, Map } from "immutable";
 import { IconName } from "@cocalc/frontend/components/icon";
+import { parseTableOfContents } from "@cocalc/frontend/markdown";
 
 export interface TableOfContentsInfo {
   id: string;
@@ -19,9 +20,9 @@ export interface TableOfContentsInfo {
   align: "center" | "top";
 }
 
-export function parse_headings(
+export function parseHeadings(
   cells: Map<string, any>,
-  cell_list: List<string>
+  cell_list: List<string>,
 ): TableOfContentsInfo[] {
   const v: TableOfContentsInfo[] = [];
   let last_level: number = 0,
@@ -63,47 +64,44 @@ export function parse_headings(
       }
     }
 
-    if (cell.get("cell_type") != "markdown") return;
+    if (cell.get("cell_type") != "markdown") {
+      return;
+    }
 
     const input = cell.get("input");
-    if (input == null) return; // this is only needed since in types we don't impose any structure on cell yet.
-    const { level, value } = parse_cell_heading(input);
-
-    if (level > 0) {
-      if (last_level != level) {
-        // reset section numbers
-        for (let i = level; i < section_counter.length; i++) {
-          section_counter[i] = 0;
-        }
-        last_level = level;
+    if (input == null) {
+      // this is only needed since in types we don't impose any structure on cell yet.
+      return;
+    }
+    for (const { id: markdown_id, level, value } of parseTableOfContents(
+      input,
+    )) {
+      if (level == null) {
+        continue;
       }
-      for (let i = 0; i < level; i++) {
-        if (section_counter[i] == null) section_counter[i] = 0;
+      if (level > 0) {
+        if (last_level != level) {
+          // reset section numbers
+          for (let i = level; i < section_counter.length; i++) {
+            section_counter[i] = 0;
+          }
+          last_level = level;
+        }
+        for (let i = 0; i < level; i++) {
+          if (section_counter[i] == null) section_counter[i] = 0;
+        }
+        section_counter[level - 1] += 1;
+        const cell_id = cell.get("id");
+        if (cell_id == null) return;
+        v.push({
+          id: JSON.stringify({ markdown_id, cell_id }),
+          level,
+          value,
+          number: section_counter.slice(0, level),
+          align: "top",
+        });
       }
-      section_counter[level - 1] += 1;
-      const id = cell.get("id");
-      if (id == null) return;
-      v.push({
-        id,
-        level,
-        value,
-        number: section_counter.slice(0, level),
-        align: "top",
-      });
     }
   });
   return v;
 }
-
-function parse_cell_heading(input: string): { level: number; value: string } {
-  for (const line of input.split("\n")) {
-    const x = line.trim();
-    if (x[0] != "#") continue;
-    for (let n = 1; n < x.length; n++) {
-      if (x[n] != "#") {
-        return { level: n, value: x.slice(n).trim() };
-      }
-    }
-  }
-  return { level: 0, value: "" }; // no heading in markdown
-}