liteflow-editor-process 1.0.0

package/dist/LiteFlowEditor/panels/settingBar/properties/CustomDropdown.js

@@ -0,0 +1,62 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _templateObject;
+import React, { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { css } from '@emotion/css';
+var getDropdownContainer = function getDropdownContainer() {
+  var container = document.getElementById('dropdown-root');
+  if (!container) {
+    container = document.createElement('div');
+    container.id = 'dropdown-root';
+    document.body.appendChild(container);
+  }
+  return container;
+};
+var CustomDropdown = function CustomDropdown(_ref) {
+  var open = _ref.open,
+    position = _ref.position,
+    onClose = _ref.onClose,
+    children = _ref.children;
+  var ref = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+
+  // 控制visible状态，open后下一帧显示，关闭则隐藏
+  useEffect(function () {
+    if (open) {
+      requestAnimationFrame(function () {
+        return setVisible(true);
+      });
+    } else {
+      setVisible(false);
+    }
+  }, [open]);
+  var handleClickOutside = function handleClickOutside(event) {
+    if (ref.current && !ref.current.contains(event.target)) {
+      onClose();
+    }
+  };
+  var handleEscKey = function handleEscKey(e) {
+    if (e.key === 'Escape') onClose();
+  };
+  useEffect(function () {
+    if (open) {
+      document.addEventListener('mousedown', handleClickOutside);
+      document.addEventListener('keydown', handleEscKey);
+    }
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscKey);
+    };
+  }, [open]);
+  if (!open) return null;
+  var computedWidth = typeof position.width === 'number' ? "".concat(position.width, "px") : position.width || '200px';
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        position: absolute;\n        top: ", "px;\n        left: ", "px;\n        max-height: 230px;\n        overflow: auto;\n        z-index: 1000;\n        background: white;\n        border: 1px solid #ccc;\n        border-radius: 4px;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n        min-width: ", ";\n        opacity: 0;\n        visibility: hidden;\n        pointer-events: none;\n        transform: translateY(-4px);\n        transition: opacity 0.2s ease, transform 0.2s ease;\n\n        ", "\n      "])), position.top, position.left, computedWidth, visible && "\n          opacity: 1;\n          visibility: visible;\n          pointer-events: auto;\n          transform: translateY(0);\n        ")
+  }, children), getDropdownContainer());
+};
+export default CustomDropdown;

package/dist/LiteFlowEditor/panels/settingBar/properties/DraggableWrapper.d.ts

@@ -0,0 +1,48 @@
+import React from "react";
+type DraggableWrapperProps<T> = {
+    /** 源数据数组 */
+    data: {
+        asColumn: string;
+        label: string;
+        [key: string]: any;
+    }[];
+    /** 唯一标识字段 */
+    rowKey: keyof {
+        asColumn: string;
+        label: string;
+        [key: string]: any;
+    };
+    /** 拖拽排序后，通知外部更新顺序 */
+    onChange: (newList: {
+        asColumn: string;
+        label: string;
+        [key: string]: any;
+    }[]) => void;
+    /** 你来负责渲染每一项，组件只处理拖拽行为 */
+    children: (params: {
+        item: {
+            asColumn: string;
+            label: string;
+            [key: string]: any;
+        };
+        index: number;
+        listeners: {
+            draggable: true;
+            onDragStart: (e: React.DragEvent) => void;
+            onDragOver: (e: React.DragEvent) => void;
+            onDrop: () => void;
+            onDragEnd: () => void;
+        };
+        isDragging: boolean;
+        isOver: boolean;
+    }) => React.ReactNode;
+};
+/**
+ * 可拖拽的列表组件
+ * @param data 源数据数组
+ * @param rowKey 唯一标识字段
+ * @param onChange 拖拽排序后，通知外部更新顺序
+ * @param children 你来负责渲染每一项，组件只处理拖拽行为
+ */
+declare function DraggableWrapper<T>({ data, rowKey, onChange, children, }: DraggableWrapperProps<T>): React.JSX.Element;
+export default DraggableWrapper;

package/dist/LiteFlowEditor/panels/settingBar/properties/DraggableWrapper.js

