Browse Source

feat: add ctrl+s shortcut for code editor

master
smallstonesk 4 years ago
parent
commit
06bc5409f8
  1. 30
      packages/core/src/mods/settingBar/components/code/index.tsx

30
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 styles from './index.module.less';
import { Graph } from '@antv/x6'; import { Graph } from '@antv/x6';
import { Button, Modal } from 'antd'; import { Button, Modal, message } from 'antd';
import CodeEditor from '../../../../components/codeEditor'; import CodeEditor from '../../../../components/codeEditor';
import { monaco, EditorDidMount } from '@monaco-editor/react';
interface IProps { interface IProps {
value: any; value: any;
@ -16,6 +17,14 @@ interface IProps {
onValueChange: (value: string) => void; 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<IProps> = (props) => { const Code: React.FC<IProps> = (props) => {
const { title, value, onValueChange, flowChart } = props; const { title, value, onValueChange, flowChart } = props;
const [visible, setVisible] = useState<boolean>(false); const [visible, setVisible] = useState<boolean>(false);
@ -34,9 +43,12 @@ const Code: React.FC<IProps> = (props) => {
const onClickCancel = (): void => { const onClickCancel = (): void => {
setVisible(false); setVisible(false);
}; };
const onClickOk = (newJson: string): void => { const onClickOk = (newCode: string): void => {
setVisible(false); setVisible(false);
onValueChange(newJson); onValueChange(newCode);
};
const onSave = (newCode: string): void => {
onValueChange(newCode);
}; };
return ( return (
@ -49,6 +61,7 @@ const Code: React.FC<IProps> = (props) => {
title={title} title={title}
value={value} value={value}
visible={visible} visible={visible}
onSave={onSave}
onOk={onClickOk} onOk={onClickOk}
onCancel={onClickCancel} onCancel={onClickCancel}
/> />
@ -60,12 +73,13 @@ interface IEditorModalProps {
visible: boolean; visible: boolean;
title: string; title: string;
value: string; value: string;
onSave: (val: string) => void;
onOk: (val: string) => void; onOk: (val: string) => void;
onCancel: () => void; onCancel: () => void;
} }
const EditModal: React.FC<IEditorModalProps> = (props) => { const EditModal: React.FC<IEditorModalProps> = (props) => {
const { visible, title, value, onOk, onCancel } = props; const { visible, title, value, onSave, onOk, onCancel } = props;
const [code, setCode] = useState<string>(value); const [code, setCode] = useState<string>(value);
// life // life
@ -88,6 +102,13 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
setCode(newCode); 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 ( return (
<Modal <Modal
@ -105,6 +126,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
width={'100%'} width={'100%'}
height={'600px'} height={'600px'}
onChange={onChangeCode} onChange={onChangeCode}
editorDidMount={onEditorDidMount}
/> />
</Modal> </Modal>
); );

Loading…
Cancel
Save