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

packages/editor-framework/.eslintignore

@@ -0,0 +1,6 @@
+# 忽略目录
+build/
+node_modules/
+**/*-min.js
+**/*.min.js
+coverage/

packages/editor-framework/.eslintrc.js

@@ -0,0 +1,5 @@
+const { eslint, deepmerge } = require('@ice/spec');
+
+module.exports = deepmerge(eslint, {
+  rules: {},
+});

packages/editor-framework/.gitignore

@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules/
+
+# production
+build/
+dist/
+tmp/
+lib/
+
+# misc
+.idea/
+.happypack
+.DS_Store
+*.swp
+*.dia~
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+CHANGELOG.md

packages/editor-framework/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 120,
+  "trailingComma": "all"
+}

packages/editor-framework/README copy.md

@@ -0,0 +1,11 @@
+# demo component
+
+t-s-demo
+
+intro component
+
+## API
+
+| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
+| ------ | ---- | ---- | ---- | ------ | ---- |
+|        |      |      |      |        |      |

packages/editor-framework/README.md

@@ -1 +1 @@
-编辑器框架
+## todo

packages/editor-framework/build.json

@@ -0,0 +1,9 @@
+{
+  "plugins": [
+    "build-plugin-component",
+    "build-plugin-fusion",
+    ["build-plugin-moment-locales", {
+      "locales": ["zh-cn"]
+    }]
+  ]
+}

packages/editor-framework/demo/usage.md

