@ant-design/agentic-ui 2.0.0

package/dist/plugins/mermaid/Mermaid.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { CodeNode } from '../../MarkdownEditor/el';
+/**
+ * Mermaid 组件 - Mermaid图表渲染组件
+ *
+ * 该组件使用Mermaid库渲染图表，支持流程图、时序图、甘特图等。
+ * 提供图表渲染、错误处理、延迟渲染等功能。
+ *
+ * @component
+ * @description Mermaid图表渲染组件，支持各种Mermaid图表类型
+ * @param {Object} props - 组件属性
+ * @param {CodeNode} props.el - 代码节点，包含Mermaid图表代码
+ * @param {string} [props.el.value] - Mermaid图表代码字符串
+ *
+ * @example
+ * ```tsx
+ * <Mermaid
+ *   el={{
+ *     type: 'code',
+ *     value: 'graph TD\nA[开始] --> B[处理] --> C[结束]'
+ *   }}
+ * />
+ * ```
+ *
+ * @returns {React.ReactElement} 渲染的Mermaid图表组件
+ *
+ * @remarks
+ * - 基于Mermaid库实现图表渲染
+ * - 支持多种图表类型（流程图、时序图、甘特图等）
+ * - 提供延迟渲染优化性能
+ * - 包含错误处理机制
+ * - 支持空状态显示
+ * - 提供美观的样式设计
+ * - 禁用文本选择
+ * - 居中显示图表
+ * - 自动生成唯一ID
+ */
+export declare const Mermaid: (props: {
+    el: CodeNode;
+}) => React.JSX.Element;

package/dist/plugins/mermaid/Mermaid.js

@@ -0,0 +1,102 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/plugins/mermaid/Mermaid.tsx
+import mermaid from "mermaid";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { useGetSetState } from "react-use";
+var Mermaid = (props) => {
+  const [state, setState] = useGetSetState({
+    code: "",
+    error: ""
+  });
+  const divRef = useRef(null);
+  const timer = useRef(0);
+  const id = useMemo(
+    () => "m" + (Date.now() + Math.ceil(Math.random() * 1e3)),
+    []
+  );
+  const render = useCallback(() => __async(void 0, null, function* () {
+    mermaid.render(id, state().code).then((res) => {
+      setState({ error: "" });
+      divRef.current.innerHTML = res.svg;
+    }).catch(() => {
+      mermaid.parse(state().code).catch((e) => {
+        setState({ error: e.toString(), code: "" });
+      });
+    }).finally(() => {
+      var _a;
+      (_a = document.querySelector("#d" + id)) == null ? void 0 : _a.classList.add("hidden");
+    });
+  }), []);
+  useEffect(() => {
+    const code = props.el.value || "";
+    if (state().code !== code) {
+      clearTimeout(timer.current);
+      timer.current = window.setTimeout(
+        () => {
+          setState({ code });
+          if (state().code) {
+            render();
+          } else {
+            setState({ error: "" });
+          }
+        },
+        !state().code ? 0 : 300
+      );
+    }
+    return () => window.clearTimeout(timer.current);
+  }, [props.el]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        marginBottom: "0.75em",
+        cursor: "default",
+        userSelect: "none",
+        padding: "0.75rem 0",
+        backgroundColor: "rgba(15, 17, 20, 0.05)",
+        borderRadius: "0.25em",
+        display: "flex",
+        justifyContent: "center"
+      },
+      contentEditable: false
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        contentEditable: false,
+        ref: divRef,
+        style: {
+          width: "100%",
+          display: "flex",
+          justifyContent: "center",
+          visibility: state().code && !state().error ? "visible" : "hidden"
+        }
+      }
+    ),
+    state().error && /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center", color: "rgba(239, 68, 68, 0.8)" } }, state().error),
+    !state().code && !state().error && /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center", color: "#6B7280" } }, "Empty")
+  );
+};
+export {
+  Mermaid
+};

