fix #7779 - jupyter code folding state

Author: williamstein

src/packages/frontend/codemirror/util.ts

@@ -1,3 +1,6 @@
+import { set, get, del } from "@cocalc/frontend/misc/local-storage-typed";
+import { isEqual } from "lodash";
+
 export function getFoldedLines(cm): number[] {
   return cm
     .getAllMarks()
@@ -6,7 +9,40 @@ export function getFoldedLines(cm): number[] {
 }
 
 export function setFoldedLines(cm, lines: number[]) {
-  for(const n of lines) {
+  lines.reverse();
+  for (const n of lines) {
     cm.foldCode(n);
   }
 }
+
+function toKey(key: string): string {
+  return `cmfold-${key}`;
+}
+
+export function initFold(cm, key: string) {
+  const k = toKey(key);
+  const lines = get<number[]>(k);
+  if (lines != null) {
+    try {
+      setFoldedLines(cm, lines);
+    } catch (err) {
+      console.warn(`error setting cold folding for ${key}: `, err);
+      del(k);
+    }
+  }
+}
+
+export function saveFold(cm, key: string) {
+  const k = toKey(key);
+  const lines = get<number[]>(k);
+  const lines2 = getFoldedLines(cm);
+  if (lines2.length == 0) {
+    if (lines != null) {
+      del(k);
+    }
+    return;
+  }
+  if (!isEqual(lines, lines2)) {
+    set<number[]>(k, lines2);
+  }
+}

src/packages/frontend/jupyter/codemirror-editor.tsx

@@ -28,10 +28,7 @@ import { Complete, Actions as CompleteActions } from "./complete";
 import { Cursors } from "./cursors";
 import { Position } from "./insert-cell/types";
 import { is_whitespace } from "@cocalc/util/misc";
-import {
-  getFoldedLines,
-  setFoldedLines,
-} from "@cocalc/frontend/codemirror/util";
+import { initFold, saveFold } from "@cocalc/frontend/codemirror/util";
 
 // We cache a little info about each Codemirror editor we make here,
 // so we can restore it when we make the same one again.  Due to
@@ -151,14 +148,17 @@ export const CodeMirrorEditor: React.FC<CodeMirrorEditorProps> = ({
 
   useEffect(() => {
     if (frameActions.current?.frame_id != null) {
-      key.current = `${frameActions.current.frame_id}${id}`;
+      key.current = `${(actions as any)?.path}${
+        frameActions.current.frame_id
+      }${id}`;
     }
     init_codemirror(options, value);
 
     return () => {
       if (cm.current != null) {
-        const foldedLines = getFoldedLines(cm.current);
-        console.log({ foldedLines });
+        if (key.current != null) {
+          saveFold(cm.current, key.current);
+        }
         cm_save();
         cm_destroy();
       }
@@ -663,7 +663,6 @@ export const CodeMirrorEditor: React.FC<CodeMirrorEditorProps> = ({
       if (node.parentNode == null) return;
       node.parentNode.replaceChild(elt, node);
     }, options0);
-    window.x = { cm: cm.current, getFoldedLines, setFoldedLines };
 
     // We explicitly re-add all the extraKeys due to weird precedence.
     cm.current.addKeyMap(options0.extraKeys);
@@ -769,6 +768,17 @@ export const CodeMirrorEditor: React.FC<CodeMirrorEditorProps> = ({
     if (is_focused) {
       focus_cm();
     }
+
+    if (key.current != null) {
+      initFold(cm.current, key.current);
+      const save = () => {
+        if (cm.current != null && key.current != null) {
+          saveFold(cm.current, key.current);
+        }
+      };
+      cm.current.on("fold", save);
+      cm.current.on("unfold", save);
+    }
   }
 
   function focus_cm(): void {