@@ -0,0 +1,24 @@
+---
+title: Simple Usage
+order: 1
+---
+
+本 Demo 演示一行文字的用法。
+
+````jsx
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+class App extends Component {
+  render() {
+    return (
+      <div>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render((
+  <App />
+), mountNode);
+````

packages/editor-framework/es/context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const context: import("react").Context<{}>;
+export default context;

packages/editor-framework/es/context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+var context = createContext({});
+export default context;

packages/editor-framework/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@ali/lowcode-engine-editor",
+  "version": "0.0.1",
+  "description": "alibaba lowcode editor core",
+  "files": [
+    "demo/",
+    "es/",
+    "lib/",
+    "build/"
+  ],
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "stylePath": "style.js",
+  "scripts": {
+    "start": "build-scripts start",
+    "build": "build-scripts build",
+    "prepublishOnly": "npm run prettier && npm run build",
+    "lint": "eslint --cache --ext .js,.jsx ./",
+    "prettier": "prettier  --write \"./src/**/*.{ts,tsx,js,jsx,ejs,less,css,scss,json}\" "
+  },
+  "keywords": [
+    "lowcode",
+    "editor"
+  ],
+  "author": "xiayang.xy",
+  "dependencies": {
+    "debug": "^4.1.1",
+    "events": "^3.1.0",
+    "intl-messageformat": "^7.8.4",
+    "lodash": "^4.17.15",
+    "prop-types": "^15.5.8",
+    "store": "^2.0.12"
+  },
+  "devDependencies": {
+    "@alib/build-scripts": "^0.1.3",
+    "@alifd/next": "1.x",
+    "@ice/spec": "^0.1.1",
+    "@types/lodash": "^4.14.149",
+    "@types/react": "^16.9.13",
+    "@types/react-dom": "^16.9.4",
+    "build-plugin-component": "^0.2.7-1",
+    "build-plugin-fusion": "^0.1.0",
+    "build-plugin-moment-locales": "^0.1.0",
+    "eslint": "^6.0.1",
+    "prettier": "^1.19.1",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "@alifd/next": "1.x"
+  },
+  "license": "MIT",
+  "homepage": "https://unpkg.com/editor-framework@0.0.1/build/index.html"
+}

packages/editor-framework/src/context.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+const context = createContext({});
+export default context;

packages/editor-framework/src/definitions.ts

@@ -0,0 +1,48 @@
+
+export interface EditorConfig {
+
+};
+
+export interface NpmConfig {
+  version: string,
+  package: string,
+  main?: string,
+  exportName?: string,
+  subName?: string,
+  destructuring?: boolean
+};
+
+export interface SkeletonConfig {
+  config: NpmConfig,
+  props?: object,
+  handler?: (EditorConfig) => EditorConfig
+};
+
+export interface FusionTheme {
+  package: string,
+  version: string
+};
+
+export interface ThemeConfig {
+  fusion?: FusionTheme
+}
+
+export interface PluginsConfig {
+  [key]: Array<PluginConfig>
+};
+
+export interface PluginConfig {
+  pluginKey: string,
+  type: string,
+  props: object,
+  config: NpmConfig,
+  pluginProps: object
+};
+
+export type HooksConfig = Array<HookConfig>;
+
+export interface HookConfig {
+
+};
+
+

packages/editor-framework/src/editor.ts

@@ -0,0 +1,186 @@
+import EventEmitter from 'events';
+import Debug from 'debug';
+import store from 'store';
+
+import {
+  unRegistShortCuts,
+  registShortCuts,
+  transformToPromise,
+  generateI18n
+} from './utils';
+
+// 根据url参数设置debug选项
+const res = /_?debug=(.*?)(&|$)/.exec(location.search);
+if (res && res[1]) {
+  window.__isDebug = true;
+  store.storage.write('debug', res[1] === 'true' ? '*' : res[1]);
+} else {
+  window.__isDebug = false;
+  store.remove('debug');
+}
+
+//重要，用于矫正画布执行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;
+  var msg = '您确定要离开此页面吗？';
+  e.cancelBubble = true;
+  e.returnValue = msg;
+  if (e.stopPropagation) {
+    e.stopPropagation();
+    e.preventDefault();
+  }
+  return msg;
+};
+
+
+let instance = null;
+const debug = Debug('editor');
+EventEmitter.defaultMaxListeners = 100;
+
+export interface editor {
+
+};
+
+export default class Editor extends EventEmitter {
+  static getInstance = () => {
+    if (!instance) {
+      instance = new Editor();
+    }
+    return instance;
+  };
+
+  constructor(config) {
+    super();
+    instance = this;
+    Object.assign(this, config);
+    this.init();
+  }
+
+  init() {
+    const {
+      hooks,
+      shortCuts,
+      lifeCycles
+    } = this.config || {};
+    this.destroy();
+    this.locale = store.get('lowcode-editor-locale') || 'zh-CN';
+    this.messages = this.messagesSet[this.locale];
+    this.i18n = generateI18n(this.locale, this.messages);
+    this.pluginStatus = this.initPluginStatus();
+    this.initHooks(hooks, appHelper);
+
+    appHelper.emit('editor.beforeInit');
+    const init = lifeCycles && lifeCycles.init || () => {};
+    // 用户可以通过设置extensions.init自定义初始化流程；
+    transformToPromise(init(this))
+      .then(() => {
+        // 注册快捷键
+        registShortCuts(shortCuts, this);
+        this.emit('editor.afterInit');
+      })
+      .catch(err => {
+        console.warn(err);
+      });
+  }
+
+  destroy() {
+    try {
+        const {
+          hooks = [],
+          shortCuts = [],
+          lifeCycles = {}
+        } = this.config;
+        unRegistShortCuts(shortCuts);
+        this.destroyHooks(hooks);
+        lifeCycles.destroy && lifeCycles.destroy();
+      } catch (err) {
+        console.warn(err);
+        return;
+      }
+  }
+
+  get(key:string):any {
+    return this[key];
+  }
+
+  set(key:string|object, val:any):void {
+    if (typeof key === 'string') {
+      if (['init', 'destroy', 'get', 'set', 'batchOn', 'batchOff', 'batchOnce'].includes(key)) {
+        console.warning('init, destroy, get, set, batchOn, batchOff, batchOnce is private attribute');
+        return;
+      }
+      this[key] = val;
+    } else if (typeof key === 'object') {
+      Object.keys(key).forEach(item => {
+        this[item] = key[item];
+      });
+    }
+  }
+
+  batchOn(events:Array<string>, lisenter:function):void {
+    if (!Array.isArray(events)) return;
+    events.forEach(event => this.on(event, lisenter));
+  }
+
+  batchOnce(events:Array<string>, lisenter:function):void {
+    if (!Array.isArray(events)) return;
+    events.forEach(event => this.once(event, lisenter));
+  }
+
+  batchOff(events:Array<string>, lisenter:function):void {
+    if (!Array.isArray(events)) return;
+    events.forEach(event => this.off(event, lisenter));
+  }
+
+  //销毁hooks中的消息监听
+  private destroyHooks(hooks = []) {
+    hooks.forEach((item, idx) => {
+      if (typeof this.__hooksFuncs[idx] === 'function') {
+        this.appHelper.off(item.message, this.__hooksFuncs[idx]);
+      }
+    });
+    delete this.__hooksFuncs;
+  };
+
+  //初始化hooks中的消息监听
+  private initHooks(hooks = []) {
+    this.__hooksFuncs = hooks.map(item => {
+      const func = (...args) => {
+        item.handler(this, ...args);
+      };
+      this[item.type](item.message, func);
+      return func;
+    });
+  };
+
+
+  private initPluginStatus () {
+    const {plugins = {}} = this.config;
+    const pluginAreas = Object.keys(plugins);
+    const res = {};
+    pluginAreas.forEach(area => {
+      (plugins[area] || []).forEach(plugin => {
+        if (plugin.type === 'Divider') return;
+        const { visible, disabled, dotted } = plugin.props || {};
+        res[plugin.pluginKey] = {
+          visible: typeof visible === 'boolean' ? visible : true,
+          disabled: typeof disabled === 'boolean' ? disabled : false,
+          dotted: typeof dotted === 'boolean' ? dotted : false
+        };
+        const pluginClass = this.props.components[skeletonUtils.generateAddonCompName(addon.addonKey)];
+        // 判断如果编辑器插件有init静态方法，则在此执行init方法
+        if (pluginClass && pluginClass.init) {
+          pluginClass.init(this);
+        }
+      });
+    });
+    return res;
+  };
+}

packages/editor-framework/src/index.ts

@@ -0,0 +1,4 @@
+import Editor from './editor';
+
+
+export default Editor;

packages/editor-framework/src/plugin.ts

@@ -0,0 +1,129 @@
+import { PureComponent } from 'react';
+
+import EditorContext from './context';
+import { isEmpty, generateI18n, goldlog } from './utils';
+
+export interface pluginProps {
+  config: object,
+  editor: object,
+  locale: string,
+  messages: object
+}
+
+export default function plugin(Comp) {
+
+  class Plugin extends PureComponent<pluginProps> {
+    static displayName = 'lowcode-editor-plugin';
+    static defaultProps = {
+      config: {}
+    };
+    static contextType = EditorContext;
+    constructor(props, context) {
+      super(props, context);
+      if (isEmpty(props.config) || !props.config.pluginKey) {
+        console.warn('lowcode editor plugin has wrong config');
+        return;
+      }
+
+      const { locale, messages, editor } = props;
+      // 注册插件
+      this.editor = editor;
+      this.i18n = generateI18n(locale, messages);
+      this.pluginKey = props.config.pluginKey;
+      editor.plugins = editor.plugins || {};
+      editor.plugins[this.pluginKey] = this;
+    }
+
+    componentWillUnmount() {
+      // 销毁插件
+      if (this.editor && this.editor.plugins) {
+        delete this.editor.plugins[this.pluginKey];
+      }
+    }
+
+    render() {
+      const {
+        config
+      } = this.props;
+      return <Comp i18n={this.i18n} editor={this.editor} config={config} {...config.pluginProps}/>
+    }
+  }
+
+  return Plugin;
+}
+
+
+
+export class Plugin extends PureComponent<pluginProps> {
+  static displayName = 'lowcode-editor-plugin';
+  static defaultProps = {
+    config: {}
+  };
+  static contextType = EditorContext;
+  constructor(props, context) {
+    super(props, context);
+    if (isEmpty(props.config) || !props.config.addonKey) {
+      console.warn('luna addon has wrong config');
+      return;
+    }
+
+  
+    const { locale, messages, editor } = props;
+    // 注册插件
+    this.editor = editor;
+    this.i18n = generateI18n(locale, messages);
+    this.pluginKey = props.config.pluginKey;
+    editor.plugins = editor.plugins || {};
+    editor.plugins[this.pluginKey] = this;
+  }
+
+  async componentWillUnmount() {
+    // 销毁插件
+    if (this.editor && this.editor.plugins) {
+      delete this.editor.plugins[this.pluginKey];
+    }
+  }
+
+  open = () => {
+    return true;
+  };
+
+  close = () => {
+    return true;
+  };
+
+  goldlog = (goKey:string, params:any) => {
+    const { pluginKey, config = {} } = this.props.config || {};
+    goldlog(
+      goKey,
+      {
+        pluginKey,
+        package: config.package,
+        version: config.version,
+        ...this.editor.logParams,
+        ...params
+      },
+      'addon'
+    );
+  };
+
+  get utils() {
+    return this.editor.utils;
+  }
+
+  get constants() {
+    return this.editor.constants;
+  }
+
+  get history() {
+    return this.editor.history;
+  }
+
+  get location() {
+    return this.editor.location;
+  }
+
+  render() {
+    return null;
+  }
+}

packages/editor-framework/src/utils.ts

@@ -0,0 +1,242 @@
+
+import IntlMessageFormat from 'intl-messageformat';
+import _isEmpty from 'lodash/isEmpty';
+
+export const isEmpty = _isEmpty;
+
+/**
+ * 用于构造国际化字符串处理函数
+ * @param {*} locale 国际化标识，例如 zh-CN、en-US
+ * @param {*} messages 国际化语言包
+ */
+export function generateI18n(locale = 'zh-CN', messages = {}) {
+  return (key, values = {}) => {
+    if (!messages || !messages[key]) return '';
+    const formater = new IntlMessageFormat(messages[key], locale);
+    return formater.format(values);
+  };
+}
+
+/**
+ * 序列化参数
+ * @param {*} obj 参数
+ */
+export function serializeParams(obj:object):string {
+  if (typeof obj !== 'object') return '';
+
+  const res:Array<string> = [];
+  Object.entries(obj).forEach(([key, val]) => {
+    if (val === null || val === undefined || val === '') return;
+    if (typeof val === 'object') {
+      res.push(`${encodeURIComponent(key)}=${encodeURIComponent(JSON.stringify(val))}`);
+    } else {
+      res.push(`${encodeURIComponent(key)}=${encodeURIComponent(val)}`);
+    }
+  });
+  return res.join('&');
+}
+
+/**
+ * 黄金令箭埋点
+ * @param {String} gmKey 为黄金令箭业务类型
+ * @param {Object} params 参数
+ * @param {String} logKey 属性串
+ */
+export function goldlog(gmKey, params = {}, logKey = 'other') {
+  const sendIDEMessage = window.sendIDEMessage || window.parent.sendIDEMessage;
+  const goKey = serializeParams({
+    sdkVersion: pkg.version,
+    env: getEnv(),
+    ...params
+  });
+  if (sendIDEMessage) {
+    sendIDEMessage({
+      action: 'goldlog',
+      data: {
+        logKey: `/iceluna.core.${logKey}`,
+        gmKey,
+        goKey
+      }
+    });
+  }
+  window.goldlog && window.goldlog.record(`/iceluna.core.${logKey}`, gmKey, goKey, 'POST');
+}
+
+/**
+ * 获取当前编辑器环境
+ */
+export function getEnv() {
+  const userAgent = navigator.userAgent;
+  const isVscode = /Electron\//.test(userAgent);
+  if (isVscode) return ENV.VSCODE;
+  const isTheia = window.is_theia === true;
+  if (isTheia) return ENV.WEBIDE;
+  return ENV.WEB;
+}
+
+// 注册快捷键
+export function registShortCuts(config, editor) {
+  const keyboardFilter = (keymaster.filter = event => {
+    let eTarget = event.target || event.srcElement;
+    let tagName = eTarget.tagName;
+    let isInput = !!(tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA');
+    let isContenteditable = !!eTarget.getAttribute('contenteditable');
+    if (isInput || isContenteditable) {
+      if (event.metaKey === true && [70, 83].includes(event.keyCode)) event.preventDefault(); //禁止触发chrome原生的页面保存或查找
+      return false;
+    } else {
+      return true;
+    }
+  });
+
+  const ideMessage = appHelper.utils && appHelper.utils.ideMessage;
+
+  //复制
+  if (!document.copyListener) {
+    document.copyListener = e => {
+      if (!keyboardFilter(e) || appHelper.isCopying) return;
+      const schema = appHelper.schemaHelper && appHelper.schemaHelper.schemaMap[appHelper.activeKey];
+      if (!schema || !isSchema(schema)) return;
+      appHelper.isCopying = true;
+      const schemaStr = serialize(transformSchemaToPure(schema), {
+        unsafe: true
+      });
+      setClipboardData(schemaStr)
+        .then(() => {
+          ideMessage && ideMessage('success', '当前内容已复制到剪贴板，请使用快捷键Command+v进行粘贴');
+          appHelper.emit('schema.copy', schemaStr, schema);
+          appHelper.isCopying = false;
+        })
+        .catch(errMsg => {
+          ideMessage && ideMessage('error', errMsg);
+          appHelper.isCopying = false;
+        });
+    };
+    document.addEventListener('copy', document.copyListener);
+    if (window.parent.vscode) {
+      keymaster('command+c', document.copyListener);
+    }
+  }
+
+  //粘贴
+  if (!document.pasteListener) {
+    const doPaste = (e, text) => {
+      if (!keyboardFilter(e) || appHelper.isPasting) return;
+      const schemaHelper = appHelper.schemaHelper;
+      let targetKey = appHelper.activeKey;
+      let direction = 'after';
+      const topKey = schemaHelper.schema && schemaHelper.schema.__ctx && schemaHelper.schema.__ctx.lunaKey;
+      if (!targetKey || topKey === targetKey) {
+        const schemaHelper = appHelper.schemaHelper;
+        const topKey = schemaHelper.schema && schemaHelper.schema.__ctx && schemaHelper.schema.__ctx.lunaKey;
+        if (!topKey) return;
+        targetKey = topKey;
+        direction = 'in';
+      }
+      appHelper.isPasting = true;
+      const schema = parseObj(text);
+      if (!isSchema(schema)) {
+        appHelper.emit('illegalSchema.paste', text);
+        // ideMessage && ideMessage('error', '当前内容不是模型结构，不能粘贴进来！');
+        console.warn('paste schema illegal');
+        appHelper.isPasting = false;
+        return;
+      }
+      appHelper.emit('material.add', {
+        schema,
+        targetKey,
+        direction
+      });
+      appHelper.isPasting = false;
+      appHelper.emit('schema.paste', schema);
+    };
+    document.pasteListener = e => {
+      const clipboardData = e.clipboardData || window.clipboardData;
+      const text = clipboardData && clipboardData.getData('text');
+      doPaste(e, text);
+    };
+    document.addEventListener('paste', document.pasteListener);
+    if (window.parent.vscode) {
+      keymaster('command+v', e => {
+        const sendIDEMessage = window.parent.sendIDEMessage;
+        sendIDEMessage &&
+          sendIDEMessage({
+            action: 'readClipboard'
+          })
+            .then(text => {
+              doPaste(e, text);
+            })
+            .catch(err => {
+              console.warn(err);
+            });
+      });
+    }
+  }
+
+  (config || []).forEach(item => {
+    keymaster(item.keyboard, ev => {
+      ev.preventDefault();
+      item.handler(ev, appHelper, keymaster);
+    });
+  });
+}
+
+// 取消注册快捷
+export function unRegistShortCuts(config) {
+  (config || []).forEach(item => {
+    keymaster.unbind(item.keyboard);
+  });
+  if (window.parent.vscode) {
+    keymaster.unbind('command+c');
+    keymaster.unbind('command+v');
+  }
+  if (document.copyListener) {
+    document.removeEventListener('copy', document.copyListener);
+    delete document.copyListener;
+  }
+  if (document.pasteListener) {
+    document.removeEventListener('paste', document.pasteListener);
+    delete document.pasteListener;
+  }
+}
+
+// 将函数返回结果转成promise形式，如果函数有返回值则根据返回值的bool类型判断是reject还是resolve，若函数无返回值默认执行resolve
+export function transformToPromise(input) {
+  if (input instanceof Promise) return input;
+  return new Promise((resolve, reject) => {
+    if (input || input === undefined) {
+      resolve();
+    } else {
+      reject();
+    }
+  });
+}
+
+export function comboEditorConfig(defaultConfig, customConfig) {
+  const { ideConfig = {}, utils = {} } = this.props;
+    const comboShortCuts = () => {
+      const defaultShortCuts = defaultIdeConfig.shortCuts;
+      const shortCuts = ideConfig.shortCuts || [];
+      const configMap = skeletonUtils.transformArrayToMap(defaultShortCuts, 'keyboard');
+      (shortCuts || []).forEach(item => {
+        configMap[item.keyboard] = item;
+      });
+      return Object.keys(configMap).map(key => configMap[key]);
+    };
+    return {
+      ...ideConfig,
+      utils: {
+        ...skeletonUtils,
+        ...utils
+      },
+      constants: {
+        ...defaultIdeConfig.constants,
+        ...ideConfig.constants
+      },
+      extensions: {
+        ...defaultIdeConfig.extensions,
+        ...ideConfig.extensions
+      },
+      shortCuts: comboShortCuts()
+    };
+}

packages/editor-framework/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compileOnSave": false,
+  "buildOnSave": false,
+  "compilerOptions": {
+    "outDir": "build",
+    "module": "esnext",
+    "target": "es6",
+    "jsx": "react",
+    "moduleResolution": "node",
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "noUnusedLocals": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/*.ts", "src/*.tsx"],
+  "exclude": ["node_modules", "build", "public"]
+}

packages/editor-skeleton/.editorconfig

@@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

packages/editor-skeleton/.eslintignore

@@ -0,0 +1,11 @@
+# 忽略目录
+build/
+tests/
+demo/
+
+# node 覆盖率文件
+coverage/
+
+# 忽略文件
+**/*-min.js
+**/*.min.js

packages/editor-skeleton/.eslintrc.js

@@ -0,0 +1,7 @@
+const { eslint, deepmerge } = require('@ice/spec');
+
+module.exports = deepmerge(eslint, {
+  rules: {
+    "global-require": 0,
+  },
+});

packages/editor-skeleton/.gitignore

@@ -0,0 +1,20 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# production
+/build
+/dist
+
+# misc
+.idea/
+.happypack
+.DS_Store
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# ignore d.ts auto generated by css-modules-typescript-loader
+*.module.scss.d.ts

packages/editor-skeleton/.stylelintignore

@@ -0,0 +1,7 @@
+# 忽略目录
+build/
+tests/
+demo/
+
+# node 覆盖率文件
+coverage/

packages/editor-skeleton/.stylelintrc.js

@@ -0,0 +1,3 @@
+const { stylelint } = require('@ice/spec');
+
+module.exports = stylelint;

packages/editor-skeleton/README.md

@@ -0,0 +1 @@
+## todo

packages/editor-skeleton/abc.json

@@ -0,0 +1,4 @@
+{
+  "type": "ice-scripts",
+  "builder": "@ali/builder-ice-scripts"
+}

packages/editor-skeleton/build.json

@@ -0,0 +1,9 @@
+{
+  "plugins": [
+    "build-plugin-component",
+    "build-plugin-fusion",
+    ["build-plugin-moment-locales", {
+      "locales": ["zh-cn"]
+    }]
+  ]
+}

packages/editor-skeleton/demo/usage.md

@@ -0,0 +1,24 @@
+---
+title: Simple Usage
+order: 1
+---
+
+本 Demo 演示一行文字的用法。
+
+````jsx
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+class App extends Component {
+  render() {
+    return (
+      <div>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render((
+  <App />
+), mountNode);
+````

packages/editor-skeleton/es/components/LeftPlugin/index.d.ts

@@ -0,0 +1,30 @@
+import { PureComponent } from 'react';
+import './index.scss';
+export default class LeftAddon extends PureComponent {
+    static displayName: string;
+    static propTypes: {
+        active: any;
+        config: any;
+        disabled: any;
+        dotted: any;
+        locked: any;
+        onClick: any;
+    };
+    static defaultProps: {
+        active: boolean;
+        config: {};
+        disabled: boolean;
+        dotted: boolean;
+        locked: boolean;
+        onClick: () => void;
+    };
+    static contextType: any;
+    constructor(props: any, context: any);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleClose: () => void;
+    handleOpen: () => void;
+    handleShow: () => void;
+    renderIcon: (clickCallback: any) => JSX.Element;
+    render(): JSX.Element;
+}

packages/editor-skeleton/es/components/LeftPlugin/index.js

@@ -0,0 +1,259 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import AppContext from '@ali/iceluna-sdk/lib/context/appContext';
+import { Balloon, Dialog, Icon, Badge } from '@alife/next';
+import './index.scss';
+
+var LeftAddon = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(LeftAddon, _PureComponent);
+
+  function LeftAddon(_props, context) {
+    var _this;
+
+    _this = _PureComponent.call(this, _props, context) || this;
+
+    _this.handleClose = function () {
+      var addonKey = _this.props.config && _this.props.config.addonKey;
+      var currentAddon = _this.appHelper.addons && _this.appHelper.addons[addonKey];
+
+      if (currentAddon) {
+        _this.utils.transformToPromise(currentAddon.close()).then(function () {
+          _this.setState({
+            dialogVisible: false
+          });
+        });
+      }
+    };
+
+    _this.handleOpen = function () {
+      // todo 对话框类型的插件初始时拿不到插件实例
+      _this.setState({
+        dialogVisible: true
+      });
+    };
+
+    _this.handleShow = function () {
+      var _this$props = _this.props,
+          disabled = _this$props.disabled,
+          config = _this$props.config,
+          onClick = _this$props.onClick;
+      var addonKey = config && config.addonKey;
+      if (disabled || !addonKey) return; //考虑到弹窗情况，延时发送消息
+
+      setTimeout(function () {
+        return _this.appHelper.emit(addonKey + ".addon.activate");
+      }, 0);
+
+      _this.handleOpen();
+
+      onClick && onClick();
+    };
+
+    _this.renderIcon = function (clickCallback) {
+      var _this$props2 = _this.props,
+          active = _this$props2.active,
+          disabled = _this$props2.disabled,
+          dotted = _this$props2.dotted,
+          locked = _this$props2.locked,
+          _onClick = _this$props2.onClick,
+          config = _this$props2.config;
+
+      var _ref = config || {},
+          addonKey = _ref.addonKey,
+          props = _ref.props;
+
+      var _ref2 = props || {},
+          icon = _ref2.icon,
+          title = _ref2.title;
+
+      return React.createElement("div", {
+        className: classNames('luna-left-addon', addonKey, {
+          active: active,
+          disabled: disabled,
+          locked: locked
+        }),
+        "data-tooltip": title,
+        onClick: function onClick() {
+          if (disabled) return; //考虑到弹窗情况，延时发送消息
+
+          clickCallback && clickCallback();
+          _onClick && _onClick();
+        }
+      }, dotted ? React.createElement(Badge, {
+        dot: true
+      }, React.createElement(Icon, {
+        type: icon,
+        size: "small"
+      })) : React.createElement(Icon, {
+        type: icon,
+        size: "small"
+      }));
+    };
+
+    _this.state = {
+      dialogVisible: false
+    };
+    _this.appHelper = context.appHelper;
+    _this.utils = _this.appHelper.utils;
+    _this.constants = _this.appHelper.constants;
+    return _this;
+  }
+
+  var _proto = LeftAddon.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    var config = this.props.config;
+    var addonKey = config && config.addonKey;
+    var appHelper = this.appHelper;
+
+    if (appHelper && addonKey) {
+      appHelper.on(addonKey + ".dialog.show", this.handleShow);
+      appHelper.on(addonKey + ".dialog.close", this.handleClose);
+    }
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    var config = this.props.config;
+    var appHelper = this.appHelper;
+    var addonKey = config && config.addonKey;
+
+    if (appHelper && addonKey) {
+      appHelper.off(addonKey + ".dialog.show", this.handleShow);
+      appHelper.off(addonKey + ".dialog.close", this.handleClose);
+    }
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var _this$props3 = this.props,
+        dotted = _this$props3.dotted,
+        locked = _this$props3.locked,
+        active = _this$props3.active,
+        disabled = _this$props3.disabled,
+        config = _this$props3.config;
+
+    var _ref3 = config || {},
+        addonKey = _ref3.addonKey,
+        props = _ref3.props,
+        type = _ref3.type,
+        addonProps = _ref3.addonProps;
+
+    var _ref4 = props || {},
+        _onClick2 = _ref4.onClick,
+        title = _ref4.title;
+
+    var dialogVisible = this.state.dialogVisible;
+    var _this$context = this.context,
+        appHelper = _this$context.appHelper,
+        components = _this$context.components;
+    if (!addonKey || !type || !props) return null;
+    var componentName = appHelper.utils.generateAddonCompName(addonKey);
+    var localeProps = {};
+    var locale = appHelper.locale,
+        messages = appHelper.messages;
+
+    if (locale) {
+      localeProps.locale = locale;
+    }
+
+    if (messages && messages[componentName]) {
+      localeProps.messages = messages[componentName];
+    }
+
+    var AddonComp = components && components[componentName];
+    var node = AddonComp && React.createElement(AddonComp, _extends({
+      active: active,
+      locked: locked,
+      disabled: disabled,
+      config: config,
+      onClick: function onClick() {
+        _onClick2 && _onClick2.call(null, appHelper);
+      }
+    }, localeProps, addonProps || {})) || null;
+
+    switch (type) {
+      case 'LinkIcon':
+        return React.createElement("a", props.linkProps || {}, this.renderIcon(function () {
+          _onClick2 && _onClick2.call(null, appHelper);
+        }));
+
+      case 'Icon':
+        return this.renderIcon(function () {
+          _onClick2 && _onClick2.call(null, appHelper);
+        });
+
+      case 'DialogIcon':
+        return React.createElement(Fragment, null, this.renderIcon(function () {
+          _onClick2 && _onClick2.call(null, appHelper);
+
+          _this2.handleOpen();
+        }), React.createElement(Dialog, _extends({
+          onOk: function onOk() {
+            appHelper.emit(addonKey + ".dialog.onOk");
+
+            _this2.handleClose();
+          },
+          onCancel: this.handleClose,
+          onClose: this.handleClose,
+          title: title
+        }, props.dialogProps || {}, {
+          visible: dialogVisible
+        }), node));
+
+      case 'BalloonIcon':
+        return React.createElement(Balloon, _extends({
+          trigger: this.renderIcon(function () {
+            _onClick2 && _onClick2.call(null, appHelper);
+          }),
+          align: "r",
+          triggerType: ['click', 'hover']
+        }, props.balloonProps || {}), node);
+
+      case 'PanelIcon':
+        return this.renderIcon(function () {
+          _onClick2 && _onClick2.call(null, appHelper);
+
+          _this2.handleOpen();
+        });
+
+      case 'Custom':
+        return dotted ? React.createElement(Badge, {
+          dot: true
+        }, node) : node;
+
+      default:
+        return null;
+    }
+  };
+
+  return LeftAddon;
+}(PureComponent);
+
+LeftAddon.displayName = 'LunaLeftAddon';
+LeftAddon.propTypes = {
+  active: PropTypes.bool,
+  config: PropTypes.shape({
+    addonKey: PropTypes.string,
+    addonProps: PropTypes.object,
+    props: PropTypes.object,
+    type: PropTypes.oneOf(['DialogIcon', 'BalloonIcon', 'PanelIcon', 'LinkIcon', 'Icon', 'Custom'])
+  }),
+  disabled: PropTypes.bool,
+  dotted: PropTypes.bool,
+  locked: PropTypes.bool,
+  onClick: PropTypes.func
+};
+LeftAddon.defaultProps = {
+  active: false,
+  config: {},
+  disabled: false,
+  dotted: false,
+  locked: false,
+  onClick: function onClick() {}
+};
+LeftAddon.contextType = AppContext;
+export { LeftAddon as default };

packages/editor-skeleton/es/components/LeftPlugin/index.scss

@@ -0,0 +1,59 @@
+.luna-left-addon {
+  font-size: 16px;
+  text-align: center;
+  line-height: 36px;
+  height: 36px;
+  position: relative;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: #777;
+  &.collapse {
+    height: 40px;
+    color: #8c8c8c;
+    border-bottom: 1px solid #bfbfbf;
+  }
+  &.locked {
+    color: red !important;
+  }
+  &.active {
+    color: #fff !important;
+    background-color: $color-brand1-9 !important;
+    &.disabled {
+      color: #fff;
+      background-color: $color-fill1-7;
+    }
+  }
+  &.disabled {
+    cursor: not-allowed;
+    color: $color-text1-1;
+  }
+  &:hover {
+    background-color: $color-brand1-1;
+    color: $color-brand1-6;
+    &:before {
+      content: attr(data-tooltip);
+      display: block;
+      position: absolute;
+      left: 50px;
+      top: 5px;
+      line-height: 18px;
+      font-size: 12px;
+      white-space: nowrap;
+      padding: 6px 8px;
+      border-radius: 4px;
+      background: rgba(0, 0, 0, 0.75);
+      color: #fff;
+      z-index: 100;
+    }
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      left: 40px;
+      top: 15px;
+      border: 5px solid transparent;
+      border-right-color: rgba(0, 0, 0, 0.75);
+      z-index: 100;
+    }
+  }
+}

packages/editor-skeleton/es/components/TopIcon/index.d.ts

@@ -0,0 +1,30 @@
+import { PureComponent } from 'react';
+import './index.scss';
+export default class TopIcon extends PureComponent {
+    static displayName: string;
+    static propTypes: {
+        active: any;
+        className: any;
+        disabled: any;
+        icon: any;
+        id: any;
+        locked: any;
+        onClick: any;
+        showTitle: any;
+        style: any;
+        title: any;
+    };
+    static defaultProps: {
+        active: boolean;
+        className: string;
+        disabled: boolean;
+        icon: string;
+        id: string;
+        locked: boolean;
+        onClick: () => void;
+        showTitle: boolean;
+        style: {};
+        title: string;
+    };
+    render(): JSX.Element;
+}

packages/editor-skeleton/es/components/TopIcon/index.js

@@ -0,0 +1,76 @@
+import _Button from "@alifd/next/es/button";
+import _Icon from "@alifd/next/es/icon";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import './index.scss';
+
+var TopIcon = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(TopIcon, _PureComponent);
+
+  function TopIcon() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+
+  var _proto = TopIcon.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        active = _this$props.active,
+        disabled = _this$props.disabled,
+        icon = _this$props.icon,
+        locked = _this$props.locked,
+        title = _this$props.title,
+        className = _this$props.className,
+        id = _this$props.id,
+        style = _this$props.style,
+        showTitle = _this$props.showTitle,
+        onClick = _this$props.onClick;
+    return React.createElement(_Button, {
+      type: "normal",
+      size: "large",
+      text: true,
+      className: classNames('lowcode-top-btn', className, {
+        active: active,
+        disabled: disabled,
+        locked: locked
+      }),
+      id: id,
+      style: style,
+      onClick: disabled ? null : onClick
+    }, React.createElement("div", null, React.createElement(_Icon, {
+      size: "large",
+      type: icon
+    }), showTitle && React.createElement("span", null, title)));
+  };
+
+  return TopIcon;
+}(PureComponent);
+
+TopIcon.displayName = 'TopIcon';
+TopIcon.propTypes = {
+  active: PropTypes.bool,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  icon: PropTypes.string,
+  id: PropTypes.string,
+  locked: PropTypes.bool,
+  onClick: PropTypes.func,
+  showTitle: PropTypes.bool,
+  style: PropTypes.object,
+  title: PropTypes.string
+};
+TopIcon.defaultProps = {
+  active: false,
+  className: '',
+  disabled: false,
+  icon: '',
+  id: '',
+  locked: false,
+  onClick: function onClick() {},
+  showTitle: false,
+  style: {},
+  title: ''
+};
+export { TopIcon as default };

packages/editor-skeleton/es/components/TopIcon/index.scss

@@ -0,0 +1,32 @@
+.next-btn.next-large.lowcode-top-btn {
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  margin: 4px -2px;
+  text-align: center;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  color: #777;
+  &.disabled {
+    cursor: not-allowed;
+    color: $color-text1-1;
+  }
+  &.locked {
+    color: red !important;
+  }
+  i.next-icon {
+    &:before {
+      font-size: 17px;
+    }
+    margin-right: 0;
+    line-height: 18px;
+  }
+  span {
+    display: block;
+    margin: 0px -5px 0;
+    line-height: 16px;
+    text-align: center;
+    font-size: 12px;
+    transform: scale(0.8);
+  }
+}

packages/editor-skeleton/es/components/TopPlugin/index.d.ts

@@ -0,0 +1,21 @@
+import { PureComponent } from 'react';
+import './index.scss';
+export default class TopPlugin extends PureComponent {
+    static displayName: string;
+    static defaultProps: {
+        active: boolean;
+        config: {};
+        disabled: boolean;
+        dotted: boolean;
+        locked: boolean;
+        onClick: () => void;
+    };
+    constructor(props: any, context: any);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleShow: () => void;
+    handleClose: () => void;
+    handleOpen: () => void;
+    renderIcon: (clickCallback: any) => JSX.Element;
+    render(): JSX.Element;
+}

packages/editor-skeleton/es/components/TopPlugin/index.js

@@ -0,0 +1,213 @@
+import _Balloon from "@alifd/next/es/balloon";
+import _Dialog from "@alifd/next/es/dialog";
+import _extends from "@babel/runtime/helpers/extends";
+import _Badge from "@alifd/next/es/badge";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent, Fragment } from 'react';
+import TopIcon from '../TopIcon';
+import './index.scss';
+
+var TopPlugin = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(TopPlugin, _PureComponent);
+
+  function TopPlugin(_props, context) {
+    var _this;
+
+    _this = _PureComponent.call(this, _props, context) || this;
+
+    _this.handleShow = function () {
+      var _this$props = _this.props,
+          disabled = _this$props.disabled,
+          config = _this$props.config,
+          onClick = _this$props.onClick;
+      var addonKey = config && config.addonKey;
+      if (disabled || !addonKey) return; //考虑到弹窗情况，延时发送消息
+
+      setTimeout(function () {
+        return _this.appHelper.emit(addonKey + ".addon.activate");
+      }, 0);
+
+      _this.handleOpen();
+
+      onClick && onClick();
+    };
+
+    _this.handleClose = function () {
+      var addonKey = _this.props.config && _this.props.config.addonKey;
+      var currentAddon = _this.appHelper.addons && _this.appHelper.addons[addonKey];
+
+      if (currentAddon) {
+        _this.utils.transformToPromise(currentAddon.close()).then(function () {
+          _this.setState({
+            dialogVisible: false
+          });
+        });
+      }
+    };
+
+    _this.handleOpen = function () {
+      // todo dialog类型的插件初始时拿不动插件实例
+      _this.setState({
+        dialogVisible: true
+      });
+    };
+
+    _this.renderIcon = function (clickCallback) {
+      var _this$props2 = _this.props,
+          active = _this$props2.active,
+          disabled = _this$props2.disabled,
+          dotted = _this$props2.dotted,
+          locked = _this$props2.locked,
+          config = _this$props2.config,
+          _onClick = _this$props2.onClick;
+
+      var _ref = config || {},
+          pluginKey = _ref.pluginKey,
+          props = _ref.props;
+
+      var _ref2 = props || {},
+          icon = _ref2.icon,
+          title = _ref2.title;
+
+      var node = React.createElement(TopIcon, {
+        className: "lowcode-top-addon " + pluginKey,
+        active: active,
+        disabled: disabled,
+        locked: locked,
+        icon: icon,
+        title: title,
+        onClick: function onClick() {
+          if (disabled) return; //考虑到弹窗情况，延时发送消息
+
+          setTimeout(function () {
+            return _this.appHelper.emit(pluginKey + ".addon.activate");
+          }, 0);
+          clickCallback && clickCallback();
+          _onClick && _onClick();
+        }
+      });
+      return dotted ? React.createElement(_Badge, {
+        dot: true
+      }, node) : node;
+    };
+
+    _this.state = {
+      dialogVisible: false
+    };
+    return _this;
+  }
+
+  var _proto = TopPlugin.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    var config = this.props.config;
+    var pluginKey = config && config.pluginKey; // const appHelper = this.appHelper;
+    // if (appHelper && addonKey) {
+    //   appHelper.on(`${addonKey}.dialog.show`, this.handleShow);
+    //   appHelper.on(`${addonKey}.dialog.close`, this.handleClose);
+    // }
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {// const { config } = this.props;
+    // const addonKey = config && config.addonKey;
+    // const appHelper = this.appHelper;
+    // if (appHelper && addonKey) {
+    //   appHelper.off(`${addonKey}.dialog.show`, this.handleShow);
+    //   appHelper.off(`${addonKey}.dialog.close`, this.handleClose);
+    // }
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var _this$props3 = this.props,
+        active = _this$props3.active,
+        dotted = _this$props3.dotted,
+        locked = _this$props3.locked,
+        disabled = _this$props3.disabled,
+        config = _this$props3.config,
+        editor = _this$props3.editor,
+        Comp = _this$props3.pluginClass;
+
+    var _ref3 = config || {},
+        pluginKey = _ref3.pluginKey,
+        pluginProps = _ref3.pluginProps,
+        props = _ref3.props,
+        type = _ref3.type;
+
+    var _ref4 = props || {},
+        _onClick2 = _ref4.onClick,
+        title = _ref4.title;
+
+    var dialogVisible = this.state.dialogVisible;
+    if (!pluginKey || !type || !Comp) return null;
+    var node = React.createElement(Comp, _extends({
+      active: active,
+      locked: locked,
+      disabled: disabled,
+      config: config,
+      onClick: function onClick() {
+        _onClick2 && _onClick2.call(null, editor);
+      }
+    }, pluginProps));
+
+    switch (type) {
+      case 'LinkIcon':
+        return React.createElement("a", props.linkProps, this.renderIcon(function () {
+          _onClick2 && _onClick2.call(null, editor);
+        }));
+
+      case 'Icon':
+        return this.renderIcon(function () {
+          _onClick2 && _onClick2.call(null, editor);
+        });
+
+      case 'DialogIcon':
+        return React.createElement(Fragment, null, this.renderIcon(function () {
+          _onClick2 && _onClick2.call(null, editor);
+
+          _this2.handleOpen();
+        }), React.createElement(_Dialog, _extends({
+          onOk: function onOk() {
+            editor.emit(pluginKey + ".dialog.onOk");
+
+            _this2.handleClose();
+          },
+          onCancel: this.handleClose,
+          onClose: this.handleClose,
+          title: title
+        }, props.dialogProps, {
+          visible: dialogVisible
+        }), node));
+
+      case 'BalloonIcon':
+        return React.createElement(_Balloon, _extends({
+          trigger: this.renderIcon(function () {
+            _onClick2 && _onClick2.call(null, editor);
+          }),
+          triggerType: ['click', 'hover']
+        }, props.balloonProps), node);
+
+      case 'Custom':
+        return dotted ? React.createElement(_Badge, {
+          dot: true
+        }, node) : node;
+
+      default:
+        return null;
+    }
+  };
+
+  return TopPlugin;
+}(PureComponent);
+
+TopPlugin.displayName = 'lowcodeTopPlugin';
+TopPlugin.defaultProps = {
+  active: false,
+  config: {},
+  disabled: false,
+  dotted: false,
+  locked: false,
+  onClick: function onClick() {}
+};
+export { TopPlugin as default };

packages/editor-skeleton/es/components/TopPlugin/index.scss

@@ -0,0 +1,2 @@
+.lowcode-top-addon {
+}

packages/editor-skeleton/es/config/skeleton.d.ts

@@ -0,0 +1,14 @@
+declare const routerConfig: {
+    path: string;
+    component: any;
+    children: ({
+        path: string;
+        component: any;
+        redirect?: undefined;
+    } | {
+        path: string;
+        redirect: string;
+        component?: undefined;
+    })[];
+}[];
+export default routerConfig;

packages/editor-skeleton/es/config/skeleton.js

@@ -0,0 +1,14 @@
+import Dashboard from '@/pages/Dashboard';
+import BasicLayout from '@/layouts/BasicLayout';
+var routerConfig = [{
+  path: '/',
+  component: BasicLayout,
+  children: [{
+    path: '/dashboard',
+    component: Dashboard
+  }, {
+    path: '/',
+    redirect: '/dashboard'
+  }]
+}];
+export default routerConfig;

packages/editor-skeleton/es/config/utils.d.ts

@@ -0,0 +1,2 @@
+declare const asideMenuConfig: any[];
+export { asideMenuConfig };

packages/editor-skeleton/es/config/utils.js

@@ -0,0 +1,3 @@
+// 菜单配置
+var asideMenuConfig = [];
+export { asideMenuConfig };

packages/editor-skeleton/es/global.scss

@@ -0,0 +1,33 @@
+body {
+  font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
+    Arial, PingFang SC-Light, Microsoft YaHei;
+  font-size: 12px;
+  padding: 0;
+  margin: 0;
+  * {
+    box-sizing: border-box;
+  }
+}
+.next-loading {
+  .next-loading-wrap {
+    height: 100%;
+  }
+}
+.lowcode-editor {
+  .lowcode-main-content {
+    position: absolute;
+    top: 48px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    background-color: #d8d8d8;
+  }
+  .lowcode-center-area {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    overflow: auto;
+  }
+}

packages/editor-skeleton/es/index.d.ts

@@ -0,0 +1,8 @@
+import { PureComponent } from 'react';
+import './global.scss';
+export default class Skeleton extends PureComponent {
+    static displayName: string;
+    constructor(props: any);
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}

packages/editor-skeleton/es/index.js

@@ -0,0 +1,70 @@
+import _ConfigProvider from "@alifd/next/es/config-provider";
+import _Loading from "@alifd/next/es/loading";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react'; // import Editor from '@ali/lowcode-engine-editor';
+
+import TopArea from './layouts/TopArea';
+import LeftArea from './layouts/LeftArea';
+import CenterArea from './layouts/CenterArea';
+import RightArea from './layouts/RightArea';
+import './global.scss';
+
+var Skeleton = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(Skeleton, _PureComponent);
+
+  function Skeleton(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this; // this.editor = new Editor(props.config, props.utils);
+
+    _this.editor = {
+      on: function on() {},
+      off: function off() {},
+      config: props.config,
+      pluginComponents: props.pluginComponents
+    };
+    return _this;
+  }
+
+  var _proto = Skeleton.prototype;
+
+  _proto.componentWillUnmount = function componentWillUnmount() {// this.editor && this.editor.destroy();
+    // this.editor = null;
+  };
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        location = _this$props.location,
+        history = _this$props.history,
+        messages = _this$props.messages;
+    this.editor.location = location;
+    this.editor.history = history;
+    this.editor.messages = messages;
+    return React.createElement(_ConfigProvider, null, React.createElement(_Loading, {
+      tip: "Loading",
+      size: "large",
+      visible: false,
+      shape: "fusion-reactor",
+      fullScreen: true
+    }, React.createElement("div", {
+      className: "lowcode-editor"
+    }, React.createElement(TopArea, {
+      editor: this.editor
+    }), React.createElement("div", {
+      className: "lowcode-main-content"
+    }, React.createElement(LeftArea.Nav, {
+      editor: this.editor
+    }), React.createElement(LeftArea.Panel, {
+      editor: this.editor
+    }), React.createElement(CenterArea, {
+      editor: this.editor
+    }), React.createElement(RightArea, {
+      editor: this.editor
+    })))));
+  };
+
+  return Skeleton;
+}(PureComponent);
+
+Skeleton.displayName = 'lowcodeEditorSkeleton';
+export { Skeleton as default };

packages/editor-skeleton/es/layouts/CenterArea/index.d.ts

@@ -0,0 +1,7 @@
+import { PureComponent } from 'react';
+import './index.scss';
+export default class CenterArea extends PureComponent {
+    static displayName: string;
+    constructor(props: any);
+    render(): JSX.Element;
+}

packages/editor-skeleton/es/layouts/CenterArea/index.js

@@ -0,0 +1,24 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react';
+import './index.scss';
+
+var CenterArea = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(CenterArea, _PureComponent);
+
+  function CenterArea(props) {
+    return _PureComponent.call(this, props) || this;
+  }
+
+  var _proto = CenterArea.prototype;
+
+  _proto.render = function render() {
+    return React.createElement("div", {
+      className: "lowcode-center-area"
+    });
+  };
+
+  return CenterArea;
+}(PureComponent);
+
+CenterArea.displayName = 'lowcodeCenterArea';
+export { CenterArea as default };

packages/editor-skeleton/es/layouts/CenterArea/index.scss

@@ -0,0 +1,3 @@
+.lowcode-center-area {
+  padding: 12px;
+}

packages/editor-skeleton/es/layouts/LeftArea/index.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    Nav: any;
+    Panel: any;
+};
+export default _default;

packages/editor-skeleton/es/layouts/LeftArea/index.js

@@ -0,0 +1,6 @@
+import Nav from './nav';
+import Panel from './panel';
+export default {
+  Nav: Nav,
+  Panel: Panel
+};

packages/editor-skeleton/es/layouts/LeftArea/index.scss

@@ -0,0 +1,21 @@
+.lowcode-left-area-nav {
+  width: 48px;
+  height: 100%;
+  background: #ffffff;
+  border-right: 1px solid #e8ebee;
+  position: relative;
+  .top-area {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    background: #ffffff;
+    max-height: 100%;
+  }
+  .bottom-area {
+    position: absolute;
+    bottom: 20px;
+    width: 100%;
+    background: #ffffff;
+    max-height: calc(100% - 20px);
+  }
+}

packages/editor-skeleton/es/layouts/LeftArea/nav.d.ts

@@ -0,0 +1,7 @@
+import { PureComponent } from 'react';
+import './index.scss';
+export default class LeftAreaPanel extends PureComponent {
+    static displayName: string;
+    constructor(props: any);
+    render(): JSX.Element;
+}

packages/editor-skeleton/es/layouts/LeftArea/nav.js

@@ -0,0 +1,24 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react';
+import './index.scss';
+
+var LeftAreaPanel = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(LeftAreaPanel, _PureComponent);
+
+  function LeftAreaPanel(props) {
+    return _PureComponent.call(this, props) || this;
+  }
+
+  var _proto = LeftAreaPanel.prototype;
+
+  _proto.render = function render() {
+    return React.createElement("div", {
+      className: "lowcode-left-area-nav"
+    });
+  };
+
+  return LeftAreaPanel;
+}(PureComponent);
+
+LeftAreaPanel.displayName = 'lowcodeLeftAreaNav';
+export { LeftAreaPanel as default };

packages/editor-skeleton/es/layouts/LeftArea/panel.d.ts

@@ -0,0 +1,7 @@
+import { PureComponent } from 'react';
+import './index.scss';
+export default class LeftAreaPanel extends PureComponent {
+    static displayName: string;
+    constructor(props: any);
+    render(): JSX.Element;
+}

packages/editor-skeleton/es/layouts/LeftArea/panel.js

@@ -0,0 +1,24 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react';
+import './index.scss';
+
+var LeftAreaPanel = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(LeftAreaPanel, _PureComponent);
+
+  function LeftAreaPanel(props) {
+    return _PureComponent.call(this, props) || this;
+  }
+
+  var _proto = LeftAreaPanel.prototype;
+
+  _proto.render = function render() {
+    return React.createElement("div", {
+      className: "lowcode-left-area-panel"
+    });
+  };
+
+  return LeftAreaPanel;
+}(PureComponent);
+
+LeftAreaPanel.displayName = 'lowcodeLeftAreaPanel';
+export { LeftAreaPanel as default };

packages/editor-skeleton/es/layouts/RightArea/index.d.ts

@@ -0,0 +1,7 @@
+import { PureComponent } from 'react';
+import './index.scss';
+export default class RightArea extends PureComponent {
+    static displayName: string;
+    constructor(props: any);
+    render(): JSX.Element;
+}

packages/editor-skeleton/es/layouts/RightArea/index.js

@@ -0,0 +1,24 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react';
+import './index.scss';
+
+var RightArea = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(RightArea, _PureComponent);
+
+  function RightArea(props) {
+    return _PureComponent.call(this, props) || this;
+  }
+
+  var _proto = RightArea.prototype;
+
+  _proto.render = function render() {
+    return React.createElement("div", {
+      className: "lowcode-right-area"
+    });
+  };
+
+  return RightArea;
+}(PureComponent);
+
+RightArea.displayName = 'lowcodeRightArea';
+export { RightArea as default };

packages/editor-skeleton/es/layouts/RightArea/index.scss

@@ -0,0 +1,157 @@
+.lowcode-right-area {
+  width: 300px;
+  height: 100%;
+  background-color: #ffffff;
+  border-left: 1px solid #e8ebee;
+  .right-plugin-title {
+    &.locked {
+      color: red !important;
+    }
+    &.active {
+      color: $color-brand1-9 !important;
+    }
+    &.disabled {
+      cursor: not-allowed;
+      color: $color-text1-1;
+    }
+  }
+
+  //tab定义
+  .next-tabs-wrapped.right-tabs {
+    display: flex;
+    flex-direction: column;
+    margin-top: -1px;
+    .next-tabs-bar {
+      z-index: 1;
+    }
+    .next-tabs-nav {
+      display: block;
+      .next-tabs-tab {
+        &:first-child {
+          border-left: none;
+        }
+        font-size: 14px;
+        text-align: center;
+        border-right: none !important;
+        margin-right: 0 !important;
+        width: 25%;
+        &.active {
+          background: none;
+          border-bottom-color: #f7f7f7 !important;
+        }
+      }
+    }
+  }
+  .next-tabs-content {
+    flex: 1;
+    .next-tabs-tabpane.active {
+      height: 100%;
+      overflow-y: auto;
+    }
+  }
+  //组件
+  .select-comp {
+    padding: 10px 16px;
+    line-height: 16px;
+    color: #989a9c;
+    & > span {
+      font-size: 12px;
+      line-height: 16px;
+      font-weight: 400;
+    }
+    & > .btn-wrap,
+    & > .next-btn {
+      width: auto;
+      margin: 0 5px;
+      float: right;
+    }
+  }
+
+  .unselected {
+    padding: 60px 0;
+    text-align: center;
+  }
+  //右侧属性面板样式调整;
+  .offset-56 {
+    padding-left: 56px;
+    margin-bottom: 16px;
+    overflow: hidden;
+  }
+  .fixedSpan.next-form-item {
+    & > .next-form-item-label {
+      width: 56px;
+      flex: none;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    & > .next-form-item-control {
+      padding-right: 24px;
+    }
+  }
+  .fixedSpan.next-form-item,
+  .offset-56 .next-form-item {
+    display: flex;
+    & > .next-form-item-control {
+      width: auto;
+      flex: 1;
+      max-width: none;
+      .next-input,
+      .next-select,
+      .next-radio-group,
+      .next-number-picker,
+      .luna-reactnode-btn,
+      .luna-monaco-button button,
+      .luna-object-button button {
+        width: 100%;
+      }
+      .next-number-picker {
+        width: 100%;
+        .next-after {
+          padding-right: 5px;
+        }
+      }
+      .next-radio-group {
+        display: flex;
+        label {
+          flex: 1;
+          text-align: center;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+  .topSpan.next-form-item {
+    margin-bottom: 4px;
+    & > .next-form-item-control {
+      padding-right: 24px;
+      .next-input,
+      .next-select,
+      .next-radio-group,
+      .next-number-picker,
+      .luna-reactnode-btn,
+      .luna-monaco-button button,
+      .luna-object-button button {
+        width: 100%;
+      }
+      .next-number-picker {
+        width: 100%;
+        .next-after {
+          padding-right: 5px;
+        }
+      }
+      .next-radio-group {
+        display: flex;
+        label {
+          flex: 1;
+          text-align: center;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}

packages/editor-skeleton/es/layouts/TopArea/index.d.ts

@@ -0,0 +1,11 @@
+import { PureComponent } from 'react';
+import './index.scss';
+export default class TopArea extends PureComponent {
+    static displayName: string;
+    constructor(props: any);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handlePluginStatusChange: () => void;
+    renderPluginList: (list?: any[]) => JSX.Element[];
+    render(): JSX.Element;
+}

packages/editor-skeleton/es/layouts/TopArea/index.js

@@ -0,0 +1,83 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _Grid from "@alifd/next/es/grid";
+import React, { PureComponent } from 'react';
+import TopPlugin from '../../components/TopPlugin';
+import './index.scss';
+var Row = _Grid.Row,
+    Col = _Grid.Col;
+
+var TopArea = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(TopArea, _PureComponent);
+
+  function TopArea(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _this.handlePluginStatusChange = function () {};
+
+    _this.renderPluginList = function (list) {
+      if (list === void 0) {
+        list = [];
+      }
+
+      return list.map(function (item, idx) {
+        var isDivider = item.type === 'Divider';
+        return React.createElement(Col, {
+          className: isDivider ? 'divider' : '',
+          key: isDivider ? idx : item.pluginKey,
+          style: {
+            width: item.props && item.props.width || 40,
+            flex: 'none'
+          }
+        }, !isDivider && React.createElement(TopPlugin, {
+          config: item,
+          pluginClass: _this.editor.pluginComponents[item.pluginKey],
+          status: _this.editor.pluginStatus[item.pluginKey]
+        }));
+      });
+    };
+
+    _this.editor = props.editor;
+    _this.config = _this.editor.config.plugins && _this.editor.config.plugins.topArea;
+    return _this;
+  }
+
+  var _proto = TopArea.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {};
+
+  _proto.componentWillUnmount = function componentWillUnmount() {};
+
+  _proto.render = function render() {
+    if (!this.config) return null;
+    var leftList = [];
+    var rightList = [];
+    this.config.forEach(function (item) {
+      var align = item.props && item.props.align === 'right' ? 'right' : 'left'; // 分隔符不允许相邻
+
+      if (item.type === 'Divider') {
+        var currentList = align === 'right' ? rightList : leftList;
+        if (currList.length === 0 || currList[currList.length - 1].type === 'Divider') return;
+      }
+
+      if (align === 'right') {
+        rightList.push(item);
+      } else {
+        leftList.push(item);
+      }
+    });
+    return React.createElement("div", {
+      className: "lowcode-top-area"
+    }, React.createElement("div", {
+      className: "left-area"
+    }, this.renderPluginList(leftList)), React.createElement("div", {
+      classname: "right-area"
+    }, this.renderPluginList(rightList)));
+  };
+
+  return TopArea;
+}(PureComponent);
+
+TopArea.displayName = 'lowcodeTopArea';
+export { TopArea as default };

packages/editor-skeleton/es/layouts/TopArea/index.scss

@@ -0,0 +1,5 @@
+.lowcode-top-area {
+  height: 48px;
+  background-color: #ffffff;
+  border-bottom: 1px solid #e8ebee;
+}

packages/editor-skeleton/es/locale/en-US.js

@@ -0,0 +1,10 @@
+export default {
+  loading: 'loading...',
+  rejectRedirect: 'Redirect is not allowed',
+  expand: 'Unfold',
+  fold: 'Fold',
+  pageNotExist: 'The current Page not exist',
+  enterFromAppCenter: 'Please enter from the app center',
+  noPermission: 'Sorry, you do not have the develop permission',
+  getPermission: 'Please connect the app owners {owners} to get the permission'
+};

packages/editor-skeleton/es/locale/ja-JP.js

@@ -0,0 +1 @@
+export default {};

packages/editor-skeleton/es/locale/zh-CN.js

@@ -0,0 +1,10 @@
+export default {
+  loading: '加载中...',
+  rejectRedirect: '开发中，已阻止发生跳转',
+  expand: '展开',
+  fold: '收起',
+  pageNotExist: '当前访问地址不存在',
+  enterFromAppCenter: '请从应用中心入口重新进入',
+  noPermission: '抱歉，您暂无开发权限',
+  getPermission: '请移步应用中心申请开发权限, 或联系 {owners} 开通权限'
+};

packages/editor-skeleton/es/locale/zh-TW.js

@@ -0,0 +1 @@
+export default {};

packages/editor-skeleton/es/style.js

@@ -0,0 +1,8 @@
+import '@alifd/next/es/config-provider/style';
+import '@alifd/next/es/loading/style';
+import '@alifd/next/es/grid/style';
+import '@alifd/next/es/balloon/style';
+import '@alifd/next/es/dialog/style';
+import '@alifd/next/es/badge/style';
+import '@alifd/next/es/button/style';
+import '@alifd/next/es/icon/style';

packages/editor-skeleton/jsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "jsx": "react",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

packages/editor-skeleton/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@ali/lowcode-engine-skeleton",
+  "version": "0.0.1",
+  "description": "alibaba lowcode editor skeleton",
+  "files": [
+    "demo/",
+    "es/",
+    "lib/",
+    "build/"
+  ],
+  "main": "lib/index.tsx",
+  "module": "es/index.js",
+  "stylePath": "style.js",
+  "scripts": {
+    "start": "build-scripts start",
+    "build": "build-scripts build --skip-demo",
+    "prepublishOnly": "npm run prettier && npm run build",
+    "lint": "eslint --cache --ext .js,.jsx ./",
+    "prettier": "prettier  --write \"./src/**/*.{ts,tsx,js,jsx,ejs,less,css,scss,json}\" "
+  },
+  "keywords": [
+    "lowcode",
+    "editor"
+  ],
+  "author": "xiayang.xy",
+  "dependencies": {
+    "@alifd/next": "^1.x",
+    "@icedesign/theme": "^1.x",
+    "@types/react": "^16.8.3",
+    "@types/react-dom": "^16.8.2",
+    "moment": "^2.23.0",
+    "prop-types": "^15.5.8",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
+    "react-router-dom": "^5.0.1"
+  },
+  "devDependencies": {
+    "@alib/build-scripts": "^0.1.3",
+    "@alifd/next": "1.x",
+    "@ice/spec": "^0.1.1",
+    "@types/lodash": "^4.14.149",
+    "@types/react": "^16.9.13",
+    "@types/react-dom": "^16.9.4",
+    "build-plugin-component": "^0.2.7-1",
+    "build-plugin-fusion": "^0.1.0",
+    "build-plugin-moment-locales": "^0.1.0",
+    "eslint": "^6.0.1",
+    "prettier": "^1.19.1",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ice-lab/react-materials/tree/master/scaffolds/ice-ts"
+  },
+  "homepage": "https://unpkg.alibaba-inc.com/@ali/lowcode-engine-skeleton@0.0.1/build/index.html"
+}

packages/editor-skeleton/src/components/LeftPlugin/index.scss

@@ -0,0 +1,59 @@
+.luna-left-addon {
+  font-size: 16px;
+  text-align: center;
+  line-height: 36px;
+  height: 36px;
+  position: relative;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: #777;
+  &.collapse {
+    height: 40px;
+    color: #8c8c8c;
+    border-bottom: 1px solid #bfbfbf;
+  }
+  &.locked {
+    color: red !important;
+  }
+  &.active {
+    color: #fff !important;
+    background-color: $color-brand1-9 !important;
+    &.disabled {
+      color: #fff;
+      background-color: $color-fill1-7;
+    }
+  }
+  &.disabled {
+    cursor: not-allowed;
+    color: $color-text1-1;
+  }
+  &:hover {
+    background-color: $color-brand1-1;
+    color: $color-brand1-6;
+    &:before {
+      content: attr(data-tooltip);
+      display: block;
+      position: absolute;
+      left: 50px;
+      top: 5px;
+      line-height: 18px;
+      font-size: 12px;
+      white-space: nowrap;
+      padding: 6px 8px;
+      border-radius: 4px;
+      background: rgba(0, 0, 0, 0.75);
+      color: #fff;
+      z-index: 100;
+    }
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      left: 40px;
+      top: 15px;
+      border: 5px solid transparent;
+      border-right-color: rgba(0, 0, 0, 0.75);
+      z-index: 100;
+    }
+  }
+}

