frontend/jupyter: add cell-type switches to the button menu of a cell

Author: haraldschilly

src/packages/frontend/cspell.json

@@ -41,7 +41,8 @@
     "timetravel",
     "tolerations",
     "undelete",
-    "undeleting"
+    "undeleting",
+    "revealjs"
   ],
   "ignoreWords": [
     "antd",
@@ -64,7 +65,9 @@
     "vertexai",
     "vfill",
     "xsmall",
-    "flyouts"
+    "flyouts",
+    "buttonbar",
+    "noconf"
   ],
   "flagWords": [],
   "ignorePaths": ["node_modules/**", "dist/**", "dist-ts/**", "build/**"],

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

@@ -5,9 +5,12 @@
 
 /*
 Spec for editing Jupyter notebooks via a frame tree.
+
+cSpell:ignore JSONIPynb
 */
 
 import { createElement } from "react";
+
 import type { Command } from "@cocalc/frontend/frame-editors/frame-tree/commands";
 import { addEditorMenus } from "@cocalc/frontend/frame-editors/frame-tree/commands";
 import { FORMAT_SOURCE_ICON } from "@cocalc/frontend/frame-editors/frame-tree/config";
@@ -25,10 +28,10 @@ import { Introspect } from "./introspect/introspect";
 import JSONIPynb from "./json-ipynb";
 import KernelMenuItem from "./kernel-menu-item";
 import { RawIPynb } from "./raw-ipynb";
+import { search } from "./search";
 import { Slideshow } from "./slideshow-revealjs/slideshow";
 import { JupyterSnippets } from "./snippets";
 import { TableOfContents } from "./table-of-contents";
-import { search } from "./search";
 
 const SNIPPET_ICON_NAME = "magic";
 

src/packages/frontend/i18n/common.ts

@@ -1280,6 +1280,20 @@ export const jupyter = {
       defaultMessage: "None",
       description: "Jupyter Notebook cell toolbar 'None' hides the toolbar",
     },
