fix #4085 - part 2: actually scroll the subheader into view

Author: williamstein

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

@@ -10,6 +10,7 @@ import {
   TableOfContents as TOC,
   TableOfContentsEntryList,
 } from "@cocalc/frontend/components";
+import $ from "jquery";
 
 interface Props {
   font_size: number;
@@ -29,20 +30,38 @@ export const TableOfContents: React.FC<Props> = React.memo(
     ): Promise<void> {
       actions.jump_to_cell(id, extra);
       // stupid hack due to rendering/windowing delays...
-      await delay(100);
+      await delay(1);
+      actions.jump_to_cell(id, extra);
+      await delay(50);
       actions.jump_to_cell(id, extra);
     }
 
     return (
       <TOC
         contents={contents}
         style={{ fontSize: `${font_size - 6}px` }}
-        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);
+        scrollTo={async ({ id, extra }) => {
+          const { cell_id, markdown_id } = JSON.parse(id);
           jump_to_cell(cell_id, extra);
+          if (markdown_id) {
+            const n = parseInt(markdown_id);
+            const f = () => {
+              // just use some "dumb" jquery to scroll the actual heading into view.
+              // It's pretty hard to do this otherwise, given our current design.
+              const cell = $(`#${cell_id}`);
+              const elt = $(cell.find(".cocalc-jupyter-header")[n]);
+              if (elt.length == 0) {
+                return;
+              }
+              // @ts-ignore -- it's a jquery plugin
+              elt.scrollintoview();
+            };
+            f();
+            await delay(2);
+            f();
+            await delay(200);
+            f();
+          }
         }}
       />
     );

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

@@ -79,6 +79,9 @@ export class JupyterActions extends JupyterActions0 {
     this.syncdb.on("metadata-change", this.sync_read_only);
     this.syncdb.on("connected", this.sync_read_only);
 
+    // first update
+    this.syncdb.once("change", this.updateContentsNow);
+
     this.syncdb.on("change", () => {
       // And activity indicator
       this.activity();
@@ -925,14 +928,18 @@ export class JupyterActions extends JupyterActions0 {
     set_local_storage(this.name, to_json(current));
   }
 
-  public update_contents(): void {
+  private updateContentsNow = () => {
     if (this._state == "closed") return;
     const cells = this.store.get("cells");
     if (cells == null) return;
     const cell_list = this.store.get("cell_list");
     if (cell_list == null) return;
     const contents = fromJS(parseHeadings(cells, cell_list));
     this.setState({ contents });
+  };
+
+  public update_contents(): void {
+    this.updateContentsNow();
   }
 
   protected __syncdb_change_post_hook(_doInit: boolean) {