ui: monaco: lazy load resources

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

@@ -18,10 +18,9 @@ export default function DataInputComponent(props) {
           className="scratchpad__data-input"
           style={{ overflowY: 'scroll' }}
           wrap="off"
-          contentEditable
         >
           {/* eslint-disable-next-line react/no-danger */}
-          <pre dangerouslySetInnerHTML={{ __html: value }} />
+          <pre dangerouslySetInnerHTML={{ __html: value }} contentEditable />
         </div>
       ) : (
         <textarea

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import monaco, { registerAction } from 'vj/components/monaco/index';
 
 const mapStateToProps = (state) => ({
   value: state.editor.code,
@@ -22,9 +21,12 @@ const mapDispatchToProps = (dispatch) => ({
 export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor extends React.PureComponent {
   disposable = [];
 
-  componentDidMount() {
+  async componentDidMount() {
     const value = this.props.value || '';
     const { language, theme } = this.props;
+    const { load } = await import('vj/components/monaco/loader');
+    console.log(load);
+    const { monaco, registerAction } = await load([language]);
     this.model = monaco.editor.createModel(value, language, monaco.Uri.parse('file://model'));
     if (this.containerElement) {
       /** @type {monaco.editor.IStandaloneEditorConstructionOptions} */
@@ -53,7 +55,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor e
     }
   }
 
-  componentDidUpdate(prevProps) {
+  async componentDidUpdate(prevProps) {
     const {
       value, language, theme, mainSize, recordSize, pretestSize,
     } = this.props;
@@ -73,6 +75,8 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor e
       editor.pushUndoStop();
       this.__prevent_trigger_change_event = false;
     }
+    const { load } = await import('vj/components/monaco/loader');
+    const { monaco } = await load([language]);
     if (prevProps.language !== language) {
       monaco.editor.setModelLanguage(model, language);
       editor.updateOptions({ mode: language });