From 16fcd80a0018a1fafb334239f8e8cb7151f9369a Mon Sep 17 00:00:00 2001 From: undefined Date: Sat, 7 Aug 2021 20:29:13 +0800 Subject: [PATCH] ui: support ctrl+enter --- .../ui-default/components/editor/index.js | 13 +---- .../ui-default/components/monaco/index.js | 49 +++++++++++++++++++ .../scratchpad/ScratchpadEditorContainer.jsx | 28 +---------- packages/ui-default/package.json | 2 +- 4 files changed, 54 insertions(+), 38 deletions(-) diff --git a/packages/ui-default/components/editor/index.js b/packages/ui-default/components/editor/index.js index 5c4e563b2..3fe2f9ccb 100644 --- a/packages/ui-default/components/editor/index.js +++ b/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({ - 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'), - }); + registerAction(this.editor, this.model, this.$dom); if (autoResize) { this.editor.onDidChangeModelDecorations(() => { updateEditorHeight(); // typing diff --git a/packages/ui-default/components/monaco/index.js b/packages/ui-default/components/monaco/index.js index 34c9a1133..5bc5ea05f 100644 --- a/packages/ui-default/components/monaco/index.js +++ b/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(); + }); + }); +} diff --git a/packages/ui-default/components/scratchpad/ScratchpadEditorContainer.jsx b/packages/ui-default/components/scratchpad/ScratchpadEditorContainer.jsx index 36abf4362..e6eb888cb 100644 --- a/packages/ui-default/components/scratchpad/ScratchpadEditorContainer.jsx +++ b/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 from 'vj/components/monaco/index'; -import Notification from 'vj/components/notification'; +import monaco, { registerAction } from 'vj/components/monaco/index'; 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, () => { - 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(); - }); - }); + registerAction(this.editor, this.model); this.disposable.push( this.editor.onDidChangeModelContent((event) => { if (!this.__prevent_trigger_change_event) { diff --git a/packages/ui-default/package.json b/packages/ui-default/package.json index 00acc9c29..88eeed712 100644 --- a/packages/ui-default/package.json +++ b/packages/ui-default/package.json @@ -1,6 +1,6 @@ { "name": "@hydrooj/ui-default", - "version": "4.16.0", + "version": "4.16.1", "author": "undefined ", "license": "AGPL-3.0", "main": "hydro.js",