@ant-design/agentic-ui 2.0.0

package/dist/MarkdownEditor/editor/elements/Image/index.js

@@ -0,0 +1,546 @@
+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));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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/elements/Image/index.tsx
+import {
+  BlockOutlined,
+  DeleteFilled,
+  LoadingOutlined
+} from "@ant-design/icons";
+import { Image, Modal, Popover, Space } from "antd";
+import React, {
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useRef
+} from "react";
+import { useDebounceFn } from "@ant-design/pro-components";
+import { Rnd } from "react-rnd";
+import { Path, Transforms } from "slate";
+import { ActionIconBox } from "../../../../components/ActionIconBox";
+import { I18nContext } from "../../../../i18n";
+import { useSelStatus } from "../../../hooks/editor";
+import { useEditorStore } from "../../store";
+import { useGetSetState } from "../../utils";
+import { getMediaType } from "../../utils/dom";
+var ImageAndError = (props) => {
+  var _a, _b, _c;
+  const { editorProps } = useEditorStore();
+  const [error, setError] = React.useState(false);
+  if (error) {
+    return /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        href: props.src,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: {
+          color: "#1890ff",
+          textDecoration: "underline",
+          wordBreak: "break-all",
+          display: "inline-block",
+          maxWidth: "100%",
+          padding: "8px 12px",
+          border: "1px dashed #d9d9d9",
+          borderRadius: "6px",
+          backgroundColor: "#fafafa"
+        }
+      },
+      props.alt || props.src || "图片链接"
+    );
+  }
+  if ((_a = editorProps == null ? void 0 : editorProps.image) == null ? void 0 : _a.render) {
+    return (_c = (_b = editorProps.image).render) == null ? void 0 : _c.call(
+      _b,
+      __spreadProps(__spreadValues({}, props), {
+        onError: () => {
+          setError(true);
+        }
+      }),
+      /* @__PURE__ */ React.createElement(
+        Image,
+        __spreadProps(__spreadValues({}, props), {
+          width: Number(props.width) || props.width || 400,
+          onError: () => {
+            setError(true);
+          }
+        })
+      )
+    );
+  }
+  return /* @__PURE__ */ React.createElement("div", { "data-testid": "image-container" }, /* @__PURE__ */ React.createElement(
+    Image,
+    __spreadProps(__spreadValues({}, props), {
+      width: Number(props.width) || props.width || 400,
+      onError: () => {
+        setError(true);
+      }
+    })
+  ));
+};
+var ResizeImage = (_a) => {
+  var _b = _a, {
+    onResizeStart,
+    onResizeStop,
+    selected,
+    defaultSize
+  } = _b, props = __objRest(_b, [
+    "onResizeStart",
+    "onResizeStop",
+    "selected",
+    "defaultSize"
+  ]);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(false);
+  const radio = useRef(1);
+  const [size, setSize] = React.useState({
+    width: (defaultSize == null ? void 0 : defaultSize.width) || 400,
+    height: (defaultSize == null ? void 0 : defaultSize.height) || 0
+  });
+  const imgRef = useRef(null);
+  const resize = useDebounceFn((size2) => {
+    var _a2, _b2;
+    setSize({
+      width: size2.width,
+      height: size2.width / radio.current
+    });
+    (_a2 = imgRef.current) == null ? void 0 : _a2.style.setProperty("width", `${size2.width}px`);
+    (_b2 = imgRef.current) == null ? void 0 : _b2.style.setProperty(
+      "height",
+      `${(size2.width || 0) / radio.current}px`
+    );
+  }, 160);
+  if (error) {
+    return /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        href: props.src,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: {
+          color: "#1890ff",
+          textDecoration: "underline",
+          wordBreak: "break-all",
+          display: "inline-block",
+          maxWidth: "100%",
+          padding: "8px 12px",
+          border: "1px dashed #d9d9d9",
+          borderRadius: "6px",
+          backgroundColor: "#fafafa",
+          fontSize: "13px",
+          lineHeight: "1.5"
+        }
+      },
+      props.alt || props.src
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-testid": "resize-image-container",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: 4,
+        overflow: "hidden",
+        width: size.width,
+        height: size.height
+      }
+    },
+    loading ? /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          width: "24px",
+          height: "24px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "rgba(0,0,0,0.05)",
+          borderRadius: 12
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        LoadingOutlined,
+        {
+          style: {
+            fontSize: 16,
+            color: "#1890ff"
+          }
+        }
+      )
+    ) : null,
+    /* @__PURE__ */ React.createElement(
+      Rnd,
+      {
+        onResizeStart,
+        onResizeStop: () => {
+          onResizeStop == null ? void 0 : onResizeStop(size);
+        },
+        default: {
+          x: 0,
+          y: 0,
+          width: (defaultSize == null ? void 0 : defaultSize.width) || "100%",
+          height: (defaultSize == null ? void 0 : defaultSize.height) || "100%"
+        },
+        size,
+        disableDragging: true,
+        style: {
+          userSelect: "none",
+          WebkitUserSelect: "none",
+          MozUserSelect: "none",
+          msUserSelect: "none"
+        },
+        onResize: (_, dir, ele) => {
+          var _a2, _b2;
+          (_a2 = imgRef.current) == null ? void 0 : _a2.style.setProperty("width", `${ele.clientWidth}px`);
+          (_b2 = imgRef.current) == null ? void 0 : _b2.style.setProperty(
+            "height",
+            `${(ele.clientWidth || 0) / radio.current}px`
+          );
+          resize.cancel();
+          resize.run({
+            width: ele.clientWidth,
+            height: (ele.clientWidth || 0) / radio.current
+          });
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "img",
+        __spreadValues({
+          draggable: false,
+          onLoad: (e) => {
+            setLoading(false);
+            let width = e.target.naturalWidth;
+            const height = e.target.naturalHeight;
+            radio.current = width / height;
+            width = Math.min(
+              (defaultSize == null ? void 0 : defaultSize.width) || 400,
+              600,
+              document.documentElement.clientWidth * 0.8 || 600
+            );
+            setSize({
+              width,
+              height: width / radio.current
+            });
+          },
+          onError: () => {
+            setError(true);
+          },
+          alt: "image",
+          referrerPolicy: "no-referrer",
+          width: `min(${size.width}px, 100%)`,
+          ref: imgRef,
+          style: {
+            width: "100%",
+            height: "auto",
+            position: "relative",
+            zIndex: 99,
+            outline: selected ? "2px solid #1890ff" : "none",
+            boxShadow: selected ? "0 0 0 2px #1890ff" : "none",
+            minHeight: 20,
+            display: loading ? "none" : "block",
+            userSelect: "none",
+            WebkitUserSelect: "none",
+            MozUserSelect: "none",
+            msUserSelect: "none",
+            pointerEvents: "none"
+          }
+        }, props)
+      )
+    )
+  );
+};
+function EditorImage({
+  element,
+  attributes,
+  children
+}) {
+  var _a;
+  const [_, path] = useSelStatus(element);
+  const { markdownEditorRef, readonly } = useEditorStore();
+  const htmlRef = React.useRef(null);
+  const [state, setState] = useGetSetState({
+    height: element.height,
+    dragging: false,
+    loadSuccess: true,
+    url: "",
+    selected: false,
+    type: getMediaType(element == null ? void 0 : element.url, element.alt)
+  });
+  const updateElement = useCallback(
+    (attr) => {
+      if (!markdownEditorRef.current)
+        return;
+      Transforms.setNodes(markdownEditorRef.current, attr, { at: path });
+    },
+    [path]
+  );
+  const { locale } = useContext(I18nContext);
+  const initial = useCallback(() => __async(this, null, function* () {
+    let type = getMediaType(element == null ? void 0 : element.url, element.alt);
+    type = !type ? "image" : type;
+    setState({
+      type: ["image", "video", "autio", "attachment"].includes(type) ? type : "other"
+    });
+    let realUrl = element == null ? void 0 : element.url;
+    setState({ url: realUrl });
+    if (state().type === "image" || state().type === "other") {
+      const img = document.createElement("img");
+      img.referrerPolicy = "no-referrer";
+      img.crossOrigin = "anonymous";
+      img.src = realUrl;
+      img.onerror = () => {
+        setState({ loadSuccess: false });
+      };
+      img.onload = () => setState({ loadSuccess: true });
+    }
+    if (!element.mediaType) {
+      updateElement({
+        mediaType: state().type
+      });
+    }
+  }), [element]);
+  useLayoutEffect(() => {
+    initial();
+  }, [element == null ? void 0 : element.url]);
+  const imageDom = useMemo(() => {
+    var _a2, _b, _c, _d;
+    if (!state().loadSuccess) {
+      return /* @__PURE__ */ React.createElement(
+        "a",
+        {
+          href: ((_a2 = state()) == null ? void 0 : _a2.url) || (element == null ? void 0 : element.url),
+          target: "_blank",
+          rel: "noopener noreferrer",
+          style: {
+            color: "#1890ff",
+            textDecoration: "underline",
+            wordBreak: "break-all",
+            display: "inline-block",
+            maxWidth: "100%",
+            padding: "8px 12px",
+            border: "1px dashed #d9d9d9",
+            borderRadius: "6px",
+            backgroundColor: "#fafafa",
+            fontSize: "13px",
+            lineHeight: "1.5"
+          }
+        },
+        (element == null ? void 0 : element.alt) || ((_b = state()) == null ? void 0 : _b.url) || (element == null ? void 0 : element.url) || "图片链接"
+      );
+    }
+    return !readonly ? /* @__PURE__ */ React.createElement(
+      ResizeImage,
+      {
+        defaultSize: {
+          width: Number(element.width) || element.width || 400,
+          height: Number(element.height) || 400
+        },
+        selected: state().selected,
+        src: (_c = state()) == null ? void 0 : _c.url,
+        onResizeStart: () => {
+          setState({ selected: true });
+        },
+        onResizeStop: (size) => {
+          Transforms.setNodes(markdownEditorRef.current, size, { at: path });
+          setState({ selected: false });
+        }
+      }
+    ) : /* @__PURE__ */ React.createElement(
+      ImageAndError,
+      {
+        src: ((_d = state()) == null ? void 0 : _d.url) || (element == null ? void 0 : element.url),
+        alt: "image",
+        preview: {
+          getContainer: () => document.body
+        },
+        referrerPolicy: "no-referrer",
+        draggable: false,
+        style: {
+          maxWidth: 800
+        },
+        width: element.width,
+        height: element.height
+      }
+    );
+  }, [
+    state().type,
+    (_a = state()) == null ? void 0 : _a.url,
+    readonly,
+    state().selected,
+    state().loadSuccess
+  ]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    __spreadProps(__spreadValues({}, attributes), {
+      className: "ant-md-editor-drag-el",
+      "data-be": "image",
+      "data-testid": "image-container",
+      style: {
+        cursor: "pointer",
+        position: "relative",
+        userSelect: "none",
+        WebkitUserSelect: "none",
+        MozUserSelect: "none",
+        msUserSelect: "none"
+      },
+      draggable: false,
+      onContextMenu: (e) => {
+        e.stopPropagation();
+      },
+      onMouseDown: (e) => {
+        e.stopPropagation();
+      },
+      onDragStart: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    }),
+    /* @__PURE__ */ React.createElement(
+      Popover,
+      {
+        arrow: false,
+        styles: {
+          body: {
+            padding: 8
+          }
+        },
+        trigger: "hover",
+        open: state().selected && !readonly ? void 0 : false,
+        content: /* @__PURE__ */ React.createElement(Space, null, /* @__PURE__ */ React.createElement(
+          ActionIconBox,
+          {
+            title: (locale == null ? void 0 : locale.delete) || "删除",
+            type: "danger",
+            onClick: (e) => {
+              e.stopPropagation();
+              Modal.confirm({
+                title: (locale == null ? void 0 : locale.deleteMedia) || "删除媒体",
+                content: (locale == null ? void 0 : locale.confirmDelete) || "确定删除该媒体吗？",
+                onOk: () => {
+                  Transforms.removeNodes(markdownEditorRef.current, {
+                    at: path
+                  });
+                }
+              });
+            }
+          },
+          /* @__PURE__ */ React.createElement(DeleteFilled, null)
+        ), /* @__PURE__ */ React.createElement(
+          ActionIconBox,
+          {
+            title: (element == null ? void 0 : element.block) ? locale == null ? void 0 : locale.blockImage : locale == null ? void 0 : locale.inlineImage,
+            onClick: (e) => {
+              e.stopPropagation();
+              Transforms.setNodes(
+                markdownEditorRef.current,
+                {
+                  block: !element.block
+                },
+                {
+                  at: path
+                }
+              );
+              Transforms.setNodes(
+                markdownEditorRef.current,
+                {
+                  block: !element.block
+                },
+                {
+                  at: Path.parent(path)
+                }
+              );
+            }
+          },
+          /* @__PURE__ */ React.createElement(BlockOutlined, null)
+        ))
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          onClick: () => {
+            setTimeout(() => {
+              setState({ selected: true });
+            }, 16);
+          },
+          tabIndex: -1,
+          style: {
+            padding: 4,
+            display: "flex"
+          },
+          ref: htmlRef,
+          draggable: false,
+          contentEditable: false,
+          className: "md-editor-media"
+        },
+        imageDom,
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              display: "none"
+            }
+          },
+          children
+        )
+      )
+    )
+  );
+}
+export {
+  EditorImage,
+  ImageAndError,
+  ResizeImage
+};

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { RenderElementProps } from 'slate-react';
+export declare const InlineKatex: ({ attributes, children, element, }: RenderElementProps) => React.JSX.Element;

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

