frontend/jupyter: add run button to markdown cells as well

Author: haraldschilly

src/packages/frontend/frame-editors/jupyter-editor/cell-notebook/actions.ts

@@ -422,8 +422,7 @@ export class NotebookFrameActions {
       undefined,
       false,
     );
-    let md_edit_ids = this.store.get("md_edit_ids");
-    if (md_edit_ids == null) md_edit_ids = Set();
+    const md_edit_ids = this.store.get("md_edit_ids", Set());
     if (md_edit_ids.contains(id)) {
       return;
     }
@@ -497,9 +496,8 @@ export class NotebookFrameActions {
     this.set_mode("edit");
   }
 
-  cell_md_is_editing(id): boolean {
-    let md_edit_ids = this.store.get("md_edit_ids");
-    if (md_edit_ids == null) md_edit_ids = Set();
+  public cell_md_is_editing(id): boolean {
+    const md_edit_ids = this.store.get("md_edit_ids", Set());
     return md_edit_ids.contains(id);
   }
 
@@ -511,14 +509,14 @@ export class NotebookFrameActions {
       return;
     }
 
-    this.set_cur_id(id);
     if (this.cell_md_is_editing(id)) {
       this.set_md_cell_not_editing(id);
       this.set_mode("escape");
     } else {
       this.switch_md_cell_to_edit(id);
       this.set_mode("edit");
     }
+    this.set_cur_id(id);
   }
 
   public switch_code_cell_to_edit(id: string): void {

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

@@ -221,7 +221,7 @@ export class JupyterActions extends JupyterActions0 {
     }
 
     const cell_type = cell.get("cell_type", "code");
-    if (cell_type == "code") {
+    if (cell_type === "code") {
       const code = this.get_cell_input(id).trim();
       if (!code) {
         this.clear_cell(id, save);

src/packages/frontend/jupyter/cell-buttonbar.tsx

@@ -111,14 +111,14 @@ export const CellButtonBar: React.FC<Props> = React.memo(
             tooltip: "Run this cell",
             label: "Run",
             icon: "step-forward",
-            onClick: () => actions?.run_cell(id),
+            onClick: () => frameActions.current?.run_cell(id),
           };
       }
     }
 
     function renderCodeBarRunStop() {
       if (
-        !isCodeCell ||
+        !(isCodeCell || isMarkdownCell) ||
         id == null ||
         actions == null ||
         actions.is_closed() ||
@@ -262,16 +262,21 @@ export const CellButtonBar: React.FC<Props> = React.memo(
         return;
       }
 
+      const editing = frameActions.current?.cell_md_is_editing(id);
+
       return (
         <Button
           style={CODE_BAR_BTN_STYLE}
           size="small"
           type="text"
           onClick={() => {
-            frameActions.current?.toggle_md_cell_edit(cell.get("id"));
+            frameActions.current?.toggle_md_cell_edit(id);
           }}
         >
-          <Icon name="edit" /> {intl.formatMessage(labels.edit)}
+          <Icon name={editing ? "save" : "edit"} />{" "}
+          {editing
+            ? intl.formatMessage(labels.save)
+            : intl.formatMessage(labels.edit)}
         </Button>
       );
     }