packages/editor-skeleton/src/components/LeftPlugin/index.tsx

@@ -0,0 +1,223 @@
+import React, { PureComponent, Fragment } from 'react';
+
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import AppContext from '@ali/iceluna-sdk/lib/context/appContext';
+import { Balloon, Dialog, Icon, Badge } from '@alife/next';
+
+import './index.scss';
+export default class LeftAddon extends PureComponent {
+  static displayName = 'LunaLeftAddon';
+  static propTypes = {
+    active: PropTypes.bool,
+    config: PropTypes.shape({
+      addonKey: PropTypes.string,
+      addonProps: PropTypes.object,
+      props: PropTypes.object,
+      type: PropTypes.oneOf([
+        'DialogIcon',
+        'BalloonIcon',
+        'PanelIcon',
+        'LinkIcon',
+        'Icon',
+        'Custom',
+      ]),
+    }),
+    disabled: PropTypes.bool,
+    dotted: PropTypes.bool,
+    locked: PropTypes.bool,
+    onClick: PropTypes.func,
+  };
+  static defaultProps = {
+    active: false,
+    config: {},
+    disabled: false,
+    dotted: false,
+    locked: false,
+    onClick: () => {},
+  };
+  static contextType = AppContext;
+
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      dialogVisible: false,
+    };
+    this.appHelper = context.appHelper;
+    this.utils = this.appHelper.utils;
+    this.constants = this.appHelper.constants;
+  }
+
+  componentDidMount() {
+    const { config } = this.props;
+    const addonKey = config && config.addonKey;
+    const appHelper = this.appHelper;
+    if (appHelper && addonKey) {
+      appHelper.on(`${addonKey}.dialog.show`, this.handleShow);
+      appHelper.on(`${addonKey}.dialog.close`, this.handleClose);
+    }
+  }
+
+  componentWillUnmount() {
+    const { config } = this.props;
+    const appHelper = this.appHelper;
+    const addonKey = config && config.addonKey;
+    if (appHelper && addonKey) {
+      appHelper.off(`${addonKey}.dialog.show`, this.handleShow);
+      appHelper.off(`${addonKey}.dialog.close`, this.handleClose);
+    }
+  }
+
+  handleClose = () => {
+    const addonKey = this.props.config && this.props.config.addonKey;
+    const currentAddon =
+      this.appHelper.addons && this.appHelper.addons[addonKey];
+    if (currentAddon) {
+      this.utils.transformToPromise(currentAddon.close()).then(() => {
+        this.setState({
+          dialogVisible: false,
+        });
+      });
+    }
+  };
+
+  handleOpen = () => {
+    // todo 对话框类型的插件初始时拿不到插件实例
+    this.setState({
+      dialogVisible: true,
+    });
+  };
+
+  handleShow = () => {
+    const { disabled, config, onClick } = this.props;
+    const addonKey = config && config.addonKey;
+    if (disabled || !addonKey) return;
+    //考虑到弹窗情况，延时发送消息
+    setTimeout(() => this.appHelper.emit(`${addonKey}.addon.activate`), 0);
+    this.handleOpen();
+    onClick && onClick();
+  };
+
+  renderIcon = clickCallback => {
+    const { active, disabled, dotted, locked, onClick, config } = this.props;
+    const { addonKey, props } = config || {};
+    const { icon, title } = props || {};
+    return (
+      <div
+        className={classNames('luna-left-addon', addonKey, {
+          active,
+          disabled,
+          locked,
+        })}
+        data-tooltip={title}
+        onClick={() => {
+          if (disabled) return;
+          //考虑到弹窗情况，延时发送消息
+          clickCallback && clickCallback();
+          onClick && onClick();
+        }}
+      >
+        {dotted ? (
+          <Badge dot>
+            <Icon type={icon} size="small" />
+          </Badge>
+        ) : (
+          <Icon type={icon} size="small" />
+        )}
+      </div>
+    );
+  };
+
+  render() {
+    const { dotted, locked, active, disabled, config } = this.props;
+    const { addonKey, props, type, addonProps } = config || {};
+    const { onClick, title } = props || {};
+    const { dialogVisible } = this.state;
+    const { appHelper, components } = this.context;
+    if (!addonKey || !type || !props) return null;
+    const componentName = appHelper.utils.generateAddonCompName(addonKey);
+    const localeProps = {};
+    const { locale, messages } = appHelper;
+    if (locale) {
+      localeProps.locale = locale;
+    }
+    if (messages && messages[componentName]) {
+      localeProps.messages = messages[componentName];
+    }
+    const AddonComp = components && components[componentName];
+    const node =
+      (AddonComp && (
+        <AddonComp
+          active={active}
+          locked={locked}
+          disabled={disabled}
+          config={config}
+          onClick={() => {
+            onClick && onClick.call(null, appHelper);
+          }}
+          {...localeProps}
+          {...(addonProps || {})}
+        />
+      )) ||
+      null;
+
+    switch (type) {
+      case 'LinkIcon':
+        return (
+          <a {...(props.linkProps || {})}>
+            {this.renderIcon(() => {
+              onClick && onClick.call(null, appHelper);
+            })}
+          </a>
+        );
+      case 'Icon':
+        return this.renderIcon(() => {
+          onClick && onClick.call(null, appHelper);
+        });
+      case 'DialogIcon':
+        return (
+          <Fragment>
+            {this.renderIcon(() => {
+              onClick && onClick.call(null, appHelper);
+              this.handleOpen();
+            })}
+            <Dialog
+              onOk={() => {
+                appHelper.emit(`${addonKey}.dialog.onOk`);
+                this.handleClose();
+              }}
+              onCancel={this.handleClose}
+              onClose={this.handleClose}
+              title={title}
+              {...(props.dialogProps || {})}
+              visible={dialogVisible}
+            >
+              {node}
+            </Dialog>
+          </Fragment>
+        );
+      case 'BalloonIcon':
+        return (
+          <Balloon
+            trigger={this.renderIcon(() => {
+              onClick && onClick.call(null, appHelper);
+            })}
+            align="r"
+            triggerType={['click', 'hover']}
+            {...(props.balloonProps || {})}
+          >
+            {node}
+          </Balloon>
+        );
+      case 'PanelIcon':
+        return this.renderIcon(() => {
+          onClick && onClick.call(null, appHelper);
+          this.handleOpen();
+        });
+      case 'Custom':
+        return dotted ? <Badge dot>{node}</Badge> : node;
+      default:
+        return null;
+    }
+  }
+}

