joint source panel

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

@@ -3,6 +3,7 @@ import { Tab, Search, Input, Button } from '@alifd/next';
 import Editor from '@ali/lowcode-editor-core';
 import { js_beautify, css_beautify } from 'js-beautify';
 import MonacoEditor from 'react-monaco-editor';
+import Panel from '../../vision-polyfill/src/skeleton/panel';
 
 // import lolizer from './sorceEditorPlugin',
 
@@ -46,6 +47,7 @@ interface FunctionEventParam {
 
 export default class SourceEditor extends Component<{
   editor: Editor;
+  panel?: Panel
 }> {
   private monocoEditer: Object;
   private editorCmd: Object;
@@ -118,12 +120,15 @@ export default class SourceEditor extends Component<{
   }
 
   openPluginPannel = () => {
-    const {editor} = this.props;
+    const { editor, panel } = this.props;
     // 判断面板是否处于激活状态
     if (!editor.leftNav || editor.leftNav != 'sourceEditor') {
       // 打开面板
       editor.emit('leftNav.change', 'sourceEditor');
     }
+    if (panel) {
+      panel.show();
+    }
   }
 
   callEditorEvent = (eventName, params) => {

packages/vision-polyfill/build.plugin.js

@@ -1,4 +1,5 @@
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
 module.exports = ({ onGetWebpackConfig }) => {
   onGetWebpackConfig((config) => {
@@ -7,6 +8,14 @@ module.exports = ({ onGetWebpackConfig }) => {
       .use(TsconfigPathsPlugin, [{
         configFile: "./tsconfig.json"
       }]);
+
+    config
+      // 定义插件名称
+      .plugin('MonacoWebpackPlugin')
+      // 第一项为具体插件，第二项为插件参数
+      .use(new MonacoWebpackPlugin({
+        languages:["javascript","css","json"]
+      }), []);
     config.plugins.delete('hot');
     config.devServer.hot(false);
   });

packages/vision-polyfill/package.json

@@ -44,6 +44,7 @@
     "build-plugin-fusion": "^0.1.0",
     "build-plugin-moment-locales": "^0.1.0",
     "build-plugin-react-app": "^1.1.2",
-    "tsconfig-paths-webpack-plugin": "^3.2.0"
+    "tsconfig-paths-webpack-plugin": "^3.2.0",
+    "monaco-editor-webpack-plugin":"^1.9.0"
   }
 }

packages/vision-polyfill/src/skeleton/panel.ts

@@ -32,7 +32,7 @@ export default class Panel implements IWidget {
     return this._body;
   }
 
-  get content() {
+  get content(): ReactNode {
     if (this.plain) {
       return createElement(PanelView, {
         panel: this,

packages/vision-polyfill/src/skeleton/skeleton.ts

@@ -195,24 +195,32 @@ export class Skeleton {
     }
 
     config = this.parseConfig(config);
+    let widget: IWidget;
     if (isDockConfig(config)) {
       if (isPanelDockConfig(config)) {
-        return new PanelDock(this, config);
+        widget = new PanelDock(this, config);
-      }
+      } else if (false) {
-      // others...
+        // others...
+      } else {
 
-      return new Dock(this, config);
+        widget = new Dock(this, config);
+      }
+    } else if (isPanelConfig(config)) {
+      widget = this.createPanel(config);
+    } else {
+      widget = new Widget(this, config as WidgetConfig);
     }
-    if (isPanelConfig(config)) {
+    // ?
-      return this.createPanel(config);
+    // this.editor.set(`skeleton.${widget.name}`, widget);
-    }
+    return widget;
-    return new Widget(this, config as WidgetConfig);
   }
 
   createPanel(config: PanelConfig) {
     config = this.parseConfig(config);
     const panel = new Panel(this, config);
     this.panels.set(panel.name, panel);
+    // ?
+    // this.editor.set(`skeleton.${panel.name}`, panel);
     return panel;
   }
 

packages/vision-polyfill/src/skeleton/workbench.less

@@ -185,7 +185,7 @@ body {
     width: 100%;
     display: flex;
     margin-bottom: 2px;
-    padding: 8px 12px 8px 16px;
+    padding: 8px;
     .lc-top-area-left{}
     .lc-top-area-center{
       flex: 1;