ui: support ctrl+enter

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

@@ -36,7 +36,7 @@ export default class Editor extends DOMAttachedObject {
   }
 
   async initMonaco() {
-    const { default: monaco } = await import('vj/components/monaco/index');
+    const { default: monaco, registerAction } = await import('vj/components/monaco/index');
     const {
       onChange, language = 'markdown',
       theme = UserContext.monacoTheme || 'vs-light',
@@ -95,16 +95,7 @@ export default class Editor extends DOMAttachedObject {
       cfg.scrollBeyondLastLine = false;
     }
     this.editor = monaco.editor.create(ele, cfg);
-    this.editor.addAction({
+    registerAction(this.editor, this.model, this.$dom);
-      id: 'theme-dark',
-      label: 'Use dark theme',
-      run: () => monaco.editor.setTheme('vs-dark'),
-    });
-    this.editor.addAction({
-      id: 'theme-light',
-      label: 'Use light theme',
-      run: () => monaco.editor.setTheme('vs-light'),
-    });
     if (autoResize) {
       this.editor.onDidChangeModelDecorations(() => {
         updateEditorHeight(); // typing

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

@@ -1,4 +1,6 @@
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import loadFormatter from 'vj/components/wastyle/index';
+import Notification from 'vj/components/notification';
 
 monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
   noSemanticValidation: false,
@@ -105,3 +107,50 @@ monaco.languages.yaml.yamlDefaults.setDiagnosticsOptions({
 });
 
 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: 'Use light',
+      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.KEY_P, () => {
+    editor.getAction('editor.action.quickCommand').run();
+  });
+  loadFormatter().then(([loaded, format]) => {
+    if (!loaded) return;
+    editor.addAction({
+      id: 'hydro.format',
+      label: 'Format Code',
+      contextMenuOrder: 0,
+      contextMenuGroupId: 'operation',
+      keybindings: [monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KEY_F],
+      run: () => {
+        if (!['cpp', 'c'].includes(model._languageIdentifier.language)) return;
+        const [success, result] = format(editor.getValue(), `${UserContext.astyleOptions.trim()} mode=c`);
+        if (success) editor.setValue(result);
+        else Notification.warn(result);
+      },
+    });
+    editor.addCommand(monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KEY_F, () => {
+      editor.getAction('hydro.format').run();
+    });
+  });
+}

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

@@ -1,8 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import load from 'vj/components/wastyle/index';
+import monaco, { registerAction } from 'vj/components/monaco/index';
-import monaco from 'vj/components/monaco/index';
-import Notification from 'vj/components/notification';
 
 const mapStateToProps = (state) => ({
   value: state.editor.code,
@@ -53,29 +51,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor e
       const fontSize = localStorage.getItem('scratchpad.editor.fontSize');
       if (fontSize && !Number.isNaN(+fontSize)) config.fontSize = +fontSize;
       this.editor = monaco.editor.create(this.containerElement, config);
-      this.editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KEY_P, () => {
+      registerAction(this.editor, this.model);
-        this.editor.getAction('editor.action.quickCommand').run();
-      });
-      load().then(([loaded, format]) => {
-        if (!loaded) return;
-        const formatAction = {
-          id: 'hydro.format',
-          label: 'Format Code',
-          contextMenuOrder: 0,
-          contextMenuGroupId: 'operation',
-          keybindings: [monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KEY_F],
-          run: () => {
-            if (!['cpp', 'c'].includes(this.model._languageIdentifier.language)) return;
-            const [success, result] = format(this.editor.getValue(), `${UserContext.astyleOptions.trim()} mode=c`);
-            if (success) this.editor.setValue(result);
-            else Notification.warn(result);
-          },
-        };
-        this.editor.addAction(formatAction);
-        this.editor.addCommand(monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KEY_F, () => {
-          this.editor.getAction('hydro.format').run();
-        });
-      });
       this.disposable.push(
         this.editor.onDidChangeModelContent((event) => {
           if (!this.__prevent_trigger_change_event) {

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.16.0",
+  "version": "4.16.1",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",