Rename advanced editor to Ace and add Monaco

Author: HKalbasi

ui/frontend/ConfigMenu.tsx

@@ -44,15 +44,15 @@ const ConfigMenu: React.SFC<ConfigMenuProps> = () => {
   return (
     <Fragment>
       <MenuGroup title="Editor">
-        <EitherConfig
-          id="editor-style"
-          name="Style"
-          a={Editor.Simple}
-          b={Editor.Advanced}
+        <SelectConfig
+          name="Editor"
           value={editorStyle}
-          onChange={changeEditorStyle} />
-
-        {editorStyle === Editor.Advanced && (
+          onChange={changeEditorStyle}
+        >
+          {[Editor.Simple, Editor.Ace, Editor.Monaco]
+            .map(k => <option key={k} value={k}>{k}</option>)}
+        </SelectConfig>
+        {editorStyle === Editor.Ace && (
           <Fragment>
             <SelectConfig
               name="Keybinding"

ui/frontend/Playground.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import Split from 'split-grid';
 
-import Editor from './Editor';
+import Editor from './editor/Editor';
 import Header from './Header';
 import Notifications from './Notifications';
 import Output from './Output';

ui/frontend/AdvancedEditor.tsx renamed to ui/frontend/editor/AceEditor.tsx

@@ -1,17 +1,17 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { connect } from 'react-redux';
-import { aceResizeKey, offerCrateAutocompleteOnUse } from './selectors';
+import { aceResizeKey, offerCrateAutocompleteOnUse } from '../selectors';
 
-import State from './state';
-import { AceResizeKey, CommonEditorProps, Crate, PairCharacters, Position, Selection } from './types';
+import State from '../state';
+import { AceResizeKey, CommonEditorProps, Crate, PairCharacters, Position, Selection } from '../types';
 
 import styles from './Editor.module.css';
 
 type Ace = typeof import('ace-builds');
-type AceEditor = import('ace-builds').Ace.Editor;
+type AceModule = import('ace-builds').Ace.Editor;
 type AceCompleter = import('ace-builds').Ace.Completer;
 
-const displayExternCrateAutocomplete = (editor: AceEditor, autocompleteOnUse: boolean) => {
+const displayExternCrateAutocomplete = (editor: AceModule, autocompleteOnUse: boolean) => {
   const { session } = editor;
   const pos = editor.getCursorPosition();
   const line = session.getLine(pos.row);
@@ -55,11 +55,11 @@ function useRafDebouncedFunction<A extends any[]>(fn: (...args: A) => void, onCa
   }, [fn, onCall, timeout]);
 }
 
-interface AdvancedEditorProps extends AdvancedEditorAsyncProps {
+interface AceEditorProps extends AceEditorAsyncProps {
   ace: Ace;
 }
 
-interface AdvancedEditorProps {
+interface AceEditorProps {
   ace: Ace;
   autocompleteOnUse: boolean;
   code: string;
@@ -75,16 +75,16 @@ interface AdvancedEditorProps {
 }
 
 // Run an effect when the editor or prop changes
-function useEditorProp<T>(editor: AceEditor, prop: T, whenPresent: (editor: AceEditor, prop: T) => void) {
+function useEditorProp<T>(editor: AceModule, prop: T, whenPresent: (editor: AceModule, prop: T) => void) {
   useEffect(() => {
     if (editor) {
       return whenPresent(editor, prop);
     }
   }, [editor, prop, whenPresent]);
 }
 
-const AdvancedEditor: React.SFC<AdvancedEditorProps> = props => {
-  const [editor, setEditor] = useState<AceEditor>(null);
+const AceEditor: React.SFC<AceEditorProps> = props => {
+  const [editor, setEditor] = useState<AceModule>(null);
   const child = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -315,7 +315,7 @@ enum LoadState {
 //
 // Themes and keybindings can be changed at runtime.
 
-interface AdvancedEditorAsyncProps {
+interface AceEditorAsyncProps {
   autocompleteOnUse: boolean;
   code: string;
   execute: () => any;
@@ -329,7 +329,7 @@ interface AdvancedEditorAsyncProps {
   pairCharacters: PairCharacters;
 }
 
-class AdvancedEditorAsync extends React.Component<AdvancedEditorAsyncProps, AdvancedEditorAsyncState> {
+class AceEditorAsync extends React.Component<AceEditorAsyncProps, AdvancedEditorAsyncState> {
   public constructor(props) {
     super(props);
     this.state = {
@@ -342,7 +342,7 @@ class AdvancedEditorAsync extends React.Component<AdvancedEditorAsyncProps, Adva
   public render() {
     if (this.isLoaded()) {
       const { ace, theme, keybinding } = this.state;
-      return <AdvancedEditor {...this.props} ace={ace} theme={theme} keybinding={keybinding} />;
+      return <AceEditor {...this.props} ace={ace} theme={theme} keybinding={keybinding} />;
     } else {
       return <div>Loading the ACE editor...</div>;
     }
@@ -448,7 +448,7 @@ class AdvancedEditorAsync extends React.Component<AdvancedEditorAsyncProps, Adva
   private async requireLibraries() {
     return import(
       /* webpackChunkName: "advanced-editor" */
-      './advanced-editor'
+      '../advanced-editor'
     );
   }
 }
@@ -483,4 +483,4 @@ const mapStateToProps = (state: State) => {
   };
 };
 
-export default connect<PropsFromState, undefined, CommonEditorProps>(mapStateToProps)(AdvancedEditorAsync);
+export default connect<PropsFromState, undefined, CommonEditorProps>(mapStateToProps)(AceEditorAsync);

ui/frontend/Editor.module.css renamed to ui/frontend/editor/Editor.module.css

@@ -1,10 +1,10 @@
 .container {
-  composes: -autoSize from './shared.module.css';
+  composes: -autoSize from '../shared.module.css';
   position: relative;
 }
 
 .advanced {
-  composes: -bodyMonospace -autoSize from './shared.module.css';
+  composes: -bodyMonospace -autoSize from '../shared.module.css';
   position: absolute;
 }
 

ui/frontend/Editor.tsx renamed to ui/frontend/editor/Editor.tsx

@@ -1,12 +1,13 @@
 import React, { useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
-import * as actions from './actions';
-import AdvancedEditor from './AdvancedEditor';
-import { CommonEditorProps, Editor as EditorType, Position, Selection } from './types';
-import { State } from './reducers';
+import * as actions from '../actions';
+import AceEditor from './AceEditor';
+import { CommonEditorProps, Editor as EditorType, Position, Selection } from '../types';
+import { State } from '../reducers';
 
 import styles from './Editor.module.css';
+import MonacoEditor from './MonacoEditor';
 
 class CodeByteOffsets {
   readonly code: string;
@@ -118,7 +119,7 @@ const Editor: React.SFC = () => {
   const execute = useCallback(() => dispatch(actions.performPrimaryAction()), [dispatch]);
   const onEditCode = useCallback((c) => dispatch(actions.editCode(c)), [dispatch]);
 
-  const SelectedEditor = editor === EditorType.Simple ? SimpleEditor : AdvancedEditor;
+  const SelectedEditor = editor === EditorType.Simple ? SimpleEditor : editor === EditorType.Monaco ? MonacoEditor : AceEditor;
 
   return (
     <div className={styles.container}>

ui/frontend/editor/MonacoEditor.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { CommonEditorProps, Position } from '../types';
+import MonacoReact, { Monaco } from "@monaco-editor/react";
+
+import styles from './Editor.module.css';
+import { config, grammar } from './rust_monaco_def';
+
+class CodeByteOffsets {
+  readonly code: string;
+  readonly lines: string[];
+
+  constructor(code: string) {
+    this.code = code;
+    this.lines = code.split('\n');
+  }
+
+  public lineToOffsets(line: number) {
+    const precedingBytes = this.bytesBeforeLine(line);
+
+    const highlightedLine = this.lines[line];
+    const highlightedBytes = highlightedLine.length;
+
+    return [precedingBytes, precedingBytes + highlightedBytes];
+  }
+
+  public rangeToOffsets(start: Position, end: Position) {
+    const startBytes = this.positionToBytes(start);
+    const endBytes = this.positionToBytes(end);
+    return [startBytes, endBytes];
+  }
+
+  private positionToBytes(position: Position) {
+    // Subtract one as this logic is zero-based and the columns are one-based
+    return this.bytesBeforeLine(position.line) + position.column - 1;
+  }
+
+  private bytesBeforeLine(line: number) {
+    // Subtract one as this logic is zero-based and the lines are one-based
+    line -= 1;
+
+    const precedingLines = this.lines.slice(0, line);
+
+    // Add one to account for the newline we split on and removed
+    return precedingLines.map(l => l.length + 1).reduce((a, b) => a + b);
+  }
+}
+
+const modeId = 'my-rust';
+
+const initMonaco = (monaco: Monaco) => {
+  monaco.editor.defineTheme('vscode-dark-plus', {
+    base: 'vs-dark',
+    inherit: true,
+    rules: [
+      { token: 'keyword.control', foreground: 'C586C0' },
+      { token: 'variable', foreground: '9CDCFE' },
+      { token: 'support.function', foreground: 'DCDCAA' },
+    ]
+  });
+  monaco.languages.register({ // language for editor
+    id: modeId,
+  });
+
+  monaco.languages.onLanguage(modeId, async () => {
+    console.log(modeId);
+
+    monaco.languages.setLanguageConfiguration(modeId, config);
+    monaco.languages.setMonarchTokensProvider(modeId, grammar);
+  });
+};
+
+const MonacoEditor: React.SFC<CommonEditorProps> = props => {
+  return (
+    <MonacoReact
+      language={modeId}
+      theme="vscode-dark-plus"
+      loading="Loading the Monaco editor..."
+      className={styles.advanced}
+      value={props.code}
+      onChange={props.onEditCode}
+      beforeMount={initMonaco}
+    />
+  );
+}
+
+export default MonacoEditor;