@ant-design/agentic-ui 2.0.0

package/dist/MarkdownEditor/editor/tools/InsertLink.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+/**
+ * 插入链接组件
+ *
+ * 该组件提供在 Markdown 编辑器中插入和编辑链接的功能。
+ * 支持多种链接插入方式：
+ * - 手动输入链接URL
+ * - 从文档列表中选择内部链接
+ * - 自动检测和转换选中文本为链接
+ * - 支持锚点链接和相对路径
+ *
+ * 功能特性：
+ * - 模态框界面，用户体验友好
+ * - 实时链接验证和预览
+ * - 支持删除现有链接
+ * - 智能文本选择和替换
+ * - 国际化支持
+ * - 键盘快捷键支持
+ *
+ * @returns 插入链接的模态框组件，如果未打开则返回null
+ *
+ * @example
+ * ```tsx
+ * // 组件会自动监听编辑器的 openInsertLink$ 事件
+ * <InsertLink />
+ * ```
+ *
+ * @remarks
+ * - 组件通过 `useSubject` 监听 `store.openInsertLink$` 事件
+ * - 使用 `useGetSetState` 管理模态框状态
+ * - 支持通过 EditorUtils 操作 Slate.js 编辑器
+ * - 提供链接有效性检查和用户反馈
+ */
+export declare const InsertLink: () => React.JSX.Element | null;

package/dist/MarkdownEditor/editor/tools/InsertLink.js

@@ -0,0 +1,210 @@
+// src/MarkdownEditor/editor/tools/InsertLink.tsx
+import { useRefFunction } from "../../../hooks/useRefFunction";
+import { DeleteOutlined } from "@ant-design/icons";
+import { Input, Modal, Tooltip } from "antd";
+import React, { useCallback, useContext, useRef } from "react";
+import { Text, Transforms } from "slate";
+import { I18nContext } from "../../../i18n";
+import { useSubject } from "../../hooks/subscribe";
+import { useEditorStore } from "../store";
+import { useGetSetState } from "../utils";
+import { EditorUtils } from "../utils/editorUtils";
+import { isLink, parsePath } from "../utils/path";
+var InsertLink = () => {
+  const { markdownContainerRef, openInsertLink$, domRect, markdownEditorRef } = useEditorStore();
+  const { locale } = useContext(I18nContext);
+  const selRef = useRef();
+  const inputRef = useRef(null);
+  const [state, setState] = useGetSetState({
+    open: false,
+    inputKeyword: "",
+    oldUrl: "",
+    index: 0,
+    docs: [],
+    filterDocs: [],
+    anchors: [],
+    filterAnchors: []
+  });
+  const prevent = useCallback((e) => {
+    e.preventDefault();
+  }, []);
+  const setPath = useCallback((path) => {
+    if (isLink(path)) {
+      close(path);
+    } else {
+      const parse = parsePath(path);
+      if (!parse.path && parse.hash) {
+        return close("#" + parse.hash);
+      }
+      const realPath = parse.path;
+      const relativePath = realPath;
+      close(`${relativePath}${parse.hash ? `#${parse.hash}` : ""}`);
+    }
+  }, []);
+  const openInsertLink = useRefFunction((sel) => {
+    var _a;
+    if (domRect) {
+      selRef.current = sel;
+      (_a = markdownContainerRef.current.parentElement) == null ? void 0 : _a.addEventListener(
+        "wheel",
+        prevent,
+        {
+          passive: false
+        }
+      );
+      const url = EditorUtils.getUrl(markdownEditorRef.current);
+      let path = url;
+      if (url && !url.startsWith("#") && !isLink(url)) {
+        path = url;
+      }
+      const parse = parsePath(path);
+      setState({
+        oldUrl: url || "",
+        open: true,
+        filterDocs: [],
+        docs: [],
+        inputKeyword: path
+      });
+      if (parse.hash) {
+      } else {
+        setState({
+          filterAnchors: [],
+          anchors: []
+        });
+      }
+      setTimeout(() => {
+        var _a2;
+        (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+      }, 16);
+    }
+  });
+  useSubject(openInsertLink$, openInsertLink);
+  const close = useCallback((url) => {
+    var _a;
+    (_a = markdownContainerRef.current.parentElement) == null ? void 0 : _a.removeEventListener(
+      "wheel",
+      prevent
+    );
+    setState({ open: false });
+    EditorUtils.focus(markdownEditorRef.current);
+    Transforms.setNodes(
+      markdownEditorRef.current,
+      { url },
+      { match: Text.isText, split: true }
+    );
+    if (typeof window === "undefined")
+      return;
+    if (typeof window.matchMedia === "undefined")
+      return;
+  }, []);
+  if (!state().open)
+    return null;
+  return /* @__PURE__ */ React.createElement(
+    Modal,
+    {
+      afterClose: () => {
+        close(state().oldUrl);
+      },
+      open: state().open,
+      onOk: (e) => {
+        e.preventDefault();
+        if (isLink(state().inputKeyword)) {
+          close(state().inputKeyword);
+        } else {
+          if (state().anchors.length) {
+            const target = state().filterAnchors[state().index];
+            if (target) {
+              setPath(target.item.path + target.value);
+            }
+          } else {
+            const target = state().filterDocs[state().index];
+            if (target) {
+              setPath(target.path);
+            } else {
+              close(state().inputKeyword);
+            }
+          }
+        }
+      },
+      onCancel: () => {
+        close(state().oldUrl);
+      },
+      style: {
+        pointerEvents: "auto",
+        width: 370
+      },
+      title: " "
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          padding: "0 6px",
+          width: "100%",
+          gap: 8
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        Input.TextArea,
+        {
+          ref: inputRef,
+          value: state().inputKeyword,
+          spellCheck: false,
+          onKeyDown: (e) => {
+            if (e.key.toLowerCase() === "backspace" && state().anchors.length && (e.metaKey || e.altKey || state().inputKeyword.endsWith("#") || !state().inputKeyword.includes("#"))) {
+              setState({
+                anchors: [],
+                filterAnchors: []
+              });
+            }
+          },
+          onChange: (e) => {
+            const key = e.target.value.toLowerCase();
+            if (state().anchors.length) {
+              const parse = parsePath(key);
+              const filterAnchors = state().anchors.filter((d) => {
+                return !parse.hash || d.value.toLowerCase().includes(parse.hash);
+              });
+              setState({
+                filterAnchors
+              });
+            } else {
+              const filterDocs = state().docs.filter((d) => {
+                return d.path.toLowerCase().includes(key);
+              });
+              setState({
+                filterDocs
+              });
+            }
+            setState({
+              inputKeyword: e.target.value,
+              index: 0
+            });
+          },
+          style: {
+            flex: 1
+          }
+        }
+      ),
+      /* @__PURE__ */ React.createElement(Tooltip, { title: (locale == null ? void 0 : locale.removeLink) || "移除链接" }, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            cursor: "pointer",
+            fontSize: "1.1em",
+            color: "rgba(0,0,0,0.5)"
+          },
+          onClick: () => {
+            close();
+          }
+        },
+        /* @__PURE__ */ React.createElement(DeleteOutlined, null)
+      ))
+    )
+  );
+};
+export {
+  InsertLink
+};

