Merge branch 'feat/joint-editor' of gitlab.alibaba-inc.com:ali-lowcode/ali-lowcode-engine into feat/joint-editor

packages/editor/.eslintrc.js

@@ -3,5 +3,6 @@ const { eslint, deepmerge } = require('@ice/spec');
 module.exports = deepmerge(eslint, {
   rules: {
     "global-require": 0,
+    "interface-name" : [true, "never-prefix"]
   },
 });

packages/editor/package.json

@@ -8,8 +8,6 @@
     "@alifd/next": "^1.x",
     "@alife/dpl-iceluna": "^2.3.2",
     "@icedesign/theme": "^1.x",
-    "@types/react": "^16.8.3",
-    "@types/react-dom": "^16.8.2",
     "events": "^3.1.0",
     "intl-messageformat": "^8.2.1",
     "keymaster": "^1.6.2",
@@ -18,10 +16,13 @@
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
     "react-router-dom": "^5.1.2",
+    "serialize-javascript": "^3.0.0",
     "store": "^2.0.12"
   },
   "devDependencies": {
     "@ice/spec": "^0.1.1",
+    "@types/react": "^16.8.3",
+    "@types/react-dom": "^16.8.2",
     "@types/debug": "^4.1.5",
     "@types/events": "^3.0.0",
     "@types/store": "^2.0.2",

packages/editor/src/config/skeleton.js

@@ -213,13 +213,15 @@ export default {
         pluginProps: {}
       },
     ],
-    centerArea: [{
+    centerArea: [
-      pluginKey: 'designer',
+      {
-      config: {
+        pluginKey: 'designer',
-        package: '@ali/lowcode-plugin-designer',
+        config: {
-        version: '1.0.0'
+          package: '@ali/lowcode-plugin-designer',
+          version: '1.0.0'
+        }
       }
-    }]
+    ]
   },
   hooks: [],
   shortCuts: []

packages/editor/src/framework/areaManager.ts

@@ -1,16 +1,16 @@
-import Editor from './index';
 import { PluginConfig, PluginStatus } from './definitions';
