解决资源面板多个实例冲突的问题

packages/plugin-source-editor/src/index.scss

@@ -1,6 +1,6 @@
 .source-editor-container{
   height: 100%;
-
+  position: relative;
 
   .next-tabs {
     -webkit-box-sizing: border-box;
@@ -13,6 +13,18 @@
     height: 100%;
   }
 
+  .editor-context-container{
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 35px;
+
+  }
+
+  .editor-context{
+    height: 100%;
+  }
+
   .next-tabs-tabpane.active {
     visibility: visible;
     opacity: 1;

packages/plugin-source-editor/src/index.tsx

@@ -4,6 +4,7 @@ import {Editor} from '@ali/lowcode-editor-core';
 import { js_beautify, css_beautify } from 'js-beautify';
 import MonacoEditor from 'react-monaco-editor';
 import { Designer } from '@ali/lowcode-designer';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js';
 const TAB_KEY = {
   JS_TAB: 'js_tab',
   CSS_TAB: 'css_tab',
@@ -45,8 +46,10 @@ export default class SourceEditor extends Component<{
   editor: Editor;
 }> {
   private monocoEditor: Object;
+  private monocoEditorCss: Object;
   private editorCmd: Object;
-  private editorRef = React.createRef();
+  private editorJsRef = React.createRef();
+  private editorCssRef = React.createRef();
   private editorNode: Object;
   private editorParentNode: Object;
 
@@ -64,12 +67,12 @@ export default class SourceEditor extends Component<{
           isShow: true,
         });
 
-
+        // setTimeout(() => {
-        setTimeout(()=>{
+        //   this.editorNode = this.editorCssRef.current; //记录当前dom节点；
-          this.editorNode = this.editorRef.current; //记录当前dom节点；
+        //   debugger
-          this.editorParentNode = this.editorNode.parentNode; //记录父节点;
+        //   this.editorParentNode = this.editorNode.parentNode; //记录父节点;
-          console.log(this.editorNode);
+        //   console.log(this.editorNode);
-        },0)
+        // }, 0);
       }
     });
 
@@ -123,10 +126,7 @@ export default class SourceEditor extends Component<{
     //});
   }
 
-  componentDidMount(){
+  componentDidMount() {}
-
-
-  }
 
   openPluginPannel = () => {
     const { editor } = this.props;
@@ -224,17 +224,6 @@ export default class SourceEditor extends Component<{
   }
 
   editorDidMount = (editor, monaco) => {
-    console.log('editorDidMount', editor);
-
-    // var commandId = editor.addCommand(
-    //   0,
-    //   function() {
-    //     // services available in `ctx`
-    //     alert('my command is executing!');
-    //   },
-    //   '',
-    // );
-
     if (this.state.selectTab == TAB_KEY.JS_TAB) {
       this.monocoEditor = editor;
     }
@@ -248,6 +237,14 @@ export default class SourceEditor extends Component<{
     this.setState({
       selectTab: key,
     });
+
+    if (key === TAB_KEY.JS_TAB) {
+      document.getElementById('cssEditorDom').setAttribute('style', 'display:none');
+      document.getElementById('jsEditorDom').setAttribute('style', 'block');
+    } else {
+      document.getElementById('jsEditorDom').setAttribute('style', 'display:none');
+      document.getElementById('cssEditorDom').setAttribute('style', 'block');
+    }
   };
 
   updateCode = (newCode) => {
@@ -276,21 +273,32 @@ export default class SourceEditor extends Component<{
       <div className="source-editor-container">
         <Tab size="small" shape="wrapped" onChange={this.onTabChange} activeKey={selectTab}>
           {tabs.map((item) => (
-            <Tab.Item key={item.key} title={item.tab}>
+            <Tab.Item key={item.key} title={item.tab} />
+          ))}
+        </Tab>
+
         {isShow && (
-                <div style={{ height: '100%' }} ref={this.editorRef}>
+          <div style={{ height: '100%' }} className="editor-context-container">
+            <div id="jsEditorDom" className="editor-context">
               <MonacoEditor
-                    value={selectTab == TAB_KEY.JS_TAB ? jsCode : css}
+                value={jsCode}
                 {...defaultEditorOption}
-                    {...{ language: selectTab == TAB_KEY.JS_TAB ? 'typescript' : 'css' }}
+                {...{ language: 'typescript' }}
                 onChange={(newCode) => this.updateCode(newCode)}
                 editorDidMount={(editor, monaco) => this.editorDidMount.call(this, editor, monaco)}
               />
             </div>
+            <div className="editor-context" id="cssEditorDom">
+              <MonacoEditor
+                value={css}
+                {...defaultEditorOption}
+                {...{ language: 'css' }}
+                onChange={(newCode) => this.updateCode(newCode)}
+                editorDidMount={(editor, monaco) => this.editorDidMount.call(this, editor, monaco)}
+              />
+            </div>
+          </div>
         )}
-            </Tab.Item>
-          ))}
-        </Tab>
 
         <div className="full-screen-container" onClick={this.fullScreen}>
           <img src="https://gw.alicdn.com/tfs/TB1d7XqE1T2gK0jSZFvXXXnFXXa-200-200.png"></img>