package/dist/plugins/mermaid/index.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { CodeNode, ElementProps } from '../../MarkdownEditor/el';
+/**
+ * MermaidElement 组件 - Mermaid图表元素组件
+ *
+ * 该组件用于在Markdown编辑器中渲染Mermaid图表，支持流程图、时序图、甘特图等。
+ * 提供图表编辑、预览、复制、拖拽等功能。
+ *
+ * @component
+ * @description Mermaid图表元素组件，支持各种Mermaid图表类型
+ * @param {ElementProps<CodeNode>} props - 组件属性
+ * @param {CodeNode} props.element - 代码节点数据
+ * @param {string} [props.element.language] - 图表语言类型
+ * @param {string} [props.element.value] - Mermaid图表代码
+ * @param {boolean} [props.element.frontmatter] - 是否为前置元数据
+ * @param {Object} props.attributes - Slate元素属性
+ * @param {React.ReactNode} props.children - 子元素
+ *
+ * @example
+ * ```tsx
+ * <MermaidElement
+ *   element={{
+ *     type: 'code',
+ *     language: 'mermaid',
+ *     value: 'graph TD\nA[开始] --> B[结束]'
+ *   }}
+ *   attributes={slateAttributes}
+ *   children={slateChildren}
+ * />
+ * ```
+ *
+ * @returns {React.ReactElement} 渲染的Mermaid图表组件
+ *
+ * @remarks
+ * - 支持多种Mermaid图表类型（流程图、时序图、甘特图等）
+ * - 提供图表编辑和预览功能
+ * - 支持图表代码复制
+ * - 提供拖拽排序功能
+ * - 支持选择状态管理
+ * - 集成Ace编辑器
+ * - 提供国际化支持
+ * - 响应式布局适配
+ */
+export declare function MermaidElement(props: ElementProps<CodeNode>): React.JSX.Element;

package/dist/plugins/mermaid/index.js

