configurable monaco themes

Author: HKalbasi

ui/frontend/ConfigMenu.tsx

@@ -21,9 +21,14 @@ interface ConfigMenuProps {
   close: () => void;
 }
 
+const MONACO_THEMES = [
+  'vs', 'vs-dark', 'vscode-dark-plus',
+];
+
 const ConfigMenu: React.SFC<ConfigMenuProps> = () => {
   const keybinding = useSelector((state: State) => state.configuration.keybinding);
-  const theme = useSelector((state: State) => state.configuration.theme);
+  const aceTheme = useSelector((state: State) => state.configuration.aceTheme);
+  const monacoTheme = useSelector((state: State) => state.configuration.monacoTheme);
   const orientation = useSelector((state: State) => state.configuration.orientation);
   const editorStyle = useSelector((state: State) => state.configuration.editor);
   const pairCharacters = useSelector((state: State) => state.configuration.pairCharacters);
@@ -32,7 +37,8 @@ const ConfigMenu: React.SFC<ConfigMenuProps> = () => {
   const processAssembly = useSelector((state: State) => state.configuration.processAssembly);
 
   const dispatch = useDispatch();
-  const changeTheme = useCallback((t) => dispatch(actions.changeTheme(t)), [dispatch]);
+  const changeAceTheme = useCallback((t) => dispatch(actions.changeAceTheme(t)), [dispatch]);
+  const changeMonacoTheme = useCallback((t) => dispatch(actions.changeMonacoTheme(t)), [dispatch]);
   const changeKeybinding = useCallback((k) => dispatch(actions.changeKeybinding(k)), [dispatch]);
   const changeOrientation = useCallback((o) => dispatch(actions.changeOrientation(o)), [dispatch]);
   const changeEditorStyle = useCallback((e) => dispatch(actions.changeEditor(e)), [dispatch]);
@@ -64,8 +70,8 @@ const ConfigMenu: React.SFC<ConfigMenuProps> = () => {
 
             <SelectConfig
               name="Theme"
-              value={theme}
-              onChange={changeTheme}
+              value={aceTheme}
+              onChange={changeAceTheme}
             >
               {ACE_THEMES.map(t => <option key={t} value={t}>{t}</option>)}
             </SelectConfig>
@@ -79,6 +85,17 @@ const ConfigMenu: React.SFC<ConfigMenuProps> = () => {
               onChange={changePairCharacters} />
           </Fragment>
         )}
+        {editorStyle === Editor.Monaco && (
+          <Fragment>
+            <SelectConfig
+              name="Theme"
+              value={monacoTheme}
+              onChange={changeMonacoTheme}
+            >
+              {MONACO_THEMES.map(t => <option key={t} value={t}>{t}</option>)}
+            </SelectConfig>
+          </Fragment>
+        )}
       </MenuGroup>
 
       <MenuGroup title="UI">

ui/frontend/actions.ts

@@ -63,7 +63,8 @@ export enum ActionType {
   SetPage = 'SET_PAGE',
   ChangeEditor = 'CHANGE_EDITOR',
   ChangeKeybinding = 'CHANGE_KEYBINDING',
-  ChangeTheme = 'CHANGE_THEME',
+  ChangeAceTheme = 'CHANGE_ACE_THEME',
+  ChangeMonacoTheme = 'CHANGE_MONACO_THEME',
   ChangePairCharacters = 'CHANGE_PAIR_CHARACTERS',
   ChangeOrientation = 'CHANGE_ORIENTATION',
   ChangeAssemblyFlavor = 'CHANGE_ASSEMBLY_FLAVOR',
@@ -138,8 +139,11 @@ export const changeEditor = (editor: Editor) =>
 export const changeKeybinding = (keybinding: string) =>
   createAction(ActionType.ChangeKeybinding, { keybinding });
 
-export const changeTheme = (theme: string) =>
-  createAction(ActionType.ChangeTheme, { theme });
+export const changeAceTheme = (theme: string) =>
+  createAction(ActionType.ChangeAceTheme, { theme });
+  
+export const changeMonacoTheme = (theme: string) =>
+  createAction(ActionType.ChangeMonacoTheme, { theme });
 
 export const changePairCharacters = (pairCharacters: PairCharacters) =>
   createAction(ActionType.ChangePairCharacters, { pairCharacters });
@@ -822,7 +826,8 @@ export type Action =
   | ReturnType<typeof changeOrientation>
   | ReturnType<typeof changePrimaryAction>
   | ReturnType<typeof changeProcessAssembly>
-  | ReturnType<typeof changeTheme>
+  | ReturnType<typeof changeAceTheme>
+  | ReturnType<typeof changeMonacoTheme>
   | ReturnType<typeof requestExecute>
   | ReturnType<typeof receiveExecuteSuccess>
   | ReturnType<typeof receiveExecuteFailure>

ui/frontend/editor/AceEditor.tsx

@@ -472,7 +472,7 @@ interface PropsFromState {
 }
 
 const mapStateToProps = (state: State) => {
-  const { configuration: { theme, keybinding, pairCharacters } } = state;
+  const { configuration: { aceTheme: theme, keybinding, pairCharacters } } = state;
 
   return {
     theme,

ui/frontend/editor/MonacoEditor.tsx

@@ -1,50 +1,12 @@
 import React from 'react';
 import { CommonEditorProps, Position } from '../types';
 import MonacoReact, { Monaco } from "@monaco-editor/react";
+import { connect } from 'react-redux';
+import State from '../state';
 
 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) => {
@@ -62,18 +24,28 @@ const initMonaco = (monaco: Monaco) => {
   });
 
   monaco.languages.onLanguage(modeId, async () => {
-    console.log(modeId);
-
     monaco.languages.setLanguageConfiguration(modeId, config);
     monaco.languages.setMonarchTokensProvider(modeId, grammar);
   });
 };
 
-const MonacoEditor: React.SFC<CommonEditorProps> = props => {
+interface PropsFromState {
+  theme: string;
+}
+
+const mapStateToProps = (state: State) => {
+  const { configuration: { monacoTheme: theme, } } = state;
+  return { theme };
+};
+
+
+type MonacoEditorProps = CommonEditorProps & PropsFromState;
+
+const MonacoEditor: React.SFC<MonacoEditorProps> = props => {
   return (
     <MonacoReact
       language={modeId}
-      theme="vscode-dark-plus"
+      theme={props.theme}
       loading="Loading the Monaco editor..."
       className={styles.advanced}
       value={props.code}
@@ -83,4 +55,4 @@ const MonacoEditor: React.SFC<CommonEditorProps> = props => {
   );
 }
 
-export default MonacoEditor;
+export default connect<PropsFromState, undefined, CommonEditorProps>(mapStateToProps)(MonacoEditor);

ui/frontend/local_storage.ts

@@ -5,15 +5,16 @@
 import State from './state';
 import storage from './storage';
 
-const CURRENT_VERSION = 1;
+const CURRENT_VERSION = 2;
 
 export function serialize(state: State) {
   return JSON.stringify({
     version: CURRENT_VERSION,
     configuration: {
       editor: state.configuration.editor,
       keybinding: state.configuration.keybinding,
-      theme: state.configuration.theme,
+      aceTheme: state.configuration.aceTheme,
+      monacoTheme: state.configuration.monacoTheme,
       pairCharacters: state.configuration.pairCharacters,
       orientation: state.configuration.orientation,
       assemblyFlavor: state.configuration.assemblyFlavor,
@@ -29,12 +30,23 @@ export function deserialize(savedState) {
   if (!savedState) { return undefined; }
   const parsedState = JSON.parse(savedState);
   if (!parsedState) { return undefined; }
-  if (parsedState.version !== CURRENT_VERSION) { return undefined; }
+  let { version } = parsedState;
+  delete parsedState.version;
+
+  // migrations
+  if (version === 1) {
+    if (parsedState.editor === 'advanced') {
+      parsedState.editor = 'ace';
+    }
+    parsedState.aceTheme = parsedState.theme;
+    parsedState.monacoTheme = 'vscode-dark-plus';
+    delete parsedState.theme;
+    version = 2;
+  }
 
   // This assumes that the keys we serialize with match the keys in the
   // live state. If that's no longer true, an additional renaming step
   // needs to be added.
-  delete parsedState.version;
   return parsedState;
 }
 

ui/frontend/reducers/configuration.ts

@@ -17,7 +17,8 @@ import {
 export interface State {
   editor: Editor;
   keybinding: string;
-  theme: string;
+  aceTheme: string;
+  monacoTheme: string;
   pairCharacters: PairCharacters;
   orientation: Orientation;
   assemblyFlavor: AssemblyFlavor;
@@ -33,7 +34,8 @@ export interface State {
 const DEFAULT: State = {
   editor: Editor.Ace,
   keybinding: 'ace',
-  theme: 'github',
+  aceTheme: 'github',
+  monacoTheme: 'vscode-dark-plus',
   pairCharacters: PairCharacters.Enabled,
   orientation: Orientation.Automatic,
   assemblyFlavor: AssemblyFlavor.Att,
@@ -52,8 +54,10 @@ export default function configuration(state = DEFAULT, action: Action): State {
       return { ...state, editor: action.editor };
     case ActionType.ChangeKeybinding:
       return { ...state, keybinding: action.keybinding };
-    case ActionType.ChangeTheme:
-      return { ...state, theme: action.theme };
+    case ActionType.ChangeAceTheme:
+      return { ...state, aceTheme: action.theme };
+    case ActionType.ChangeMonacoTheme:
+      return { ...state, monacoTheme: action.theme };
     case ActionType.ChangePairCharacters:
       return { ...state, pairCharacters: action.pairCharacters };
     case ActionType.ChangeOrientation: