ui: theme changer

packages/ui-default/components/monaco/index.js

@@ -1,36 +0,0 @@
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
-import './monaco.css';
-
-export default monaco;
-
-/** @param {import('monaco-editor').editor.IStandaloneCodeEditor} editor */
-export function registerAction(editor, model, element) {
-  editor.addAction({
-    id: 'theme-dark',
-    label: 'Use dark theme',
-    run: () => monaco.editor.setTheme('vs-dark'),
-  });
-  editor.addAction({
-    id: 'theme-light',
-    label: 'Use light theme',
-    run: () => monaco.editor.setTheme('vs-light'),
-  });
-  if (element) {
-    editor.addAction({
-      id: 'submit-form',
-      label: 'Submit',
-      keybindings: [
-        monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
-        monaco.KeyMod.WinCtrl | monaco.KeyCode.Enter,
-      ],
-      run: () => $(element).closest('form').submit(),
-    });
-  }
-  editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyP, () => {
-    editor.getAction('editor.action.quickCommand').run();
-  });
-  editor.addCommand(monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KeyF, () => {
-    const action = editor.getAction('editor.action.format') || editor.getAction('editor.action.formatDocument');
-    if (action) action.run();
-  });
-}

packages/ui-default/components/monaco/index.ts

@@ -0,0 +1,92 @@
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import { EditorAction, registerEditorAction } from 'monaco-editor/esm/vs/editor/browser/editorExtensions';
+import { IQuickInputService } from 'monaco-editor/esm/vs/platform/quickinput/common/quickInput';
+import list from 'monaco-themes/themes/themelist.json';
+import i18n from 'vj/utils/i18n';
+import './monaco.css';
+
+export default monaco;
+export const customOptions: monaco.editor.IStandaloneDiffEditorConstructionOptions = JSON.parse(localStorage.getItem('editor.config') || '{}');
+
+const loaded = {};
+async function fetchTheme(id: string, label: string) {
+  if (loaded[id]) return;
+  const res = await fetch(`${UiContext.cdn_prefix}monaco/themes/${label}.json`);
+  const data = await res.json();
+  monaco.editor.defineTheme(id, data);
+  loaded[id] = true;
+}
+export const loadThemePromise = customOptions.theme
+  ? fetchTheme(customOptions.theme, list[customOptions.theme])
+  : Promise.resolve();
+
+// 这破烂 monaco 能不能给个 typings 啊
+// 我翻源码真的很累的好吧
+class ChangeThemeAction extends EditorAction {
+  constructor() {
+    super({
+      id: 'hydro.changeEditorTheme',
+      label: i18n('Change Theme'),
+      alias: i18n('Change Theme'),
+    });
+  }
+
+  async run(accessor, editor: monaco.editor.IStandaloneCodeEditor) {
+    const items = Object.keys(list).map((key) => ({
+      label: list[key],
+      command: key,
+    }));
+    const quickInputService = accessor.get(IQuickInputService);
+    const oldTheme = (editor as any)._themeService._theme;
+    let focus = '';
+    const selected = await quickInputService.pick(items, {
+      canPickMany: false,
+      async onDidFocus(item) {
+        focus = item.command;
+        await fetchTheme(item.command, item.label);
+        if (focus === item.command) monaco.editor.setTheme(item.command);
+      },
+    });
+    if (!selected) {
+      const themeId = oldTheme.type ? `${oldTheme.base}-${oldTheme.type}` : oldTheme.id;
+      return monaco.editor.setTheme(themeId);
+    }
+    await fetchTheme(selected.command, selected.label);
+    customOptions.theme = selected.command;
+    return monaco.editor.setTheme(selected.command);
+  }
+}
+
+registerEditorAction(ChangeThemeAction);
+
+export function registerAction(
+  editor: monaco.editor.IStandaloneCodeEditor,
+  model: monaco.editor.IModel,
+  element,
+) {
+  if (element) {
+    editor.addAction({
+      id: 'hydro.submitForm',
+      label: 'Submit',
+      keybindings: [
+        monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
+        monaco.KeyMod.WinCtrl | monaco.KeyCode.Enter,
+      ],
+      run: () => {
+        $(element).closest('form').submit();
+      },
+    });
+  }
+  editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyP, () => {
+    editor.getAction('editor.action.quickCommand').run();
+  });
+  editor.addCommand(monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KeyF, () => {
+    const action = editor.getAction('editor.action.format') || editor.getAction('editor.action.formatDocument');
+    if (action) action.run();
+  });
+  editor.onDidChangeConfiguration(() => {
+    const current = editor.getOption(monaco.editor.EditorOptions.fontSize.id);
+    customOptions.fontSize = current;
+    localStorage.setItem('editor.config', JSON.stringify(customOptions));
+  });
+}

packages/ui-default/components/monaco/loader.ts

@@ -49,6 +49,7 @@ export async function load(features = ['markdown']) {
     console.log('Loaded monaco feature:', feat, 'in', Date.now() - s, 'ms');
     loaded.push(feat);
   }
+  await res.loadThemePromise;
   return { monaco: res.default, registerAction: res.registerAction };
 }
 export default load;

packages/ui-default/components/scratchpad/ScratchpadEditorContainer.jsx

@@ -4,7 +4,6 @@ import { connect } from 'react-redux';
 const mapStateToProps = (state) => ({
   value: state.editor.code,
   language: window.LANGS[state.editor.lang]?.monaco,
-  theme: 'vs-light',
   mainSize: state.ui.main.size,
   pretestSize: state.ui.pretest.size,
   recordSize: state.ui.records.size,
@@ -23,21 +22,20 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor e
 
   async componentDidMount() {
     const value = this.props.value || '';
-    const { language, theme } = this.props;
+    const { language } = this.props;
     const { load } = await import('vj/components/monaco/loader');
-    const { monaco, registerAction } = await load([language]);
+    const { monaco, registerAction, customOptions } = await load([language]);
     this.model = monaco.editor.createModel(value, language, monaco.Uri.parse(`file:///${UiContext.pdoc.pid || UiContext.pdoc.docId}.${language}`));
     if (this.containerElement) {
       /** @type {monaco.editor.IStandaloneEditorConstructionOptions} */
       const config = {
-        theme,
+        theme: 'vs-light',
+        ...customOptions,
         lineNumbers: true,
         glyphMargin: true,
         lightbulb: { enabled: true },
         model: this.model,
       };
-      const fontSize = localStorage.getItem('scratchpad.editor.fontSize');
-      if (fontSize && !Number.isNaN(+fontSize)) config.fontSize = +fontSize;
       this.editor = monaco.editor.create(this.containerElement, config);
       registerAction(this.editor, this.model);
       this.disposable.push(
@@ -46,10 +44,6 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor e
             this.props.handleUpdateCode(this.editor.getValue(), event);
           }
         }),
-        this.editor.onDidChangeConfiguration(() => {
-          const current = this.editor.getOptions()._values[40].fontSize;
-          localStorage.setItem('scratchpad.editor.fontSize', current);
-        }),
       );
     }
   }
@@ -80,7 +74,6 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor e
       monaco.editor.setModelLanguage(model, language);
       editor.updateOptions({ mode: language });
     }
-    if (prevProps.theme !== theme) monaco.editor.setTheme(theme);
     if (editor) {
       if (prevProps.mainSize !== mainSize
         || prevProps.recordSize !== recordSize

packages/ui-default/components/scratchpad/ScratchpadToolbarContainer.jsx

@@ -64,9 +64,6 @@ const mapDispatchToProps = (dispatch) => ({
       payload: request.get(UiContext.getSubmissionsUrl),
     });
   },
-  handleClickRefresh() {
-    if (this.props.recordsVisible) this.loadSubmissions();
-  },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(class ScratchpadToolbarContainer extends React.PureComponent {
@@ -121,18 +118,6 @@ export default connect(mapStateToProps, mapDispatchToProps)(class ScratchpadTool
           {' '}
           (F10)
         </ToolbarButton>
-        <ToolbarButton
-          data-tooltip={i18n('Refresh Records')}
-          className="scratchpad__toolbar__refresh"
-          data-global-hotkey="alt+f"
-          onClick={() => this.props.handleClickRefresh()}
-        >
-          <Icon name="refresh" />
-          {' '}
-          {i18n('Refresh')}
-          {' '}
-          (Alt+F)
-        </ToolbarButton>
         <ToolbarButton
           data-global-hotkey="alt+q"
           data-tooltip={`${i18n('Quit Scratchpad')} (Alt+Q)`}

packages/ui-default/components/scratchpad/reducers/ui.js

@@ -13,7 +13,7 @@ export default function reducer(state = {
   },
   records: {
     visible: UiContext.canViewRecord && localStorage.getItem('scratchpad/records') === 'true',
-    size: 200,
+    size: 100,
     isLoading: false,
   },
   isPosting: false,