@nocobase/flow-engine 2.0.0-alpha.2

package/src/components/variables/SlateVariableEditor.tsx

@@ -0,0 +1,384 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import { createEditor, Descendant, Editor, Transforms, Range, Element as SlateElement } from 'slate';
+import { Slate, Editable, withReact, ReactEditor, RenderElementProps, RenderLeafProps } from 'slate-react';
+import { withHistory } from 'slate-history';
+import { InlineVariableTag } from './InlineVariableTag';
+import { VariableTrigger } from './VariableTrigger';
+import type {
+  VariableInputProps,
+  ContextSelectorItem,
+  VariableElement,
+  VariableTriggerElement,
+  ParagraphElement,
+} from './types';
+import type { MetaTreeNode } from '../../flowContext';
+import { parseValueToPath } from './utils';
+import { uid } from '@formily/shared';
+
+type CustomElement = VariableElement | VariableTriggerElement | ParagraphElement;
+type CustomText = { text: string; bold?: boolean };
+
+declare module 'slate' {
+  interface CustomTypes {
+    Editor: ReactEditor;
+    Element: CustomElement;
+    Text: CustomText;
+  }
+}
+
+export interface SlateVariableEditorProps extends Omit<VariableInputProps, 'showValueComponent'> {
+  /**
+   * 是否使用多行编辑器
+   * @default false
+   */
+  multiline?: boolean;
+  /**
+   * 输入框占位符
+   */
+  placeholder?: string;
+  /**
+   * 样式
+   */
+  style?: React.CSSProperties;
+}
+
+/**
+ * 基于 Slate.js 的智能变量编辑器
+ *
+ * 完美集成 Popover + FlowContextSelector 和 InlineVariableTag，
+ * 提供专业的富文本编辑体验和精确的光标控制。
+ */
+export const SlateVariableEditor: React.FC<SlateVariableEditorProps> = ({
+  value = '',
+  onChange,
+  metaTree,
+  multiline = false,
+  placeholder = '输入文本，使用 {{ 插入变量',
+  style = {},
+  ...restProps
+}) => {
+  // 创建编辑器实例
+  const editor = useMemo(() => {
+    const e = withReact(withHistory(createEditor()));
+
+    // 定义变量元素为 inline void 元素
+    const { isInline, isVoid } = e;
+
+    e.isInline = (element) => {
+      return element.type === 'variable' || element.type === 'variable-trigger' ? true : isInline(element);
+    };
+
+    e.isVoid = (element) => {
+      return element.type === 'variable' || element.type === 'variable-trigger' ? true : isVoid(element);
+    };
+
+    return e;
+  }, []);
+
+  // 获取实际的 metaTree 数据
+  const [resolvedMetaTree, setResolvedMetaTree] = React.useState<MetaTreeNode[] | null>(null);
+
+  React.useEffect(() => {
+    const resolveMetaTree = async () => {
+      if (!metaTree) {
+        setResolvedMetaTree(null);
+        return;
+      }
+
+      try {
+        if (typeof metaTree === 'function') {
+          const resolved = await metaTree();
+          setResolvedMetaTree(resolved);
+        } else {
+          setResolvedMetaTree(metaTree);
+        }
+      } catch (error) {
+        console.warn('Failed to resolve metaTree:', error);
+        setResolvedMetaTree(null);
+      }
+    };
+
+    resolveMetaTree();
+  }, [metaTree]);
+
+  // 解析外部 value 为 Slate 文档结构
+  const parseValueToSlate = useCallback(
+    (text = ''): Descendant[] => {
+      if (!text) {
+        return [
+          {
+            type: 'paragraph',
+            children: [{ text: '' }],
+          },
+        ];
+      }
+
+      const variableRegex = /\{\{[^}]+\}\}/g;
+      let lastIndex = 0;
+      let match;
+
+      const children: Descendant[] = [];
+
+      while ((match = variableRegex.exec(text)) !== null) {
+        // 添加前面的文本
+        if (match.index > lastIndex) {
+          children.push({ text: text.slice(lastIndex, match.index) });
+        }
+
+        // 添加变量元素
+        const variableValue = match[0];
+        const path = parseValueToPath(variableValue);
+
+        // 尝试构建元数据信息
+        const contextSelectorItem: ContextSelectorItem | undefined = undefined;
+        if (path && resolvedMetaTree) {
+          //TODO: get current selectorItem
+        }
+
+        children.push({
+          type: 'variable',
+          value: variableValue,
+          meta: contextSelectorItem,
+          children: [{ text: '' }], // Slate 要求 void 元素有空文本子节点
+        } as unknown as VariableElement);
+
+        lastIndex = match.index + match[0].length;
+      }
+
+      // 添加剩余文本
+      if (lastIndex < text.length) {
+        children.push({ text: text.slice(lastIndex) });
+      }
+
+      // 如果没有内容，添加空文本
+      if (children.length === 0) {
+        children.push({ text: '' });
+      }
+
+      return [
+        {
+          type: 'paragraph',
+          children,
+        },
+      ];
+    },
+    [resolvedMetaTree],
+  );
+
+  const initialValue = useMemo(() => parseValueToSlate(value || ''), [value, parseValueToSlate]);
+
+  // 将 Slate 文档转换为纯文本
+  const slateToText = useCallback((nodes: Descendant[]): string => {
+    return nodes
+      .map((n) => {
+        if (SlateElement.isElement(n)) {
+          if (n.type === 'variable') {
+            return n.value;
+          }
+          return slateToText(n.children as Descendant[]);
+        }
+        return n.text;
+      })
+      .join('');
+  }, []);
+
+  const handleChange = useCallback(
+    (newValue: Descendant[]) => {
+      const text = slateToText(newValue);
+      onChange?.(text);
+    },
+    [onChange, slateToText],
+  );
+
+  const handleVariableSelectFromTrigger = useCallback(
+    (triggerId: string, value: string, item: MetaTreeNode) => {
+      const [triggerMatch] = Editor.nodes(editor, {
+        match: (n) =>
+          SlateElement.isElement(n) &&
+          n.type === 'variable-trigger' &&
+          (n as VariableTriggerElement).triggerId === triggerId,
+      });
+
+      if (triggerMatch) {
+        const [, triggerPath] = triggerMatch;
+
+        const variableElement: VariableElement = {
+          type: 'variable',
+          value: value,
+          meta: item,
+          children: [{ text: '' }],
+        };
+
+        Transforms.setNodes(editor, variableElement, { at: triggerPath });
+
+        const nextPoint = Editor.after(editor, triggerPath);
+        if (nextPoint) {
+          Transforms.select(editor, nextPoint);
+        }
+
+        ReactEditor.focus(editor);
+      }
+    },
+    [editor],
+  );
+
+  const handleTriggerClose = useCallback(
+    (triggerId: string) => {
+      const [triggerMatch] = Editor.nodes(editor, {
+        match: (n) =>
+          SlateElement.isElement(n) &&
+          n.type === 'variable-trigger' &&
+          (n as VariableTriggerElement).triggerId === triggerId,
+      });
+
+      if (triggerMatch) {
+        const [, triggerPath] = triggerMatch;
+
+        // 先选择触发器位置
+        Transforms.select(editor, triggerPath);
+        // 移除节点
+        Transforms.removeNodes(editor, { at: triggerPath });
+        // 在当前选择位置插入文本
+        Transforms.insertText(editor, '{{');
+
+        ReactEditor.focus(editor);
+      }
+    },
+    [editor],
+  );
+
+  const renderElement = useCallback(
+    (props: RenderElementProps) => {
+      switch (props.element.type) {
+        case 'variable':
+          return <VariableElementComponent {...props} metaTree={resolvedMetaTree} />;
+        case 'variable-trigger':
+          return (
+            <VariableTrigger
+              {...props}
+              element={props.element as VariableTriggerElement}
+              metaTree={metaTree}
+              onVariableSelect={handleVariableSelectFromTrigger}
+              onTriggerClose={handleTriggerClose}
+            />
+          );
+        default:
+          return <p {...props.attributes}>{props.children}</p>;
+      }
+    },
+    [metaTree, resolvedMetaTree, handleVariableSelectFromTrigger, handleTriggerClose],
+  );
+
+  // 渲染叶子节点
+  const renderLeaf = useCallback((props: RenderLeafProps) => {
+    return (
+      <span {...props.attributes} style={{ fontWeight: props.leaf.bold ? 'bold' : 'normal' }}>
+        {props.children}
+      </span>
+    );
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === '{') {
+        const { selection } = editor;
+        if (selection && Range.isCollapsed(selection)) {
+          const [start] = Range.edges(selection);
+
+          const beforePoint = Editor.before(editor, start);
+          if (beforePoint) {
+            const beforeRange = Editor.range(editor, beforePoint, start);
+            const beforeText = Editor.string(editor, beforeRange);
+
+            if (beforeText === '{') {
+              event.preventDefault();
+
+              Transforms.delete(editor, { at: beforeRange });
+
+              const triggerId = uid();
+              const triggerElement: VariableTriggerElement = {
+                type: 'variable-trigger',
+                triggerId,
+                children: [{ text: '' }],
+              };
+
+              Transforms.insertNodes(editor, triggerElement);
+            }
+          }
+        }
+      }
+    },
+    [editor],
+  );
+
+  return (
+    <Slate editor={editor} initialValue={initialValue} onChange={handleChange}>
+      <Editable
+        renderElement={renderElement}
+        renderLeaf={renderLeaf}
+        placeholder={placeholder}
+        onKeyDown={handleKeyDown}
+        style={{
+          minHeight: multiline ? 100 : 32,
+          padding: '4px 11px',
+          border: '1px solid #d9d9d9',
+          borderRadius: 6,
+          fontSize: 14,
+          lineHeight: 1.5714285714285714,
+          ...style,
+        }}
+        {...restProps}
+      />
+    </Slate>
+  );
+};
+
+// 变量元素组件
+const VariableElementComponent: React.FC<RenderElementProps & { metaTree?: MetaTreeNode[] }> = ({
+  attributes,
+  children,
+  element,
+  metaTree,
+}) => {
+  const variableElement = element as VariableElement;
+
+  const contextSelectorItem = React.useMemo(() => {
+    if (variableElement.meta) {
+      return variableElement.meta;
+    }
+
+    // 如果没有存储的 meta，尝试从 metaTree 动态构建
+    if (metaTree && variableElement.value) {
+      const path = parseValueToPath(variableElement.value);
+      // TODO: build current selected
+    }
+
+    return null;
+  }, [variableElement.meta, variableElement.value, metaTree]);
+
+  return (
+    <span {...attributes} contentEditable={false}>
+      <InlineVariableTag
+        value={variableElement.value}
+        metaTreeNode={contextSelectorItem}
+        metaTree={metaTree}
+        style={{
+          marginLeft: 2,
+          marginRight: 2,
+          verticalAlign: 'baseline',
+          display: 'inline-block',
+        }}
+      />
+      {children}
+    </span>
+  );
+};