Fix build issues

src/Explorer/Notebook/MonacoEditor/MonacoEditor.tsx

@@ -1,5 +1,4 @@
 import { Channels } from "@nteract/messaging";
-// import * as monaco from "./monaco";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
 import * as React from "react";
 // import { completionProvider } from "./completions/completionItemProvider";
@@ -27,7 +26,7 @@ export interface IMonacoProps {
   channels: Channels | undefined;
   enableCompletion: boolean;
   shouldRegisterDefaultCompletion?: boolean;
-  onChange: (value: string, event?: any) => void;
+  onChange: (value: string, event?: unknown) => void;
   onFocusChange: (focus: boolean) => void;
   onCursorPositionChange?: (selection: monaco.ISelection | null) => void;
   onRegisterCompletionProvider?: (languageId: string) => void;
@@ -82,7 +81,7 @@ function getMonacoTheme(theme: monaco.editor.IStandaloneThemeData | monaco.edito
 
 const makeMapStateToProps = (initialState: AppState, initialProps: IMonacoProps) => {
   const { id, contentRef } = initialProps;
-  function mapStateToProps(state: any, ownProps: IMonacoProps & IMonacoStateProps) {
+  function mapStateToProps(state: AppState, ownProps: IMonacoProps & IMonacoStateProps) {
     return {
       language: getCellMonacoLanguage(
         state,
@@ -112,7 +111,7 @@ export class MonacoEditor extends React.Component<IMonacoProps & IMonacoStatePro
     this.calculateHeight = this.calculateHeight.bind(this);
   }
 
-  onDidChangeModelContent(e: monaco.editor.IModelContentChangedEvent) {
+  onDidChangeModelContent(e: monaco.editor.IModelContentChangedEvent): void {
     if (this.editor) {
       if (this.props.onChange) {
         this.props.onChange(this.editor.getValue(), e);
@@ -130,7 +129,7 @@ export class MonacoEditor extends React.Component<IMonacoProps & IMonacoStatePro
    * If numberOfLines is not set or set to 0, we adjust the height to fit the content
    * If numberOfLines is specified we respect that setting
    */
-  calculateHeight() {
+  calculateHeight(): void {
     // Make sure we have an editor
     if (!this.editor) {
       return;
@@ -158,7 +157,7 @@ export class MonacoEditor extends React.Component<IMonacoProps & IMonacoStatePro
     }
   }
 
-  componentDidMount() {
+  componentDidMount(): void {
     if (this.editorContainerRef && this.editorContainerRef.current) {
       // Register Jupyter completion provider if needed
       this.registerCompletionProvider();
@@ -225,9 +224,13 @@ export class MonacoEditor extends React.Component<IMonacoProps & IMonacoStatePro
 
       // Ignore Ctrl + Enter
       // tslint:disable-next-line no-bitwise
-      this.editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
+      this.editor.addCommand(
-        // Do nothing. This is handled elsewhere, we just don't want the editor to put the newline.
+        monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
-      }, undefined);
+        () => {
+          // Do nothing. This is handled elsewhere, we just don't want the editor to put the newline.
+        },
+        undefined
+      );
       // TODO Add right context
 
       this.toggleEditorOptions(this.props.editorFocused);
@@ -269,13 +272,13 @@ export class MonacoEditor extends React.Component<IMonacoProps & IMonacoStatePro
     }
   }
 
-  addEditorTopMargin() {
+  addEditorTopMargin(): void {
     if (this.editor) {
       // Monaco editor doesn't have margins
       // https://github.com/notable/notable/issues/551
       // This is a workaround to add an editor area 12px padding at the top
       // so that cursors rendered by collab decorators could be visible without being cut.
-      this.editor.changeViewZones((changeAccessor) => {
+      this.editor.changeViewZones(changeAccessor => {
         const domNode = document.createElement("div");
         changeAccessor.addZone({
           afterLineNumber: 0,
@@ -289,13 +292,13 @@ export class MonacoEditor extends React.Component<IMonacoProps & IMonacoStatePro
   /**
    * Tells editor to check the surrounding container size and resize itself appropriately
    */
-  resize() {
+  resize(): void {
     if (this.editor && this.props.editorFocused) {
       this.editor.layout();
     }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(): void {
     if (!this.editor) {
       return;
     }
@@ -361,7 +364,7 @@ export class MonacoEditor extends React.Component<IMonacoProps & IMonacoStatePro
     this.editor.layout();
   }
 
-  componentWillUnmount() {
+  componentWillUnmount(): void {
     if (this.editor) {
       try {
         const model = this.editor.getModel();
@@ -376,7 +379,7 @@ export class MonacoEditor extends React.Component<IMonacoProps & IMonacoStatePro
     }
   }
 
-  render() {
+  render(): JSX.Element {
     return (
       <div className="monaco-container">
         <div ref={this.editorContainerRef} id={`editor-${this.props.id}`} />
@@ -388,7 +391,7 @@ export class MonacoEditor extends React.Component<IMonacoProps & IMonacoStatePro
    * Register default kernel-based completion provider.
    * @param language Language
    */
-  registerDefaultCompletionProvider(language: string) {
+  registerDefaultCompletionProvider(language: string): void {
     // onLanguage event is emitted only once per language when language is first time needed.
     monaco.languages.onLanguage(language, () => {
       // monaco.languages.registerCompletionItemProvider(language, completionProvider);
@@ -413,7 +416,7 @@ export class MonacoEditor extends React.Component<IMonacoProps & IMonacoStatePro
       this.props.onCursorPositionChange(selection);
 
       if (!this.cursorPositionListener) {
-        this.cursorPositionListener = this.editor.onDidChangeCursorSelection((event) =>
+        this.cursorPositionListener = this.editor.onDidChangeCursorSelection(event =>
           this.props.onCursorPositionChange!(event.selection)
         );
       }

src/Explorer/Notebook/MonacoEditor/converter.ts

@@ -1,5 +1,4 @@
 import Immutable from "immutable";
-// import * as monaco from "./monaco";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
 
 /**
@@ -8,7 +7,8 @@ import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
 export enum Mode {
   markdown = "markdown",
   raw = "plaintext",
-  python = "python"
+  python = "python",
+  csharp = "csharp"
 }
 
 /**
@@ -17,7 +17,7 @@ export enum Mode {
  * @param mode Code Mirror mode
  * @returns Monaco language
  */
-export function mapCodeMirrorModeToMonaco(mode: any): string {
+export function mapCodeMirrorModeToMonaco(mode: string | { name: string }): string {
   let language = "";
 
   // Parse codemirror mode object
@@ -36,6 +36,8 @@ export function mapCodeMirrorModeToMonaco(mode: any): string {
   // Need to handle "ipython" as a special case since it is not a registered language
   if (language === "ipython") {
     return Mode.python;
+  } else if (language === "text/x-csharp") {
+    return Mode.csharp;
   } else if (monaco.languages.getEncodedLanguageId(language) > 0) {
     return language;
   }

src/Explorer/Notebook/MonacoEditor/selectors.ts

@@ -11,7 +11,7 @@ export const getCellMonacoLanguage = (
   cellId: CellId,
   cellLanguageOverride?: string,
   notebookLanguageOverride?: string
-) => {
+): string => {
   const model = nteractSelectors.model(state, { contentRef });
   if (!model || model.type !== "notebook") {
     throw new Error("Connected Editor components should not be used with non-notebook models");
@@ -35,7 +35,6 @@ export const getCellMonacoLanguage = (
         return getNotebookMonacoLanguage(state, contentRef, notebookLanguageOverride);
       }
   }
-  return Mode.raw;
 };
 
 /**
@@ -45,7 +44,7 @@ export const getNotebookMonacoLanguage = (
   state: AppState,
   contentRef: ContentRef,
   notebookLanguageOverride?: string
-) => {
+): string => {
   const model = nteractSelectors.model(state, { contentRef });
   if (!model || model.type !== "notebook") {
     throw new Error("Connected Editor components should not be used with non-notebook models");
@@ -56,7 +55,7 @@ export const getNotebookMonacoLanguage = (
   }
 
   const kernelRef = model.kernelRef;
-  let codeMirrorMode = null;
+  let codeMirrorMode;
   // Try to get the CodeMirror mode from the kernel.
   if (kernelRef) {
     codeMirrorMode = nteractSelectors.kernel(state, { kernelRef })?.info?.codemirrorMode;

src/Explorer/Notebook/MonacoEditor/styles.css

@@ -1,7 +1,3 @@
-.monaco-container {
-  padding: 0px 0px 7px 0px;
-}
-
 /*
 For the following components, we use the inherited width values from monaco-container.
 On resizing the browser, the width of monaco-container will be calculated

src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.tsx

@@ -100,7 +100,7 @@ class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
                             editor: {
                               codemirror: (props: PassedEditorProps) => (
                                 // <CodeMirrorEditor {...props} lineNumbers={true} />
-                                <MonacoEditor {...props}  lineNumbers={true} enableCompletion={true} />
+                                <MonacoEditor {...props} lineNumbers={true} enableCompletion={true} />
                               )
                             },
                             prompt: ({ id, contentRef }: { id: CellId; contentRef: ContentRef }) => (