@ant-design/agentic-ui 2.0.0

package/dist/plugins/formatter/index.js

@@ -0,0 +1,109 @@
+// src/plugins/formatter/index.ts
+var MarkdownFormatter = class {
+  /**
+   * 规范化段落之间的换行符
+   * @param text Markdown 文本
+   * @returns 格式化后的文本
+   */
+  static normalizeParagraphs(text) {
+    let normalizedText = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+    normalizedText = normalizedText.trim();
+    normalizedText = normalizedText.replace(/\n[\s\n]+/g, "\n");
+    const lines = normalizedText.split("\n");
+    const result = [];
+    for (let i = 0; i < lines.length; i++) {
+      const currentLine = lines[i];
+      result.push(currentLine);
+      if (i < lines.length - 1) {
+        const nextLine = lines[i + 1];
+        const isCurrentTableRow = /^\s*\|.*\|\s*$/.test(currentLine);
+        const isNextTableRow = /^\s*\|.*\|\s*$/.test(nextLine);
+        if (isCurrentTableRow && isNextTableRow) {
+        } else {
+          result.push("");
+        }
+      }
+    }
+    return result.join("\n").replace(/\n+$/, "");
+  }
+  /**
+   * 在中英文之间添加空格（盘古之白）
+   * @param text Markdown 文本
+   * @returns 格式化后的文本
+   */
+  static addPanguSpacing(text) {
+    const placeholders = {};
+    let counter = 0;
+    const preservedText = text.replace(/```[\s\S]*?```/g, (match) => {
+      const placeholder = `__CODEBLOCK_${counter}__`;
+      placeholders[placeholder] = match;
+      counter++;
+      return placeholder;
+    }).replace(/(<!--[\s\S]*?-->)/g, (match) => {
+      const placeholder = `__COMMENT_${counter}__`;
+      placeholders[placeholder] = match;
+      counter++;
+      return placeholder;
+    }).replace(/\[([^\]]*<[^>]+>[^\]]*)\]\([^)]+\)/g, (match) => {
+      const placeholder = `__LINK_HTML_${counter}__`;
+      placeholders[placeholder] = match;
+      counter++;
+      return placeholder;
+    }).replace(/(<[^>]+>.*?<\/[^>]+>|<[^>]+>)/g, (match) => {
+      const placeholder = `__HTML_${counter}__`;
+      placeholders[placeholder] = match;
+      counter++;
+      return placeholder;
+    }).replace(/(\[([^\]]+)\]\([^)]+\))/g, (match) => {
+      const placeholder = `__LINK_${counter}__`;
+      placeholders[placeholder] = match;
+      counter++;
+      return placeholder;
+    }).replace(/(`[^`]+`)/g, (match) => {
+      const placeholder = `__CODE_${counter}__`;
+      placeholders[placeholder] = match;
+      counter++;
+      return placeholder;
+    });
+    let spacedText = preservedText.replace(/([\u4e00-\u9fa5])([A-Za-z])/g, "$1 $2").replace(/([A-Za-z])([\u4e00-\u9fa5])/g, "$1 $2").replace(/([\u4e00-\u9fa5])(\d+)/g, "$1 $2").replace(/(\d+)([\u4e00-\u9fa5])/g, "$1 $2").replace(/([\u4e00-\u9fa5])([\(\)])/g, "$1 $2").replace(/([\(\)])([\u4e00-\u9fa5])/g, "$1 $2").replace(/([^\s\n])\s+([^\s\n])/g, "$1 $2");
+    Object.entries(placeholders).forEach(([placeholder, original]) => {
+      spacedText = spacedText.replace(
+        new RegExp(`(\\s*)${placeholder}(\\s*)`),
+        (_, before, after) => {
+          const needSpaceBefore = before === "" && /[\u4e00-\u9fa5]$/.test(spacedText.split(placeholder)[0]);
+          const needSpaceAfter = after === "" && /^[\u4e00-\u9fa5]/.test(spacedText.split(placeholder)[1]);
+          return `${needSpaceBefore ? " " : ""}${original}${needSpaceAfter ? " " : ""}`;
+        }
+      );
+    });
+    return spacedText;
+  }
+  /**
+   * 格式化 Markdown 文本
+   * @param text Markdown 文本
+   * @returns 格式化后的文本
+   */
+  static format(text) {
+    const codeBlocks = {};
+    let counter = 0;
+    const textWithoutCodeBlocks = text.replace(/```[\s\S]*?```/g, (match) => {
+      const placeholder = `__CODEBLOCK_${counter}__`;
+      codeBlocks[placeholder] = match;
+      counter++;
+      return placeholder;
+    });
+    const paragraphsFixed = this.normalizeParagraphs(textWithoutCodeBlocks);
+    const lines = paragraphsFixed.split("\n");
+    const formattedLines = lines.map((line) => this.addPanguSpacing(line));
+    let result = formattedLines.join("\n");
+    Object.entries(codeBlocks).forEach(([placeholder, original]) => {
+      result = result.replace(placeholder, original);
+    });
+    return result;
+  }
+};
+var formatter_default = MarkdownFormatter;
+export {
+  MarkdownFormatter,
+  formatter_default as default
+};

package/dist/plugins/index.d.ts

@@ -0,0 +1,6 @@
+export * from './chart';
+export * from './code';
+export * from './defaultPlugins';
+export * from './formatter';
+export * from './katex';
+export * from './mermaid';

package/dist/plugins/index.js

@@ -0,0 +1,7 @@
+// src/plugins/index.ts
+export * from "./chart";
+export * from "./code";
+export * from "./defaultPlugins";
+export * from "./formatter";
+export * from "./katex";
+export * from "./mermaid";

package/dist/plugins/katex/InlineKatex.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ElementProps, InlineKatexNode } from '../../MarkdownEditor/el';
+import './katex.min.css';
+/**
+ * InlineKatex 组件 - 内联KaTeX数学公式组件
+ *
+ * 该组件用于在文本中渲染内联数学公式，支持编辑和只读模式。
+ * 提供选择状态管理、公式渲染、点击交互等功能。
+ *
+ * @component
+ * @description 内联KaTeX数学公式组件，支持行内数学公式渲染
+ * @param {ElementProps<InlineKatexNode> & { style?: React.CSSProperties }} props - 组件属性
+ * @param {InlineKatexNode} props.element - 内联KaTeX节点
+ * @param {Object} props.attributes - Slate元素属性
+ * @param {React.ReactNode} props.children - 子元素
+ * @param {React.CSSProperties} [props.style] - 自定义样式
+ *
+ * @example
+ * ```tsx
+ * <InlineKatex
+ *   element={inlineKatexNode}
+ *   attributes={slateAttributes}
+ *   style={{ fontSize: '13px' }}
+ * >
+ *   {children}
+ * </InlineKatex>
+ * ```
+ *
+ * @returns {React.ReactElement} 渲染的内联数学公式组件
+ *
+ * @remarks
+ * - 支持内联数学公式渲染
+ * - 提供编辑和只读模式
+ * - 支持选择状态管理
+ * - 提供点击交互功能
+ * - 基于KaTeX库实现
+ * - 支持自定义样式
+ * - 在测试环境下简化显示
+ * - 提供响应式布局
+ */
+export declare const InlineKatex: ({ children, element, attributes, style, }: ElementProps<InlineKatexNode> & {
+    style?: React.CSSProperties | undefined;
+}) => React.JSX.Element;

package/dist/plugins/katex/InlineKatex.js

@@ -0,0 +1,124 @@
+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/katex/InlineKatex.tsx
+import classNames from "classnames";
+import katex from "katex";
+import React, { useEffect, useRef } from "react";
+import { Editor, Node, Transforms } from "slate";
+import { useEditorStore } from "../../MarkdownEditor/editor/store";
+import { useSelStatus } from "../../MarkdownEditor/hooks/editor";
+import "./katex.min.css";
+var InlineKatex = ({
+  children,
+  element,
+  attributes,
+  style
+}) => {
+  const renderEl = useRef(null);
+  const { markdownEditorRef, readonly } = useEditorStore();
+  const [selected, path] = useSelStatus(element);
+  useEffect(() => {
+    if (!selected) {
+      const value = Node.string(element);
+      katex.render(value, renderEl.current, {
+        strict: false,
+        output: "html",
+        throwOnError: false,
+        macros: {
+          "\\f": "#1f(#2)"
+        }
+      });
+    }
+  }, [selected]);
+  if (false) {
+    return /* @__PURE__ */ React.createElement("span", { contentEditable: false, style: { fontSize: 0 } });
+  }
+  if (readonly) {
+    return /* @__PURE__ */ React.createElement(
+      "span",
+      __spreadProps(__spreadValues({}, attributes), {
+        "data-be": "inline-katex",
+        style: {
+          position: "relative"
+        }
+      }),
+      /* @__PURE__ */ React.createElement("span", { contentEditable: false, ref: renderEl, style: { fontSize: 0 } }),
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          style: {
+            display: "none"
+          }
+        },
+        children
+      )
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    __spreadProps(__spreadValues({}, attributes), {
+      "data-be": "inline-katex",
+      className: classNames("relative")
+    }),
+    /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        style: __spreadValues({
+          display: "inline-flex",
+          padding: selected ? "0.25rem" : "0",
+          visibility: selected ? "visible" : "hidden",
+          width: selected ? "auto" : "0",
+          height: selected ? "auto" : "0",
+          overflow: "hidden",
+          position: selected ? "static" : "absolute"
+        }, style),
+        className: selected ? "inline-code-input" : ""
+      },
+      children
+    ),
+    /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        contentEditable: false,
+        ref: renderEl,
+        onClick: () => {
+          Transforms.select(
+            markdownEditorRef.current,
+            Editor.end(markdownEditorRef.current, path)
+          );
+        },
+        style: {
+          margin: "0 0.25rem",
+          userSelect: "none",
+          fontSize: 0,
+          visibility: selected ? "hidden" : "visible",
+          width: selected ? "0" : "auto",
+          height: selected ? "0" : "auto",
+          overflow: selected ? "hidden" : "visible",
+          position: selected ? "absolute" : "static"
+        }
+      }
+    )
+  );
+};
+export {
+  InlineKatex
+};

package/dist/plugins/katex/Katex.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { CodeNode } from '../../MarkdownEditor/el';
+import './katex.min.css';
+/**
+ * Katex 组件 - KaTeX 数学公式渲染组件
+ *
+ * 该组件使用KaTeX库渲染数学公式，支持LaTeX语法，提供错误处理和延迟渲染。
+ * 包含公式渲染、错误状态管理、占位符显示等功能。
+ *
+ * @component
+ * @description KaTeX 数学公式渲染组件，支持LaTeX语法渲染
+ * @param {Object} props - 组件属性
+ * @param {CodeNode} props.el - 代码节点，包含公式内容
+ * @param {string} [props.el.value] - LaTeX公式字符串
+ *
+ * @example
+ * ```tsx
+ * <Katex
+ *   el={{
+ *     type: 'code',
+ *     value: '\\sum_{i=1}^{n} x_i = x_1 + x_2 + \\cdots + x_n'
+ *   }}
+ * />
+ * ```
+ *
+ * @returns {React.ReactElement} 渲染的数学公式组件
+ *
+ * @remarks
+ * - 基于KaTeX库实现数学公式渲染
+ * - 支持LaTeX数学语法
+ * - 提供延迟渲染优化性能
+ * - 包含错误处理机制
+ * - 支持占位符显示
+ * - 提供美观的样式设计
+ * - 禁用文本选择
+ * - 居中显示公式
+ */
+export declare const Katex: (props: {
+    el: CodeNode;
+}) => React.JSX.Element;

package/dist/plugins/katex/Katex.js

@@ -0,0 +1,74 @@
+// src/plugins/katex/Katex.tsx
+import classNames from "classnames";
+import katex from "katex";
+import React, { useEffect, useRef } from "react";
+import { useGetSetState } from "react-use";
+import "./katex.min.css";
+var Katex = (props) => {
+  const [state, setState] = useGetSetState({
+    code: "",
+    error: ""
+  });
+  const divRef = useRef(null);
+  const timer = useRef(0);
+  useEffect(() => {
+    const code = props.el.value || "";
+    clearTimeout(timer.current);
+    timer.current = window.setTimeout(
+      () => {
+        setState({
+          code
+        });
+        if (state().code) {
+          try {
+            if (divRef.current) {
+              katex.render(state().code, divRef.current, {
+                strict: false,
+                output: "htmlAndMathml",
+                throwOnError: false,
+                displayMode: true,
+                macros: {
+                  "\\f": "#1f(#2)"
+                }
+              });
+            }
+          } catch (e) {
+          }
+        } 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",
+        textAlign: "center",
+        backgroundColor: "rgba(107, 114, 128, 0.05)",
+        paddingTop: "1em",
+        paddingBottom: "1em",
+        borderRadius: "0.25em"
+      },
+      contentEditable: false
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: divRef,
+        className: classNames("katex-container", {
+          hidden: !state().code.trim()
+        })
+      }
+    ),
+    !state().code.trim() && /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center", color: "#6B7280" } }, "Formula")
+  );
+};
+export {
+  Katex
+};

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

@@ -0,0 +1,50 @@
+/**
+ * @fileoverview Katex 数学公式渲染插件
+ * 提供基于 KaTeX 的数学公式渲染功能，支持块级和内联公式
+ * @author Katex Plugin Team
+ */
+import React from 'react';
+import { CodeNode, ElementProps } from '../../MarkdownEditor/el';
+/**
+ * KatexElement 组件 - KaTeX 数学公式元素组件
+ *
+ * 该组件用于在Markdown编辑器中渲染数学公式，基于KaTeX库实现。
+ * 支持块级公式渲染、拖拽排序、只读模式等功能。
+ *
+ * @component
+ * @description KaTeX 数学公式元素组件，支持LaTeX数学公式渲染
+ * @param {ElementProps<CodeNode>} props - 组件属性
+ * @param {CodeNode} props.element - 代码节点数据
+ * @param {boolean} [props.element.katex] - 是否为KaTeX公式
+ * @param {string} [props.element.value] - 公式内容
+ * @param {Object} props.attributes - Slate元素属性
+ * @param {React.ReactNode} props.children - 子元素
+ *
+ * @example
+ * ```tsx
+ * <KatexElement
+ *   element={{
+ *     type: 'katex',
+ *     katex: true,
+ *     value: '\\sum_{i=1}^{n} x_i = x_1 + x_2 + \\cdots + x_n'
+ *   }}
+ *   attributes={slateAttributes}
+ *   children={slateChildren}
+ * />
+ * ```
+ *
+ * @returns {React.ReactElement|null} 渲染的KaTeX公式组件，非KaTeX节点时返回null
+ *
+ * @remarks
+ * - 基于KaTeX库实现数学公式渲染
+ * - 支持LaTeX数学语法
+ * - 提供实时渲染预览
+ * - 支持拖拽排序功能
+ * - 响应式布局适配
+ * - 支持只读模式简化渲染
+ * - 提供隐藏内容副本用于搜索和SEO
+ * - 集成编辑器状态管理
+ */
+export declare function KatexElement(props: ElementProps<CodeNode>): React.JSX.Element | null;
+export { InlineKatex } from './InlineKatex';
+export { Katex } from './Katex';