@ant-design/agentic-ui 2.0.0

package/dist/MarkdownEditor/editor/elements/Paragraph.js

@@ -0,0 +1,92 @@
+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/MarkdownEditor/editor/elements/Paragraph.tsx
+import classNames from "classnames";
+import React, { useContext, useMemo } from "react";
+import { Node } from "slate";
+import { I18nContext } from "../../../i18n";
+import { useSelStatus } from "../../hooks/editor";
+import { useEditorStore } from "../store";
+import { DragHandle } from "../tools/DragHandle";
+var Paragraph = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const {
+    store,
+    markdownEditorRef,
+    markdownContainerRef,
+    typewriter,
+    readonly,
+    editorProps
+  } = useEditorStore();
+  const { locale } = useContext(I18nContext);
+  const [selected, path] = useSelStatus(props.element);
+  const isLast = useMemo(() => {
+    var _a2;
+    if (((_a2 = markdownEditorRef.current) == null ? void 0 : _a2.children.length) === 0)
+      return false;
+    if (!typewriter)
+      return false;
+    return store.isLatestNode(props.element);
+  }, [
+    (_c = (_a = markdownEditorRef.current) == null ? void 0 : (_b = _a.children).at) == null ? void 0 : _c.call(_b, path.at(0)),
+    (_f = (_d = markdownEditorRef.current) == null ? void 0 : (_e = _d.children).at) == null ? void 0 : _f.call(_e, path.at(0) + 1),
+    typewriter
+  ]);
+  return React.useMemo(() => {
+    var _a2, _b2, _c2, _d2, _e2;
+    const str = Node.string(props.element).trim();
+    const isEmpty = !str && ((_a2 = markdownEditorRef.current) == null ? void 0 : _a2.children.length) === 1 && ((_d2 = (_c2 = (_b2 = props.element) == null ? void 0 : _b2.children) == null ? void 0 : _c2.every) == null ? void 0 : _d2.call(
+      _c2,
+      (child) => !child.type && !child.code && !child.tag
+    )) ? true : void 0;
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      __spreadProps(__spreadValues({}, props.attributes), {
+        "data-be": "paragraph",
+        className: classNames("ant-md-editor-drag-el", {
+          empty: isEmpty,
+          typewriter: isLast && typewriter
+        }),
+        "data-align": props.element.align,
+        "data-slate-placeholder": isEmpty ? editorProps.titlePlaceholderContent || (locale == null ? void 0 : locale.inputPlaceholder) || "请输入内容..." : void 0,
+        onDragStart: (e) => store.dragStart(e, markdownContainerRef.current),
+        "data-empty": isEmpty,
+        style: {
+          display: !!str || !!((_e2 = props.children) == null ? void 0 : _e2.at(0).type) ? void 0 : "none"
+        }
+      }),
+      /* @__PURE__ */ React.createElement(DragHandle, null),
+      props.children
+    );
+  }, [
+    props.element.children,
+    props.element.align,
+    readonly,
+    selected,
+    isLast,
+    (_g = markdownEditorRef.current) == null ? void 0 : _g.children.length,
+    editorProps.titlePlaceholderContent,
+    typewriter
+  ]);
+};
+export {
+  Paragraph
+};

package/dist/MarkdownEditor/editor/elements/Schema.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { RenderElementProps } from 'slate-react';
+/**
+ * Schema 组件 - 模式渲染组件
+ *
+ * 该组件用于渲染 Schema 类型的代码节点，支持自定义渲染、AgentAR 卡片渲染和默认渲染模式。
+ * 根据不同的配置和节点类型提供不同的渲染方式。
+ *
+ * 功能特性：
+ * - 支持自定义 apaasify/apassify 渲染模式
+ * - 支持 AgentAR 卡片渲染
+ * - 提供默认的 JSON 字符串渲染
+ * - 包含隐藏的 JSON 数据用于调试和编辑
+ * - 支持点击和键盘事件处理
+ * - 响应式布局设计
+ * - 提供测试 ID 支持
+ *
+ * @param props - Slate.js 渲染元素属性
+ * @param props.element - 代码节点元素，包含 Schema 数据
+ * @param props.children - 子组件，通常是文本内容
+ * @param props.attributes - 元素的 DOM 属性
+ * @returns 渲染的模式组件
+ *
+ * @example
+ * ```tsx
+ * <Schema
+ *   element={codeNode}
+ *   attributes={attributes}
+ * >
+ *   {children}
+ * </Schema>
+ * ```
+ *
+ * @remarks
+ * 渲染优先级：
+ * 1. 自定义 apaasify 渲染器
+ * 2. AgentAR 卡片渲染
+ * 3. 默认 JSON 字符串渲染
+ */
+export declare const Schema: React.FC<RenderElementProps>;

