diff --git a/demo/package.json b/demo/package.json index ebf3158..46127b9 100644 --- a/demo/package.json +++ b/demo/package.json @@ -38,5 +38,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "monaco-themes": "^0.3.3" } } diff --git a/demo/src/config/index.js b/demo/src/config/index.js index 923e62d..eacbb98 100644 --- a/demo/src/config/index.js +++ b/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'}], }; diff --git a/demo/src/sections/Content/useStyles.js b/demo/src/sections/Content/useStyles.js index ba1bbd4..87832e7 100644 --- a/demo/src/sections/Content/useStyles.js +++ b/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', } })); diff --git a/demo/src/sections/DiffEditor/DiffEditor.js b/demo/src/sections/DiffEditor/DiffEditor.js index 42463d8..e4024a3 100644 --- a/demo/src/sections/DiffEditor/DiffEditor.js +++ b/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} /> ; } diff --git a/demo/src/sections/Editor/Editor.js b/demo/src/sections/Editor/Editor.js index f298db6..326b339 100644 --- a/demo/src/sections/Editor/Editor.js +++ b/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
id === selectedLanguageId).name} options={options} diff --git a/demo/src/sections/Editor/Settings/Settings.js b/demo/src/sections/Editor/Settings/Settings.js index 54593e5..33413f2 100644 --- a/demo/src/sections/Editor/Settings/Settings.js +++ b/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 = _ => {
+
+ Themes + + {config.defaultThemes.map(theme => ( + + {theme} + + ))} + + {config.monacoThemes.filter(theme => !theme.includes(' ')).map(theme => ( + + {theme} + + ))} + +
+
Options @@ -92,7 +118,7 @@ const Settings = _ => {
{ />
-
); diff --git a/demo/src/sections/Editor/useStyles.js b/demo/src/sections/Editor/useStyles.js index 6f24adf..1e5f41e 100644 --- a/demo/src/sections/Editor/useStyles.js +++ b/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, diff --git a/demo/src/store/actions/index.js b/demo/src/store/actions/index.js index 908a82a..fdf2f1f 100644 --- a/demo/src/store/actions/index.js +++ b/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 = { diff --git a/demo/src/store/effects/index.js b/demo/src/store/effects/index.js new file mode 100644 index 0000000..a1bcb8c --- /dev/null +++ b/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 }; diff --git a/demo/src/store/index.js b/demo/src/store/index.js index cad53e2..9e0dce6 100644 --- a/demo/src/store/index.js +++ b/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(); diff --git a/demo/src/store/state/index.js b/demo/src/store/state/index.js index 81b65d8..794f251 100644 --- a/demo/src/store/state/index.js +++ b/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 }, diff --git a/demo/yarn.lock b/demo/yarn.lock index bd3bcf4..9d1519d 100644 --- a/demo/yarn.lock +++ b/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"