packages/editor-skeleton/src/components/TopIcon/index.scss

@@ -0,0 +1,32 @@
+.next-btn.next-large.lowcode-top-btn {
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  margin: 4px -2px;
+  text-align: center;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  color: #777;
+  &.disabled {
+    cursor: not-allowed;
+    color: $color-text1-1;
+  }
+  &.locked {
+    color: red !important;
+  }
+  i.next-icon {
+    &:before {
+      font-size: 17px;
+    }
+    margin-right: 0;
+    line-height: 18px;
+  }
+  span {
+    display: block;
+    margin: 0px -5px 0;
+    line-height: 16px;
+    text-align: center;
+    font-size: 12px;
+    transform: scale(0.8);
+  }
+}

packages/editor-skeleton/src/components/TopIcon/index.tsx

@@ -0,0 +1,68 @@
+import React, { PureComponent } from 'react';
+
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Icon, Button } from '@alifd/next';
+import './index.scss';
+export default class TopIcon extends PureComponent {
+  static displayName = 'TopIcon';
+  static propTypes = {
+    active: PropTypes.bool,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    icon: PropTypes.string,
+    id: PropTypes.string,
+    locked: PropTypes.bool,
+    onClick: PropTypes.func,
+    showTitle: PropTypes.bool,
+    style: PropTypes.object,
+    title: PropTypes.string,
+  };
+  static defaultProps = {
+    active: false,
+    className: '',
+    disabled: false,
+    icon: '',
+    id: '',
+    locked: false,
+    onClick: () => {},
+    showTitle: false,
+    style: {},
+    title: '',
+  };
+
+  render() {
+    const {
+      active,
+      disabled,
+      icon,
+      locked,
+      title,
+      className,
+      id,
+      style,
+      showTitle,
+      onClick,
+    } = this.props;
+    return (
+      <Button
+        type="normal"
+        size="large"
+        text={true}
+        className={classNames('lowcode-top-btn', className, {
+          active,
+          disabled,
+          locked,
+        })}
+        id={id}
+        style={style}
+        onClick={disabled ? null : onClick}
+      >
+        <div>
+          <Icon size="large" type={icon} />
+          {showTitle && <span>{title}</span>}
+        </div>
+      </Button>
+    );
+  }
+}

