From 06bc5409f8400c4919043734f15a82a15146dbf8 Mon Sep 17 00:00:00 2001 From: smallstonesk <575913857@qq.com> Date: Mon, 4 Jan 2021 23:44:58 +0800 Subject: [PATCH] feat: add ctrl+s shortcut for code editor --- .../mods/settingBar/components/code/index.tsx | 30 ++++++++++++++++--- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/packages/core/src/mods/settingBar/components/code/index.tsx b/packages/core/src/mods/settingBar/components/code/index.tsx index 6dac600..28c58ad 100644 --- a/packages/core/src/mods/settingBar/components/code/index.tsx +++ b/packages/core/src/mods/settingBar/components/code/index.tsx @@ -5,8 +5,9 @@ import 'antd/es/button/style'; import styles from './index.module.less'; import { Graph } from '@antv/x6'; -import { Button, Modal } from 'antd'; +import { Button, Modal, message } from 'antd'; import CodeEditor from '../../../../components/codeEditor'; +import { monaco, EditorDidMount } from '@monaco-editor/react'; interface IProps { value: any; @@ -16,6 +17,14 @@ interface IProps { onValueChange: (value: string) => void; } +// NOTE: avoid monaco init many times +let KeyMod: any = {}; +let KeyCode: any = {}; +monaco.init().then(monaco => { + KeyMod = monaco.KeyMod; + KeyCode = monaco.KeyCode; +}); + const Code: React.FC = (props) => { const { title, value, onValueChange, flowChart } = props; const [visible, setVisible] = useState(false); @@ -34,9 +43,12 @@ const Code: React.FC = (props) => { const onClickCancel = (): void => { setVisible(false); }; - const onClickOk = (newJson: string): void => { + const onClickOk = (newCode: string): void => { setVisible(false); - onValueChange(newJson); + onValueChange(newCode); + }; + const onSave = (newCode: string): void => { + onValueChange(newCode); }; return ( @@ -49,6 +61,7 @@ const Code: React.FC = (props) => { title={title} value={value} visible={visible} + onSave={onSave} onOk={onClickOk} onCancel={onClickCancel} /> @@ -60,12 +73,13 @@ interface IEditorModalProps { visible: boolean; title: string; value: string; + onSave: (val: string) => void; onOk: (val: string) => void; onCancel: () => void; } const EditModal: React.FC = (props) => { - const { visible, title, value, onOk, onCancel } = props; + const { visible, title, value, onSave, onOk, onCancel } = props; const [code, setCode] = useState(value); // life @@ -88,6 +102,13 @@ const EditModal: React.FC = (props) => { setCode(newCode); } }; + const onEditorDidMount: EditorDidMount = (getEditorValue, editor) => { + // doc: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html#addcommand + editor.addCommand(KeyMod.CtrlCmd | KeyCode.KEY_S, () => { + onSave(getEditorValue()); + message.success('保存成功', 1); + }); + }; return ( = (props) => { width={'100%'} height={'600px'} onChange={onChangeCode} + editorDidMount={onEditorDidMount} /> );