package/dist/MarkdownEditor/editor/tools/Leading.d.ts

@@ -0,0 +1,29 @@
+import { AnchorProps } from 'antd';
+import React from 'react';
+import { Elements } from '../../BaseMarkdownEditor';
+/**
+ * 目录组件属性接口
+ */
+interface TocHeadingProps {
+    /** 编辑器的 schema 数据 */
+    schema: Elements[];
+    /** Anchor 组件的额外属性 */
+    anchorProps?: AnchorProps;
+    /** 是否使用自定义容器渲染，防止遮挡外部 DOM */
+    useCustomContainer?: boolean;
+}
+/**
+ * 目录组件
+ *
+ * 基于编辑器内容自动生成目录，支持：
+ * - 自动提取1-4级标题
+ * - 智能滚动定位和高亮
+ * - 内部滚动和页面滚动的双重支持
+ * - 性能优化的缓存机制
+ *
+ * @param schema - 编辑器的内容数据
+ * @param anchorProps - 传递给 Anchor 组件的额外属性
+ * @returns 目录组件
+ */
+export declare const TocHeading: React.FC<TocHeadingProps>;
+export {};

package/dist/MarkdownEditor/editor/tools/Leading.js

@@ -0,0 +1,328 @@
+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/tools/Leading.tsx
+import { Anchor, ConfigProvider } from "antd";
+import { nanoid } from "nanoid";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Node } from "slate";
+import {
+  useDebounce,
+  useGetSetState
+} from "../../BaseMarkdownEditor";
+import { useEditorStore } from "../store";
+import { getOffsetTop, slugify } from "../utils/dom";
+var TocTitle = ({ children }) => {
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      style: {
+        maxWidth: 200,
+        display: "inline-block",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        fontSize: 14
+      }
+    },
+    children
+  );
+};
+var cache = /* @__PURE__ */ new Map();
+function buildTree(headers) {
+  const root = {
+    title: "",
+    children: [],
+    id: "",
+    key: nanoid()
+  };
+  if (!headers.length)
+    return root;
+  const stack = [{ node: root, level: 0 }];
+  for (const header of headers) {
+    const newNode = {
+      title: header.title,
+      children: [],
+      id: header.id,
+      key: nanoid(),
+      level: header.level
+    };
+    while (stack.length > 0 && stack[stack.length - 1].level >= header.level) {
+      stack.pop();
+    }
+    if (stack.length === 0) {
+      stack.push({ node: root, level: 0 });
+    }
+    const parent = stack[stack.length - 1].node;
+    parent.children.push(newNode);
+    stack.push({ node: newNode, level: header.level });
+  }
+  return root;
+}
+function convertToAnchorItems(node) {
+  var _a;
+  if (!((_a = node.children) == null ? void 0 : _a.length))
+    return [];
+  return node.children.map((child) => {
+    var _a2;
+    return {
+      id: child.id,
+      key: child.key,
+      href: `#${slugify(child.id)}`,
+      title: /* @__PURE__ */ React.createElement(TocTitle, { key: `title-${child.id}` }, child.title),
+      // 支持二级子标题
+      children: (_a2 = child.children) == null ? void 0 : _a2.map((subChild) => {
+        var _a3;
+        return {
+          id: subChild.id,
+          key: subChild.key,
+          href: `#${slugify(subChild.id)}`,
+          title: /* @__PURE__ */ React.createElement(TocTitle, { key: `title-${subChild.id}` }, subChild.title),
+          // 支持三级子标题（最大深度）
+          children: (_a3 = subChild.children) == null ? void 0 : _a3.map((subSubChild) => ({
+            id: subSubChild.id,
+            key: subSubChild.key,
+            href: `#${slugify(subSubChild.id)}`,
+            title: /* @__PURE__ */ React.createElement(TocTitle, { key: `title-${subSubChild.id}` }, subSubChild.title)
+          }))
+        };
+      }),
+      level: child.level
+    };
+  });
+}
+var TocContainer = ({ children, containerRef }) => {
+  const [containerRect, setContainerRect] = useState(null);
+  useEffect(() => {
+    const updateRect = () => {
+      if (containerRef.current) {
+        setContainerRect(containerRef.current.getBoundingClientRect());
+      }
+    };
+    updateRect();
+    window.addEventListener("resize", updateRect);
+    window.addEventListener("scroll", updateRect);
+    return () => {
+      window.removeEventListener("resize", updateRect);
+      window.removeEventListener("scroll", updateRect);
+    };
+  }, [containerRef]);
+  const shouldRenderInContainer = useMemo(() => {
+    if (!containerRect)
+      return false;
+    const isInViewport = containerRect.top < window.innerHeight && containerRect.bottom > 0;
+    const hasEnoughSpace = containerRect.height > 200;
+    return isInViewport && hasEnoughSpace;
+  }, [containerRect]);
+  return /* @__PURE__ */ React.createElement(
+    ConfigProvider,
+    {
+      getPopupContainer: () => {
+        if (shouldRenderInContainer && containerRef.current) {
+          return containerRef.current;
+        }
+        return document.body;
+      },
+      getTargetContainer: () => containerRef.current || document.body
+    },
+    children
+  );
+};
+var TocHeading = ({
+  schema,
+  anchorProps,
+  useCustomContainer = true
+}) => {
+  const { markdownContainerRef } = useEditorStore();
+  const [state, setState] = useGetSetState({
+    headings: [],
+    active: ""
+  });
+  const isScrollingInternally = useRef(false);
+  const getHeading = useCallback(() => {
+    if (!(schema == null ? void 0 : schema.length)) {
+      setState({ headings: [] });
+      return;
+    }
+    const headings = [];
+    for (const s of schema) {
+      if (s.type === "head" && s.level <= 4) {
+        const title = Node.string(s);
+        const id = slugify(title);
+        if (!title)
+          continue;
+        const cached = cache.get(s);
+        if (cached) {
+          headings.push(cached);
+          continue;
+        }
+        const heading = {
+          title,
+          level: s.level,
+          id,
+          key: nanoid(),
+          schema: s
+        };
+        cache.set(s, heading);
+        headings.push(heading);
+      }
+    }
+    setState({ headings });
+  }, [schema, setState]);
+  useEffect(() => {
+    cache.clear();
+    getHeading();
+  }, [schema, getHeading]);
+  useDebounce(getHeading, 100, [schema]);
+  useEffect(() => {
+    const container = markdownContainerRef.current;
+    if (!container)
+      return;
+    const handleScroll = (e) => {
+      if (!isScrollingInternally.current)
+        return;
+      const target = e.target;
+      const scrollTop = target.scrollTop;
+      const currentHeadings = state().headings.slice().reverse();
+      for (const heading of currentHeadings) {
+        const element = document.getElementById(heading.id);
+        if (element && scrollTop > getOffsetTop(element, container) - 20) {
+          setState({ active: heading.id });
+          return;
+        }
+      }
+      setState({ active: "" });
+    };
+    container.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      container.removeEventListener("scroll", handleScroll);
+    };
+  }, [markdownContainerRef, setState, state]);
+  useEffect(() => {
+    const handleScroll = () => {
+      if (typeof window === "undefined")
+        return;
+      if (isScrollingInternally.current)
+        return;
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      const currentHeadings = state().headings.slice().reverse();
+      for (const heading of currentHeadings) {
+        const element = document.getElementById(heading.id);
+        if (element) {
+          const elementTop = element.getBoundingClientRect().top + scrollTop;
+          if (scrollTop >= elementTop - 100) {
+            setState({ active: heading.id });
+            return;
+          }
+        }
+      }
+      setState({ active: "" });
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [setState, state]);
+  const handleAnchorClick = useCallback(
+    (e, link) => {
+      e.preventDefault();
+      const targetId = link.href.split("#")[1];
+      const targetElement = document.getElementById(targetId);
+      if (!targetElement) {
+        console.warn(`Target element with id "${targetId}" not found`);
+        return;
+      }
+      const container = markdownContainerRef.current;
+      if (container && container.contains(targetElement)) {
+        isScrollingInternally.current = true;
+        const offsetTop = getOffsetTop(targetElement, container);
+        container.scrollTo({
+          top: offsetTop - 20,
+          // 预留20px的缓冲空间
+          behavior: "smooth"
+        });
+        setTimeout(() => {
+          isScrollingInternally.current = false;
+        }, 500);
+      } else {
+        isScrollingInternally.current = false;
+        targetElement.scrollIntoView({
+          behavior: "smooth",
+          block: "start"
+        });
+        setTimeout(() => {
+          window.scrollBy(0, -100);
+        }, 100);
+      }
+    },
+    [markdownContainerRef]
+  );
+  const treeData = useMemo(
+    () => buildTree(state().headings),
+    [state().headings]
+  );
+  const items = useMemo(() => convertToAnchorItems(treeData), [treeData]);
+  if (!items.length) {
+    return null;
+  }
+  if (!useCustomContainer) {
+    return /* @__PURE__ */ React.createElement(
+      Anchor,
+      __spreadProps(__spreadValues({
+        style: {
+          minWidth: 200,
+          maxHeight: "min(calc(100vh - 180px), 70vh)",
+          overflowY: "auto",
+          overflowX: "hidden",
+          paddingRight: 4
+        },
+        offsetTop: 96,
+        onClick: handleAnchorClick
+      }, anchorProps), {
+        items
+      })
+    );
+  }
+  return /* @__PURE__ */ React.createElement(TocContainer, { containerRef: markdownContainerRef }, /* @__PURE__ */ React.createElement(
+    Anchor,
+    __spreadProps(__spreadValues({
+      style: {
+        minWidth: 200,
+        maxHeight: "min(calc(100vh - 180px), 70vh)",
+        overflowY: "auto",
+        overflowX: "hidden",
+        paddingRight: 4
+      },
+      offsetTop: 96,
+      onClick: handleAnchorClick
+    }, anchorProps), {
+      items
+    })
+  ));
+};
+export {
+  TocHeading
+};

package/dist/MarkdownEditor/editor/tools/ToolBar/BaseBar.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ToolsKeyType as ConfigToolsKeyType } from './config/toolsConfig';
+export type ToolsKeyType = ConfigToolsKeyType;
+/**
+ * 基础工具栏
+ */
+export declare const BaseToolBar: React.NamedExoticComponent<{
+    prefix?: string | undefined;
+    showInsertAction?: boolean | undefined;
+    extra?: React.ReactNode[] | undefined;
+    min?: boolean | undefined;
+    readonly?: boolean | undefined;
+    hashId?: string | undefined;
+    hideTools?: ConfigToolsKeyType[] | undefined;
+    showEditor?: boolean | undefined;
+}>;