@ant-design/agentic-ui 2.0.0

package/dist/MarkdownEditor/editor/tools/ToolBar/BaseBar.js

@@ -0,0 +1,414 @@
+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/MarkdownEditor/editor/tools/ToolBar/BaseBar.tsx
+import { Plus } from "@sofa-design/icons";
+import { Divider, Dropdown } from "antd";
+import classnames from "classnames";
+import React, { useContext, useMemo } from "react";
+import { I18nContext } from "../../../../i18n";
+import { useEditorStore } from "../../store";
+import { getInsertOptions } from "../InsertAutocomplete";
+import { useToolsConfig } from "./config/toolsConfig";
+import { useToolBarLogic } from "./hooks/useToolBarLogic";
+import { Node } from "slate";
+import { ClearFormatButton } from "./components/ClearFormatButton";
+import { ColorPickerButton } from "./components/ColorPickerButton";
+import { FormatButton } from "./components/FormatButton";
+import { FormattingTools } from "./components/FormattingTools";
+import { HeadingDropdown } from "./components/HeadingDropdown";
+import { LinkButton } from "./components/LinkButton";
+import { ToolBarItem } from "./components/ToolBarItem";
+import { UndoRedoButtons } from "./components/UndoRedoButtons";
+var TABLE_NODE_TYPES = [
+  "table-cell",
+  "table-row",
+  "table",
+  "thead",
+  "tbody",
+  "th",
+  "td"
+];
+var LINK_ALLOWED_NODE_TYPES = [
+  "head",
+  "paragraph",
+  "quote",
+  "b-list",
+  "n-list",
+  "t-list"
+];
+var HEADING_ALLOWED_NODE_TYPES = ["head", "paragraph"];
+var isTableNode = (nodeType) => {
+  return TABLE_NODE_TYPES.includes(nodeType);
+};
+var isNodeInTable = (currentNode, markdownEditorRef) => {
+  var _a;
+  if (!currentNode || !markdownEditorRef.current) {
+    return false;
+  }
+  if (isTableNode((_a = currentNode[0]) == null ? void 0 : _a.type)) {
+    return true;
+  }
+  try {
+    const parentNode = Node.parent(markdownEditorRef.current, currentNode[1]);
+    return isTableNode(parentNode == null ? void 0 : parentNode.type);
+  } catch (error) {
+    return false;
+  }
+};
+var BaseToolBar = React.memo((props) => {
+  const baseClassName = props.prefix || `toolbar-action`;
+  const { hashId } = props;
+  const {
+    markdownEditorRef,
+    keyTask$,
+    editorProps,
+    openInsertLink$,
+    domRect,
+    store,
+    setDomRect,
+    refreshFloatBar
+  } = useEditorStore();
+  const i18n = useContext(I18nContext);
+  const toolsConfig = useToolsConfig();
+  const toolBarLogic = useToolBarLogic({
+    markdownEditorRef,
+    keyTask$,
+    store,
+    openInsertLink$,
+    setDomRect,
+    refreshFloatBar,
+    domRect
+  });
+  const {
+    currentNode,
+    highColor,
+    isCodeNode,
+    isFormatActive,
+    isHighColorActive,
+    isLinkActive,
+    handleUndo,
+    handleRedo,
+    handleClearFormat,
+    handleFormat,
+    handleHeadingChange,
+    handleColorChange,
+    handleToggleHighColor,
+    handleToolClick,
+    handleInsertLink,
+    handleInsert
+  } = toolBarLogic;
+  const insertOptions = useMemo(() => {
+    const filterOption = (option) => {
+      if (!(editorProps == null ? void 0 : editorProps.image) && option.task === "uploadImage") {
+        return false;
+      }
+      return props.showInsertAction || option.task === "list";
+    };
+    return getInsertOptions({ isTop: false }, i18n.locale).map((o) => o == null ? void 0 : o.children).flat().filter(filterOption);
+  }, [editorProps == null ? void 0 : editorProps.image, props.showInsertAction, i18n.locale]);
+  const insertOptionElements = useMemo(
+    () => insertOptions.map((option) => /* @__PURE__ */ React.createElement(
+      ToolBarItem,
+      {
+        key: option.key,
+        title: option.label.join(" "),
+        icon: option.icon,
+        onClick: () => handleInsert(option),
+        className: classnames(`${baseClassName}-item`, hashId)
+      }
+    )),
+    [insertOptions, handleInsert, baseClassName, hashId]
+  );
+  const showConditions = useMemo(() => {
+    var _a, _b;
+    const isInTable = isNodeInTable(currentNode, markdownEditorRef);
+    return {
+      linkButton: currentNode && LINK_ALLOWED_NODE_TYPES.includes((_a = currentNode == null ? void 0 : currentNode[0]) == null ? void 0 : _a.type) && !isInTable,
+      headingDropdown: currentNode && HEADING_ALLOWED_NODE_TYPES.includes((_b = currentNode == null ? void 0 : currentNode[0]) == null ? void 0 : _b.type) && !isInTable,
+      isInTable
+    };
+  }, [currentNode]);
+  const commonProps = {
+    baseClassName,
+    hashId,
+    i18n
+  };
+  const createToolbarElement = (key, Component, props2) => /* @__PURE__ */ React.createElement(Component, __spreadValues(__spreadValues({ key }, commonProps), props2));
+  const renderFullToolbar = useMemo(() => {
+    const elements = [];
+    if (showConditions.isInTable) {
+      elements.push(
+        createToolbarElement("clear", ClearFormatButton, {
+          onClear: handleClearFormat
+        })
+      );
+      elements.push(
+        createToolbarElement("format", FormatButton, {
+          onFormat: handleFormat
+        })
+      );
+      elements.push(
+        createToolbarElement("color", ColorPickerButton, {
+          highColor,
+          isHighColorActive,
+          onColorChange: handleColorChange,
+          onToggleHighColor: handleToggleHighColor
+        })
+      );
+      elements.push(
+        createToolbarElement("formatting", FormattingTools, {
+          tools: toolsConfig,
+          editor: markdownEditorRef.current,
+          isCodeNode: isCodeNode(),
+          onToolClick: handleToolClick,
+          isFormatActive,
+          isInTable: true,
+          // 传递表格内标志
+          hideTools: props.hideTools
+        })
+      );
+      return elements;
+    }
+    if (props.showEditor) {
+      elements.push(
+        createToolbarElement("undo-redo", UndoRedoButtons, {
+          onUndo: handleUndo,
+          onRedo: handleRedo
+        })
+      );
+    }
+    elements.push(
+      createToolbarElement("clear", ClearFormatButton, {
+        onClear: handleClearFormat
+      })
+    );
+    elements.push(
+      createToolbarElement("format", FormatButton, {
+        onFormat: handleFormat
+      })
+    );
+    if (showConditions.headingDropdown) {
+      elements.push(
+        createToolbarElement("heading", HeadingDropdown, {
+          node: currentNode,
+          hideTools: props.hideTools,
+          onHeadingChange: handleHeadingChange
+        })
+      );
+    }
+    elements.push(
+      createToolbarElement("color", ColorPickerButton, {
+        highColor,
+        isHighColorActive,
+        onColorChange: handleColorChange,
+        onToggleHighColor: handleToggleHighColor
+      })
+    );
+    elements.push(...insertOptionElements);
+    elements.push(
+      createToolbarElement("formatting", FormattingTools, {
+        tools: toolsConfig,
+        editor: markdownEditorRef.current,
+        isCodeNode: isCodeNode(),
+        onToolClick: handleToolClick,
+        isFormatActive,
+        hideTools: props.hideTools
+      })
+    );
+    if (showConditions.linkButton) {
+      elements.push(
+        createToolbarElement("link", LinkButton, {
+          onInsertLink: handleInsertLink,
+          isLinkActive
+        })
+      );
+    }
+    return props.hideTools ? elements.filter((element) => {
+      var _a;
+      if (React.isValidElement(element) && element.key) {
+        return !((_a = props.hideTools) == null ? void 0 : _a.includes(element.key));
+      }
+      return true;
+    }) : elements;
+  }, [
+    props.showEditor,
+    props.hideTools,
+    showConditions,
+    currentNode,
+    highColor,
+    isHighColorActive,
+    insertOptionElements,
+    markdownEditorRef,
+    isCodeNode,
+    isFormatActive,
+    isLinkActive,
+    handleUndo,
+    handleRedo,
+    handleClearFormat,
+    handleFormat,
+    handleHeadingChange,
+    handleColorChange,
+    handleToggleHighColor,
+    handleToolClick,
+    handleInsertLink
+  ]);
+  const renderMinToolbar = useMemo(() => {
+    if (!props.min)
+      return null;
+    if (showConditions.isInTable) {
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, createToolbarElement("clear", ClearFormatButton, {
+        onClear: handleClearFormat
+      }), createToolbarElement("color", ColorPickerButton, {
+        highColor,
+        isHighColorActive,
+        onColorChange: handleColorChange,
+        onToggleHighColor: handleToggleHighColor
+      }), createToolbarElement("formatting", FormattingTools, {
+        tools: toolsConfig,
+        editor: markdownEditorRef.current,
+        isCodeNode: isCodeNode(),
+        onToolClick: handleToolClick,
+        isFormatActive,
+        isInTable: true,
+        hideTools: props.hideTools
+      }));
+    }
+    const dropdownItems = insertOptions.map((option) => {
+      var _a;
+      return {
+        label: /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } }, option.icon, (_a = option.label) == null ? void 0 : _a.at(0)),
+        key: `min-${option.key}`,
+        onClick: () => handleInsert(option)
+      };
+    });
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      ToolBarItem,
+      {
+        title: "更多操作",
+        icon: /* @__PURE__ */ React.createElement(Plus, null),
+        className: classnames(
+          `${baseClassName}-item`,
+          `${baseClassName}-item-min-plus-icon`,
+          hashId
+        ),
+        tabIndex: -1
+      },
+      /* @__PURE__ */ React.createElement(Dropdown, { menu: { items: dropdownItems } }, /* @__PURE__ */ React.createElement(Plus, { role: "img", "aria-label": "Plus" }))
+    ), /* @__PURE__ */ React.createElement(
+      Divider,
+      {
+        type: "vertical",
+        style: {
+          margin: "0 4px",
+          height: "18px",
+          borderColor: "rgba(0,0,0,0.15)"
+        }
+      }
+    ), createToolbarElement("undo-redo", UndoRedoButtons, {
+      onUndo: handleUndo,
+      onRedo: handleRedo
+    }), createToolbarElement("clear", ClearFormatButton, {
+      onClear: handleClearFormat
+    }), createToolbarElement("heading", HeadingDropdown, {
+      node: currentNode,
+      hideTools: props.hideTools,
+      onHeadingChange: handleHeadingChange
+    }), createToolbarElement("color", ColorPickerButton, {
+      highColor,
+      isHighColorActive,
+      onColorChange: handleColorChange,
+      onToggleHighColor: handleToggleHighColor
+    }), createToolbarElement("formatting", FormattingTools, {
+      tools: toolsConfig,
+      editor: markdownEditorRef.current,
+      isCodeNode: isCodeNode(),
+      onToolClick: handleToolClick,
+      isFormatActive,
+      hideTools: props.hideTools
+    }));
+  }, [
+    props.min,
+    insertOptions,
+    handleInsert,
+    baseClassName,
+    hashId,
+    currentNode,
+    props.hideTools,
+    highColor,
+    isHighColorActive,
+    markdownEditorRef,
+    isCodeNode,
+    isFormatActive,
+    handleUndo,
+    handleRedo,
+    handleClearFormat,
+    handleHeadingChange,
+    handleColorChange,
+    handleToggleHighColor,
+    handleToolClick
+  ]);
+  const renderExtra = useMemo(() => {
+    if (!props.extra)
+      return null;
+    const extraStyle = {
+      flex: 1,
+      display: "flex",
+      justifyContent: "flex-end",
+      alignItems: "center",
+      height: "100%"
+    };
+    return /* @__PURE__ */ React.createElement("div", { style: extraStyle }, props.extra.map((item, index) => {
+      const key = `extra-${index}`;
+      if (React.isValidElement(item)) {
+        return item.type === "span" ? /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: classnames(`${baseClassName}-item`, hashId),
+            key: `${key}-span`
+          },
+          item
+        ) : React.cloneElement(item, { key });
+      }
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classnames(`${baseClassName}-item`, hashId),
+          key: `${key}-div`
+        },
+        item
+      );
+    }));
+  }, [props.extra, baseClassName, hashId]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        height: "100%",
+        gap: "1px",
+        alignItems: "center"
+      }
+    },
+    props.min ? renderMinToolbar : renderFullToolbar,
+    renderExtra
+  );
+});
+BaseToolBar.displayName = "BaseToolBar";
+export {
+  BaseToolBar
+};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * 浮动工具栏,用于设置文本样式
+ */
+export declare const FloatBar: (props: {
+    readonly: boolean;
+}) => React.ReactPortal | null;

