Switch notebook editor from Monaco back to Code Mirror (#901)

2025-12-20 01:11:25 +00:00 · 2021-06-23 21:05:52 +02:00
parent 738a02a0f3
commit 6b35ab03f2
10 changed files with 267 additions and 156 deletions
--- a/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
+++ b/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
@@ -55,7 +55,7 @@ export class NotebookViewerComponent
      databaseAccountName: undefined,
      defaultExperience: "NotebookViewer",
      isReadOnly: true,
-      cellEditorType: "monaco",
+      cellEditorType: "codemirror",
      autoSaveInterval: 365 * 24 * 3600 * 1000, // There is no way to turn off auto-save, set to 1 year
      contentProvider: contents.JupyterContentProvider, // NotebookViewer only knows how to talk to Jupyter contents API
    });
--- a/src/Explorer/Notebook/NotebookClientV2.ts
+++ b/src/Explorer/Notebook/NotebookClientV2.ts
@@ -21,7 +21,7 @@ import {
  makeStateRecord,
  makeTransformsRecord,
 } from "@nteract/core";
-import { configOption, createConfigCollection, defineConfigOption } from "@nteract/mythic-configuration";
+import { configOption, defineConfigOption } from "@nteract/mythic-configuration";
 import { Media } from "@nteract/outputs";
 import TransformVDOM from "@nteract/transform-vdom";
 import * as Immutable from "immutable";
@@ -242,22 +242,27 @@ export class NotebookClientV2 {
    );

    // Additional configuration
-    this.store.dispatch(configOption("editorType").action(params.cellEditorType ?? "monaco"));
+    this.store.dispatch(configOption("editorType").action(params.cellEditorType ?? "codemirror"));
    this.store.dispatch(
      configOption("autoSaveInterval").action(params.autoSaveInterval ?? Constants.Notebook.autoSaveIntervalMs)
    );
