fix: fix source edit bug

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

@@ -23,6 +23,7 @@
 
   .editor-context{
     height: 100%;
+    width: 100%;
   }
 
   .next-tabs-tabpane.active {

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

@@ -15,7 +15,7 @@ import transfrom from './transform';
 
 const defaultEditorOption = {
   width: '100%',
-  height: '96%',
+  height: '100%',
   options: {
     readOnly: false,
     automaticLayout: true,
@@ -54,7 +54,7 @@ export default class SourceEditor extends Component<{
   private editorParentNode: Object;
 
   state = {
-    isShow: true,
+    isFullScreen:false,
     tabKey: TAB_KEY.JS_TAB,
   };
 
@@ -75,6 +75,13 @@ export default class SourceEditor extends Component<{
     this.initCode(schema);
   }
 
+
+  componentDidMount () {
+    this.editorNode = this.editorJsRef.current; //记录当前dom节点；
+    this.editorParentNode = this.editorNode.parentNode; //记录父节点;
+
+  }
+
   /**
    * 执行编辑器事件
    */
@@ -170,7 +177,28 @@ export default class SourceEditor extends Component<{
     }
   };
 
-  fullScreen = () => {};
+  fullScreen = () => {
+    document.body.appendChild(this.editorNode)
+
+    const fullScreenOption = {
+      ...defaultEditorOption,
+      lineNumbers: 'on',
+      folding: true,
+      scrollBeyondLastLine: true,
+      minimap: {
+        enabled: true
+      }
+    }
+
+    this.monocoEditor.updateOptions(fullScreenOption);
+    // if (this.editorParentNode) {
+    //   if (this.editorParentNode.firstChild) {
+    //     this.editorParentNode.insertBefore(this.editorNode, this.editorParentNode.firstChild);
+    //   } else {
+    //     this.editorParentNode.appendChild(this.editorNode);
+    //   }
+    // }
+  };
 
   onTabChange = (key) => {
     const { editor } = this.props;
@@ -210,7 +238,7 @@ export default class SourceEditor extends Component<{
   };
 
   render() {
-    const { isShow, selectTab, jsCode, css } = this.state;
+    const { selectTab, jsCode, css } = this.state;
     const tabs = [
       { tab: 'index.js', key: TAB_KEY.JS_TAB },
       { tab: 'style.css', key: TAB_KEY.CSS_TAB },
@@ -224,9 +252,9 @@ export default class SourceEditor extends Component<{
           ))}
         </Tab>
 
-        {isShow && (
+
           <div style={{ height: '100%' }} className="editor-context-container">
-            <div id="jsEditorDom" className="editor-context">
+            <div id="jsEditorDom" className="editor-context" ref={this.editorJsRef}>
               <MonacoEditor
                 value={jsCode}
                 {...defaultEditorOption}
@@ -235,7 +263,7 @@ export default class SourceEditor extends Component<{
                 editorDidMount={(editor, monaco) => this.editorDidMount.call(this, editor, monaco, TAB_KEY.JS_TAB)}
               />
             </div>
-            <div className="editor-context" id="cssEditorDom">
+            <div className="editor-context" id="cssEditorDom" ref={this.editorCssRef}>
               <MonacoEditor
                 value={css}
                 {...defaultEditorOption}
@@ -245,7 +273,7 @@ export default class SourceEditor extends Component<{
               />
             </div>
           </div>
-        )}
+
 
         <div className="full-screen-container" onClick={this.fullScreen}>
           <img src="https://gw.alicdn.com/tfs/TB1d7XqE1T2gK0jSZFvXXXnFXXa-200-200.png"></img>

packages/plugin-source-editor/src/transform.ts

@@ -35,8 +35,10 @@ const transfrom = {
 
     functionNameList.map((functionName)=>{
       if (functionName != 'constructor'){
-          let functionCode = a[functionName].toString().replace(new RegExp(functionName),'function');
-          functionMap[functionName] = functionCode;
+          if (a[functionName]){
+            let functionCode = a[functionName].toString().replace(new RegExp(functionName),'function');
+            functionMap[functionName] = functionCode;
+          }
       }
     })