@ant-design/agentic-ui 2.0.0

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

@@ -0,0 +1,274 @@
+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/MarkdownEditor/editor/tools/ToolBar/ReadonlyBaseBar.tsx
+import {
+  CommentOutlined,
+  CopyFilled,
+  HighlightFilled
+} from "@ant-design/icons";
+import { Input, message, Modal } from "antd";
+import classnames from "classnames";
+import copy from "copy-to-clipboard";
+import React, { useContext, useEffect, useMemo } from "react";
+import { Editor, Element, Node, Point, Transforms } from "slate";
+import { I18nContext } from "../../../../i18n";
+import { useEditorStore } from "../../store";
+import {
+  getPointStrOffset,
+  getSelectionFromDomSelection
+} from "../../utils/editorUtils";
+var ReadonlyBaseBar = (props) => {
+  const baseClassName = props.prefix || `toolbar-action`;
+  const { hashId } = props;
+  const { refreshFloatBar, markdownEditorRef, editorProps } = useEditorStore();
+  const [, setRefresh] = React.useState(false);
+  useEffect(() => {
+    setRefresh((r) => !r);
+  }, [refreshFloatBar]);
+  const i18n = useContext(I18nContext);
+  const [node] = Editor.nodes(markdownEditorRef.current, {
+    match: (n) => Element.isElement(n),
+    mode: "lowest"
+  });
+  const listDom = useMemo(() => {
+    var _a, _b;
+    let list = [];
+    if (((_a = editorProps == null ? void 0 : editorProps.comment) == null ? void 0 : _a.enable) && ((_b = editorProps == null ? void 0 : editorProps.comment) == null ? void 0 : _b.onSubmit)) {
+      list.push(
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            role: "button",
+            key: "highlight",
+            className: classnames(`${baseClassName}-item`, hashId),
+            onClick: () => __async(void 0, null, function* () {
+              var _a2, _b2;
+              if (typeof window === "undefined")
+                return;
+              const domSelection = window.getSelection();
+              const editor = markdownEditorRef.current;
+              let selection = editor.selection;
+              if (!selection) {
+                if (domSelection) {
+                  selection = getSelectionFromDomSelection(
+                    markdownEditorRef.current,
+                    domSelection
+                  );
+                }
+                if (!selection) {
+                  return;
+                }
+              }
+              let texts = [];
+              let title = "";
+              const fragments = Node.fragment(editor, selection);
+              for (let i = 0; i < fragments.length; i++) {
+                texts.push(Node.string(fragments[i]));
+              }
+              for (const str of texts) {
+                title += str;
+              }
+              const { focus, anchor } = selection;
+              const [start, end] = Point.isAfter(focus, anchor) ? [anchor, focus] : [focus, anchor];
+              const anchorOffset = getPointStrOffset(editor, start);
+              const focusOffset = getPointStrOffset(editor, end);
+              const comment = {
+                selection: { anchor: start, focus: end },
+                path: start.path,
+                time: Date.now(),
+                id: Date.now(),
+                content: "",
+                anchorOffset,
+                focusOffset,
+                refContent: title,
+                commentType: "highlight"
+              };
+              yield (_b2 = (_a2 = editorProps == null ? void 0 : editorProps.comment) == null ? void 0 : _a2.onSubmit) == null ? void 0 : _b2.call(_a2, comment.id + "", comment);
+              Transforms.setNodes(
+                editor,
+                {
+                  updateTimestamp: Date.now()
+                },
+                {
+                  at: comment.path
+                }
+              );
+            })
+          },
+          /* @__PURE__ */ React.createElement(HighlightFilled, null)
+        )
+      );
+      list.push(
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            role: "button",
+            key: "comment",
+            className: classnames(`${baseClassName}-item`, hashId),
+            onClick: () => {
+              var _a2;
+              if (typeof window === "undefined")
+                return;
+              const domSelection = window.getSelection();
+              const editor = markdownEditorRef.current;
+              let selection = editor.selection;
+              if (!selection) {
+                if (domSelection) {
+                  selection = getSelectionFromDomSelection(
+                    markdownEditorRef.current,
+                    domSelection
+                  );
+                }
+                if (!selection) {
+                  return;
+                }
+              }
+              let texts = [];
+              let title = "";
+              const fragments = Node.fragment(editor, selection);
+              for (let i = 0; i < fragments.length; i++) {
+                texts.push(Node.string(fragments[i]));
+              }
+              for (const str of texts) {
+                title += str;
+              }
+              const { focus, anchor } = selection;
+              const [start, end] = Point.isAfter(focus, anchor) ? [anchor, focus] : [focus, anchor];
+              const anchorOffset = getPointStrOffset(editor, start);
+              const focusOffset = getPointStrOffset(editor, end);
+              const comment = {
+                selection: { anchor: start, focus: end },
+                path: start.path,
+                time: Date.now(),
+                id: Date.now(),
+                content: "",
+                anchorOffset,
+                focusOffset,
+                refContent: title,
+                commentType: "comment"
+              };
+              Modal.confirm({
+                title: ((_a2 = i18n.locale) == null ? void 0 : _a2.addComment) || "添加评论",
+                content: /* @__PURE__ */ React.createElement(
+                  Input.TextArea,
+                  {
+                    style: {
+                      width: "100%",
+                      height: 100,
+                      resize: "none"
+                    },
+                    onChange: (e) => {
+                      comment.content = e.target.value;
+                    }
+                  }
+                ),
+                icon: null,
+                onOk: () => __async(void 0, null, function* () {
+                  var _a3, _b2;
+                  if (comment.content.trim() === "") {
+                    return;
+                  }
+                  try {
+                    yield (_b2 = (_a3 = editorProps == null ? void 0 : editorProps.comment) == null ? void 0 : _a3.onSubmit) == null ? void 0 : _b2.call(
+                      _a3,
+                      comment.id + "",
+                      comment
+                    );
+                    Transforms.setNodes(
+                      editor,
+                      {
+                        updateTimestamp: Date.now()
+                      },
+                      {
+                        at: comment.path
+                      }
+                    );
+                  } catch (error) {
+                  }
+                })
+              });
+            }
+          },
+          /* @__PURE__ */ React.createElement(CommentOutlined, null)
+        )
+      );
+    }
+    list.push(
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          role: "button",
+          key: "insert",
+          className: classnames(`${baseClassName}-item`, hashId),
+          onClick: () => {
+            var _a2;
+            const domSelection = window.getSelection();
+            const editor = markdownEditorRef.current;
+            let selection = editor.selection;
+            if (!selection) {
+              if (domSelection) {
+                selection = getSelectionFromDomSelection(
+                  markdownEditorRef.current,
+                  domSelection
+                );
+              }
+              if (!selection) {
+                return;
+              }
+            }
+            let texts = [];
+            let title = "";
+            const fragments = Node.fragment(editor, selection);
+            for (let i = 0; i < fragments.length; i++) {
+              texts.push(Node.string(fragments[i]));
+            }
+            for (const str of texts) {
+              title += str;
+            }
+            try {
+              copy(title);
+              message.success(((_a2 = i18n.locale) == null ? void 0 : _a2.copySuccess) || "复制成功");
+            } catch (error) {
+            }
+          }
+        },
+        /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement(CopyFilled, null))
+      )
+    );
+    return list;
+  }, [node]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        height: "100%",
+        gap: "1px",
+        alignItems: "center"
+      }
+    },
+    listDom
+  );
+};
+export {
+  ReadonlyBaseBar
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const _default: React.MemoExoticComponent<(props: {
+    prefix?: string | undefined;
+    extra?: React.ReactNode[] | undefined;
+    min?: boolean | undefined;
+    hideTools?: import("./config/toolsConfig").ToolsKeyType[] | undefined;
+}) => React.ReactNode>;
+export default _default;

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

@@ -0,0 +1,53 @@
+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/ToolBar.tsx
+import { ConfigProvider } from "antd";
+import classNames from "classnames";
+import React, { useContext } from "react";
+import { BaseToolBar } from "./BaseBar";
+import { useStyle } from "./toolBarStyle";
+var ToolBar = (props) => {
+  const context = useContext(ConfigProvider.ConfigContext);
+  const baseClassName = context == null ? void 0 : context.getPrefixCls(`md-editor-toolbar`);
+  const { wrapSSR, hashId } = useStyle(baseClassName);
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        onMouseDown: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        className: classNames(baseClassName, hashId, props.prefix)
+      },
+      /* @__PURE__ */ React.createElement(
+        BaseToolBar,
+        __spreadValues({
+          prefix: baseClassName,
+          showEditor: true,
+          showInsertAction: true,
+          hashId
+        }, props)
+      )
+    )
+  );
+};
+var ToolBar_default = React.memo(ToolBar);
+export {
+  ToolBar_default as default
+};