packages/editor-skeleton/src/components/TopPlugin/index.scss

@@ -0,0 +1,2 @@
+.lowcode-top-addon {
+}

packages/editor-skeleton/src/components/TopPlugin/index.tsx

@@ -0,0 +1,174 @@
+import React, { PureComponent, Fragment } from 'react';
+
+import PropTypes from 'prop-types';
+import TopIcon from '../TopIcon';
+import { Balloon, Badge, Dialog } from '@alifd/next';
+
+import './index.scss';
+export default class TopPlugin extends PureComponent {
+  static displayName = 'lowcodeTopPlugin';
+  
+  static defaultProps = {
+    active: false,
+    config: {},
+    disabled: false,
+    dotted: false,
+    locked: false,
+    onClick: () => {},
+  };
+
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      dialogVisible: false,
+    };
+  }
+
+  componentDidMount() {
+    const { config } = this.props;
+    const pluginKey = config && config.pluginKey;
+    // const appHelper = this.appHelper;
+    // if (appHelper && addonKey) {
+    //   appHelper.on(`${addonKey}.dialog.show`, this.handleShow);
+    //   appHelper.on(`${addonKey}.dialog.close`, this.handleClose);
+    // }
+  }
+
+  componentWillUnmount() {
+    // const { config } = this.props;
+    // const addonKey = config && config.addonKey;
+    // const appHelper = this.appHelper;
+    // if (appHelper && addonKey) {
+    //   appHelper.off(`${addonKey}.dialog.show`, this.handleShow);
+    //   appHelper.off(`${addonKey}.dialog.close`, this.handleClose);
+    // }
+  }
+
+  handleShow = () => {
+    const { disabled, config, onClick } = this.props;
+    const addonKey = config && config.addonKey;
+    if (disabled || !addonKey) return;
+    //考虑到弹窗情况，延时发送消息
+    setTimeout(() => this.appHelper.emit(`${addonKey}.addon.activate`), 0);
+    this.handleOpen();
+    onClick && onClick();
+  };
+
+  handleClose = () => {
+    const addonKey = this.props.config && this.props.config.addonKey;
+    const currentAddon =
+      this.appHelper.addons && this.appHelper.addons[addonKey];
+    if (currentAddon) {
+      this.utils.transformToPromise(currentAddon.close()).then(() => {
+        this.setState({
+          dialogVisible: false,
+        });
+      });
+    }
+  };
+
+  handleOpen = () => {
+    // todo dialog类型的插件初始时拿不动插件实例
+    this.setState({
+      dialogVisible: true,
+    });
+  };
+
+  renderIcon = clickCallback => {
+    const { active, disabled, dotted, locked, config, onClick } = this.props;
+    const { pluginKey, props } = config || {};
+    const { icon, title } = props || {};
+    const node = (
+      <TopIcon
+        className={`lowcode-top-addon ${pluginKey}`}
+        active={active}
+        disabled={disabled}
+        locked={locked}
+        icon={icon}
+        title={title}
+        onClick={() => {
+          if (disabled) return;
+          //考虑到弹窗情况，延时发送消息
+          setTimeout(
+            () => this.appHelper.emit(`${pluginKey}.addon.activate`),
+            0,
+          );
+          clickCallback && clickCallback();
+          onClick && onClick();
+        }}
+      />
+    );
+    return dotted ? <Badge dot>{node}</Badge> : node;
+  };
+
+  render() {
+    const { active, dotted, locked, disabled, config, editor, pluginClass: Comp } = this.props;
+    const { pluginKey, pluginProps, props, type } = config || {};
+    const { onClick, title } = props || {};
+    const { dialogVisible } = this.state;
+    if (!pluginKey || !type || !Comp) return null;
+    const node = <Comp 
+      active={active}
+      locked={locked}
+      disabled={disabled}
+      config={config}
+      onClick={() => {
+        onClick && onClick.call(null, editor);
+      }}
+      {...pluginProps}
+    />;
+
+    switch (type) {
+      case 'LinkIcon':
+        return (
+          <a {...props.linkProps}>
+            {this.renderIcon(() => {
+              onClick && onClick.call(null, editor);
+            })}
+          </a>
+        );
+      case 'Icon':
+        return this.renderIcon(() => {
+          onClick && onClick.call(null, editor);
+        });
+      case 'DialogIcon':
+        return (
+          <Fragment>
+            {this.renderIcon(() => {
+              onClick && onClick.call(null, editor);
+              this.handleOpen();
+            })}
+            <Dialog
+              onOk={() => {
+                editor.emit(`${pluginKey}.dialog.onOk`);
+                this.handleClose();
+              }}
+              onCancel={this.handleClose}
+              onClose={this.handleClose}
+              title={title}
+              {...props.dialogProps}
+              visible={dialogVisible}
+            >
+              {node}
+            </Dialog>
+          </Fragment>
+        );
+      case 'BalloonIcon':
+        return (
+          <Balloon
+            trigger={this.renderIcon(() => {
+              onClick && onClick.call(null, editor);
+            })}
+            triggerType={['click', 'hover']}
+            {...props.balloonProps}
+          >
+            {node}
+          </Balloon>
+        );
+      case 'Custom':
+        return dotted ? <Badge dot>{node}</Badge> : node;
+      default:
+        return null;
+    }
+  }
+}