-    createConfigCollection({
-      key: "monaco",
-    });
-    defineConfigOption({
-      label: "Show Line numbers",
-      key: "monaco.lineNumbers",
-      values: [
-        { label: "Yes", value: true },
-        { label: "No", value: false },
-      ],
-      defaultValue: true,
-    });
+    this.store.dispatch(configOption("codeMirror.lineNumbers").action(true));
+
+    const readOnlyConfigOption = configOption("codeMirror.readOnly");
+    const readOnlyValue = params.isReadOnly ? "nocursor" : undefined;
+    if (!readOnlyConfigOption) {
+      defineConfigOption({
+        label: "Read-only",
+        key: "codeMirror.readOnly",
+        values: [
+          { label: "Read-Only", value: "nocursor" },
+          { label: "Not read-only", value: undefined },
+        ],
+        defaultValue: readOnlyValue,
+      });
+    } else {
+      this.store.dispatch(readOnlyConfigOption.action(readOnlyValue));
+    }
  }

  /**
--- a/src/Explorer/Notebook/NotebookComponent/NotebookComponent.less
+++ b/src/Explorer/Notebook/NotebookComponent/NotebookComponent.less
@@ -1,10 +1,10 @@
 .notebookComponentContainer {
-  text-transform:none;
-  line-height:1.28581;
-  letter-spacing:0;
-  font-size:14px;
-  font-weight:400;
-  color:#182026;
+  text-transform: none;
+  line-height: 1.28581;
+  letter-spacing: 0;
+  font-size: 14px;
+  font-weight: 400;
+  color: #182026;
  height: 100%;

  .hotKeys {
--- a/src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.less
+++ b/src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.less
@@ -1,56 +1,68 @@
 .NotebookReadOnlyRender {
-    .nteract-cell-container {
-        margin-bottom: 10px;
-    }
+  .nteract-cell-container {
+    margin-bottom: 10px;
+  }

-    .nteract-cell {
-        padding: 0.5px;
-        border: 1px solid #ffffff;
-        border-left: 3px solid #ffffff;
-    }
+  .nteract-cell {
+    padding: 0.5px;
+    border: 1px solid #ffffff;
+    border-left: 3px solid #ffffff;
+  }

-    .CodeMirror-scroll {
-        background-color: #f5f5f5;
-    }
+  .CodeMirror-scroll {
+    overflow: hidden !important;
+  }

-    .CodeMirror-lines {
-        cursor: default;
-    }
+  .CodeMirror-lines {
+    cursor: default;
+  }

-    .nteract-cell:hover {
-        border: 1px solid #0078d4;
-        border-left: 3px solid #0078d4;
+  .CodeMirror {
+    height: inherit;
+  }

-        .CodeMirror-scroll {
-            background-color: #ffffff;
-        }
+  .CodeMirror-scroll,
+  .CodeMirror-linenumber,
+  .CodeMirror-gutters {
+    background-color: #f5f5f5;
+  }

-        .nteract-cell-outputs {
-            border-top: 1px solid #d7d7d7;
-        }
+  .nteract-cell:hover {
+    border: 1px solid #0078d4;
+    border-left: 3px solid #0078d4;

-        .nteract-md-cell {
-            background-color: #ffffff;
-        }
+    .CodeMirror-scroll,
+    .CodeMirror-linenumber,
+    .CodeMirror-gutters {
+      background-color: #ffffff;
    }

    .nteract-cell-outputs {
-        padding:  10px;
-        border-top: 1px solid #ffffff;
-
-        pre {
-            background-color: #ffffff;
-            border: none;
-            padding: 0px;
-            margin: 0px;
-        }
+      border-top: 1px solid #d7d7d7;
    }

    .nteract-md-cell {
-        background-color: #f5f5f5;
+      background-color: #ffffff;
    }
+  }

-    .nteract-cell:hover.nteract-md-cell {
-        background-color: #ffffff;
+  .nteract-cell-outputs {
+    padding: 10px;
+    border-top: 1px solid #ffffff;
+
+    pre {
+      background-color: #ffffff;
+      border: none;
+      padding: 0px;
+      margin: 0px;
    }
+  }
+
+  .nteract-md-cell {
+    background-color: #f5f5f5;
+  }
+
+  .nteract-cell:hover.nteract-md-cell {
+    background-color: #ffffff;
+  }
 }
--- a/src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx
+++ b/src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx
@@ -1,6 +1,6 @@
 import { actions, ContentRef } from "@nteract/core";
 import { Cells, CodeCell, RawCell } from "@nteract/stateful-components";
-import MonacoEditor from "@nteract/stateful-components/lib/inputs/connected-editors/monacoEditor";
+import CodeMirrorEditor from "@nteract/stateful-components/lib/inputs/connected-editors/codemirror";
 import { PassedEditorProps } from "@nteract/stateful-components/lib/inputs/editor";
 import Prompt, { PassedPromptProps } from "@nteract/stateful-components/lib/inputs/prompt";
 import * as React from "react";
@@ -67,8 +67,8 @@ class NotebookReadOnlyRenderer extends React.Component<NotebookRendererProps> {
                    ? () => <SandboxOutputs id={id} contentRef={contentRef} />
                    : undefined,
                  editor: {
-                    monaco: (props: PassedEditorProps) =>
-                      this.props.hideInputs ? <></> : <MonacoEditor readOnly={true} {...props} editorType={"monaco"} />,
+                    codemirror: (props: PassedEditorProps) =>
+                      this.props.hideInputs ? <></> : <CodeMirrorEditor {...props} editorType="codemirror" />,
                  },
                }}
              </CodeCell>
@@ -84,8 +84,8 @@ class NotebookReadOnlyRenderer extends React.Component<NotebookRendererProps> {
              <RawCell id={id} contentRef={contentRef} cell_type="raw">
                {{
                  editor: {
-                    monaco: (props: PassedEditorProps) =>
-                      this.props.hideInputs ? <></> : <MonacoEditor {...props} readOnly={true} editorType={"monaco"} />,
+                    codemirror: (props: PassedEditorProps) =>
+                      this.props.hideInputs ? <></> : <CodeMirrorEditor {...props} editorType="codemirror" />,
                  },
                }}
              </RawCell>
--- a/src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.less
+++ b/src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.less
@@ -3,110 +3,122 @@
@HighlightColor: #0078d4;

 .NotebookRendererContainer {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
 }

 .NotebookRenderer {
-    overflow: auto;
-    flex-grow: 1;
+  overflow: auto;
+  flex-grow: 1;

-    .nteract-cells {
-        padding-top: 0px;
+  .nteract-cells {
+    padding-top: 0px;
+  }
+
+  .nteract-cell-container {
+    margin-bottom: 10px;
+
+    .nteract-cell {
+      padding: 0.5px;
+      border: 1px solid #ffffff;
+      border-left: 3px solid #ffffff;
+
+      .CellContextMenuButton {
+        position: sticky;
+        z-index: 1;
+        top: 0px;
+        right: 0px;
+        margin: 0px 0px 0px -100%;
+        float: right;
+        visibility: hidden;
+      }
    }

-    .nteract-cell-container {
-        margin-bottom: 10px;
-
-        .nteract-cell {
-            padding: 0.5px;
-            border: 1px solid #ffffff;
-            border-left: 3px solid #ffffff;
-
-            .CellContextMenuButton {
-                position: sticky;
-                z-index: 1;
-                top: 0px;
-                right: 0px;
-                margin: 0px 0px 0px -100%;
-                float: right;
-                visibility: hidden;
-            }
-        }
-
-        .CodeMirror-scroll, .CodeMirror-linenumber, .CodeMirror-gutters {
-            background-color: #f5f5f5;
-        }
-
-        .nteract-cell:hover {
-            border: 1px solid @HoverColor;
-            border-left: 3px solid @HoverColor;
-
-            .CellContextMenuButton {
-                visibility: visible;
-            }
-        }
+    .CodeMirror-scroll {
+      overflow: hidden !important;
    }

-    .nteract-cell-container.selected {
-        .nteract-cell {
-            border: 1px solid @HighlightColor;
-            border-left: 3px solid @HighlightColor;
-        }
+    .CodeMirror-scroll,
+    .CodeMirror-linenumber,
+    .CodeMirror-gutters {
+      background-color: #f5f5f5;
    }

-    // White background when hovered or selected
-    .nteract-cell:hover, .nteract-cell-container.selected .nteract-cell {
-        .CodeMirror-scroll, .CodeMirror-linenumber, .CodeMirror-gutters {
-            background-color: #ffffff;
-        }
+    .CodeMirror {
+      height: inherit;
+    }

-        .CodeMirror-linenumber {
-            color: #015CDA;
-        }
+    .nteract-cell:hover {
+      border: 1px solid @HoverColor;
+      border-left: 3px solid @HoverColor;

-        .nteract-cell-outputs {
-            border-top: 1px solid @HoverColor;
-        }
+      .CellContextMenuButton {
+        visibility: visible;
+      }
+    }
+  }

-        .nteract-md-cell {
-            background-color: #ffffff;
-        }
+  .nteract-cell-container.selected {
+    .nteract-cell {
+      border: 1px solid @HighlightColor;
+      border-left: 3px solid @HighlightColor;
+    }
+  }
+
+  // White background when hovered or selected
+  .nteract-cell:hover,
+  .nteract-cell-container.selected .nteract-cell {
+    .CodeMirror-scroll,
+    .CodeMirror-linenumber,
+    .CodeMirror-gutters {
+      background-color: #ffffff;
+    }
+
+    .CodeMirror-linenumber {
+      color: #015cda;
    }

    .nteract-cell-outputs {
-        padding:  10px;
-        border-top: 1px solid #ffffff;
-
-        pre {
-            background-color: #ffffff;
-            border: none;
-            padding: 0px;
-            margin: 0px;
-        }
+      border-top: 1px solid @HoverColor;
    }

    .nteract-md-cell {
-        background-color: #f5f5f5;
+      background-color: #ffffff;
    }
+  }

-    .nteract-cell:hover.nteract-md-cell {
-        background-color: #ffffff;
-    }
+  .nteract-cell-outputs {
+    padding: 10px;
+    border-top: 1px solid #ffffff;

-    .nteract-md-cell .ntreact-cell-source {
-        width: 100%;
+    pre {
+      background-color: #ffffff;
+      border: none;
+      padding: 0px;
+      margin: 0px;
    }
+  }
+
+  .nteract-md-cell {
+    background-color: #f5f5f5;
+  }
+
+  .nteract-cell:hover.nteract-md-cell {
+    background-color: #ffffff;
+  }
+
+  .nteract-md-cell .ntreact-cell-source {
+    width: 100%;
+  }
 }

-
 // Undo tree.less
 .expanded::before {
-    content: '';
+  content: "";
 }

 .monaco-editor .monaco-list .main {
-    background-color: transparent;
-}
+  background-color: transparent;
+}
--- a/src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.tsx
+++ b/src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.tsx
@@ -2,7 +2,7 @@ import { CellId } from "@nteract/commutable";
 import { CellType } from "@nteract/commutable/src";
 import { actions, ContentRef, selectors } from "@nteract/core";
 import { Cells, CodeCell, RawCell } from "@nteract/stateful-components";
-import MonacoEditor from "@nteract/stateful-components/lib/inputs/connected-editors/monacoEditor";
+import CodeMirrorEditor from "@nteract/stateful-components/lib/inputs/connected-editors/codemirror";
 import { PassedEditorProps } from "@nteract/stateful-components/lib/inputs/editor";
 import * as React from "react";
 import { DndProvider } from "react-dnd";
@@ -120,7 +120,9 @@ class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
                        <CodeCell id={id} contentRef={contentRef} cell_type="code">
                          {{
                            editor: {
-                              monaco: (props: PassedEditorProps) => <MonacoEditor {...props} editorType={"monaco"} />,
+                              codemirror: (props: PassedEditorProps) => (
+                                <CodeMirrorEditor {...props} editorType="codemirror" />
+                              ),
                            },
                            prompt: ({ id, contentRef }: { id: CellId; contentRef: ContentRef }) => (
                              <Prompt id={id} contentRef={contentRef} isHovered={false}>
@@ -142,7 +144,9 @@ class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
                        <MarkdownCell id={id} contentRef={contentRef} cell_type="markdown">
                          {{
                            editor: {
-                              monaco: (props: PassedEditorProps) => <MonacoEditor {...props} editorType={"monaco"} />,
+                              codemirror: (props: PassedEditorProps) => (
+                                <CodeMirrorEditor {...props} editorType="codemirror" />
+                              ),
                            },
                            toolbar: () => <CellToolbar id={id} contentRef={contentRef} />,
                          }}
@@ -157,7 +161,9 @@ class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
                        <RawCell id={id} contentRef={contentRef} cell_type="raw">
                          {{
                            editor: {
-                              monaco: (props: PassedEditorProps) => <MonacoEditor {...props} editorType={"monaco"} />,
+                              codemirror: (props: PassedEditorProps) => (
+                                <CodeMirrorEditor {...props} editorType="codemirror" />
+                              ),
                            },
                            toolbar: () => <CellToolbar id={id} contentRef={contentRef} />,
                          }}
--- a/src/Explorer/Notebook/notebookClientV2.test.ts
+++ b/src/Explorer/Notebook/notebookClientV2.test.ts
@@ -1,8 +1,8 @@
 jest.mock("./NotebookComponent/store");
 jest.mock("@nteract/core");
+import { defineConfigOption } from "@nteract/mythic-configuration";
 import { NotebookClientV2 } from "./NotebookClientV2";
 import configureStore from "./NotebookComponent/store";
-import { defineConfigOption } from "@nteract/mythic-configuration";

 describe("auto start kernel", () => {
  it("configure autoStartKernelOnNotebookOpen properly depending whether notebook is/is not read-only", async () => {
@@ -24,6 +24,12 @@ describe("auto start kernel", () => {
      defaultValue: 1234,
    });

+    defineConfigOption({
+      label: "Line numbers",
+      key: "codeMirror.lineNumbers",
+      defaultValue: true,
+    });
+
    [true, false].forEach((isReadOnly) => {
      new NotebookClientV2({
        connectionInfo: {