-import { clone, deepEqual, transformToPromise } from './utils';
+import Editor from './index';
+import { clone, deepEqual } from './utils';
 
 export default class AreaManager {
   private pluginStatus: PluginStatus;
-  private config: Array<PluginConfig>;
+  private config: PluginConfig[];
   constructor(private editor: Editor, private area: string) {
     this.config = (editor && editor.config && editor.config.plugins && editor.config.plugins[this.area]) || [];
     this.pluginStatus = clone(editor.pluginStatus);
   }
 
-  isPluginStatusUpdate(pluginType?: string): boolean {
+  public isPluginStatusUpdate(pluginType?: string): boolean {
     const { pluginStatus } = this.editor;
     const list = pluginType ? this.config.filter(item => item.type === pluginType) : this.config;
 
@@ -19,14 +19,14 @@ export default class AreaManager {
     return isUpdate;
   }
 
-  getVisiblePluginList(pluginType?: string): Array<PluginConfig> {
+  public getVisiblePluginList(pluginType?: string): PluginConfig[] {
     const res = this.config.filter(item => {
       return !this.pluginStatus[item.pluginKey] || this.pluginStatus[item.pluginKey].visible;
     });
     return pluginType ? res.filter(item => item.type === pluginType) : res;
   }
 
-  getPluginConfig(): Array<PluginConfig> {
+  public getPluginConfig(): PluginConfig[] {
     return this.config;
   }
 }

packages/editor/src/framework/definitions.ts

@@ -106,7 +106,7 @@ export interface I18nConfig {
   'ja-JP'?: I18nMessages;
 }
 
-export type I18nFunction = (key: string, params: object) => string;
+export type I18nFunction = (key: string, params: any) => string;
 
 export interface Utils {
   [propName: string]: (...args) => any;
@@ -127,9 +127,9 @@ export interface PluginComponents {
 
 export interface PluginStatus {
   [propName: string]: {
-    disabled: boolean;
+    disabled?: boolean;
-    visible: boolean;
+    visible?: boolean;
-    marked: boolean;
+    marked?: boolean;
-    locked: boolean;
+    locked?: boolean;
   };
 }

packages/editor/src/framework/editor.ts

@@ -1,9 +1,9 @@
-import EventEmitter from 'events';
 import Debug from 'debug';
+import EventEmitter from 'events';
 import store from 'store';
-import { EditorConfig, Utils, PluginComponents, PluginStatus, LocaleType, HooksConfig } from './definitions';
+import { EditorConfig, HooksConfig, LocaleType, PluginComponents, PluginStatus, Utils } from './definitions';
 
-import { unRegistShortCuts, registShortCuts, transformToPromise } from './utils';
+import { registShortCuts, transformToPromise, unRegistShortCuts } from './utils';
 
 // 根据url参数设置debug选项
 const res = /_?debug=(.*?)(&|$)/.exec(location.search);
@@ -15,17 +15,19 @@ if (res && res[1]) {
   store.remove('debug');
 }
 
-//重要，用于矫正画布执行new Function的window对象上下文
+// 重要，用于矫正画布执行new Function的window对象上下文
 window.__newFunc = funContext => {
   return new Function(funContext);
 };
 
-//关闭浏览器前提醒,只有产生过交互才会生效
+// 关闭浏览器前提醒,只有产生过交互才会生效
 window.onbeforeunload = function(e) {
   e = e || window.event;
   // 本地调试不生效
-  if (location.href.indexOf('localhost') > 0) return;
+  if (location.href.indexOf('localhost') > 0) {
-  var msg = '您确定要离开此页面吗？';
+    return;
+  }
+  const msg = '您确定要离开此页面吗？';
   e.cancelBubble = true;
   e.returnValue = msg;
   if (e.stopPropagation) {
@@ -45,15 +47,13 @@ export interface HooksFuncs {
 }
 
 export default class Editor extends EventEmitter {
-  static getInstance = (config: EditorConfig, components: PluginComponents, utils?: Utils): Editor => {
+  public static getInstance = (config: EditorConfig, components: PluginComponents, utils?: Utils): Editor => {
     if (!instance) {
       instance = new Editor(config, components, utils);
     }
     return instance;
   };
 
-  private hooksFuncs: HooksFuncs;
-
   public pluginStatus: PluginStatus;
   public plugins: PluginComponents;
   public locale: LocaleType;
@@ -63,13 +63,15 @@ export default class Editor extends EventEmitter {
   public once: (msg: string, handler: (...args) => void) => void;
   public off: (msg: string, handler: (...args) => void) => void;
 
+  private hooksFuncs: HooksFuncs;
+
   constructor(public config: EditorConfig, public components: PluginComponents, public utils?: Utils) {
     super();
     instance = this;
     this.init();
   }
 
-  init(): Promise<any> {
+  public init(): Promise<any> {
     const { hooks, shortCuts = [], lifeCycles } = this.config || {};
     this.locale = store.get('lowcode-editor-locale') || 'zh-CN';
     // this.messages = this.messagesSet[this.locale];
@@ -92,24 +94,26 @@ export default class Editor extends EventEmitter {
       });
   }
 
-  destroy() {
+  public destroy() {
     debug('destroy');
     try {
       const { hooks = [], shortCuts = [], lifeCycles = {} } = this.config;
       unRegistShortCuts(shortCuts);
       this.destroyHooks(hooks);
-      lifeCycles.destroy && lifeCycles.destroy(this);
+      if (lifeCycles.destroy) {
+        lifeCycles.destroy(this);
+      }
     } catch (err) {
       console.warn(err);
       return;
     }
   }
 
-  get(key: string): any {
+  public get(key: string): any {
     return this[key];
   }
 
-  set(key: string | object, val: any): void {
+  public set(key: string | object, val: any): void {
     if (typeof key === 'string') {
       if (['init', 'destroy', 'get', 'set', 'batchOn', 'batchOff', 'batchOnce'].includes(key)) {
         console.error('init, destroy, get, set, batchOn, batchOff, batchOnce is private attribute');
@@ -123,22 +127,28 @@ export default class Editor extends EventEmitter {
     }
   }
 
-  batchOn(events: Array<string>, lisenter: (...args) => void): void {
+  public batchOn(events: string[], lisenter: (...args) => void): void {
-    if (!Array.isArray(events)) return;
+    if (!Array.isArray(events)) {
+      return;
+    }
     events.forEach(event => this.on(event, lisenter));
   }
 
-  batchOnce(events: Array<string>, lisenter: (...args) => void): void {
+  public batchOnce(events: string[], lisenter: (...args) => void): void {
-    if (!Array.isArray(events)) return;
+    if (!Array.isArray(events)) {
+      return;
+    }
     events.forEach(event => this.once(event, lisenter));
   }
 
-  batchOff(events: Array<string>, lisenter: (...args) => void): void {
+  public batchOff(events: string[], lisenter: (...args) => void): void {
-    if (!Array.isArray(events)) return;
+    if (!Array.isArray(events)) {
+      return;
+    }
     events.forEach(event => this.off(event, lisenter));
   }
 
-  //销毁hooks中的消息监听
+  // 销毁hooks中的消息监听
   private destroyHooks(hooks: HooksConfig = []) {
     hooks.forEach((item, idx) => {
       if (typeof this.hooksFuncs[idx] === 'function') {
@@ -148,7 +158,7 @@ export default class Editor extends EventEmitter {
     delete this.hooksFuncs;
   }
 
-  //初始化hooks中的消息监听
+  // 初始化hooks中的消息监听
   private initHooks(hooks: HooksConfig = []): void {
     this.hooksFuncs = hooks.map(item => {
       const func = (...args) => {
@@ -162,10 +172,12 @@ export default class Editor extends EventEmitter {
   private initPluginStatus() {
     const { plugins = {} } = this.config;
     const pluginAreas = Object.keys(plugins);
-    const res = {};
+    const res: PluginStatus = {};
     pluginAreas.forEach(area => {
       (plugins[area] || []).forEach(plugin => {
-        if (plugin.type === 'Divider') return;
+        if (plugin.type === 'Divider') {
+          return;
+        }
         const { visible, disabled, marked } = plugin.props || {};
         res[plugin.pluginKey] = {
           visible: typeof visible === 'boolean' ? visible : true,

packages/editor/src/framework/pluginFactory.tsx

@@ -1,10 +1,9 @@
-import React, { PureComponent, createRef } from 'react';
+import React, { createRef, PureComponent } from 'react';
 
 import EditorContext from './context';
+import { I18nFunction, PluginConfig } from './definitions';
 import Editor from './editor';
-import { isEmpty, generateI18n, transformToPromise, acceptsRef } from './utils';
+import { acceptsRef, generateI18n, isEmpty, transformToPromise } from './utils';
-import { PluginConfig, I18nFunction } from './definitions';
-import Editor from './index';
 
 export interface PluginProps {
   editor: Editor;
@@ -19,12 +18,12 @@ export default function pluginFactory(
   Comp: React.ComponentType<PluginProps & InjectedPluginProps>
 ): React.ComponentType<PluginProps> {
   class LowcodePlugin extends PureComponent<PluginProps> {
-    static displayName = 'LowcodeEditorPlugin';
+    public static displayName = 'LowcodeEditorPlugin';
-    static defaultProps = {
+    public static defaultProps = {
       config: {}
     };
-    static contextType = EditorContext;
+    public static contextType = EditorContext;
-    static init = Comp.init;
+    public static init = Comp.init;
     public ref = createRef<React.Component>();
     private editor: Editor;
     private pluginKey: string;
@@ -47,28 +46,28 @@ export default function pluginFactory(
       });
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount() {
       // 销毁插件
       if (this.editor && this.editor.plugins) {
         delete this.editor.plugins[this.pluginKey];
       }
     }
 
-    open = (): Promise<any> => {
+    public open = (): Promise<any> => {
       if (this.ref && this.ref.open && typeof this.ref.open === 'function') {
         return transformToPromise(this.ref.open());
       }
       return Promise.resolve();
     };
 
-    close = () => {
+    public close = () => {
       if (this.ref && this.ref.close && typeof this.ref.close === 'function') {
         return transformToPromise(this.ref.close());
       }
       return Promise.resolve();
     };
 
-    render() {
+    public render() {
       const { config } = this.props;
       const props = {
         i18n: this.i18n,

packages/editor/src/framework/utils.ts

@@ -1,14 +1,14 @@
 import IntlMessageFormat from 'intl-messageformat';
 import keymaster from 'keymaster';
-import { EditorConfig, LocaleType, I18nMessages, I18nFunction, ShortCutsConfig } from './definitions';
+import { EditorConfig, I18nFunction, I18nMessages, LocaleType, ShortCutsConfig } from './definitions';
 import Editor from './editor';
 
-import _pick from 'lodash/pick';
-import _deepEqual from 'lodash/isEqualWith';
 import _clone from 'lodash/cloneDeep';
-import _isEmpty from 'lodash/isEmpty';
-import _throttle from 'lodash/throttle';
 import _debounce from 'lodash/debounce';
+import _isEmpty from 'lodash/isEmpty';
+import _deepEqual from 'lodash/isEqualWith';
+import _pick from 'lodash/pick';
+import _throttle from 'lodash/throttle';
 
 export const pick = _pick;
 export const deepEqual = _deepEqual;
@@ -36,22 +36,14 @@ export interface IDEMessageParams {
   };
 }
 
-export interface Window {
+/*
-  sendIDEMessage: (IDEMessageParams) => void;
-  goldlog: {
-    record: (logKey: string, gmKey: string, goKey: string, method: 'GET' | 'POST') => void;
-  };
-  parent: Window;
-  is_theia: boolean;
-  vscode: boolean;
-}
-
-/**
  * 用于构造国际化字符串处理函数
  */
 export function generateI18n(locale: LocaleType = 'zh-CN', messages: I18nMessages = {}): I18nFunction {
-  return (key, values = {}) => {
+  return (key: string, values): string => {
-    if (!messages || !messages[key]) return '';
+    if (!messages || !messages[key]) {
+      return '';
+    }
     const formater = new IntlMessageFormat(messages[key], locale);
     return formater.format(values);
   };
@@ -61,10 +53,14 @@ export function generateI18n(locale: LocaleType = 'zh-CN', messages: I18nMessage
  * 序列化参数
  */
 export function serializeParams(obj: object): string {
-  if (typeof obj !== 'object') return '';
+  if (typeof obj !== 'object') {
-  const res: Array<string> = [];
+    return '';
+  }
+  const res: string[] = [];
   Object.entries(obj).forEach(([key, val]) => {
-    if (val === null || val === undefined || val === '') return;
+    if (val === null || val === undefined || val === '') {
+      return;
+    }
     if (typeof val === 'object') {
       res.push(`${encodeURIComponent(key)}=${encodeURIComponent(JSON.stringify(val))}`);
     } else {
@@ -81,8 +77,7 @@ export function serializeParams(obj: object): string {
  * @param {String} logKey 属性串
  */
 export function goldlog(gmKey: string, params: object = {}, logKey: string = 'other'): void {
-  const global = window as Window;
+  const sendIDEMessage = window.sendIDEMessage || window.parent.sendIDEMessage;
-  const sendIDEMessage = global.sendIDEMessage || global.parent.sendIDEMessage;
   const goKey = serializeParams({
     env: getEnv(),
     ...params
@@ -97,7 +92,9 @@ export function goldlog(gmKey: string, params: object = {}, logKey: string = 'ot
       }
     });
   }
-  global.goldlog && global.goldlog.record(`/iceluna.core.${logKey}`, gmKey, goKey, 'POST');
+  if (window.goldlog) {
+    window.goldlog.record(`/iceluna.core.${logKey}`, gmKey, goKey, 'POST');
+  }
 }
 
 /**
@@ -106,9 +103,13 @@ export function goldlog(gmKey: string, params: object = {}, logKey: string = 'ot
 export function getEnv(): string {
   const userAgent = navigator.userAgent;
   const isVscode = /Electron\//.test(userAgent);
-  if (isVscode) return ENV.VSCODE;
+  if (isVscode) {
+    return ENV.VSCODE;
+  }
   const isTheia = window.is_theia === true;
-  if (isTheia) return ENV.WEBIDE;
+  if (isTheia) {
+    return ENV.WEBIDE;
+  }
   return ENV.WEB;
 }
 
@@ -137,7 +138,9 @@ export function unRegistShortCuts(config: ShortCutsConfig): void {
  * 将函数返回结果转成promise形式，如果函数有返回值则根据返回值的bool类型判断是reject还是resolve，若函数无返回值默认执行resolve
  */
 export function transformToPromise(input: any): Promise<{}> {
-  if (input instanceof Promise) return input;
+  if (input instanceof Promise) {
+    return input;
+  }
   return new Promise((resolve, reject) => {
     if (input || input === undefined) {
       resolve();
@@ -153,13 +156,19 @@ export function transformToPromise(input: any): Promise<{}> {
 interface MapOf<T> {
   [propName: string]: T;
 }
-export function transformArrayToMap<T>(arr: Array<T>, key: string, overwrite: boolean = true): MapOf<T> {
+export function transformArrayToMap<T>(arr: T[], key: string, overwrite: boolean = true): MapOf<T> {
-  if (isEmpty(arr) || !Array.isArray(arr)) return {};
+  if (isEmpty(arr) || !Array.isArray(arr)) {
+    return {};
+  }
   const res = {};
   arr.forEach(item => {
     const curKey = item[key];
-    if (item[key] === undefined) return;
+    if (item[key] === undefined) {
-    if (res[curKey] && !overwrite) return;
+      return;
+    }
+    if (res[curKey] && !overwrite) {
+      return;
+    }
     res[curKey] = item;
   });
   return res;
@@ -172,16 +181,18 @@ interface Query {
   [propName: string]: string;
 }
 export function parseSearch(search: string): Query {
-  if (!search || typeof search !== 'string') return {};
+  if (!search || typeof search !== 'string') {
+    return {};
+  }
   const str = search.replace(/^\?/, '');
-  let paramStr = str.split('&');
+  const paramStr = str.split('&');
-  let res = {};
+  const res = {};
-  for (let i = 0; i < paramStr.length; i++) {
+  paramStr.forEach(item => {
-    let regRes = paramStr[i].split('=');
+    const regRes = item.split('=');
     if (regRes[0] && regRes[1]) {
       res[regRes[0]] = decodeURIComponent(regRes[1]);
     }
-  }
+  });
   return res;
 }
 
@@ -238,8 +249,8 @@ export function comboEditorConfig(defaultConfig: EditorConfig = {}, customConfig
  * @param {*} Comp 需要判断的组件
  */
 export function acceptsRef(Comp: React.ComponentType) {
-  const hasSymbol = typeof Symbol === 'function' && Symbol['for'];
+  const hasSymbol = typeof Symbol === 'function' && Symbol.for;
-  const REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol['for']('react.forward_ref') : 0xead0;
+  const REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
   return (
     (Comp.$$typeof && Comp.$$typeof === REACT_FORWARD_REF_TYPE) || (Comp.prototype && Comp.prototype.isReactComponent)
   );

packages/editor/src/index.d.ts

@@ -0,0 +1,8 @@
+interface Window {
+  sendIDEMessage?: (IDEMessageParams) => void;
+  goldlog?: {
+    record: (logKey: string, gmKey: string, goKey: string, method: 'GET' | 'POST') => void;
+  };
+  is_theia?: boolean;
+  vscode?: boolean;
+}

packages/editor/src/plugins/undoRedo/index.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import './index.scss';
 import Editor from '../../framework/index';
 import { PluginConfig } from '../../framework/definitions';