package/dist/MarkdownEditor/editor/elements/Schema.js

@@ -0,0 +1,136 @@
+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/MarkdownEditor/editor/elements/Schema.tsx
+import React, { useContext, useMemo } from "react";
+import { BubbleConfigContext } from "../../../Bubble/BubbleConfigProvide";
+import { SchemaRenderer } from "../../../schema";
+import { useEditorStore } from "../store";
+var Schema = (props) => {
+  const { element: node } = props;
+  const { editorProps } = useEditorStore();
+  const apaasify = (editorProps == null ? void 0 : editorProps.apaasify) || (editorProps == null ? void 0 : editorProps.apassify);
+  const { bubble } = useContext(BubbleConfigContext) || {};
+  return useMemo(() => {
+    var _a;
+    if ((apaasify == null ? void 0 : apaasify.enable) && apaasify.render) {
+      const renderedContent = apaasify.render(props, bubble == null ? void 0 : bubble.originData);
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        __spreadProps(__spreadValues({}, node.attributes), {
+          "data-testid": "schema-container",
+          style: {
+            display: "flex",
+            flexDirection: "column"
+          }
+        }),
+        renderedContent,
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            "data-testid": "schema-hidden-json",
+            style: {
+              height: 1,
+              opacity: 0,
+              userSelect: "none",
+              pointerEvents: "none",
+              overflow: "hidden"
+            }
+          },
+          JSON.stringify(props.element.value, null, 2)
+        )
+      );
+    }
+    if (node.language === "agentar-card") {
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          "data-testid": "agentar-card-container",
+          style: {
+            padding: "0.5em"
+          },
+          className: "md-editor-agentar-card"
+        },
+        /* @__PURE__ */ React.createElement(
+          SchemaRenderer,
+          {
+            debug: false,
+            fallbackContent: null,
+            schema: props.element.value,
+            values: ((_a = props.element.value) == null ? void 0 : _a.initialValues) || {},
+            useDefaultValues: false
+          }
+        )
+      );
+    }
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      __spreadProps(__spreadValues({}, node.attributes), {
+        "data-testid": "schema-container",
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          width: "100%"
+        }
+      }),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          "data-testid": "schema-clickable",
+          style: {
+            padding: 8,
+            width: "100%",
+            cursor: "pointer",
+            position: "relative",
+            display: "flex",
+            borderRadius: 8,
+            flex: 1,
+            border: "1px solid rgb(209 213 219 / 0.8)",
+            alignItems: "center"
+          },
+          onClick: (e) => {
+            e.stopPropagation();
+          },
+          onMouseMove: (e) => {
+            e.stopPropagation();
+          },
+          onKeyDown: (e) => {
+            e.stopPropagation();
+          },
+          "data-be": node == null ? void 0 : node.type
+        },
+        typeof (node == null ? void 0 : node.value) === "string" ? node.value : JSON.stringify(node == null ? void 0 : node.value, null, 2)
+      ),
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          "data-testid": "schema-hidden-children",
+          style: {
+            display: "none"
+          }
+        },
+        props.children
+      )
+    );
+  }, [node.value, bubble, apaasify]);
+};
+export {
+  Schema
+};

package/dist/MarkdownEditor/editor/elements/Table/ReadonlyTableComponent.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TableNode } from '../../types/Table';
+interface ReadonlyTableComponentProps {
+    hashId: string;
+    children: React.ReactNode;
+    element: TableNode;
+    baseCls: string;
+}
+/**
+ * 专门针对 readonly 模式优化的表格组件
+ * 移除了不必要的滚动监听和复杂的宽度计算
+ */
+export declare const ReadonlyTableComponent: React.FC<ReadonlyTableComponentProps>;
+export {};

package/dist/MarkdownEditor/editor/elements/Table/ReadonlyTableComponent.js

