fix #7704 -- jupyter: code folding should be enabled for code cells, like it is in code files

Author: williamstein

src/packages/frontend/account/actions.ts

@@ -322,6 +322,10 @@ If that doesn't work after a few minutes, try these ${doc_conn} or email ${this.
     this.set_account_table({ other_settings: { [name]: value } });
   }
 
+  set_editor_settings = (name: string, value) => {
+    this.set_account_table({ editor_settings: { [name]: value } });
+  };
+
   public set_show_purchase_form(show: boolean) {
     // this controlls the default state of the "buy a license" purchase form in account → licenses
     // by default, it's not showing up

src/packages/frontend/frame-editors/jupyter-editor/editor.ts

@@ -350,6 +350,12 @@ const JUPYTER_MENUS = {
           "toggle cell line numbers",
         ],
       },
+      {
+        label: "Code Folding",
+        name: "code-folding",
+        icon: "angle-right",
+        children: ["show code folding", "hide code folding"],
+      },
     ],
   },
   jupyter_run: {

src/packages/frontend/jupyter/cm_options.ts

@@ -20,7 +20,7 @@ export function cm_options(
   mode?: string | { name: string },
   editor_settings?: any,
   line_numbers?: any,
-  read_only?: any
+  read_only?: any,
 ) {
   if (editor_settings == null) {
     editor_settings = {};
@@ -56,7 +56,6 @@ export function cm_options(
     matchBrackets: editor_settings.match_brackets,
     autoCloseBrackets: editor_settings.auto_close_brackets,
     autoCloseTags: editor_settings.auto_close_xml_tags,
-    foldGutter: editor_settings.code_folding,
     lineWrapping: true,
     readOnly: read_only,
     indentWithTabs: !editor_settings.spaces_instead_of_tabs,
@@ -104,5 +103,13 @@ export function cm_options(
     options.mode.name = "python";
   }
 
+  if (editor_settings.code_folding) {
+    options.extraKeys["Ctrl-Q"] = (cm) => cm.foldCodeSelectionAware();
+    options.foldGutter = true;
+    options.gutters = ["CodeMirror-linenumbers", "CodeMirror-foldgutter"];
+  } else {
+    options.gutters = ["CodeMirror-linenumbers"];
+  }
+
   return options;
 }

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

@@ -76,7 +76,7 @@ export interface Actions extends CompleteActions {
 interface CodeMirrorEditorProps {
   actions: Actions; // e.g., JupyterActions from "./browser-actions".
   id: string;
-  options: ImmutableMap<any, any>;
+  options: ImmutableMap<string, any>;
   value: string;
   set_click_coords?: Function; // TODO: type
   font_size?: number; // font_size not explicitly used, but it is critical
@@ -792,7 +792,7 @@ export const CodeMirrorEditor: React.FC<CodeMirrorEditorProps> = ({
           }}
           onClick={focus_cm}
         >
-          <div style={{ whiteSpace: "nowrap", margin: "6px 5px 0 0" }}>
+          <div style={{ whiteSpace: "nowrap", margin: "6px 5px 0 20px" }}>
             Enter code{setShowAICellGen == null ? "..." : " or "}
           </div>
           {setShowAICellGen != null ? (

src/packages/frontend/jupyter/commands.ts

@@ -6,6 +6,8 @@
 /*
 Comprehensive list of Jupyter notebook (version 5) commands
 we support and how they work.
+
+See frontend/frame-editors/jupyter-editor/editor.ts for how these are organized into menus.
 */
 
 import { IconName } from "@cocalc/frontend/components";
@@ -22,6 +24,7 @@ import {
   RUN_ALL_CELLS_BELOW_ICON,
   SPLIT_CELL_ICON,
 } from "./consts";
+import { redux } from "@cocalc/frontend/app-framework";
 
 export interface KeyboardCommand {
   mode?: NotebookMode;
@@ -875,6 +878,20 @@ export function commands(actions: AllActions): {
       f: () => actions.jupyter_actions?.set_line_numbers(true),
     },
 
+    "show code folding": {
+      i: "list-ol",
+      m: "Enable Code Folding",
+      f: () =>
+        redux.getActions("account").set_editor_settings("code_folding", true),
+    },
+
+    "hide code folding": {
+      i: "list-ol",
+      m: "Disable Code Folding",
+      f: () =>
+        redux.getActions("account").set_editor_settings("code_folding", false),
+    },
+
     "show command palette": {
       m: "Show command palette...",
       k: [