packages/editor-skeleton/src/config/skeleton.ts

@@ -0,0 +1,21 @@
+import Dashboard from '@/pages/Dashboard';
+import BasicLayout from '@/layouts/BasicLayout';
+
+const routerConfig = [
+  {
+    path: '/',
+    component: BasicLayout,
+    children: [
+      {
+        path: '/dashboard',
+        component: Dashboard,
+      },
+      {
+        path: '/',
+        redirect: '/dashboard',
+      },
+    ],
+  },
+];
+
+export default routerConfig;

packages/editor-skeleton/src/config/utils.ts

@@ -0,0 +1,5 @@
+// 菜单配置
+
+const asideMenuConfig = [];
+
+export { asideMenuConfig };

packages/editor-skeleton/src/global.scss

@@ -0,0 +1,33 @@
+body {
+  font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
+    Arial, PingFang SC-Light, Microsoft YaHei;
+  font-size: 12px;
+  padding: 0;
+  margin: 0;
+  * {
+    box-sizing: border-box;
+  }
+}
+.next-loading {
+  .next-loading-wrap {
+    height: 100%;
+  }
+}
+.lowcode-editor {
+  .lowcode-main-content {
+    position: absolute;
+    top: 48px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    background-color: #d8d8d8;
+  }
+  .lowcode-center-area {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    overflow: auto;
+  }
+}

