feat: 使用 release/1.0.0 的 editor-setters

packages/demo/build.json

@@ -17,7 +17,9 @@
     "@alifd/next": "var window.Next",
     "@ali/visualengine": "var window.VisualEngine",
     "@ali/visualengine-utils": "var window.VisualEngineUtils",
-    "rax": "var window.Rax"
+    "rax": "var window.Rax",
+    "monaco-editor/esm/vs/editor/editor.api":"var window.monaco",
+    "monaco-editor/esm/vs/editor/editor.main.js":"var window.monaco"
   },
   "plugins": [
     [

packages/demo/build.plugin.js

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

packages/demo/package.json

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

packages/demo/public/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width" />
     <title>LowCodeEngine Editor DEMO</title>
     <link rel="shortcut icon" href="./favicon.png" />
+    <link rel="stylesheet"  data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.21.0/min/vs/editor/editor.main.css"/>
     <script src="https://g.alicdn.com/code/lib/react/16.9.0/umd/react.development.js"></script>
     <script src="https://g.alicdn.com/code/lib/react-dom/16.9.0/umd/react-dom.development.js"></script>
     <script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script>
@@ -17,6 +18,12 @@
     <link rel="stylesheet" href="https://unpkg.alibaba-inc.com/@alifd/next@1.20.25/dist/next.min.css" />
     <script src="https://unpkg.alibaba-inc.com/@alifd/next@1.20.25/dist/next.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/rax@1.1.3/dist/rax.js"></script>
+    <script>
+			var require = { paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.21.0/min/vs' } };
+		</script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.21.0/min/vs/loader.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.21.0/min/vs/editor/editor.main.nls.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.21.0/min/vs/editor/editor.main.js"></script>
     <link rel="stylesheet" href="/css/editor-preset-vision.css" />
     <script>
       window.pageConfig = {

packages/editor-preset-vision/build.json

@@ -10,7 +10,9 @@
           "react": "var window.React",
           "react-dom": "var window.ReactDOM",
           "prop-types": "var window.PropTypes",
-          "rax": "var window.Rax"
+          "rax": "var window.Rax",
+          "monaco-editor/esm/vs/editor/editor.api":"var window.monaco",
+          "monaco-editor/esm/vs/editor/editor.main.js":"var window.monaco"
         }
       }
     ],

packages/editor-setters/package.json

@@ -17,21 +17,19 @@
     "@ali/iceluna-comp-expression": "^1.0.6",
     "@ali/iceluna-comp-form": "^1.0.20",
     "@ali/iceluna-comp-list": "^1.0.26",
-    "@ali/iceluna-comp-monaco-editor": "^1.0.31",
     "@ali/iceluna-comp-object-button": "^1.0.23",
     "@ali/iceluna-comp-react-node": "^1.0.5",
     "@ali/iceluna-sdk": "^1.0.5-beta.24",
     "@ali/lc-style-setter": "^0.0.1",
-    "@ali/lowcode-editor-core": "^0.12.1-14",
+    "@ali/lowcode-editor-core": "^1.0.10",
     "@alifd/next": "^1.19.16",
     "acorn": "^6.4.1",
     "classnames": "^2.2.6",
     "intl-messageformat": "^9.3.1",
-    "monaco-editor": "^0.20.0",
     "qs": "^6.9.1",
     "react": "^16",
     "react-dom": "^16.7.0",
-    "react-monaco-editor": "^0.34.0"
+    "react-monaco-editor": "0.40.0"
   },
   "devDependencies": {
     "@alib/build-scripts": "^0.1.18",

packages/editor-setters/src/classname-setter/index.tsx

@@ -0,0 +1,90 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { Select } from '@alife/next';
+
+interface Color {
+  rgb: any;
+  onChange: () => void;
+}
+
+export interface PluginProps {
+  value: string;
+  onChange: any;
+}
+
+export default class ClassNameView extends PureComponent<PluginProps> {
+  static display = 'ClassName';
+
+  static propTypes = {
+    onChange: PropTypes.func,
+    value: PropTypes.string,
+  };
+
+  static defaultProps = {
+    onChange: () => {},
+    value: '',
+  };
+
+  getClassNameList = () => {
+    const { editor } = this.props.field;
+    const schema = editor.get('designer').project.getSchema();
+    const css = schema.componentsTree[0].css;
+    const classNameList = [];
+    const re = /\.?\w+[^{]+\{[^}]*\}/g;
+    const list = css.match(re);
+    list.map((item) => {
+      if (item[0] === '.') {
+        const className = item.substring(1, item.indexOf('{'));
+        classNameList.push(className);
+      }
+
+      return item;
+    });
+
+    return classNameList;
+  };
+
+
+  handleChange = (value) => {
+    const { onChange } = this.props;
+    onChange(value.join(' '));
+    this.setState({
+      selectValue: value,
+    });
+  };
+
+  // eslint-disable-next-line react/no-deprecated
+  componentWillMount() {
+    const { value } = this.props;
+    const classnameList = this.getClassNameList();
+    const dataSource = [];
+    classnameList.map((item) => {
+      dataSource.push({
+        value: item,
+        label: item,
+      });
+
+      return item;
+    });
+
+
+    let selectValue = [];
+    if (value && value !== '') {
+      selectValue = value.split(' ');
+    }
+
+
+    this.setState({
+      dataSource,
+      selectValue,
+    });
+  }
+
+
+  render() {
+    const { dataSource, selectValue } = this.state;
+    return (
+      <Select aria-label="tag mode" mode="tag" dataSource={dataSource} onChange={this.handleChange} value={selectValue} />
+    );
+  }
+}

packages/editor-setters/src/expression-setter/index.tsx

@@ -68,13 +68,12 @@ export default class ExpressionView extends PureComponent {
     return val;
   }
 
-  constructor(props: Readonly<{}>) {
+  constructor(props: any) {
     super(props);
     this.expression = React.createRef();
     this.i18n = generateI18n(props.locale, props.messages);
     this.state = {
       value: ExpressionView.getInitValue(props.value),
-      context: props.context || {},
       dataSource: props.dataSource || [],
     };
   }
@@ -126,31 +125,15 @@ export default class ExpressionView extends PureComponent {
    * @param  {String}
    * @return {Array}
    */
-  getDataSource(tempStr: string): any[] {
+  getDataSource(): any[] {
-    const {editor} = this.props.field;
+    const { editor } = this.props.field;
     const schema = editor.get('designer').project.getSchema();
     const stateMap = schema.componentsTree[0].state;
-    let dataSource = [];
+    const dataSource = [];
 
-    for (let key in stateMap){
+    for (const key in stateMap) {
       dataSource.push(`this.state.${key}`);
     }
-    // if (/[^\w\.]$/.test(tempStr)) {
-    //   return [];
-    // } else if (tempStr === null || tempStr === '') {
-    //   return this.getContextKeys([]);
-    // } else if (/\w\.$/.test(tempStr)) {
-    //   const currentField = this.getCurrentFiled(tempStr);
-    //   if (!currentField) return null;
-    //   let tempKeys = this.getObjectKeys(currentField.str);
-    //   tempKeys = this.getContextKeys(tempKeys);
-    //   if (!tempKeys) return null;
-    //   return tempKeys;
-    // } else if (/\.$/.test(tempStr)) {
-    //   return [];
-    // } else {
-    //   return null;
-    // }
 
     return dataSource;
   }
@@ -283,11 +266,12 @@ export default class ExpressionView extends PureComponent {
                   innerBefore={<span style={{ color: '#999', marginLeft: 4 }}>{'{{'}</span>}
                   innerAfter={<span style={{ color: '#999', marginRight: 4 }}>{'}}'}</span>}
                   popupClassName="expression-setter-item-inner"
-                  itemRender={({ itemValue }) => {
+                  // eslint-disable-next-line no-shadow
+                  itemRender={({ value }) => {
                     return (
-                      <Option key={itemValue} text={itemValue} value={itemValue}>
+                      <Option key={value} text={value} value={value}>
-                        <div className="code-input-value">{itemValue}</div>
+                        <div className="code-input-value">{value}</div>
-                        <div className="code-input-help">{helpMap[itemValue]}</div>
+                        <div className="code-input-help">{helpMap[value]}</div>
                       </Option>
                     );
                   }}

packages/editor-setters/src/index.tsx

@@ -9,6 +9,7 @@ import EventsSetter from './events-setter';
 import StyleSetter from './style-setter';
 import IconSetter from './icon-setter';
 import FunctionSetter from './function-setter';
+import ClassNameSetter from './classname-setter';
 // import MixedSetter from './mixed-setter';
 
 export const StringSetter = {
@@ -87,7 +88,7 @@ const VariableSetter = {
   component: ExpressionSetter,
   condition: (field: any) => {
     const v = field.getValue();
-    return v == null || isJSExpression(v);
+    return isJSExpression(v);
   },
   defaultProps: { placeholder: '请输入表达式' },
   title: '表达式输入',
@@ -123,6 +124,7 @@ const builtinSetters: any = {
   JsonSetter,
   StyleSetter,
   IconSetter,
+  ClassNameSetter,
   FunctionSetter: FunctionBindSetter,
 };
 

packages/editor-setters/src/json-setter/index.tsx

@@ -463,30 +463,30 @@ class MonacoEditorDefaultView extends PureComponent {
     });
   }
 }
-const prefix = 'data:text/javascript;charset=utf-8,';
+// const prefix = 'data:text/javascript;charset=utf-8,';
-const baseUrl = 'https://g.alicdn.com/iceluna/iceluna-vendor/0.0.1/';
+// const baseUrl = 'https://g.alicdn.com/iceluna/iceluna-vendor/0.0.1/';
-window.MonacoEnvironment = {
+// window.MonacoEnvironment = {
-  getWorkerUrl(label: string) {
+//   getWorkerUrl(label: string) {
-    if (label === 'json') {
+//     if (label === 'json') {
-      return `${prefix}${encodeURIComponent(`
+//       return `${prefix}${encodeURIComponent(`
-        importScripts('${baseUrl}json.worker.js');`)}`;
+//         importScripts('${baseUrl}json.worker.js');`)}`;
-    }
+//     }
-    if (['css', 'less', 'scss'].includes(label)) {
+//     if (['css', 'less', 'scss'].includes(label)) {
-      return `${prefix}${encodeURIComponent(`
+//       return `${prefix}${encodeURIComponent(`
-        importScripts('${baseUrl}css.worker.js');`)}`;
+//         importScripts('${baseUrl}css.worker.js');`)}`;
-    }
+//     }
-    if (label === 'html') {
+//     if (label === 'html') {
-      return `${prefix}${encodeURIComponent(`
+//       return `${prefix}${encodeURIComponent(`
-        importScripts('${baseUrl}html.worker.js');`)}`;
+//         importScripts('${baseUrl}html.worker.js');`)}`;
-    }
+//     }
-    if (['typescript', 'javascript'].includes(label)) {
+//     if (['typescript', 'javascript'].includes(label)) {
-      return `${prefix}${encodeURIComponent(`
+//       return `${prefix}${encodeURIComponent(`
-        importScripts('${baseUrl}typescript.worker.js');`)}`;
+//         importScripts('${baseUrl}typescript.worker.js');`)}`;
-    }
+//     }
-    return `${prefix}${encodeURIComponent(`
+//     return `${prefix}${encodeURIComponent(`
-      importScripts('${baseUrl}editor.worker.js');`)}`;
+//       importScripts('${baseUrl}editor.worker.js');`)}`;
-  },
+//   },
-};
+// };
 
 // eslint-disable-next-line react/no-multi-comp
 export default class MonacoEditorButtonView extends PureComponent {