@@ -0,0 +1,165 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/plugins/mermaid/index.tsx
+import { CloseCircleOutlined } from "@ant-design/icons";
+import { message } from "antd";
+import copy from "copy-to-clipboard";
+import React, { useContext, useEffect, useRef } from "react";
+import { useGetSetState } from "react-use";
+import { Copy } from "@sofa-design/icons";
+import { ReactEditor } from "slate-react";
+import { ActionIconBox } from "../../components/ActionIconBox";
+import { I18nContext } from "../../i18n";
+import { useEditorStore } from "../../MarkdownEditor/editor/store";
+import { DragHandle } from "../../MarkdownEditor/editor/tools/DragHandle";
+import { useSelStatus } from "../../MarkdownEditor/hooks/editor";
+import { Mermaid } from "../mermaid/Mermaid";
+function MermaidElement(props) {
+  const { markdownEditorRef } = useEditorStore();
+  const [state, setState] = useGetSetState({
+    showBorder: false,
+    htmlStr: "",
+    hide: props.element.language === "mermaid",
+    lang: props.element.language || ""
+  });
+  const pathRef = useRef();
+  const [selected, path] = useSelStatus(props.element);
+  pathRef.current = path;
+  const editorRef = useRef();
+  useEffect(() => {
+    var _a;
+    if (selected && !((_a = editorRef.current) == null ? void 0 : _a.isFocused()) && ReactEditor.isFocused(markdownEditorRef.current)) {
+      setState({ showBorder: true });
+    } else if (state().showBorder) {
+      setState({ showBorder: false });
+    }
+  }, [selected, path]);
+  const i18n = useContext(I18nContext);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    __spreadProps(__spreadValues({}, props.attributes), {
+      contentEditable: false,
+      className: "ace-el drag-el",
+      "data-be": "mermaid",
+      tabIndex: -1,
+      onBlur: () => {
+      },
+      "data-lang": props.element.language
+    }),
+    !props.element.frontmatter && /* @__PURE__ */ React.createElement(DragHandle, null),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        onClick: (e) => {
+          var _a;
+          e.stopPropagation();
+          (_a = editorRef.current) == null ? void 0 : _a.focus();
+        },
+        style: {
+          padding: state().hide ? 0 : void 0,
+          marginBottom: state().hide ? 0 : void 0,
+          boxSizing: "border-box",
+          backgroundColor: state().showBorder ? "rgba(59, 130, 246, 0.1)" : state().hide ? "transparent" : "rgb(252, 252, 252)",
+          maxHeight: 400,
+          overflow: "auto",
+          position: "relative",
+          height: state().hide ? 0 : "auto",
+          opacity: state().hide ? 0 : 1
+        }
+      },
+      !props.element.frontmatter && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          contentEditable: false,
+          onClick: (e) => {
+            e.stopPropagation();
+          },
+          style: {
+            height: "1.75em",
+            backgroundColor: "#FFF",
+            borderBottom: "1px solid #eee",
+            paddingLeft: "0.75em",
+            paddingRight: "0.375em",
+            display: "flex",
+            alignItems: "center",
+            width: "100%",
+            position: "sticky",
+            left: 0,
+            top: 0,
+            fontSize: "1em",
+            color: "rgba(0, 0, 0, 0.6)",
+            justifyContent: "space-between",
+            zIndex: 50,
+            userSelect: "none"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: 5
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            ActionIconBox,
+            {
+              title: "关闭",
+              onClick: () => {
+                setState({
+                  hide: props.element.language === "mermaid"
+                });
+              }
+            },
+            /* @__PURE__ */ React.createElement(CloseCircleOutlined, null)
+          ),
+          /* @__PURE__ */ React.createElement(
+            ActionIconBox,
+            {
+              title: "复制",
+              style: {
+                fontSize: "0.9em",
+                lineHeight: "1.75em",
+                marginLeft: "0.125em"
+              },
+              onClick: (e) => {
+                var _a;
+                e.stopPropagation();
+                try {
+                  const code = props.element.value || "";
+                  copy(code);
+                  message.success(((_a = i18n.locale) == null ? void 0 : _a.copySuccess) || "复制成功");
+                } catch (error) {
+                }
+              }
+            },
+            /* @__PURE__ */ React.createElement(Copy, null)
+          )
+        )
+      ),
+      /* @__PURE__ */ React.createElement("div", { className: "ant-md-editor-hidden" }, props.children)
+    ),
+    /* @__PURE__ */ React.createElement(Mermaid, { el: props.element })
+  );
+}
+export {
+  MermaidElement
+};

package/dist/schema/SchemaEditor/AceEditorWrapper.d.ts

@@ -0,0 +1,26 @@
+import { Ace } from 'ace-builds';
+import React from 'react';
+interface AceEditorWrapperProps {
+    /** 代码内容 */
+    value: string;
+    /** 语言类型 */
+    language?: string;
+    /** 变更回调 */
+    onChange?: (value: string) => void;
+    /** 是否只读 */
+    readonly?: boolean;
+    /** 自定义样式 */
+    className?: string;
+    /** 编辑器高度 */
+    height?: string | number;
+    /** 编辑器配置选项 */
+    options?: Partial<Ace.EditorOptions>;
+}
+/**
+ * AceEditor包装组件
+ *
+ * 完全独立的AceEditor实现，不依赖其他组件
+ * 提供基础的代码编辑功能，支持语法高亮、只读模式等
+ */
+export declare const AceEditorWrapper: React.FC<AceEditorWrapperProps>;
+export default AceEditorWrapper;

package/dist/schema/SchemaEditor/AceEditorWrapper.js