@@ -0,0 +1,200 @@
+// src/MarkdownEditor/editor/elements/Table/ReadonlyTableComponent.tsx
+import { FullscreenOutlined } from "@ant-design/icons";
+import { Copy } from "@sofa-design/icons";
+import { ConfigProvider, Modal } from "antd";
+import classNames from "classnames";
+import copy from "copy-to-clipboard";
+import React, {
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { ActionIconBox } from "../../../../components/ActionIconBox";
+import { I18nContext } from "../../../../i18n";
+import { useEditorStore } from "../../store";
+import { parserSlateNodeToMarkdown } from "../../utils";
+var ReadonlyTableComponent = React.memo(({ hashId, children, element, baseCls }) => {
+  var _a, _b, _c, _d;
+  const { editorProps } = useEditorStore();
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const {
+    actions = {
+      download: "csv",
+      fullScreen: "modal",
+      copy: "md"
+    }
+  } = (editorProps == null ? void 0 : editorProps.tableConfig) || {};
+  const tableTargetRef = useRef(null);
+  const modelTargetRef = useRef(null);
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const i18n = useContext(I18nContext);
+  const colWidths = useMemo(() => {
+    var _a2, _b2, _c2;
+    const otherProps = element == null ? void 0 : element.otherProps;
+    if (otherProps == null ? void 0 : otherProps.colWidths) {
+      return otherProps.colWidths;
+    }
+    const columnCount = ((_c2 = (_b2 = (_a2 = element == null ? void 0 : element.children) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.children) == null ? void 0 : _c2.length) || 0;
+    if (columnCount === 0)
+      return [];
+    const defaultWidth = 120;
+    return Array(columnCount).fill(defaultWidth);
+  }, [element == null ? void 0 : element.otherProps, (_c = (_b = (_a = element == null ? void 0 : element.children) == null ? void 0 : _a[0]) == null ? void 0 : _b.children) == null ? void 0 : _c.length]);
+  const handleCopy = useCallback(() => {
+    var _a2;
+    try {
+      let contentToCopy = "";
+      if ((actions == null ? void 0 : actions.copy) === "html") {
+        contentToCopy = ((_a2 = tableTargetRef.current) == null ? void 0 : _a2.innerHTML) || "";
+      } else if ((actions == null ? void 0 : actions.copy) === "csv") {
+        const otherProps = element == null ? void 0 : element.otherProps;
+        if ((otherProps == null ? void 0 : otherProps.columns) && (otherProps == null ? void 0 : otherProps.dataSource)) {
+          contentToCopy = otherProps.columns.map((col) => col.title).join(",") + "\n" + otherProps.dataSource.map((row) => Object.values(row).join(",")).join("\n");
+        }
+      } else {
+        contentToCopy = parserSlateNodeToMarkdown([element]);
+      }
+      copy(contentToCopy);
+    } catch (error) {
+      console.error("Copy failed:", error);
+    }
+  }, [element, actions == null ? void 0 : actions.copy]);
+  const handleFullScreen = useCallback((e) => {
+    e.stopPropagation();
+    setPreviewOpen(true);
+  }, []);
+  const handleModalClose = useCallback(() => {
+    setPreviewOpen(false);
+  }, []);
+  const tableDom = useMemo(
+    () => {
+      var _a2;
+      return /* @__PURE__ */ React.createElement(
+        "table",
+        {
+          ref: tableTargetRef,
+          className: classNames(
+            `${baseCls}-editor-table`,
+            "readonly",
+            hashId,
+            `${baseCls}-readonly-table`,
+            {
+              [`${baseCls}-readonly-pure`]: (_a2 = editorProps == null ? void 0 : editorProps.tableConfig) == null ? void 0 : _a2.pure
+            }
+          )
+        },
+        /* @__PURE__ */ React.createElement("colgroup", null, colWidths.map((colWidth, index) => /* @__PURE__ */ React.createElement(
+          "col",
+          {
+            key: index,
+            style: {
+              width: colWidth,
+              minWidth: colWidth,
+              maxWidth: colWidth
+            }
+          }
+        ))),
+        /* @__PURE__ */ React.createElement("tbody", null, children)
+      );
+    },
+    [colWidths, children, hashId, baseCls]
+  );
+  const popoverContent = useMemo(
+    () => {
+      var _a2, _b2;
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: { display: "flex", gap: 8 },
+          className: classNames(hashId, `${baseCls}-readonly-table-actions`)
+        },
+        (actions == null ? void 0 : actions.fullScreen) && /* @__PURE__ */ React.createElement(
+          ActionIconBox,
+          {
+            title: ((_a2 = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _a2.fullScreen) || "全屏",
+            onClick: handleFullScreen
+          },
+          /* @__PURE__ */ React.createElement(FullscreenOutlined, null)
+        ),
+        (actions == null ? void 0 : actions.copy) && /* @__PURE__ */ React.createElement(
+          ActionIconBox,
+          {
+            title: ((_b2 = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _b2.copy) || "复制",
+            onClick: handleCopy
+          },
+          /* @__PURE__ */ React.createElement(Copy, null)
+        )
+      );
+    },
+    [
+      actions == null ? void 0 : actions.fullScreen,
+      actions == null ? void 0 : actions.copy,
+      i18n == null ? void 0 : i18n.locale,
+      handleFullScreen,
+      handleCopy
+    ]
+  );
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(baseCls, hashId),
+      style: {
+        flex: 1,
+        minWidth: 0
+      }
+    },
+    tableDom,
+    popoverContent
+  ), previewOpen && /* @__PURE__ */ React.createElement(
+    Modal,
+    {
+      title: ((_d = editorProps == null ? void 0 : editorProps.tableConfig) == null ? void 0 : _d.previewTitle) || "预览表格",
+      open: previewOpen,
+      closable: true,
+      footer: null,
+      afterClose: handleModalClose,
+      width: "80vw",
+      onCancel: handleModalClose
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: classNames(
+          baseCls,
+          hashId,
+          getPrefixCls("md-editor-content")
+        ),
+        style: {
+          flex: 1,
+          minWidth: 0,
+          overflow: "auto",
+          width: "calc(80vw - 64px)"
+        },
+        ref: modelTargetRef,
+        onMouseDown: (e) => {
+          e.preventDefault();
+        },
+        onDragStart: (e) => {
+          e.preventDefault();
+        },
+        onDoubleClick: (e) => {
+          e.preventDefault();
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        ConfigProvider,
+        {
+          getPopupContainer: () => modelTargetRef.current || document.body,
+          getTargetContainer: () => modelTargetRef.current || document.body
+        },
+        tableDom
+      )
+    )
+  ));
+});
+ReadonlyTableComponent.displayName = "ReadonlyTableComponent";
+export {
+  ReadonlyTableComponent
+};

