add themes

demo/package.json

@@ -38,5 +38,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "monaco-themes": "^0.3.3"
   }
 }

demo/src/config/index.js

@@ -31,7 +31,60 @@ const config = {
     IEditorOptions: 'https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditoroptions.html#acceptsuggestiononcommitcharacter',
   },
 
-  supportedThemeModes: ['dark', 'light'],
+  defaultThemes: ['dark', 'light'],
+
+  monacoThemes: [
+    'Active4D',
+    'All Hallows Eve',
+    'Amy',
+    'Birds of Paradise',
+    'Blackboard',
+    'Brilliance Black',
+    'Brilliance Dull',
+    'Chrome DevTools',
+    'Clouds Midnight',
+    'Clouds',
+    'Cobalt',
+    'Dawn',
+    'Dominion Day',
+    'Dreamweaver',
+    'Eiffel',
+    'Espresso Libre',
+    'GitHub',
+    'IDLE',
+    'Katzenmilch',
+    'Kuroir Theme',
+    'LAZY',
+    'MagicWB (Amiga)',
+    'Merbivore Soft',
+    'Merbivore',
+    'Monokai Bright',
+    'Monokai',
+    'Night Owl',
+    'Oceanic Next',
+    'Pastels on Dark',
+    'Slush and Poppies',
+    'Solarized-dark',
+    'Solarized-light',
+    'SpaceCadet',
+    'Sunburst',
+    'Textmate (Mac Classic)',
+    'Tomorrow-Night-Blue',
+    'Tomorrow-Night-Bright',
+    'Tomorrow-Night-Eighties',
+    'Tomorrow-Night',
+    'Tomorrow',
+    'Twilight',
+    'Upstream Sunburst',
+    'Vibrant Ink',
+    'Xcode_default',
+    'Zenburnesque',
+    'iPlastic',
+    'idleFingers',
+    'krTheme',
+    'monoindustrial',
+    'themelist',
+  ],
 
   supportedLanguages: [{id:1,name:'apex'},{id:2,name:'azcli'},{id:3,name:'bat'},{id:4,name:'c'},{id:5,name:'clojure'},{id:6,name:'coffeescript'},{id:7,name:'cpp'},{id:8,name:'csharp'},{id:9,name:'csp'},{id:10,name:'css'},{id:11,name:'dockerfile'},{id:12,name:'fsharp'},{id:13,name:'go'},{id:14,name:'graphql'},{id:15,name:'handlebars'},{id:16,name:'html'},{id:17,name:'ini'},{id:18,name:'java'},{id:19,name:'javascript'},{id:20,name:'json'},{id:21,name:'kotlin'},{id:22,name:'less'},{id:23,name:'lua'},{id:24,name:'markdown'},{id:25,name:'msdax'},{id:26,name:'mysql'},{id:27,name:'objective-c'},{id:28,name:'pascal'},{id:29,name:'perl'},{id:30,name:'pgsql'},{id:31,name:'php'},{id:32,name:'plaintext'},{id:33,name:'postiats'},{id:34,name:'powerquery'},{id:35,name:'powershell'},{id:36,name:'pug'},{id:37,name:'python'},{id:38,name:'r'},{id:39,name:'razor'},{id:40,name:'redis'},{id:41,name:'redshift'},{id:42,name:'ruby'},{id:43,name:'rust'},{id:44,name:'sb'},{id:45,name:'scheme'},{id:46,name:'scss'},{id:47,name:'shell'},{id:48,name:'sol'},{id:49,name:'sql'},{id:50,name:'st'},{id:51,name:'swift'},{id:52,name:'tcl'},{id:53,name:'typescript'},{id:54,name:'vb'},{id:55,name:'xml'},{id:56,name:'yaml'}],
 };

demo/src/sections/Content/useStyles.js

@@ -11,10 +11,10 @@ const useStyles = makeStyles(theme => ({
     paddingBottom: 10,    
   },
   editor: {
-    height: '85vh',
+    height: '100%',
   },
   diffEditor: {
-    height: '85vh',
+    height: '100vh',
   }
 }));
 