packages/editor-skeleton/src/index.tsx

@@ -0,0 +1,60 @@
+import React, { PureComponent } from 'react';
+
+// import Editor from '@ali/lowcode-engine-editor';
+import { Loading, ConfigProvider } from '@alifd/next';
+import defaultConfig from './config/skeleton';
+
+import TopArea from './layouts/TopArea';
+import LeftArea from './layouts/LeftArea';
+import CenterArea from './layouts/CenterArea';
+import RightArea from './layouts/RightArea';
+
+import './global.scss';
+
+export default class Skeleton extends PureComponent {
+  static displayName = 'lowcodeEditorSkeleton';
+
+  constructor(props) {
+    super(props);
+    // this.editor = new Editor(props.config, props.utils);
+    this.editor = {
+      on: () => {},
+      off: () => {},
+      config: props.config,
+      pluginComponents: props.pluginComponents
+    };
+  }
+
+  componentWillUnmount() {
+    // this.editor && this.editor.destroy();
+    // this.editor = null;
+  }
+
+  render() {
+    const { location, history, messages } = this.props;
+    this.editor.location = location;
+    this.editor.history = history;
+    this.editor.messages = messages;
+    return (
+      <ConfigProvider>
+        <Loading
+          tip="Loading"
+          size="large"
+          visible={false}
+          shape="fusion-reactor"
+          fullScreen
+        >
+          <div className="lowcode-editor">
+            <TopArea editor={this.editor}/>
+            <div className="lowcode-main-content">
+              <LeftArea.Nav editor={this.editor}/>
+              <LeftArea.Panel editor={this.editor}/>
+              <CenterArea editor={this.editor}/>
+              <RightArea editor={this.editor}/>
+            </div>
+          </div>
+        </Loading>
+      </ConfigProvider>
+    );
+  }
+}