package/dist/MarkdownEditor/editor/tools/ToolBar/components/ClearFormatButton.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface ClearFormatButtonProps {
+    baseClassName: string;
+    hashId?: string;
+    i18n: any;
+    onClear: () => void;
+}
+export declare const ClearFormatButton: React.NamedExoticComponent<ClearFormatButtonProps>;
+export {};

package/dist/MarkdownEditor/editor/tools/ToolBar/components/ClearFormatButton.js

@@ -0,0 +1,42 @@
+// src/MarkdownEditor/editor/tools/ToolBar/components/ClearFormatButton.tsx
+import classnames from "classnames";
+import React from "react";
+import { ToolBarItem } from "./ToolBarItem";
+var ClearIcon = React.memo(() => {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      viewBox: "0 0 1024 1024",
+      version: "1.1",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "1em",
+      height: "1em"
+    },
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M604.536246 736.222443l288.794439-282.693148-287.777557-270.999007-270.999007 283.201589z m-72.70705 71.181728L264.389275 539.455809 145.922542 660.973188l164.734856 164.734856a50.844091 50.844091 0 0 0 36.099305 14.744786h107.789474a101.688183 101.688183 0 0 0 71.181728-28.981132z m109.314796 35.082423h254.220457a50.844091 50.844091 0 0 1 0 101.688183H346.248262a152.532274 152.532274 0 0 1-107.789474-44.742801l-164.734856-164.734856a101.688183 101.688183 0 0 1 0-142.363456l457.596823-480.476663a101.688183 101.688183 0 0 1 143.380337-3.559086l287.269117 270.999007a101.688183 101.688183 0 0 1 4.067527 143.888778l-3.050646 3.050646z",
+        fill: "currentColor"
+      }
+    )
+  );
+});
+ClearIcon.displayName = "ClearIcon";
+var ClearFormatButton = React.memo(
+  ({ baseClassName, hashId, i18n, onClear }) => {
+    var _a;
+    return /* @__PURE__ */ React.createElement(
+      ToolBarItem,
+      {
+        title: ((_a = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _a.clearFormatting) || "清除格式",
+        icon: /* @__PURE__ */ React.createElement(ClearIcon, null),
+        onClick: onClear,
+        className: classnames(`${baseClassName}-item`, hashId)
+      }
+    );
+  }
+);
+ClearFormatButton.displayName = "ClearFormatButton";
+export {
+  ClearFormatButton
+};

package/dist/MarkdownEditor/editor/tools/ToolBar/components/ColorPickerButton.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface ColorPickerButtonProps {
+    baseClassName: string;
+    hashId?: string;
+    i18n: any;
+    highColor: string | null;
+    isHighColorActive: boolean;
+    onColorChange: (color: string) => void;
+    onToggleHighColor: () => void;
+}
+export declare const ColorPickerButton: React.NamedExoticComponent<ColorPickerButtonProps>;
+export {};

package/dist/MarkdownEditor/editor/tools/ToolBar/components/ColorPickerButton.js

@@ -0,0 +1,89 @@
+// src/MarkdownEditor/editor/tools/ToolBar/components/ColorPickerButton.tsx
+import { HighlightOutlined } from "@ant-design/icons";
+import { ColorPicker } from "antd";
+import classnames from "classnames";
+import React from "react";
+import { ToolBarItem } from "./ToolBarItem";
+var colors = [
+  { color: "rgba(16,185,129,1)" },
+  { color: "rgba(245,158,11,1)" },
+  { color: "rgba(59,130,246,1)" },
+  { color: "rgba(156,163,175,.8)" },
+  { color: "rgba(99,102, 241,1)" },
+  { color: "rgba(244,63,94,1)" },
+  { color: "rgba(217,70,239,1)" },
+  { color: "rgba(14, 165, 233, 1)" }
+];
+var ColorPickerButton = React.memo(
+  ({
+    baseClassName,
+    hashId,
+    i18n,
+    highColor,
+    isHighColorActive,
+    onColorChange,
+    onToggleHighColor
+  }) => {
+    var _a;
+    const handleColorChange = React.useCallback(
+      (color) => {
+        onColorChange(color.toHexString());
+      },
+      [onColorChange]
+    );
+    return /* @__PURE__ */ React.createElement(
+      ToolBarItem,
+      {
+        title: ((_a = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _a["font-color"]) || "字体颜色",
+        icon: /* @__PURE__ */ React.createElement(HighlightOutlined, null),
+        className: classnames(`${baseClassName}-item`, hashId),
+        style: { position: "relative" }
+      },
+      /* @__PURE__ */ React.createElement(
+        ColorPicker,
+        {
+          style: {
+            position: "absolute",
+            opacity: 0,
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%"
+          },
+          size: "small",
+          value: highColor,
+          presets: [
+            {
+              label: "Colors",
+              colors: colors.map((c) => c.color)
+            }
+          ],
+          onChange: handleColorChange
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            height: "100%",
+            alignItems: "center",
+            fontWeight: isHighColorActive ? "bold" : void 0,
+            textDecoration: "underline solid " + highColor,
+            textDecorationThickness: 2,
+            lineHeight: 1,
+            color: highColor || void 0
+          },
+          role: "button",
+          onMouseEnter: (e) => e.stopPropagation(),
+          onClick: onToggleHighColor
+        },
+        /* @__PURE__ */ React.createElement(HighlightOutlined, null)
+      )
+    );
+  }
+);
+ColorPickerButton.displayName = "ColorPickerButton";
+export {
+  ColorPickerButton
+};

package/dist/MarkdownEditor/editor/tools/ToolBar/components/FormatButton.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface FormatButtonProps {
+    baseClassName: string;
+    hashId?: string;
+    i18n: any;
+    onFormat: () => void;
+}
+export declare const FormatButton: React.NamedExoticComponent<FormatButtonProps>;
+export {};

package/dist/MarkdownEditor/editor/tools/ToolBar/components/FormatButton.js

@@ -0,0 +1,24 @@
+// src/MarkdownEditor/editor/tools/ToolBar/components/FormatButton.tsx
+import { FormatPainterOutlined } from "@ant-design/icons";
+import classnames from "classnames";
+import React from "react";
+import { ToolBarItem } from "./ToolBarItem";
+var FormatButton = React.memo(
+  ({ baseClassName, hashId, i18n, onFormat }) => {
+    var _a;
+    return /* @__PURE__ */ React.createElement(
+      ToolBarItem,
+      {
+        title: ((_a = i18n.locale) == null ? void 0 : _a.format) || "格式化",
+        icon: /* @__PURE__ */ React.createElement(FormatPainterOutlined, null),
+        onClick: onFormat,
+        className: classnames(`${baseClassName}-item`, hashId),
+        style: { fontSize: "0.9em" }
+      }
+    );
+  }
+);
+FormatButton.displayName = "FormatButton";
+export {
+  FormatButton
+};

package/dist/MarkdownEditor/editor/tools/ToolBar/components/FormattingTools.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+interface FormattingToolsProps {
+    baseClassName: string;
+    hashId?: string;
+    i18n: any;
+    tools: Array<{
+        key: string;
+        type: string;
+        title?: string;
+        icon: React.ReactNode;
+        onClick?: (editor: any) => void;
+        isActive?: (editor: any) => boolean;
+    }>;
+    editor: any;
+    isCodeNode: boolean;
+    onToolClick: (tool: any) => void;
+    isFormatActive: (type: string) => boolean;
+    isInTable?: boolean;
+    hideTools?: string[];
+}
+export declare const FormattingTools: React.NamedExoticComponent<FormattingToolsProps>;
+export {};

package/dist/MarkdownEditor/editor/tools/ToolBar/components/FormattingTools.js

@@ -0,0 +1,45 @@
+// src/MarkdownEditor/editor/tools/ToolBar/components/FormattingTools.tsx
+import classnames from "classnames";
+import React from "react";
+import { ToolBarItem } from "./ToolBarItem";
+var FormattingTools = React.memo(
+  ({
+    baseClassName,
+    hashId,
+    i18n,
+    tools,
+    editor,
+    isCodeNode,
+    onToolClick,
+    isFormatActive,
+    isInTable = false,
+    hideTools = []
+  }) => {
+    const allowedInTable = ["bold", "italic", "strikethrough", "inline-code"];
+    let filteredTools = isInTable ? tools.filter((tool) => allowedInTable.includes(tool.key)) : tools;
+    filteredTools = filteredTools.filter(
+      (tool) => !hideTools.includes(tool.key)
+    );
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, filteredTools.map((tool) => {
+      var _a;
+      const isActive = tool.isActive ? tool.isActive(editor) : isFormatActive(tool.type);
+      return /* @__PURE__ */ React.createElement(
+        ToolBarItem,
+        {
+          key: tool.key,
+          title: ((_a = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _a[tool.key]) || tool.title,
+          icon: tool.icon,
+          onClick: () => !isCodeNode && onToolClick(tool),
+          className: classnames(`${baseClassName}-item`, hashId),
+          style: {
+            color: isActive ? "#1677ff" : void 0
+          }
+        }
+      );
+    }));
+  }
+);
+FormattingTools.displayName = "FormattingTools";
+export {
+  FormattingTools
+};

package/dist/MarkdownEditor/editor/tools/ToolBar/components/HeadingDropdown.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface HeadingDropdownProps {
+    baseClassName: string;
+    hashId?: string;
+    i18n: any;
+    node: any;
+    hideTools?: string[];
+    onHeadingChange: (level: number) => void;
+}
+export declare const HeadingDropdown: React.NamedExoticComponent<HeadingDropdownProps>;
+export {};

package/dist/MarkdownEditor/editor/tools/ToolBar/components/HeadingDropdown.js

@@ -0,0 +1,57 @@
+// src/MarkdownEditor/editor/tools/ToolBar/components/HeadingDropdown.tsx
+import { Dropdown } from "antd";
+import classnames from "classnames";
+import React from "react";
+import { ToolBarItem } from "./ToolBarItem";
+var HeatTextMap = {
+  1: "大标题",
+  2: "段落标题",
+  3: "小标题",
+  4: "正文",
+  Text: "正文"
+};
+var HeadingDropdown = React.memo(
+  ({ baseClassName, hashId, i18n, node, hideTools, onHeadingChange }) => {
+    var _a;
+    const headingItems = React.useMemo(
+      () => ["H1", "H2", "H3", "Text"].map((item, index) => {
+        if (hideTools == null ? void 0 : hideTools.includes(item)) {
+          return null;
+        }
+        return {
+          label: HeatTextMap[item.replace("H", "")] || item,
+          key: `head-${item}`,
+          onClick: () => onHeadingChange(index + 1)
+        };
+      }).filter(Boolean),
+      [hideTools, onHeadingChange]
+    );
+    const currentText = React.useMemo(() => {
+      var _a2;
+      if ((_a2 = node == null ? void 0 : node[0]) == null ? void 0 : _a2.level) {
+        return HeatTextMap[node[0].level + ""] || `H${node[0].level}`;
+      }
+      return "正文";
+    }, [node]);
+    return /* @__PURE__ */ React.createElement(Dropdown, { menu: { items: headingItems } }, /* @__PURE__ */ React.createElement(
+      ToolBarItem,
+      {
+        title: ((_a = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _a.heading) || "标题",
+        icon: null,
+        className: classnames(`${baseClassName}-item`, hashId),
+        style: {
+          minWidth: 36,
+          textAlign: "center",
+          fontSize: 12,
+          justifyContent: "center",
+          lineHeight: 1
+        }
+      },
+      currentText
+    ));
+  }
+);
+HeadingDropdown.displayName = "HeadingDropdown";
+export {
+  HeadingDropdown
+};

package/dist/MarkdownEditor/editor/tools/ToolBar/components/LinkButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface LinkButtonProps {
+    baseClassName: string;
+    hashId?: string;
+    i18n: any;
+    onInsertLink: () => void;
+    isLinkActive: boolean;
+}
+export declare const LinkButton: React.NamedExoticComponent<LinkButtonProps>;
+export {};