demo/src/sections/DiffEditor/DiffEditor.js

@@ -10,7 +10,7 @@ import useStyles from './useStyles';
 
 const DiffEditor = _ => {
   const { state: {
-    themeMode,
+    monacoTheme,
     diffEditor: { selectedLanguageId },
   } } = useStore();
   const classes = useStyles();
@@ -20,7 +20,7 @@ const DiffEditor = _ => {
       original={examples.original}
       modified={examples.modified}
       language={config.supportedLanguages.find(({ id }) => id === selectedLanguageId).name}
-      theme={themeMode}
+      theme={monacoTheme}
     />
   </div>;
 }

demo/src/sections/Editor/Editor.js

@@ -11,11 +11,12 @@ import useStyles from './useStyles';
 
 const Editor = _ => {
   const classes = useStyles();
-  const { state: { editor: { selectedLanguageId, options }, themeMode } } = useStore();
+  const { state: { editor: { selectedLanguageId, options }, monacoTheme } } = useStore();
 
   return <div className={classes.root}>
     <MonacoEditor
-      theme={themeMode}
+      theme={monacoTheme}
+      height=""
       value={examples[selectedLanguageId] || ''}
       language={config.supportedLanguages.find(({ id }) => id === selectedLanguageId).name}
       options={options}

demo/src/sections/Editor/Settings/Settings.js

@@ -12,7 +12,6 @@ import Editor from '@monaco-editor/react';
 import { useStore } from 'store';
 import config from 'config';
 import { noop } from 'utils';
-import { useUpdate } from 'utils/hooks';
 
 import useStyles from './useStyles';
 
@@ -20,14 +19,25 @@ const Settings = _ => {
   const classes = useStyles();
   const [isEditorReady, setIsEditorReady] = useState(false);
   const {
-    state: { editor: { selectedLanguageId, options }, themeMode },
-    actions: { editor: { setSelectedLanguageId, setOptions }, showNotification },
+    state: { editor: { selectedLanguageId, options }, monacoTheme },
+    actions: { editor: { setSelectedLanguageId, setOptions, setMonacoTheme }, showNotification },
+    effects: { defineTheme },
   } = useStore();
   const [getEditorValue, setGetEditorValue] = useState(noop);
   const editorRef = useRef();
 
   function handleLanguageChange(ev) {
-    setSelectedLanguageId(ev.target.value);    
+    setSelectedLanguageId(ev.target.value);
+  }
+
+  function handleThemeChange(ev) {
+    const theme = ev.target.value;
+
+    if (config.defaultThemes.includes(theme)) {
+      setMonacoTheme(theme);
+    } else {
+      defineTheme(theme).then(_ => setMonacoTheme(theme));
+    }
   }
 
   function handleEditorDidMount(valueGetter, editor) {
@@ -36,14 +46,6 @@ const Settings = _ => {
     editorRef.current = editor;
   }
 
-  useUpdate(_ => {
-    editorRef.current && editorRef.current.getAction('editor.action.formatDocument').run();
-  });
-
-  function handleBeautifyJSON() {
-    editorRef.current.getAction('editor.action.formatDocument').run();
-  }
-
   function handleApply() {
     let oprions;
     try {
@@ -76,6 +78,30 @@ const Settings = _ => {
         </TextField>
       </div>
 
+      <div>
+        <Typography className={classes.title} variant="h6">Themes</Typography>
+        <TextField
+          select
+          variant="filled"
+          value={monacoTheme}
+          onChange={handleThemeChange}
+          className="full-width"
+          label="Theme"
+        >
+          {config.defaultThemes.map(theme => (
+            <MenuItem key={theme} value={theme}>
+              {theme}
+            </MenuItem>
+          ))}
+          <MenuItem disabled><Divider /></MenuItem>
+          {config.monacoThemes.filter(theme => !theme.includes(' ')).map(theme => (
+            <MenuItem key={theme} value={theme}>
+              {theme}
+            </MenuItem>
+          ))}
+        </TextField>
+      </div>
+
       <div>
         <Typography className={classes.title} variant="h6">Options</Typography>
         <Typography variant="subtitle2" gutterBottom>
@@ -92,7 +118,7 @@ const Settings = _ => {
         </Typography>
         <div className={classes.editor}>
           <Editor
-            theme={themeMode}
+            theme={monacoTheme}
             language="json"
             height={400}
             value={JSON.stringify(options, null, 2)}
@@ -100,7 +126,6 @@ const Settings = _ => {
           />
         </div>
         <Button variant="outlined" disabled={!isEditorReady} onClick={handleApply}>Apply</Button>
-        <Button variant="outlined" disabled={!isEditorReady} onClick={handleBeautifyJSON}>Beautify JSON</Button>
       </div>
     </div>
   );

demo/src/sections/Editor/useStyles.js

@@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles';
 const useStyles = makeStyles(theme => ({
   root: {
     width: '100%',
-    height: '88%',
+    height: '100%',
     display: 'flex',
     justifyContent: 'space-between',
     padding: 20,

demo/src/store/actions/index.js

@@ -31,6 +31,9 @@ const editor = {
   setOptions({ state }, options) {
     state.editor.options = options;
   },
+  setMonacoTheme({ state }, theme) {
+    state.monacoTheme = theme;
+  },
 };
 
 const diffEditor = {

demo/src/store/effects/index.js

@@ -0,0 +1,19 @@
+import { monaco } from '@monaco-editor/react';
+
+const defineTheme = theme => {
+  return new Promise(res => {
+    Promise.all(
+      [
+        monaco.init(),
+        import(`monaco-themes/themes/${theme}.json`),
+      ]
+    ).then(
+      ([monaco, themeData]) => {
+        monaco.editor.defineTheme(theme, themeData);
+        res();
+      }
+    );
+  });
+};
+
+export { defineTheme };

demo/src/store/index.js

@@ -3,10 +3,12 @@ import { createHook } from 'overmind-react';
 
 import { initialState } from './state';
 import * as actions from './actions';
+import * as effects from './effects';
 
 export const store = createOvermind({
   state: initialState,
   actions,
+  effects,
 });
 
 export const useStore = createHook();

demo/src/store/state/index.js

@@ -1,7 +1,9 @@
 import config from 'config';
 
+const initalTheme = localStorage.getItem('themeMode') || 'light';
+
 const initialState = {
-  themeMode: localStorage.getItem('themeMode') || 'light',
+  themeMode: initalTheme,
 
   isEditorReady: false,
 
@@ -70,6 +72,8 @@ const initialState = {
     },
   },
 
+  monacoTheme: initalTheme,
+
   diffEditor: {
     selectedLanguageId: 24, // 24 is the id of markdown
   },

demo/yarn.lock

@@ -4057,6 +4057,11 @@ fast-levenshtein@~2.0.4:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
+fast-plist@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/fast-plist/-/fast-plist-0.1.2.tgz#a45aff345196006d406ca6cdcd05f69051ef35b8"
+  integrity sha1-pFr/NFGWAG1AbKbNzQX2kFHvNbg=
+
 faye-websocket@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
@@ -6484,6 +6489,13 @@ mobile-detect@^1.4.3:
   resolved "https://registry.yarnpkg.com/mobile-detect/-/mobile-detect-1.4.3.tgz#e436a3839f5807dd4d3cd4e081f7d3a51ffda2dd"
   integrity sha512-UaahPNLllQsstHOEHAmVnTHCMQrAS9eL5Qgdi50QrYz6UgGk+Xziz2udz2GN6NYcyODcPLnasC7a7s6R2DjiaQ==
 
+monaco-themes@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/monaco-themes/-/monaco-themes-0.3.3.tgz#86d9b7cde4d90acb128ec07b3d5d10f757a32224"
+  integrity sha512-0yygYHg3hZhMhlYkP2eMAMurLSyVDqA7ZOjHJSz0LNxra2hxuAGjKFdoBGXnG+VykT6u8bc5uZWF8G35NMC3Gw==
+  dependencies:
+    fast-plist "^0.1.2"
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"