packages/editor-skeleton/src/layouts/CenterArea/index.scss

@@ -0,0 +1,3 @@
+.lowcode-center-area {
+  padding: 12px;
+}

packages/editor-skeleton/src/layouts/CenterArea/index.tsx

@@ -0,0 +1,15 @@
+import React, { PureComponent } from 'react';
+
+import './index.scss';
+
+export default class CenterArea extends PureComponent {
+  static displayName = 'lowcodeCenterArea';
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return <div className="lowcode-center-area"></div>;
+  }
+}

packages/editor-skeleton/src/layouts/LeftArea/index.scss

@@ -0,0 +1,21 @@
+.lowcode-left-area-nav {
+  width: 48px;
+  height: 100%;
+  background: #ffffff;
+  border-right: 1px solid #e8ebee;
+  position: relative;
+  .top-area {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    background: #ffffff;
+    max-height: 100%;
+  }
+  .bottom-area {
+    position: absolute;
+    bottom: 20px;
+    width: 100%;
+    background: #ffffff;
+    max-height: calc(100% - 20px);
+  }
+}

packages/editor-skeleton/src/layouts/LeftArea/index.tsx

@@ -0,0 +1,7 @@
+import Nav from './nav';
+import Panel from './panel';
+
+export default {
+  Nav,
+  Panel,
+};

packages/editor-skeleton/src/layouts/LeftArea/nav.tsx

@@ -0,0 +1,15 @@
+import React, { PureComponent } from 'react';
+
+import './index.scss';
+
+export default class LeftAreaPanel extends PureComponent {
+  static displayName = 'lowcodeLeftAreaNav';
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return <div className="lowcode-left-area-nav" />;
+  }
+}

packages/editor-skeleton/src/layouts/LeftArea/panel.tsx

@@ -0,0 +1,15 @@
+import React, { PureComponent } from 'react';
+
+import './index.scss';
+
+export default class LeftAreaPanel extends PureComponent {
+  static displayName = 'lowcodeLeftAreaPanel';
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return <div className="lowcode-left-area-panel" />;
+  }
+}

packages/editor-skeleton/src/layouts/RightArea/index.scss

@@ -0,0 +1,157 @@
+.lowcode-right-area {
+  width: 300px;
+  height: 100%;
+  background-color: #ffffff;
+  border-left: 1px solid #e8ebee;
+  .right-plugin-title {
+    &.locked {
+      color: red !important;
+    }
+    &.active {
+      color: $color-brand1-9 !important;
+    }
+    &.disabled {
+      cursor: not-allowed;
+      color: $color-text1-1;
+    }
+  }
+
+  //tab定义
+  .next-tabs-wrapped.right-tabs {
+    display: flex;
+    flex-direction: column;
+    margin-top: -1px;
+    .next-tabs-bar {
+      z-index: 1;
+    }
+    .next-tabs-nav {
+      display: block;
+      .next-tabs-tab {
+        &:first-child {
+          border-left: none;
+        }
+        font-size: 14px;
+        text-align: center;
+        border-right: none !important;
+        margin-right: 0 !important;
+        width: 25%;
+        &.active {
+          background: none;
+          border-bottom-color: #f7f7f7 !important;
+        }
+      }
+    }
+  }
+  .next-tabs-content {
+    flex: 1;
+    .next-tabs-tabpane.active {
+      height: 100%;
+      overflow-y: auto;
+    }
+  }
+  //组件
+  .select-comp {
+    padding: 10px 16px;
+    line-height: 16px;
+    color: #989a9c;
+    & > span {
+      font-size: 12px;
+      line-height: 16px;
+      font-weight: 400;
+    }
+    & > .btn-wrap,
+    & > .next-btn {
+      width: auto;
+      margin: 0 5px;
+      float: right;
+    }
+  }
+
+  .unselected {
+    padding: 60px 0;
+    text-align: center;
+  }
+  //右侧属性面板样式调整;
+  .offset-56 {
+    padding-left: 56px;
+    margin-bottom: 16px;
+    overflow: hidden;
+  }
+  .fixedSpan.next-form-item {
+    & > .next-form-item-label {
+      width: 56px;
+      flex: none;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    & > .next-form-item-control {
+      padding-right: 24px;
+    }
+  }
+  .fixedSpan.next-form-item,
+  .offset-56 .next-form-item {
+    display: flex;
+    & > .next-form-item-control {
+      width: auto;
+      flex: 1;
+      max-width: none;
+      .next-input,
+      .next-select,
+      .next-radio-group,
+      .next-number-picker,
+      .luna-reactnode-btn,
+      .luna-monaco-button button,
+      .luna-object-button button {
+        width: 100%;
+      }
+      .next-number-picker {
+        width: 100%;
+        .next-after {
+          padding-right: 5px;
+        }
+      }
+      .next-radio-group {
+        display: flex;
+        label {
+          flex: 1;
+          text-align: center;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+  .topSpan.next-form-item {
+    margin-bottom: 4px;
+    & > .next-form-item-control {
+      padding-right: 24px;
+      .next-input,
+      .next-select,
+      .next-radio-group,
+      .next-number-picker,
+      .luna-reactnode-btn,
+      .luna-monaco-button button,
+      .luna-object-button button {
+        width: 100%;
+      }
+      .next-number-picker {
+        width: 100%;
+        .next-after {
+          padding-right: 5px;
+        }
+      }
+      .next-radio-group {
+        display: flex;
+        label {
+          flex: 1;
+          text-align: center;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}

packages/editor-skeleton/src/layouts/RightArea/index.tsx

@@ -0,0 +1,15 @@
+import React, { PureComponent } from 'react';
+
+import './index.scss';
+
+export default class RightArea extends PureComponent {
+  static displayName = 'lowcodeRightArea';
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return <div className="lowcode-right-area" />;
+  }
+}

packages/editor-skeleton/src/layouts/TopArea/index.scss

@@ -0,0 +1,5 @@
+.lowcode-top-area {
+  height: 48px;
+  background-color: #ffffff;
+  border-bottom: 1px solid #e8ebee;
+}

packages/editor-skeleton/src/layouts/TopArea/index.tsx

@@ -0,0 +1,79 @@
+import React, { PureComponent } from 'react';
+import { Grid } from '@alifd/next';
+import TopPlugin from '../../components/TopPlugin';
+import './index.scss';
+
+const { Row, Col } = Grid;
+
+export default class TopArea extends PureComponent {
+  static displayName = 'lowcodeTopArea';
+
+  constructor(props) {
+    super(props);
+    this.editor = props.editor;
+    this.config = this.editor.config.plugins && this.editor.config.plugins.topArea;
+  }
+
+  componentDidMount() {
+  }
+  componentWillUnmount() {
+  }
+
+  handlePluginStatusChange = () => {};
+
+  renderPluginList = (list = []) => {
+    return list.map((item, idx) => {
+      const isDivider = item.type === 'Divider';
+
+      return (
+        <Col
+          className={isDivider ? 'divider' : ''}
+          key={isDivider ? idx : item.pluginKey}
+          style={{
+            width: (item.props && item.props.width) || 40,
+            flex: 'none',
+          }}
+        >
+          {!isDivider && (
+            <TopPlugin
+              config={item}
+              pluginClass={this.editor.pluginComponents[item.pluginKey]}
+              status={this.editor.pluginStatus[item.pluginKey]}
+            />
+          )}
+        </Col>
+      );
+    });
+  };
+
+  render() {
+    if (!this.config) return null;
+    const leftList = [];
+    const rightList = [];
+    this.config.forEach(item => {
+      const align =
+        item.props && item.props.align === 'right' ? 'right' : 'left';
+      // 分隔符不允许相邻
+      if (item.type === 'Divider') {
+        const currentList = align === 'right' ? rightList : leftList;
+        if (
+          currList.length === 0 ||
+          currList[currList.length - 1].type === 'Divider'
+        )
+          return;
+      }
+      if (align === 'right') {
+        rightList.push(item);
+      } else {
+        leftList.push(item);
+      }
+    });
+
+    return (
+      <div className="lowcode-top-area">
+        <div className="left-area">{this.renderPluginList(leftList)}</div>
+        <div classname="right-area">{this.renderPluginList(rightList)}</div>
+      </div>
+    );
+  }
+}

packages/editor-skeleton/src/locale/en-US.js

@@ -0,0 +1,10 @@
+export default {
+  loading: 'loading...',
+  rejectRedirect: 'Redirect is not allowed',
+  expand: 'Unfold',
+  fold: 'Fold',
+  pageNotExist: 'The current Page not exist',
+  enterFromAppCenter: 'Please enter from the app center',
+  noPermission: 'Sorry, you do not have the develop permission',
+  getPermission: 'Please connect the app owners {owners} to get the permission',
+};

packages/editor-skeleton/src/locale/ja-JP.js

@@ -0,0 +1 @@
+export default {};

packages/editor-skeleton/src/locale/zh-CN.js

@@ -0,0 +1,10 @@
+export default {
+  loading: '加载中...',
+  rejectRedirect: '开发中，已阻止发生跳转',
+  expand: '展开',
+  fold: '收起',
+  pageNotExist: '当前访问地址不存在',
+  enterFromAppCenter: '请从应用中心入口重新进入',
+  noPermission: '抱歉，您暂无开发权限',
+  getPermission: '请移步应用中心申请开发权限, 或联系 {owners} 开通权限',
+};

packages/editor-skeleton/src/locale/zh-TW.js

@@ -0,0 +1 @@
+export default {};

packages/editor-skeleton/tests/index.js

@@ -0,0 +1 @@
+// test file

packages/editor-skeleton/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compileOnSave": false,
+  "buildOnSave": false,
+  "compilerOptions": {
+    "outDir": "build",
+    "module": "esnext",
+    "target": "es6",
+    "jsx": "react",
+    "moduleResolution": "node",
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "noUnusedLocals": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/*.ts", "src/*.tsx"],
+  "exclude": ["node_modules", "build", "public"]
+}

packages/editor/.editorconfig

@@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false