feat: complete live-editing expr & i18n

packages/designer/src/builtin-simulator/live-editing/live-editing.ts

@@ -140,9 +140,7 @@ export class LiveEditing {
 
     // TODO: upward testing for b/i/a html elements
 
-    // 非文本编辑
-    //  国际化数据，改变当前
-    //  JSExpression, 改变 mock 或 弹出绑定变量
+    
   }
 
   get editing() {

packages/editor-preset-vision/src/editor.ts

@@ -1,7 +1,7 @@
 import { isJSBlock, isJSExpression, isJSSlot, isI18nData } from '@ali/lowcode-types';
 import { isPlainObject, hasOwnProperty } from '@ali/lowcode-utils';
 import { globalContext, Editor } from '@ali/lowcode-editor-core';
-import { Designer, LiveEditing, TransformStage, addBuiltinComponentAction, Node } from '@ali/lowcode-designer';
+import { Designer, LiveEditing, TransformStage, Node } from '@ali/lowcode-designer';
 import Outline, { OutlineBackupPane, getTreeMaster } from '@ali/lowcode-plugin-outline-pane';
 import { toCss } from '@ali/vu-css-style';
 import logger from '@ali/vu-logger';
@@ -9,9 +9,8 @@ import logger from '@ali/vu-logger';
 import DesignerPlugin from '@ali/lowcode-plugin-designer';
 import { Skeleton, SettingsPrimaryPane } from '@ali/lowcode-editor-skeleton';
 
-import { i18nReducer } from './i18n-reducer';
-import { InstanceNodeSelector } from './components';
-import { liveEditingRule } from './vc-live-editing';
+import { deepValueParser } from './deep-value-parser';
+import { liveEditingRule, liveEditingSaveHander } from './vc-live-editing';
 
 export const editor = new Editor();
 globalContext.register(editor, Editor);
@@ -49,8 +48,6 @@ designer.addPropsReducer((props, node) => {
   return props;
 }, TransformStage.Init);
 
-// 国际化渲染时处理
-designer.addPropsReducer(i18nReducer, TransformStage.Render);
 
 function filterReducer(props: any, node: Node): any {
   const filters = node.componentMeta.getMetadata().experimental?.filters;
@@ -152,31 +149,8 @@ function appendStyleNode(props: any, styleProp: any, cssClass: string, cssId: st
 }
 designer.addPropsReducer(stylePropsReducer, TransformStage.Render);
 
-// FIXME: 表达式使用 mock 值，未来live 模式直接使用原始值
-function expressionReducer(obj?: any): any {
-  // TODO: merge with i18nReducer for optimize
-  if (!obj) {
-    return obj;
-  }
-  if (Array.isArray(obj)) {
-    return obj.map((item) => expressionReducer(item));
-  }
-  if (isPlainObject(obj)) {
-    if (isJSExpression(obj)) {
-      return obj.mock;
-    }
-    if (isJSSlot(obj) || isI18nData(obj)) {
-      return obj;
-    }
-    const out: any = {};
-    Object.keys(obj).forEach((key) => {
-      out[key] = expressionReducer(obj[key]);
-    });
-    return out;
-  }
-  return obj;
-}
-designer.addPropsReducer(expressionReducer, TransformStage.Render);
+// 国际化 & Expression 渲染时处理
+designer.addPropsReducer(deepValueParser, TransformStage.Render);
 
 skeleton.add({
   area: 'mainArea',
@@ -212,11 +186,4 @@ skeleton.add({
 });
 
 LiveEditing.addLiveEditingSpecificRule(liveEditingRule);
-
-// 实例节点选择器，线框高亮
-// addBuiltinComponentAction({
-//   name: 'instance-node-selector',
-//   content: InstanceNodeSelector,
-//   important: true,
-//   condition: 'always'
-// });
+LiveEditing.addLiveEditingSaveHandler(liveEditingSaveHander);

packages/editor-preset-vision/src/vc-live-editing.ts

@@ -1,7 +1,7 @@
-import { EditingTarget, Node as DocNode } from '@ali/lowcode-designer';
+import { EditingTarget, Node as DocNode, SaveHandler } from '@ali/lowcode-designer';
 import Env from './env';
-import { isJSExpression } from '@ali/lowcode-types';
-const I18nUtil = require('@ali/ve-i18n-util');
+import { isJSExpression, isI18nData } from '@ali/lowcode-types';
+import i18nUtil from './i18n-util';
 
 interface I18nObject {
   type?: string;
@@ -13,7 +13,7 @@ interface I18nObject {
 function getI18nText(obj: I18nObject) {
   let locale = Env.getLocale();
   if (obj.key) {
-    return I18nUtil.get(obj.key, locale);
+    return i18nUtil.get(obj.key, locale);
   }
   if (locale !== 'zh_CN' && locale !== 'zh_TW' && !obj[locale]) {
     locale = 'en_US';
@@ -26,7 +26,10 @@ function getText(node: DocNode, prop: string) {
   if (!p || p.isUnset()) {
     return null;
   }
-  const v = p.getValue();
+  let v = p.getValue();
+  if (isJSExpression(v)) {
+    v = v.mock;
+  }
   if (v == null) {
     return null;
   }
@@ -36,9 +39,7 @@ function getText(node: DocNode, prop: string) {
   if ((v as any).type === 'i18n') {
     return getI18nText(v as any);
   }
-  if (isJSExpression(v)) {
-    return v.mock;
-  }
+  return Symbol.for('not-literal');
 }
 
 export function liveEditingRule(target: EditingTarget) {
@@ -73,7 +74,43 @@ function equalText(v: any, innerText: string) {
   return v.trim() === innerText
 }
 
-// TODO:
-export function liveEditingSaveHander() {
-
+export const liveEditingSaveHander: SaveHandler = {
+  condition: (prop) => {
+    const v = prop.getValue();
+    return prop.type === 'expression' || isI18nData(v);
+  },
+  onSaveContent: (content, prop) => {
+    const v = prop.getValue();
+    const locale = Env.getLocale();
+    let data = v;
+    if (isJSExpression(v)) {
+      data = v.mock;
+    }
+    if (isI18nData(data)) {
+      const i18n = data.key ? i18nUtil.getItem(data.key) : null;
+      if (i18n) {
+        i18n.setDoc(content, locale);
+        return;
+      }
+      data = {
+        ...(data as any),
+        [locale]: content,
+      };
+    } else {
+      data = content;
+    }
+    if (isJSExpression(v)) {
+      prop.setValue({
+        type: 'JSExpression',
+        value: v.value,
+        mock: data,
+      });
+    } else {
+      prop.setValue(data);
+    }
+  }
 }
+// TODO:
+// 非文本编辑
+//  国际化数据，改变当前
+//  JSExpression, 改变 mock 或 弹出绑定变量