package/dist/MarkdownEditor/editor/elements/Table/SimpleTable.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { RenderElementProps } from 'slate-react';
+/**
+ * 简单表格组件 - 仅支持只读显示
+ * 用于替代复杂的 Handsontable 实现，提供基础的表格功能
+ */
+export declare const SimpleTable: (props: RenderElementProps) => React.JSX.Element;

package/dist/MarkdownEditor/editor/elements/Table/SimpleTable.js

@@ -0,0 +1,59 @@
+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/MarkdownEditor/editor/elements/Table/SimpleTable.tsx
+import { ConfigProvider } from "antd";
+import classNames from "classnames";
+import React, { useContext, useMemo } from "react";
+import { ReactEditor, useSlate } from "slate-react";
+import { useTableStyle } from "./style";
+import { SlateTable } from "./Table";
+import { TablePropsProvider } from "./TableContext";
+var SimpleTable = (props) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const baseCls = getPrefixCls("md-editor-content-table");
+  const editor = useSlate();
+  const { wrapSSR, hashId } = useTableStyle(baseCls, {});
+  const tablePath = useMemo(
+    () => ReactEditor.findPath(editor, props.element),
+    [props.element]
+  );
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement(
+      TablePropsProvider,
+      {
+        tablePath,
+        tableNode: props.element
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        __spreadProps(__spreadValues({}, props.attributes), {
+          "data-be": "table",
+          draggable: false,
+          className: classNames(`${baseCls}-container`, hashId)
+        }),
+        /* @__PURE__ */ React.createElement(SlateTable, __spreadProps(__spreadValues({}, props), { hashId }), props.children)
+      )
+    )
+  );
+};
+export {
+  SimpleTable
+};

package/dist/MarkdownEditor/editor/elements/Table/Table.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { RenderElementProps } from 'slate-react';
+/**
+ * 表格组
+ *
+ * @param {RenderElementProps} props - 渲染元素的属性。
+ *
+ * @returns {JSX.Element} 表格组件的 JSX 元素。
+ *
+ * @component
+ *
+ * @example
+ * ```tsx
+ * <Table {...props} />
+ * ```
+ *
+ * @remarks
+ * 该组件使用了多个 React 钩子函数，包括 `useState`、`useEffect`、`useCallback` 和 `useRef`。
+ *
+ * - `useState` 用于管理组件的状态。
+ * - `useEffect` 用于处理组件挂载和卸载时的副作用。
+ * - `useCallback` 用于优化回调函数的性能。
+ * - `useRef` 用于获取 DOM 元素的引用。
+ *
+ * 组件还使用了 `IntersectionObserver` 来检测表格是否溢出，并相应地添加或移除 CSS 类。
+ *
+ * @see https://reactjs.org/docs/hooks-intro.html React Hooks
+ */
+export declare const SlateTable: ({ hashId, children, ...props }: {
+    children: React.ReactNode;
+    hashId: string;
+} & RenderElementProps) => React.JSX.Element;