ui: add editor setting (#622)

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

@@ -8,11 +8,16 @@ interface ScratchpadOptions {
   value?: string;
   language?: string;
   handleUpdateCode?: (str: string, event: monaco.editor.IModelContentChangedEvent) => void;
+  settings?: any;
+  pendingCommand?: string;
+  commandDone?: () => void;
 }
 
 export default connect((state: any) => ({
   value: state.editor.code,
   language: window.LANGS[state.editor.lang]?.monaco,
+  settings: state.ui.settings.config,
+  pendingCommand: state.ui.pendingCommand,
 }), (dispatch) => ({
   handleUpdateCode: (code: string) => {
     dispatch({
@@ -20,6 +25,12 @@ export default connect((state: any) => ({
       payload: code,
     });
   },
+  commandDone: () => {
+    dispatch({
+      type: 'SCRATCHPAD_TRIGGER_EDITOR_COMMAND',
+      payload: { command: '' },
+    });
+  },
 }))(class MonacoEditor extends React.PureComponent<ScratchpadOptions> {
   disposable: monaco.IDisposable[] = [];
   __prevent_trigger_change_event = false;
@@ -36,8 +47,8 @@ export default connect((state: any) => ({
     if (this.containerElement) {
       const config: monaco.editor.IStandaloneEditorConstructionOptions = {
         theme: 'vs-light',
-        ...customOptions,
         fontFamily: UserContext.codeFontFamily,
+        ...customOptions,
         lineNumbers: 'on',
         glyphMargin: true,
         lightbulb: { enabled: true },
@@ -88,6 +99,14 @@ export default connect((state: any) => ({
       this.model = monaco.editor.getModel(uri) || monaco.editor.createModel(val, language, uri);
       editor.setModel(this.model);
     }
+    if (editor && this.props.settings) {
+      editor.updateOptions(this.props.settings);
+    }
+    if (this.props.pendingCommand) {
+      editor.focus();
+      editor.getAction(this.props.pendingCommand)?.run();
+      this.props.commandDone();
+    }
   }
 
   componentWillUnmount() {