live-editing 50%

packages/editor-preset-general/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, rootElement, 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.innerText;
+  const propTarget = ['title', 'label', 'text', 'content'].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 或 弹出绑定变量