Switch notebook editors to monaco (#239)

* Upgrade nteract packages and related dependencies to make new stateful-component work

* Switch to new monacoEditor

* Configure store using nteract mythic configuration

* Replace CodeMirror with Monaco editor in NotebookReadOnlyRenderer

* Reformat

* Upgrade d3 to latest to resolve d3-selection conflicts with nteract/data-explorer that broke D3ForceGraph

* Upgrade jupyterlab terminal widget to work with latest version of react. Upgrade jupyterlab services to include latest fix for websocket auth

* Update jest test snapshots

* Upgrade packages to fix build issues

* Remove comment

* Fix unit tests

* Fix unit test snapshot

* Remove useless @types/node-fetch

src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx

@@ -10,7 +10,8 @@ import { connect } from "react-redux";
 import { Dispatch } from "redux";
 import { actions, ContentRef } from "@nteract/core";
 import loadTransform from "../NotebookComponent/loadTransform";
-import CodeMirrorEditor from "@nteract/stateful-components/lib/inputs/connected-editors/codemirror";
+import MonacoEditor from "@nteract/stateful-components/lib/inputs/connected-editors/monacoEditor";
+import { PassedEditorProps } from "@nteract/stateful-components/lib/inputs/editor";
 import "./NotebookReadOnlyRenderer.less";
 
 export interface NotebookRendererProps {
@@ -19,19 +20,6 @@ export interface NotebookRendererProps {
   hidePrompts?: boolean;
 }
 
-interface PassedEditorProps {
-  id: string;
-  contentRef: ContentRef;
-  editorFocused: boolean;
-  value: string;
-  channels: any;
-  kernelStatus: string;
-  theme: string;
-  onChange: (text: string) => void;
-  onFocusChange: (focused: boolean) => void;
-  className: string;
-}
-
 /**
  * This is the class that uses nteract to render a read-only notebook.
  */
@@ -73,8 +61,8 @@ class NotebookReadOnlyRenderer extends React.Component<NotebookRendererProps> {
                 {{
                   prompt: (props: { id: string; contentRef: string }) => this.renderPrompt(props.id, props.contentRef),
                   editor: {
-                    codemirror: (props: PassedEditorProps) =>
-                      this.props.hideInputs ? <></> : <CodeMirrorEditor {...props} readOnly={"nocursor"} />
+                    monaco: (props: PassedEditorProps) =>
+                      this.props.hideInputs ? <></> : <MonacoEditor readOnly={true} {...props} editorType={"monaco"} />
                   }
                 }}
               </CodeCell>
@@ -90,8 +78,8 @@ class NotebookReadOnlyRenderer extends React.Component<NotebookRendererProps> {
               <RawCell id={id} contentRef={contentRef} cell_type="raw">
                 {{
                   editor: {
-                    codemirror: (props: PassedEditorProps) =>
-                      this.props.hideInputs ? <></> : <CodeMirrorEditor {...props} readOnly={"nocursor"} />
+                    monaco: (props: PassedEditorProps) =>
+                      this.props.hideInputs ? <></> : <MonacoEditor {...props} readOnly={true} editorType={"monaco"} />
                   }
                 }}
               </RawCell>

src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.tsx

@@ -3,7 +3,8 @@ import "./base.css";
 import "./default.css";
 
 import { RawCell, Cells, CodeCell, MarkdownCell } from "@nteract/stateful-components";
-import CodeMirrorEditor from "@nteract/stateful-components/lib/inputs/connected-editors/codemirror";
+import MonacoEditor from "@nteract/stateful-components/lib/inputs/connected-editors/monacoEditor";
+import { PassedEditorProps } from "@nteract/stateful-components/lib/inputs/editor";
 
 import Prompt from "./Prompt";
 import { promptContent } from "./PromptContent";
@@ -42,19 +43,6 @@ interface NotebookRendererDispatchProps {
 
 type NotebookRendererProps = NotebookRendererBaseProps & NotebookRendererDispatchProps;
 
-interface PassedEditorProps {
-  id: string;
-  contentRef: ContentRef;
-  editorFocused: boolean;
-  value: string;
-  channels: any;
-  kernelStatus: string;
-  theme: string;
-  onChange: (text: string) => void;
-  onFocusChange: (focused: boolean) => void;
-  className: string;
-}
-
 const decorate = (id: string, contentRef: ContentRef, cell_type: CellType, children: React.ReactNode) => {
   const Cell = () => (
     <DraggableCell id={id} contentRef={contentRef}>
@@ -115,9 +103,7 @@ class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
                         <CodeCell id={id} contentRef={contentRef} cell_type="code">
                           {{
                             editor: {
-                              codemirror: (props: PassedEditorProps) => (
-                                <CodeMirrorEditor {...props} lineNumbers={true} />
-                              )
+                              monaco: (props: PassedEditorProps) => <MonacoEditor {...props} editorType={"monaco"} />
                             },
                             prompt: ({ id, contentRef }: { id: CellId; contentRef: ContentRef }) => (
                               <Prompt id={id} contentRef={contentRef} isHovered={false}>
@@ -135,6 +121,9 @@ class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
                         "markdown",
                         <MarkdownCell id={id} contentRef={contentRef} cell_type="markdown">
                           {{
+                            editor: {
+                              monaco: (props: PassedEditorProps) => <MonacoEditor {...props} editorType={"monaco"} />
+                            },
                             toolbar: () => <CellToolbar id={id} contentRef={contentRef} />
                           }}
                         </MarkdownCell>
@@ -147,6 +136,9 @@ class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
                         "raw",
                         <RawCell id={id} contentRef={contentRef} cell_type="raw">
                           {{
+                            editor: {
+                              monaco: (props: PassedEditorProps) => <MonacoEditor {...props} editorType={"monaco"} />
+                            },
                             toolbar: () => <CellToolbar id={id} contentRef={contentRef} />
                           }}
                         </RawCell>

src/Explorer/Notebook/NotebookRenderer/Toolbar.tsx

@@ -150,9 +150,9 @@ const mapDispatchToProps = (
 ): DispatchProps => ({
   executeCell: () => dispatch(actions.executeCell({ id, contentRef })),
   insertCodeCellAbove: () => dispatch(actions.createCellAbove({ id, contentRef, cellType: "code" })),
-  insertCodeCellBelow: () => dispatch(actions.createCellBelow({ id, contentRef, cellType: "code", source: "" })),
+  insertCodeCellBelow: () => dispatch(actions.createCellBelow({ id, contentRef, cellType: "code" })),
   insertTextCellAbove: () => dispatch(actions.createCellAbove({ id, contentRef, cellType: "markdown" })),
-  insertTextCellBelow: () => dispatch(actions.createCellBelow({ id, contentRef, cellType: "markdown", source: "" })),
+  insertTextCellBelow: () => dispatch(actions.createCellBelow({ id, contentRef, cellType: "markdown" })),
   moveCell: (destinationId: CellId, above: boolean) =>
     dispatch(actions.moveCell({ id, contentRef, destinationId, above })),
   clearOutputs: () => dispatch(actions.clearOutputs({ id, contentRef })),