@@ -0,0 +1,126 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+
+// src/schema/SchemaEditor/AceEditorWrapper.tsx
+import ace from "ace-builds";
+import React, { useEffect, useRef } from "react";
+import { aceLangs, modeMap } from "../../MarkdownEditor/editor/utils/ace";
+if (typeof window !== "undefined" && !window.ResizeObserver) {
+  window.ResizeObserver = class ResizeObserver {
+    constructor(callback) {
+      this.callback = callback;
+    }
+    observe() {
+    }
+    unobserve() {
+    }
+    disconnect() {
+    }
+  };
+}
+var AceEditorWrapper = ({
+  value,
+  language = "text",
+  onChange,
+  readonly = false,
+  className = "",
+  height = "100%",
+  options = {}
+}) => {
+  const containerRef = useRef(null);
+  const editorRef = useRef();
+  const valueRef = useRef(value);
+  useEffect(() => {
+    if (!containerRef.current)
+      return;
+    const codeEditor = ace.edit(containerRef.current, __spreadValues({
+      useWorker: false,
+      value,
+      fontSize: 12,
+      animatedScroll: true,
+      maxLines: Infinity,
+      wrap: true,
+      tabSize: 4,
+      readOnly: readonly,
+      showPrintMargin: false,
+      showLineNumbers: true,
+      showGutter: true
+    }, options));
+    editorRef.current = codeEditor;
+    setTimeout(() => {
+      let lang = language.toLowerCase();
+      if (modeMap.has(lang)) {
+        lang = modeMap.get(lang);
+      }
+      if (aceLangs.has(lang)) {
+        codeEditor.session.setMode(`ace/mode/${lang}`);
+      }
+    }, 16);
+    if (!readonly && onChange) {
+      codeEditor.on("change", () => {
+        const newValue = codeEditor.getValue();
+        if (newValue !== valueRef.current) {
+          valueRef.current = newValue;
+          onChange(newValue);
+        }
+      });
+    }
+    return () => {
+      codeEditor == null ? void 0 : codeEditor.destroy();
+    };
+  }, []);
+  useEffect(() => {
+    if (editorRef.current && value !== valueRef.current) {
+      editorRef.current.setValue(value);
+      valueRef.current = value;
+    }
+  }, [value]);
+  useEffect(() => {
+    if (editorRef.current) {
+      let lang = language.toLowerCase();
+      if (modeMap.has(lang)) {
+        lang = modeMap.get(lang);
+      }
+      if (aceLangs.has(lang)) {
+        editorRef.current.session.setMode(`ace/mode/${lang}`);
+      } else {
+        editorRef.current.session.setMode(`ace/mode/text`);
+      }
+    }
+  }, [language]);
+  useEffect(() => {
+    if (editorRef.current) {
+      editorRef.current.setReadOnly(readonly);
+    }
+  }, [readonly]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        height: typeof height === "number" ? `${height}px` : height,
+        width: "100%"
+      }
+    }
+  );
+};
+var AceEditorWrapper_default = AceEditorWrapper;
+export {
+  AceEditorWrapper,
+  AceEditorWrapper_default as default
+};

package/dist/schema/SchemaEditor/index.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { LowCodeSchema } from '../types';
+export interface SchemaEditorProps {
+    /** 初始schema数据 */
+    initialSchema?: LowCodeSchema;
+    /** 初始值 */
+    initialValues?: Record<string, any>;
+    /** 编辑器高度 */
+    height?: number | string;
+    /** 是否只读 */
+    readonly?: boolean;
+    /** 变更回调 */
+    onChange?: (schema: LowCodeSchema, values: Record<string, any>) => void;
+    /** 错误回调 */
+    onError?: (error: Error) => void;
+    /** 自定义样式 */
+    className?: string;
+    /** 是否显示预览 */
+    showPreview?: boolean;
+    /** 预览配置 */
+    previewConfig?: {
+        ALLOWED_TAGS?: string[];
+        ALLOWED_ATTR?: string[];
+    };
+}
+/**
+ * Schema编辑器组件
+ *
+ * 提供schema的实时编辑和预览功能，底层使用AceEditor编辑schema中的HTML内容
+ */
+export declare function SchemaEditor({ initialSchema, initialValues, height, readonly, onChange, className, showPreview, previewConfig, }: SchemaEditorProps): React.JSX.Element;
+export default SchemaEditor;