@@ -0,0 +1,94 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useRef } from "react";
+function throttle(fn) {
+  var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 60;
+  var last = 0;
+  return function () {
+    var now = Date.now();
+    if (now - last >= delay) {
+      last = now;
+      fn.apply(void 0, arguments);
+    }
+  };
+}
+/**
+ * 可拖拽的列表组件
+ * @param data 源数据数组
+ * @param rowKey 唯一标识字段
+ * @param onChange 拖拽排序后，通知外部更新顺序
+ * @param children 你来负责渲染每一项，组件只处理拖拽行为
+ */
+function DraggableWrapper(_ref) {
+  var data = _ref.data,
+    rowKey = _ref.rowKey,
+    onChange = _ref.onChange,
+    children = _ref.children;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    dragIndex = _useState2[0],
+    setDragIndex = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hoverIndex = _useState4[0],
+    setHoverIndex = _useState4[1];
+  var draggingItemRef = useRef(null);
+  var handleDragStart = function handleDragStart(index, e) {
+    setDragIndex(index);
+    draggingItemRef.current = e.currentTarget;
+    setTimeout(function () {
+      if (draggingItemRef.current) {
+        draggingItemRef.current.style.opacity = "0.5";
+      }
+    });
+  };
+  var handleDragEnd = function handleDragEnd() {
+    if (draggingItemRef.current) {
+      draggingItemRef.current.style.opacity = "1";
+    }
+    draggingItemRef.current = null;
+    setDragIndex(null);
+    setHoverIndex(null);
+  };
+  var throttledHover = throttle(function (index) {
+    setHoverIndex(index);
+  }, 100);
+  var handleDragOver = function handleDragOver(e, index) {
+    e.preventDefault();
+    throttledHover(index);
+  };
+  var handleDrop = function handleDrop(index) {
+    if (dragIndex === null || dragIndex === index) return;
+    var newList = _toConsumableArray(data);
+    var _newList$splice = newList.splice(dragIndex, 1),
+      _newList$splice2 = _slicedToArray(_newList$splice, 1),
+      movedItem = _newList$splice2[0];
+    newList.splice(index, 0, movedItem);
+    onChange(newList);
+    setDragIndex(null);
+    setHoverIndex(null);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, data.map(function (item, index) {
+    var listeners = {
+      draggable: true,
+      onDragStart: function onDragStart(e) {
+        return handleDragStart(index, e);
+      },
+      onDragOver: function onDragOver(e) {
+        return handleDragOver(e, index);
+      },
+      onDrop: function onDrop() {
+        return handleDrop(index);
+      },
+      onDragEnd: handleDragEnd
+    };
+    return children({
+      item: item,
+      index: index,
+      listeners: listeners,
+      isDragging: index === dragIndex,
+      isOver: index === hoverIndex && index !== dragIndex
+    });
+  }));
+}
+export default DraggableWrapper;

package/dist/LiteFlowEditor/panels/settingBar/properties/RichParamEditor-new.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Text, Descendant, BaseEditor } from 'slate';
+import { ReactEditor } from 'slate-react';
+interface VariableElement {
+    type: 'variable';
+    label: string;
+    value: string;
+    children: Text[];
+}
+type CustomElement = VariableElement | {
+    type: 'paragraph';
+    children: Descendant[];
+};
+declare module 'slate' {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor;
+        Element: CustomElement;
+    }
+}
+interface ParamItem {
+    label: string;
+    value?: string;
+    options: ParamItem[];
+    disabled?: boolean;
+}
+interface RichParamEditorProps {
+    value: Descendant[];
+    onChange: (value: Descendant[]) => void;
+    options: ParamItem[];
+    disabled?: boolean;
+}
+declare const RichParamEditor: React.FC<RichParamEditorProps>;
+export default RichParamEditor;

package/dist/LiteFlowEditor/panels/settingBar/properties/RichParamEditor-new.js