package/dist/MarkdownEditor/editor/tools/ToolBar/FloatBar.js

@@ -0,0 +1,144 @@
+// src/MarkdownEditor/editor/tools/ToolBar/FloatBar.tsx
+import { ConfigProvider } from "antd";
+import classNames from "classnames";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+import { Editor, Range, Transforms } from "slate";
+import { useRefFunction } from "../../../../hooks/useRefFunction";
+import { MARKDOWN_EDITOR_EVENTS } from "../../../BaseMarkdownEditor";
+import { useEditorStore } from "../../store";
+import { getSelRect } from "../../utils/dom";
+import { BaseToolBar } from "./BaseBar";
+import { useStyle } from "./floatBarStyle";
+import { ReadonlyBaseBar } from "./ReadonlyBaseBar";
+var fileMap = /* @__PURE__ */ new Map();
+var FloatBar = (props) => {
+  const floatBarRef = useRef(null);
+  const { domRect, setDomRect, markdownContainerRef, markdownEditorRef } = useEditorStore();
+  const [isOpen, setIsOpen] = useState(false);
+  const sel = React.useRef();
+  const resize = useRefFunction((force = false) => {
+    if (domRect && floatBarRef.current) {
+      let left = domRect.x;
+      left = left - ((props.readonly ? 65 : 178) - domRect.width) / 2;
+      const container = markdownContainerRef.current;
+      if (left < 4)
+        left = 4;
+      const barWidth = props.readonly ? 65 : 232;
+      if (left > container.clientWidth - barWidth)
+        left = container.clientWidth - barWidth / 2;
+      let top = isOpen && !force ? parseFloat(floatBarRef.current.style.top || "0") : domRect.top - 32;
+      const finalLeft = Math.max(left, 4);
+      const finalTop = Math.max(top, 4);
+      floatBarRef.current.style.left = finalLeft + "px";
+      floatBarRef.current.style.top = finalTop + "px";
+      setIsOpen(true);
+    } else {
+      setIsOpen(false);
+    }
+  });
+  useEffect(() => {
+    if (domRect && markdownEditorRef.current) {
+      resize(true);
+      sel.current = markdownEditorRef.current.selection;
+    } else {
+      setIsOpen(false);
+      fileMap.clear();
+    }
+  }, [domRect]);
+  useEffect(() => {
+    var _a;
+    const resizeFn = (e) => {
+      if (markdownEditorRef.current && floatBarRef.current) {
+        floatBarRef.current.style.top = e.clientY + 20 + "px";
+        floatBarRef.current.style.left = e.clientX + "px";
+        resize(true);
+      }
+    };
+    if (markdownContainerRef.current) {
+      (_a = markdownContainerRef.current) == null ? void 0 : _a.addEventListener(
+        MARKDOWN_EDITOR_EVENTS.SELECTIONCHANGE,
+        resizeFn
+      );
+    }
+    return () => {
+      var _a2;
+      if (markdownContainerRef.current) {
+        (_a2 = markdownContainerRef.current) == null ? void 0 : _a2.removeEventListener(
+          MARKDOWN_EDITOR_EVENTS.SELECTIONCHANGE,
+          resizeFn
+        );
+      }
+    };
+  }, [isOpen]);
+  useEffect(() => {
+    var _a;
+    if (typeof window === "undefined")
+      return;
+    const close = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        setIsOpen(false);
+        fileMap.clear();
+        if (!sel.current)
+          return;
+        const end = Range.end(sel.current).path;
+        if (Editor.hasPath(markdownEditorRef.current, end)) {
+          Transforms.select(
+            markdownEditorRef.current,
+            Editor.end(markdownEditorRef.current, end)
+          );
+        }
+      }
+    };
+    (_a = markdownContainerRef == null ? void 0 : markdownContainerRef.current) == null ? void 0 : _a.addEventListener("keydown", close);
+    return () => {
+      var _a2;
+      (_a2 = markdownContainerRef == null ? void 0 : markdownContainerRef.current) == null ? void 0 : _a2.removeEventListener("keydown", close);
+    };
+  }, [isOpen]);
+  useEffect(() => {
+    const change = () => {
+      if (isOpen) {
+        const rect = getSelRect();
+        if (rect) {
+          setDomRect == null ? void 0 : setDomRect(rect);
+        }
+        resize(true);
+      }
+    };
+    window.addEventListener("resize", change);
+    return () => window.removeEventListener("resize", change);
+  }, []);
+  const context = useContext(ConfigProvider.ConfigContext);
+  const baseClassName = context == null ? void 0 : context.getPrefixCls(`md-editor-float-bar`);
+  const { wrapSSR, hashId } = useStyle(baseClassName);
+  if (!markdownContainerRef.current)
+    return null;
+  return ReactDOM.createPortal(
+    wrapSSR(
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            opacity: isOpen ? 1 : 0,
+            transition: "all 0.3s ease-out",
+            userSelect: "none"
+          },
+          ref: floatBarRef,
+          onMouseDown: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          },
+          className: classNames(baseClassName, hashId)
+        },
+        props.readonly ? /* @__PURE__ */ React.createElement(ReadonlyBaseBar, { prefix: baseClassName, hashId }) : /* @__PURE__ */ React.createElement(BaseToolBar, { prefix: baseClassName, hashId })
+      )
+    ),
+    document.body
+  );
+};
+export {
+  FloatBar
+};

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

@@ -0,0 +1,10 @@
+import React from 'react';
+/**
+ * 复制基础栏
+ * @param props
+ * @returns
+ */
+export declare const ReadonlyBaseBar: (props: {
+    prefix?: string;
+    hashId?: string;
+}) => React.JSX.Element;