@@ -0,0 +1,49 @@
+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/InlineKatex.tsx
+import React from "react";
+var InlineKatex = ({
+  attributes,
+  children,
+  element
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "code",
+    __spreadProps(__spreadValues({}, attributes), {
+      style: {
+        display: "inline-block"
+      }
+    }),
+    element.value,
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "none"
+        }
+      },
+      children
+    )
+  );
+};
+export {
+  InlineKatex
+};

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { RenderElementProps } from 'slate-react';
+export declare const Katex: ({ attributes, children, element, }: RenderElementProps) => React.JSX.Element;

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

@@ -0,0 +1,60 @@
+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/Katex.tsx
+import React from "react";
+var Katex = ({
+  attributes,
+  children,
+  element
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "pre",
+    __spreadProps(__spreadValues({}, attributes), {
+      style: {
+        background: "rgb(242, 241, 241)",
+        color: "rgb(27, 27, 27)",
+        padding: "1em",
+        borderRadius: "0.5em",
+        margin: "1em 0",
+        fontSize: "0.8em",
+        fontFamily: "monospace",
+        lineHeight: "1.5",
+        overflowX: "auto",
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-all",
+        wordWrap: "break-word"
+      }
+    }),
+    /* @__PURE__ */ React.createElement("code", null, element.value),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "none"
+        }
+      },
+      children
+    )
+  );
+};
+export {
+  Katex
+};

package/dist/MarkdownEditor/editor/elements/LinkCard/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ElementProps, LinkCardNode } from '../../../el';
+export declare function LinkCard({ element, attributes, children, }: ElementProps<LinkCardNode<{
+    url: string;
+    collaborators: {
+        [key: string]: number;
+    }[];
+    updateTime: string;
+}>>): React.JSX.Element;