fix: 注册 builtinSetters / live-editing, 增加 init

packages/engine/package.json

@@ -4,7 +4,6 @@
   "description": "Universal API for AliLowCode engine",
   "main": "lib/engine.js",
   "module": "es/engine.js",
-  "private": true,
   "files": [
     "dist",
     "es",

packages/engine/src/engine.ts

@@ -1,6 +1,7 @@
 import { createElement } from 'react';
 import { render } from 'react-dom';
 import { globalContext, Editor } from '@ali/lowcode-editor-core';
+import builtinSetters from '@ali/lowcode-editor-setters';
 import { Designer, LiveEditing, TransformStage, Node, getConvertedExtraKey, LowCodePluginManager } from '@ali/lowcode-designer';
 import Outline, { OutlineBackupPane, getTreeMaster } from '@ali/lowcode-plugin-outline-pane';
 import * as editorHelper from '@ali/lowcode-editor-core';
@@ -8,6 +9,9 @@ import * as designerHelper from '@ali/lowcode-designer';
 import * as skeletonHelper from '@ali/lowcode-editor-skeleton';
 import DesignerPlugin from '@ali/lowcode-plugin-designer';
 import { Skeleton, SettingsPrimaryPane, registerDefaults } from '@ali/lowcode-editor-skeleton';
+import { liveEditingRule, liveEditingSaveHander } from './live-editing';
+
+editorHelper.registerSetter(builtinSetters);
 
 const editor = new Editor();
 globalContext.register(editor, Editor);
@@ -113,6 +117,7 @@ export {
   // store,
   hotkey,
   monitor,
+  init,
 };
 
 export async function init(container?: Element) {
@@ -133,3 +138,6 @@ export async function init(container?: Element) {
     engineContainer,
   );
 }
+
+LiveEditing.addLiveEditingSpecificRule(liveEditingRule);
+LiveEditing.addLiveEditingSaveHandler(liveEditingSaveHander);

packages/engine/src/index.ts

@@ -7,4 +7,3 @@ console.log(
   'padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #606060; font-weight: bold;',
   'padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;',
 );
-

packages/engine/src/live-editing.ts

@@ -0,0 +1,80 @@
+import { EditingTarget, Node as DocNode, SaveHandler } from '@ali/lowcode-designer';
+import { isJSExpression } from '@ali/lowcode-types';
+
+function getText(node: DocNode, prop: string) {
+  const p = node.getProp(prop, false);
+  if (!p || p.isUnset()) {
+    return null;
+  }
+  let v = p.getValue();
+  if (isJSExpression(v)) {
+    v = v.mock;
+  }
+  if (v == null) {
+    return null;
+  }
+  if (p.type === 'literal') {
+    return v;
+  }
+  return Symbol.for('not-literal');
+}
+
+export function liveEditingRule(target: EditingTarget) {
+  // for vision components specific
+  const { node, event } = target;
+
+  const targetElement = event.target as HTMLElement;
+
+  if (!Array.from(targetElement.childNodes).every(item => item.nodeType === Node.TEXT_NODE)) {
+    return null;
+  }
+
+  const { innerText } = targetElement;
+  const propTarget = ['title', 'label', 'text', 'content', 'children'].find(prop => {
+    return equalText(getText(node, prop), innerText);
+  });
+
+  if (propTarget) {
+    return {
+      propElement: targetElement,
+      propTarget,
+    };
+  }
+  return null;
+}
+
+function equalText(v: any, innerText: string) {
+  // TODO: enhance compare text logic
+  if (typeof v !== 'string') {
+    return false;
+  }
+  return v.trim() === innerText;
+}
+
+export const liveEditingSaveHander: SaveHandler = {
+  condition: (prop) => {
+    // const v = prop.getValue();
+    return prop.type === 'expression'; // || isI18nData(v);
+  },
+  onSaveContent: (content, prop) => {
+    const v = prop.getValue();
+    let data = v;
+    if (isJSExpression(v)) {
+      data = v.mock;
+    }
+    data = content;
+    if (isJSExpression(v)) {
+      prop.setValue({
+        type: 'JSExpression',
+        value: v.value,
+        mock: data,
+      });
+    } else {
+      prop.setValue(data);
+    }
+  },
+};
+// TODO:
+// 非文本编辑
+//  国际化数据，改变当前
+//  JSExpression, 改变 mock 或 弹出绑定变量

packages/vision-polyfill/package.json

@@ -3,7 +3,6 @@
   "version": "1.0.30-beta.10",
   "description": "Vision Polyfill for Ali lowCode engine",
   "main": "lib/index.js",
-  "private": true,
   "files": [
     "dist",
     "es",

packages/vision-polyfill/src/index.ts

@@ -33,24 +33,6 @@ import './vision.less';
 
 invariant((window as any).AliLowCodeEngine, 'AliLowCodeEngine is required, since vision polyfill is totally based on AliLowCodeEngine');
 
-// async function init(container?: Element) {
-//   if (!container) {
-//     container = document.createElement('div');
-//     document.body.appendChild(container);
-//   }
-//   container.id = 'engine';
-
-//   await plugins.init();
-//   render(
-//     createElement(Workbench, {
-//       skeleton,
-//       className: 'engine-main',
-//       topAreaItemClassName: 'engine-actionitem',
-//     }),
-//     container,
-//   );
-// }
-
 /**
  * VE.ui.xxx
  *

packages/vision-polyfill/src/reducers.ts

@@ -5,7 +5,7 @@ import bus from './bus';
 import { VE_EVENTS } from './base/const';
 
 import { deepValueParser } from './deep-value-parser';
-import { liveEditingRule, liveEditingSaveHander } from './vc-live-editing';
+// import { liveEditingRule, liveEditingSaveHander } from './vc-live-editing';
 import {
   compatibleReducer,
   upgradePageLifeCyclesReducer,
@@ -20,8 +20,8 @@ import {
 
 const { LiveEditing, TransformStage } = designerHelper;
 
-LiveEditing.addLiveEditingSpecificRule(liveEditingRule);
-LiveEditing.addLiveEditingSaveHandler(liveEditingSaveHander);
+// LiveEditing.addLiveEditingSpecificRule(liveEditingRule);
+// LiveEditing.addLiveEditingSaveHandler(liveEditingSaveHander);
 
 designer.project.onCurrentDocumentChange((doc) => {
   bus.emit(VE_EVENTS.VE_PAGE_PAGE_READY);