@@ -0,0 +1,433 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+import React, { useMemo, useCallback, useState, useRef, useEffect } from 'react';
+import { createEditor, Transforms, Text, Editor, Element as SlateElement, Range } from 'slate';
+import { Slate, Editable, withReact, ReactEditor } from 'slate-react';
+import { css } from '@emotion/css';
+import CustomDropdown from "./CustomDropdown";
+// 变量标签组件
+var VariableTag = function VariableTag(_ref) {
+  var attributes = _ref.attributes,
+    children = _ref.children,
+    element = _ref.element;
+  var el = element;
+  var handleClick = function handleClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  return /*#__PURE__*/React.createElement("span", _extends({}, attributes, {
+    contentEditable: false,
+    onClick: handleClick,
+    className: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        display: inline-block;\n        margin: 2px 2px;\n        padding: 2px 8px;\n        background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);\n        border: 1px solid #91d5ff;\n        border-radius: 6px;\n        font-size: 12px;\n        font-weight: 500;\n        color: #1890ff;\n        user-select: none;\n        cursor: default;\n        transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n        &:hover {\n          background: linear-gradient(135deg, #bae7ff 0%, #91d5ff 100%);\n          border-color: #40a9ff;\n          transform: translateY(-1px);\n          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n        }\n      "])))
+  }), el.label);
+};
+
+// 元素渲染组件
+var Element = function Element(props) {
+  var attributes = props.attributes,
+    children = props.children,
+    element = props.element;
+  switch (element.type) {
+    case 'variable':
+      return /*#__PURE__*/React.createElement(VariableTag, props);
+    default:
+      return /*#__PURE__*/React.createElement("span", attributes, children);
+  }
+};
+
+// 支持变量的编辑器插件
+var withVariables = function withVariables(editor) {
+  var isInline = editor.isInline,
+    isVoid = editor.isVoid,
+    normalizeNode = editor.normalizeNode;
+  editor.isInline = function (element) {
+    return element.type === 'variable' ? true : isInline(element);
+  };
+  editor.isVoid = function (element) {
+    return element.type === 'variable' ? true : isVoid(element);
+  };
+
+  // 确保变量节点后面有文本节点
+  editor.normalizeNode = function (entry) {
+    var _entry = _slicedToArray(entry, 2),
+      node = _entry[0],
+      path = _entry[1];
+    if (SlateElement.isElement(node) && node.type === 'variable') {
+      // 如果变量后面没有文本节点，添加一个空文本节点
+      var nextPath = [].concat(_toConsumableArray(path.slice(0, -1)), [path[path.length - 1] + 1]);
+      try {
+        var nextNode = Editor.node(editor, nextPath);
+        if (!nextNode || !Text.isText(nextNode[0])) {
+          Transforms.insertNodes(editor, {
+            text: ''
+          }, {
+            at: nextPath
+          });
+          return;
+        }
+      } catch (_unused) {
+        // 如果路径不存在，说明变量是最后一个节点，需要添加文本节点
+        Transforms.insertNodes(editor, {
+          text: ''
+        }, {
+          at: nextPath
+        });
+        return;
+      }
+    }
+    normalizeNode(entry);
+  };
+  return editor;
+};
+
+// 插入变量
+var insertVariable = function insertVariable(editor, variable) {
+  if (!variable.value) return;
+  var variableElement = {
+    type: 'variable',
+    label: variable.label,
+    value: variable.value,
+    children: [{
+      text: ''
+    }]
+  };
+
+  // 删除触发字符
+  Transforms.delete(editor, {
+    unit: 'character',
+    reverse: true
+  });
+
+  // 插入变量和后续空格
+  Transforms.insertNodes(editor, [variableElement, {
+    text: ' '
+  }]);
+
+  // 移动光标到空格之后
+  Transforms.move(editor, {
+    unit: 'offset'
+  });
+
+  // 确保编辑器获取焦点
+  setTimeout(function () {
+    ReactEditor.focus(editor);
+  }, 0);
+};
+var RichParamEditor = function RichParamEditor(_ref2) {
+  var value = _ref2.value,
+    onChange = _ref2.onChange,
+    options = _ref2.options,
+    _ref2$disabled = _ref2.disabled,
+    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled;
+  var editor = useMemo(function () {
+    return withVariables(withReact(createEditor()));
+  }, []);
+  var renderElement = useCallback(function (props) {
+    return /*#__PURE__*/React.createElement(Element, props);
+  }, []);
+  var editorContainerRef = useRef(null);
+  var timeoutRef = useRef(null);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    target = _useState2[0],
+    setTarget = _useState2[1];
+  var _useState3 = useState({
+      top: 0,
+      left: 0,
+      width: 0
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dropdownPos = _useState4[0],
+    setDropdownPos = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedIndex = _useState6[0],
+    setSelectedIndex = _useState6[1];
+  var _useState7 = useState(''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    searchText = _useState8[0],
+    setSearchText = _useState8[1];
+  var dropdownContentRef = useRef(null);
+
+  // 滚动到选中项
+  var scrollToSelected = useCallback(function (index) {
+    setTimeout(function () {
+      var container = dropdownContentRef.current;
+      if (!container) return;
+      var items = container.querySelectorAll('[data-option-index]');
+      var selectedItem = items[index];
+      if (selectedItem) {
+        var containerRect = container.getBoundingClientRect();
+        var itemRect = selectedItem.getBoundingClientRect();
+        if (itemRect.top < containerRect.top) {
+          container.scrollTop -= containerRect.top - itemRect.top + 8;
+        } else if (itemRect.bottom > containerRect.bottom) {
+          container.scrollTop += itemRect.bottom - containerRect.bottom + 8;
+        }
+      }
+    }, 0);
+  }, []);
+
+  // 清理定时器
+  useEffect(function () {
+    return function () {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  // 获取扁平化选项用于键盘导航和搜索
+  var flatOptions = useMemo(function () {
+    var flat = [];
+    options.forEach(function (group) {
+      if (group.value) flat.push(group);
+      flat.push.apply(flat, _toConsumableArray(group.options.filter(function (opt) {
+        return !opt.disabled;
+      })));
+    });
+    return flat;
+  }, [options]);
+
+  // 过滤选项
+  var filteredOptions = useMemo(function () {
+    if (!searchText) return options;
+    var filtered = options.map(function (group) {
+      return _objectSpread(_objectSpread({}, group), {}, {
+        options: group.options.filter(function (opt) {
+          var _opt$value;
+          return opt.label.toLowerCase().includes(searchText.toLowerCase()) || ((_opt$value = opt.value) === null || _opt$value === void 0 ? void 0 : _opt$value.toLowerCase().includes(searchText.toLowerCase()));
+        })
+      });
+    }).filter(function (group) {
+      return group.options.length > 0 || group.value && group.label.toLowerCase().includes(searchText.toLowerCase());
+    });
+    return filtered;
+  }, [options, searchText]);
+
+  // 更新下拉框位置
+  var updateDropdownPosition = useCallback(function () {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(function () {
+      if (editorContainerRef.current) {
+        var rect = editorContainerRef.current.getBoundingClientRect();
+        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+        setDropdownPos({
+          top: rect.bottom + scrollTop + 4,
+          left: rect.left + scrollLeft,
+          width: Math.max(rect.width, 200)
+        });
+      }
+    }, 0);
+  }, []);
+
+  // 重置搜索状态
+  var resetSearchState = useCallback(function () {
+    setTarget(null);
+    setSelectedIndex(0);
+    setSearchText('');
+  }, []);
+
+  // 处理键盘事件
+  var handleKeyDown = function handleKeyDown(event) {
+    if (target) {
+      var availableOptions = flatOptions.filter(function (opt) {
+        return !searchText || opt.label.toLowerCase().includes(searchText.toLowerCase());
+      });
+      switch (event.key) {
+        case 'ArrowDown':
+          event.preventDefault();
+          setSelectedIndex(function (prev) {
+            return Math.min(prev + 1, availableOptions.length - 1);
+          });
+          scrollToSelected(selectedIndex);
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          setSelectedIndex(function (prev) {
+            return Math.max(prev - 1, 0);
+          });
+          scrollToSelected(selectedIndex);
+          break;
+        case 'Enter':
+          event.preventDefault();
+          if (availableOptions[selectedIndex]) {
+            handleSelect(availableOptions[selectedIndex]);
+          }
+          return;
+        // 重要：直接返回，不执行后续逻辑
+
+        case 'Escape':
+          event.preventDefault();
+          resetSearchState();
+          break;
+        case 'Backspace':
+          if (searchText) {
+            setSearchText(function (prev) {
+              return prev.slice(0, -1);
+            });
+          } else {
+            resetSearchState();
+          }
+          break;
+        default:
+          // 处理搜索输入
+          if (event.key.length === 1) {
+            setSearchText(function (prev) {
+              return prev + event.key;
+            });
+            setSelectedIndex(0);
+          }
+          break;
+      }
+      return;
+    }
+
+    // 触发变量选择
+    if (event.key === '/') {
+      var selection = editor.selection;
+      if (selection && Range.isCollapsed(selection)) {
+        setTarget(selection);
+        setSelectedIndex(0);
+        setSearchText('');
+        updateDropdownPosition();
+      }
+      return;
+    }
+
+    // 处理回车
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      Transforms.insertText(editor, '\n');
+    }
+  };
+
+  // 处理选择
+  var handleSelect = useCallback(function (item) {
+    if (item.disabled || !item.value) return;
+    if (target) {
+      // 先重置状态，避免插入变量时触发 handleChange 的下拉框逻辑
+      resetSearchState();
+      Transforms.select(editor, target);
+      insertVariable(editor, item);
+    }
+  }, [target, editor, resetSearchState]);
+
+  // 处理编辑器变化
+  var handleChange = useCallback(function (val) {
+    onChange(val);
+
+    // 如果下拉框已经打开，不再检查触发条件
+    if (target) return;
+    var selection = editor.selection;
+    if (selection && Range.isCollapsed(selection)) {
+      var _Editor$node = Editor.node(editor, selection.focus.path),
+        _Editor$node2 = _slicedToArray(_Editor$node, 1),
+        node = _Editor$node2[0];
+      var text = Text.isText(node) ? node.text : '';
+      if (text.endsWith('/')) {
+        var beforeSlash = text.slice(0, -1);
+        var lastSpaceIndex = beforeSlash.lastIndexOf(' ');
+        var lastNewlineIndex = beforeSlash.lastIndexOf('\n');
+        var lastBreakIndex = Math.max(lastSpaceIndex, lastNewlineIndex);
+
+        // 确保 / 前面是空格或换行符（避免在单词中间触发）
+        if (lastBreakIndex === beforeSlash.length - 1 || beforeSlash.length === 0) {
+          setTarget(selection);
+          setSelectedIndex(0);
+          setSearchText('');
+          updateDropdownPosition();
+        }
+      }
+    }
+  }, [editor, onChange, updateDropdownPosition, target]);
+
+  // 渲染下拉框内容
+  var renderDropdownContent = function renderDropdownContent() {
+    if (filteredOptions.length === 0) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          padding: 16px;\n          color: #8c8c8c;\n          text-align: center;\n          font-size: 14px;\n        "])))
+      }, searchText ? "\u672A\u627E\u5230\u5339\u914D \"".concat(searchText, "\" \u7684\u53D8\u91CF") : '暂无可用变量');
+    }
+    var flatIndex = 0;
+    var availableOptions = flatOptions.filter(function (opt) {
+      return !searchText || opt.label.toLowerCase().includes(searchText.toLowerCase());
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      ref: dropdownContentRef,
+      className: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          padding: 8px 0;\n          max-height: 300px;\n          overflow-y: auto;\n          scroll-behavior: smooth;\n        "])))
+    }, searchText && /*#__PURE__*/React.createElement("div", {
+      className: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            padding: 8px 12px;\n            color: #8c8c8c;\n            font-size: 12px;\n            border-bottom: 1px solid #f0f0f0;\n            margin-bottom: 4px;\n          "])))
+    }, "\u641C\u7D22: ", searchText), filteredOptions.map(function (group) {
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: group.label
+      }, group.value && /*#__PURE__*/React.createElement("div", {
+        "data-option-index": availableOptions.indexOf(group),
+        className: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                  padding: 10px 12px;\n                  color: #262626;\n                  font-weight: 600;\n                  font-size: 14px;\n                  cursor: pointer;\n                  background: ", ";\n                  border-left: 3px solid ", ";\n                  transition: all 0.2s ease;\n                  &:hover {\n                    background: #f0f9ff;\n                  }\n                "])), selectedIndex === availableOptions.indexOf(group) ? '#e6f7ff' : 'transparent', selectedIndex === availableOptions.indexOf(group) ? '#1890ff' : 'transparent'),
+        onClick: function onClick() {
+          return handleSelect(group);
+        },
+        onMouseEnter: function onMouseEnter() {
+          return setSelectedIndex(availableOptions.indexOf(group));
+        }
+      }, group.label), !group.value && /*#__PURE__*/React.createElement("div", {
+        className: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n                padding: 8px 12px;\n                color: #8c8c8c;\n                font-weight: 600;\n                font-size: 11px;\n                text-transform: uppercase;\n                letter-spacing: 0.5px;\n                background: #fafafa;\n                border-top: 1px solid #f0f0f0;\n                border-bottom: 1px solid #f0f0f0;\n              "])))
+      }, group.label), group.options.map(function (opt) {
+        var optIndex = availableOptions.indexOf(opt);
+        if (optIndex === -1) return null;
+        return /*#__PURE__*/React.createElement("div", {
+          key: opt.value,
+          "data-option-index": optIndex,
+          onClick: function onClick() {
+            return handleSelect(opt);
+          },
+          onMouseEnter: function onMouseEnter() {
+            return setSelectedIndex(optIndex);
+          },
+          className: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n                    padding: 8px 12px 8px 24px;\n                    cursor: pointer;\n                    color: #595959;\n                    font-size: 13px;\n                    background: ", ";\n                    border-left: 3px solid ", ";\n                    transition: all 0.2s ease;\n                    &:hover {\n                      background: #f0f9ff;\n                    }\n                  "])), selectedIndex === optIndex ? '#e6f7ff' : 'transparent', selectedIndex === optIndex ? '#1890ff' : 'transparent')
+        }, /*#__PURE__*/React.createElement("div", {
+          className: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["font-weight: 500;"])))
+        }, opt.label), opt.value && /*#__PURE__*/React.createElement("div", {
+          className: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n                      font-size: 11px;\n                      color: #8c8c8c;\n                      margin-top: 2px;\n                    "])))
+        }, opt.value));
+      }));
+    }));
+  };
+  return /*#__PURE__*/React.createElement(Slate, {
+    editor: editor,
+    value: value.length ? value : [{
+      type: 'paragraph',
+      children: [{
+        text: ''
+      }]
+    }],
+    onChange: handleChange
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: editorContainerRef,
+    className: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          position: relative;\n          border: 1px solid #d9d9d9;\n          padding: 10px 12px;\n          min-height: 42px;\n          border-radius: 8px;\n          cursor: ", ";\n          background: ", ";\n          font-size: 14px;\n          line-height: 1.6;\n          transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);\n          &:hover {\n            border-color: ", ";\n          }\n          &:focus-within {\n            border-color: #40a9ff;\n            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);\n          }\n        "])), disabled ? 'not-allowed' : 'text', disabled ? '#f5f5f5' : 'white', disabled ? '#d9d9d9' : '#40a9ff')
+  }, /*#__PURE__*/React.createElement(Editable, {
+    renderElement: renderElement,
+    onKeyDown: handleKeyDown,
+    placeholder: "\u8F93\u5165\u5185\u5BB9\uFF0C\u6309 / \u63D2\u5165\u53D8\u91CF",
+    readOnly: disabled,
+    style: {
+      outline: 'none',
+      minHeight: '22px',
+      wordBreak: 'break-word'
+    }
+  })), /*#__PURE__*/React.createElement(CustomDropdown, {
+    open: !!target,
+    position: dropdownPos,
+    onClose: resetSearchState
+  }, /*#__PURE__*/React.createElement("div", {
+    className: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          background: white;\n          border-radius: 8px;\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n          border: 1px solid #e8e8e8;\n          overflow: hidden;\n        "])))
+  }, renderDropdownContent())));
+};
+export default RichParamEditor;