+    change_cell_to_code: {
+      id: "jupyter.commands.change_cell_to_code.label",
+      defaultMessage: "Change Cell to Code",
+    },
+    change_cell_to_markdown: {
+      id: "jupyter.commands.change_cell_to_markdown.label",
+      defaultMessage: "Change Cell to Markdown",
+      description: "Cell in a Jupyter Notebook",
+    },
+    change_cell_to_raw: {
+      id: "jupyter.commands.change_cell_to_raw.label",
+      defaultMessage: "Change Cell to Raw",
+      description: "Cell in a Jupyter Notebook",
+    },
     restart_kernel_noconf_menu: {
       id: "jupyter.commands.restart_kernel_noconf.menu",
       defaultMessage: "Restart kernel",

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

@@ -10,7 +10,7 @@ import { useIntl } from "react-intl";
 
 import { alert_message } from "@cocalc/frontend/alerts";
 import { Icon } from "@cocalc/frontend/components";
-import { labels } from "@cocalc/frontend/i18n";
+import { jupyter, labels } from "@cocalc/frontend/i18n";
 import {
   CODE_BAR_BTN_STYLE,
   COPY_CELL_ICON,
@@ -56,6 +56,19 @@ export function CodeBarDropdownMenu({ actions, frameActions, id, cell }) {
   if (actions == null) return null;
 
   const items: MenuProps["items"] = [
+    {
+      key: "undo",
+      label: intl.formatMessage(labels.undo),
+      icon: <Icon name="undo" />,
+      onClick: () => actions.undo(),
+    },
+    {
+      key: "redo",
+      label: intl.formatMessage(labels.redo),
+      icon: <Icon name="redo" />,
+      onClick: () => actions.redo(),
+    },
+    { key: "divider3", type: "divider" },
     {
       key: "copy",
       label: intl.formatMessage({
@@ -74,18 +87,31 @@ export function CodeBarDropdownMenu({ actions, frameActions, id, cell }) {
       icon: <Icon name="paste" />,
       onClick: pasteFromClipboard,
     },
-    { key: "divider3", type: "divider" },
-    {
-      key: "undo",
-      label: intl.formatMessage(labels.undo),
-      icon: <Icon name="undo" />,
-      onClick: () => actions.undo(),
-    },
+    { key: "divider5", type: "divider" },
     {
-      key: "redo",
-      label: intl.formatMessage(labels.redo),
-      icon: <Icon name="redo" />,
-      onClick: () => actions.redo(),
+      key: "cell-type",
+      label: intl.formatMessage(jupyter.commands.cell_type_menu),
+      icon: <Icon name="code-outlined" />,
+      children: [
+        {
+          key: "cell-type-code",
+          label: intl.formatMessage(jupyter.commands.change_cell_to_code),
+          icon: <Icon name="code-outlined" />,
+          onClick: () => frameActions.current?.set_selected_cell_type("code"),
+        },
+        {
+          key: "cell-type-markdown",
+          label: intl.formatMessage(jupyter.commands.change_cell_to_markdown),
+          icon: <Icon name="markdown" />,
+          onClick: () =>
+            frameActions.current?.set_selected_cell_type("markdown"),
+        },
+        {
+          key: "cell-type-raw",
+          label: intl.formatMessage(jupyter.commands.change_cell_to_raw),
+          onClick: () => frameActions.current?.set_selected_cell_type("raw"),
+        },
+      ],
     },
     { key: "divider4", type: "divider" },
     {
@@ -163,7 +189,8 @@ export function CodeBarDropdownMenu({ actions, frameActions, id, cell }) {
       icon: <Icon name={DELETE_CELL_ICON} />,
       onClick: () => frameActions.current?.delete_selected_cells(),
     },
-    { key: "divider5", type: "divider" },
+
+    { key: "divider6", type: "divider" },
     {
       key: "split-cell",
       label: intl.formatMessage({
@@ -207,7 +234,7 @@ export function CodeBarDropdownMenu({ actions, frameActions, id, cell }) {
       ),
       onClick: () => frameActions.current?.merge_cell_below(),
     },
-    { key: "divider6", type: "divider" },
+    { key: "divider7", type: "divider" },
     {
       key: "move-cell-up",
       label: intl.formatMessage({
@@ -228,12 +255,13 @@ export function CodeBarDropdownMenu({ actions, frameActions, id, cell }) {
       icon: <Icon name="arrow-down" />,
       onClick: () => move_cell(1),
     },
-  ].map(({ key, label, icon, onClick }) => {
+  ].map(({ key, label, icon, onClick, children }) => {
     return {
       key,
       label,
       onClick,
       icon: <span style={{ width: "24px" }}>{icon}</span>,
+      children,
     };
   });
 

src/packages/frontend/jupyter/commands.ts

@@ -175,10 +175,7 @@ export function commands(actions: AllActions): {
 
     "change cell to code": {
       i: "code-outlined",
-      m: defineMessage({
-        id: "jupyter.commands.change_cell_to_code.label",
-        defaultMessage: "Change Cell to Code",
-      }),
+      m: jupyter.commands.change_cell_to_code,
       k: [{ which: 89, mode: "escape" }],
       f: () => actions.frame_actions?.set_selected_cell_type("code"),
     },
@@ -239,21 +236,14 @@ export function commands(actions: AllActions): {
     },
 
     "change cell to markdown": {
-      m: defineMessage({
-        id: "jupyter.commands.change_cell_to_markdown.label",
-        defaultMessage: "Change Cell to Markdown",
-        description: "Cell in a Jupyter Notebook",
-      }),
+      m: jupyter.commands.change_cell_to_markdown,
+      i: "markdown",
       k: [{ which: 77, mode: "escape" }],
       f: () => actions.frame_actions?.set_selected_cell_type("markdown"),
     },
 
     "change cell to raw": {
-      m: defineMessage({
-        id: "jupyter.commands.change_cell_to_row.label",
-        defaultMessage: "Change Cell to Raw",
-        description: "Cell in a Jupyter Notebook",
-      }),
+      m: jupyter.commands.change_cell_to_raw,
       k: [{ which: 82, mode: "escape" }],
       f: () => actions.frame_actions?.set_selected_cell_type("raw"),
     },