@yuku123/z-team-component 0.2.21 → 0.2.23

package/dist/index-CUVdeb8y.js

@@ -0,0 +1,638 @@
+import { jsxs as K, jsx as s, Fragment as re } from "react/jsx-runtime";
+import { BoldOutlined as ne, ItalicOutlined as ie, StrikethroughOutlined as oe, UnorderedListOutlined as se, OrderedListOutlined as ae, CheckSquareOutlined as ce, CodeOutlined as le, ConsoleSqlOutlined as ue, LinkOutlined as de, PictureOutlined as me, TableOutlined as fe } from "@ant-design/icons";
+import { message as O, Empty as U, Tooltip as pe, Button as ge } from "antd";
+import { useRef as M, useState as he, useEffect as A, forwardRef as we, useImperativeHandle as ye, useCallback as L } from "react";
+import Ee from "vditor";
+import ve from "react-markdown";
+import _e from "rehype-highlight";
+import Me from "remark-gfm";
+const be = "_wrap_ihp63_1", Te = "_live_ihp63_11", ke = "_mdToolbar_ihp63_158", Le = "_mdBtn_ihp63_169", Se = "_mdSep_ihp63_185", De = "_textarea_ihp63_193", Ce = "_preview_ihp63_207", qe = "_mermaid_ihp63_298", xe = "_mermaidError_ihp63_309", Ae = "_mermaidErrorTitle_ihp63_317", Pe = "_mermaidErrorMsg_ihp63_324", Be = "_mermaidSource_ihp63_331", g = {
+  wrap: be,
+  live: Te,
+  mdToolbar: ke,
+  mdBtn: Le,
+  mdSep: Se,
+  textarea: De,
+  preview: Ce,
+  mermaid: qe,
+  mermaidError: xe,
+  mermaidErrorTitle: Ae,
+  mermaidErrorMsg: Pe,
+  mermaidSource: Be
+}, Re = /* @__PURE__ */ new Set(["sequencediagram", "sequence"]), Fe = "\n```mermaid\nflowchart TD\n  A[开始] --> B[结束]\n```\n", Ne = `
+\`\`\`mermaid
+sequenceDiagram
+  participant A as 用户
+  participant B as 系统
+  A->>B: 请求
+  B-->>A: 响应
+\`\`\`
+`;
+function Oe(t) {
+  return t ? /\blanguage-(mermaid|sequencediagram|sequence)\b/i.test(t) : !1;
+}
+function Ie(t, i) {
+  const r = t.replace(/\r\n/g, `
+`).trim();
+  if (!r) return r;
+  const a = (i || "").replace(/^language-/i, "").toLowerCase();
+  return Re.has(a) && !/^sequenceDiagram\b/i.test(r) ? `sequenceDiagram
+${r}` : r;
+}
+let I = null, Q = !1;
+function Ke() {
+  const t = window.publicPath || "/";
+  return `${String(t).replace(/\/$/, "")}/vditor`;
+}
+function $e(t) {
+  return new Promise((i, r) => {
+    if (window.mermaid) {
+      i();
+      return;
+    }
+    const a = document.querySelector(`script[src="${t}"]`);
+    if (a) {
+      a.addEventListener("load", () => i(), { once: !0 }), a.addEventListener(
+        "error",
+        () => r(new Error("mermaid load failed")),
+        { once: !0 }
+      );
+      return;
+    }
+    const l = document.createElement("script");
+    l.src = t, l.async = !0, l.onload = () => i(), l.onerror = () => r(new Error("mermaid load failed")), document.head.appendChild(l);
+  });
+}
+function je() {
+  return Q && window.mermaid ? Promise.resolve() : (I || (I = $e(
+    `${Ke()}/dist/js/mermaid/mermaid.min.js?v=11.16.1`
+  ).then(() => {
+    if (!window.mermaid)
+      throw new Error("mermaid unavailable");
+    window.mermaid.initialize({
+      securityLevel: "loose",
+      startOnLoad: !1,
+      fontFamily: "sans-serif",
+      altFontFamily: "sans-serif",
+      flowchart: { htmlLabels: !0, useMaxWidth: !0 },
+      sequence: {
+        useMaxWidth: !0,
+        diagramMarginX: 8,
+        diagramMarginY: 8,
+        boxMargin: 8,
+        showSequenceNumbers: !0
+      }
+    }), Q = !0;
+  })), I);
+}
+let He = 0;
+async function J(t, i) {
+  await je();
+  const r = window.mermaid;
+  if (!r)
+    throw new Error("mermaid unavailable");
+  const a = `team-mermaid-${++He}`, l = Ie(t, i);
+  return (await r.render(a, l)).svg;
+}
+async function X(t, i) {
+  const r = t.firstElementChild;
+  if (!r) return;
+  const a = r.textContent || "";
+  try {
+    const l = await J(a, i);
+    r.innerHTML = l, r.classList.add("language-mermaid");
+  } catch (l) {
+    const f = l instanceof Error ? l.message : "Mermaid 渲染失败";
+    r.innerHTML = `<pre class="vditor-mermaid-error">${f}</pre>`;
+  }
+}
+function We({ code: t, lang: i }) {
+  const r = M(null), [a, l] = he(null);
+  return A(() => {
+    let f = !1;
+    if (!t.trim()) {
+      l(null), r.current && (r.current.innerHTML = "");
+      return;
+    }
+    return l(null), J(t, i).then((w) => {
+      f || !r.current || (r.current.innerHTML = w);
+    }).catch((w) => {
+      f || (l(w instanceof Error ? w.message : "Mermaid 渲染失败"), r.current && (r.current.innerHTML = ""));
+    }), () => {
+      f = !0;
+    };
+  }, [t, i]), a ? /* @__PURE__ */ K("div", { className: g.mermaidError, children: [
+    /* @__PURE__ */ s("div", { className: g.mermaidErrorTitle, children: "Mermaid 渲染失败" }),
+    /* @__PURE__ */ s("pre", { className: g.mermaidErrorMsg, children: a }),
+    /* @__PURE__ */ s("pre", { className: g.mermaidSource, children: t })
+  ] }) : /* @__PURE__ */ s("div", { ref: r, className: g.mermaid });
+}
+function $(t) {
+  var i;
+  return typeof t == "string" ? t.replace(/\n$/, "") : Array.isArray(t) ? t.map((r) => $(r)).join("") : t && typeof t == "object" && "props" in t ? $(((i = t.props) == null ? void 0 : i.children) ?? "") : String(t ?? "").replace(/\n$/, "");
+}
+const ze = {
+  pre({ children: t }) {
+    return /* @__PURE__ */ s("pre", { children: t });
+  },
+  code({ className: t, children: i, ...r }) {
+    const a = $(i);
+    if (Oe(t)) {
+      const l = t == null ? void 0 : t.match(/\blanguage-([\w-]+)/i);
+      return /* @__PURE__ */ s(We, { code: a, lang: l == null ? void 0 : l[1] });
+    }
+    return /* @__PURE__ */ s("code", { className: t, ...r, children: i });
+  }
+}, Ve = [
+  [
+    _e,
+    {
+      filter: (t) => {
+        var r;
+        const i = (r = t.properties) == null ? void 0 : r.className;
+        return Array.isArray(i) ? !i.some(
+          (a) => a === "language-mermaid" || /^language-sequence/i.test(a)
+        ) : typeof i == "string" ? !/\blanguage-(mermaid|sequencediagram|sequence)\b/i.test(i) : !0;
+      }
+    }
+  ]
+];
+function Ge({ children: t, className: i }) {
+  return /* @__PURE__ */ s("div", { className: i, children: /* @__PURE__ */ s(
+    ve,
+    {
+      remarkPlugins: [Me],
+      rehypePlugins: Ve,
+      components: ze,
+      children: t
+    }
+  ) });
+}
+const Ue = [
+  "headings",
+  "bold",
+  "italic",
+  "strike",
+  "|",
+  "quote",
+  "list",
+  "ordered-list",
+  "check",
+  "|",
+  "code",
+  "inline-code",
+  "link",
+  "upload",
+  "table",
+  "line",
+  "|",
+  "undo",
+  "redo"
+], Qe = Fe;
+function Xe() {
+  const t = window.publicPath || "/";
+  return `${String(t).replace(/\/$/, "")}/vditor`;
+}
+function Ye(t, i, r, a, l, f) {
+  const S = t.slice(i, r) || f, w = a + S + l;
+  return {
+    content: t.slice(0, i) + w + t.slice(r),
+    selectFrom: i + a.length,
+    selectTo: i + a.length + S.length
+  };
+}
+function Je(t, i, r, a) {
+  const f = t.slice(0, i).lastIndexOf(`
+`) + 1, w = t.slice(f, r).split(`
+`).map((P) => P.startsWith(a) ? P.slice(a.length) : a + P).join(`
+`);
+  return {
+    content: t.slice(0, f) + w + t.slice(r),
+    selectFrom: f,
+    selectTo: f + w.length
+  };
+}
+function Y(t, i, r, a) {
+  return {
+    content: t.slice(0, i) + a + t.slice(r),
+    selectFrom: i,
+    selectTo: i + a.length
+  };
+}
+function Ze(t) {
+  return /^https?:\/\/.+\.(png|jpg|jpeg|gif|webp|svg|bmp|ico)(\?.*)?$/i.test(
+    t
+  );
+}
+const ct = we(function({
+  mode: i,
+  value: r,
+  onChange: a,
+  readOnly: l = !1,
+  onUploadImage: f,
+  placeholder: S = "在此输入 Markdown，支持工具栏 / 快捷键 / 粘贴或拖拽图片…",
+  onSave: w
+}, P) {
+  const j = M(null), R = M(null), D = M(null), H = M(null), W = M(null), z = M(a), E = M(w), N = M(f), b = M(r), V = (e) => {
+    if (e)
+      try {
+        e.destroy();
+      } catch {
+      }
+  };
+  A(() => {
+    z.current = a;
+  }, [a]), A(() => {
+    E.current = w;
+  }, [w]), A(() => {
+    N.current = f;
+  }, [f]), A(() => {
+    b.current = r;
+  }, [r]), ye(P, () => ({
+    getTextarea: () => D.current,
+    getLiveRoot: () => R.current
+  }));
+  const T = L((e) => {
+    b.current = e, z.current(e);
+  }, []);
+  A(() => {
+    if (l || i !== "live") return;
+    const e = R.current;
+    if (!e) return;
+    let n = !1, c = !1;
+    const u = { current: null }, y = (o) => {
+      var h;
+      const m = `
+![](${o})
+`;
+      (h = u.current) == null || h.insertValue(m);
+    }, _ = async (o) => {
+      const m = N.current;
+      if (!m) return "未配置图片上传";
+      const h = o.filter((x) => x.type.startsWith("image/"));
+      if (h.length === 0) return "仅支持上传图片";
+      const q = O.loading("上传图片中...", 0);
+      try {
+        for (const x of h) {
+          const G = await m(x);
+          G && y(G);
+        }
+        return null;
+      } catch {
+        return "图片上传失败";
+      } finally {
+        q();
+      }
+    };
+    u.current = new Ee(e, {
+      cdn: Xe(),
+      mode: "ir",
+      value: b.current,
+      height: "100%",
+      lang: "zh_CN",
+      icon: "ant",
+      placeholder: S,
+      cache: { enable: !1 },
+      toolbar: Ue,
+      toolbarConfig: { pin: !0 },
+      hint: { emoji: {} },
+      // maxWidth 默认 800 会居中留白；设大后左右只剩最小 padding，铺满可用宽度
+      preview: {
+        maxWidth: 9999,
+        hljs: { enable: !0, lineNumber: !1, style: "github" },
+        math: { engine: "KaTeX", inlineDigit: !1 },
+        // 代码块默认渲染高亮预览；点进块内才编辑源码（配合 CSS 互斥显示）
+        //
+        // 原来写的是顶层 `markdown: {codeBlockPreview, mathBlockPreview}`，
+        // 但 vditor 4 运行时读的是 options.preview.markdown.codeBlockPreview
+        // （见 vditor/src/index.ts:561 与 previewRender.ts:66），
+        // 顶层那份从未生效。
+        // 另：vditor 4 的 IPreviewOptions["markdown"] 类型也漏了
+        // codeBlockPreview/mathBlockPreview（上游类型 bug），故用 as 收口。
+        markdown: {
+          codeBlockPreview: !0,
+          mathBlockPreview: !0
+        }
+      },
+      customRenders: [
+        {
+          language: "sequenceDiagram",
+          render: (o) => {
+            X(o, "sequenceDiagram");
+          }
+        },
+        {
+          language: "sequence",
+          render: (o) => {
+            X(o, "sequence");
+          }
+        }
+      ],
+      after: () => {
+        if (n) {
+          V(u.current);
+          return;
+        }
+        c = !0;
+      },
+      input: (o) => {
+        c && T(o);
+      },
+      keydown: (o) => {
+        var m;
+        (o.ctrlKey || o.metaKey) && o.key.toLowerCase() === "s" && (o.preventDefault(), (m = E.current) == null || m.call(E));
+      },
+      upload: {
+        accept: "image/*",
+        multiple: !0,
+        filename: (o) => o,
+        handler: (o) => _(o)
+      }
+    }), W.current = u.current;
+    const p = (o) => {
+      var m;
+      (o.ctrlKey || o.metaKey) && o.key.toLowerCase() === "s" && (o.preventDefault(), (m = E.current) == null || m.call(E));
+    };
+    return e.addEventListener("keydown", p), () => {
+      n = !0, e.removeEventListener("keydown", p), V(u.current), W.current = null;
+    };
+  }, [i, l, S, T]);
+  const k = L(
+    (e) => {
+      T(e.content);
+      const n = D.current;
+      n && requestAnimationFrame(() => {
+        n.focus(), n.setSelectionRange(e.selectFrom, e.selectTo);
+      });
+    },
+    [T]
+  ), v = L(
+    (e, n, c) => {
+      const u = D.current;
+      u && k(
+        Ye(
+          u.value,
+          u.selectionStart,
+          u.selectionEnd,
+          e,
+          n,
+          c
+        )
+      );
+    },
+    [k]
+  ), C = L(
+    (e) => {
+      const n = D.current;
+      n && k(
+        Je(n.value, n.selectionStart, n.selectionEnd, e)
+      );
+    },
+    [k]
+  ), F = L(
+    (e) => {
+      const n = D.current;
+      n && k(Y(n.value, n.selectionStart, n.selectionEnd, e));
+    },
+    [k]
+  ), B = L(
+    async (e) => {
+      const n = N.current;
+      if (!n) return;
+      const c = D.current, u = (c == null ? void 0 : c.selectionStart) ?? b.current.length, y = (c == null ? void 0 : c.selectionEnd) ?? b.current.length, _ = O.loading("上传图片中...", 0);
+      try {
+        const o = `
+![](${await n(e)})
+`, m = b.current.slice(0, u) + o + b.current.slice(y);
+        T(m), requestAnimationFrame(() => {
+          if (c) {
+            const h = u + o.length;
+            c.focus(), c.setSelectionRange(h, h);
+          }
+        });
+      } catch {
+        O.error("图片上传失败");
+      } finally {
+        _();
+      }
+    },
+    [T]
+  ), Z = L(
+    async (e) => {
+      var y, _;
+      const n = (y = e.clipboardData) == null ? void 0 : y.items;
+      if (!n) return;
+      const c = [];
+      for (let p = 0; p < n.length; p++) {
+        const o = n[p];
+        if (o.kind === "file" && o.type.startsWith("image/")) {
+          const m = o.getAsFile();
+          m && c.push(m);
+        }
+      }
+      if (c.length > 0) {
+        e.preventDefault();
+        for (const p of c)
+          await B(p);
+        return;
+      }
+      const u = (_ = e.clipboardData.getData("text/plain")) == null ? void 0 : _.trim();
+      if (u && Ze(u)) {
+        e.preventDefault();
+        const p = e.currentTarget, o = p.selectionStart, m = p.selectionEnd, h = `
+![](${u})
+`, q = b.current.slice(0, o) + h + b.current.slice(m);
+        T(q), requestAnimationFrame(() => {
+          const x = o + h.length;
+          p.focus(), p.setSelectionRange(x, x);
+        });
+      }
+    },
+    [T, B]
+  ), ee = L(
+    (e) => {
+      var u;
+      const n = (u = e.dataTransfer) == null ? void 0 : u.files;
+      if (!n || n.length === 0) return;
+      const c = Array.from(n).filter(
+        (y) => y.type.startsWith("image/")
+      );
+      if (c.length !== 0) {
+        e.preventDefault();
+        for (const y of c)
+          B(y);
+      }
+    },
+    [B]
+  ), te = L(
+    (e) => {
+      var u;
+      const n = e.currentTarget, c = e.ctrlKey || e.metaKey;
+      if (e.key === "Tab") {
+        e.preventDefault();
+        const { selectionStart: y, selectionEnd: _ } = n;
+        if (e.shiftKey) {
+          const o = n.value.slice(0, y).lastIndexOf(`
+`) + 1, h = n.value.slice(o, _).split(`
+`).map((q) => q.startsWith("  ") ? q.slice(2) : q.replace(/^ /, "")).join(`
+`);
+          k({
+            content: n.value.slice(0, o) + h + n.value.slice(_),
+            selectFrom: o,
+            selectTo: o + h.length
+          });
+        } else
+          k(Y(n.value, y, _, "  "));
+        return;
+      }
+      c && !e.shiftKey && e.key.toLowerCase() === "b" ? (e.preventDefault(), v("**", "**", "加粗")) : c && !e.shiftKey && e.key.toLowerCase() === "i" ? (e.preventDefault(), v("*", "*", "斜体")) : c && !e.shiftKey && e.key.toLowerCase() === "k" ? (e.preventDefault(), v("[", "](url)", "链接文本")) : c && e.key.toLowerCase() === "s" && (e.preventDefault(), (u = E.current) == null || u.call(E));
+    },
+    [k, v]
+  ), d = (e, n, c, u) => /* @__PURE__ */ s(pe, { title: c, children: /* @__PURE__ */ s(
+    ge,
+    {
+      size: "small",
+      type: "text",
+      className: g.mdBtn,
+      icon: n,
+      onClick: u
+    }
+  ) }, e);
+  return l ? /* @__PURE__ */ s("div", { ref: j, className: g.wrap, children: /* @__PURE__ */ s("div", { ref: R, className: g.preview, children: r ? /* @__PURE__ */ s(Ge, { children: r }) : /* @__PURE__ */ s(
+    U,
+    {
+      description: "暂无内容",
+      image: U.PRESENTED_IMAGE_SIMPLE
+    }
+  ) }) }) : /* @__PURE__ */ s("div", { ref: j, className: g.wrap, children: i === "live" ? /* @__PURE__ */ s("div", { ref: R, className: g.live }) : /* @__PURE__ */ K(re, { children: [
+    /* @__PURE__ */ K("div", { className: g.mdToolbar, children: [
+      d("h1", "H1", "一级标题", () => C("# ")),
+      d("h2", "H2", "二级标题", () => C("## ")),
+      d("h3", "H3", "三级标题", () => C("### ")),
+      /* @__PURE__ */ s("span", { className: g.mdSep }),
+      d(
+        "bold",
+        /* @__PURE__ */ s(ne, {}),
+        "加粗 Ctrl+B",
+        () => v("**", "**", "加粗")
+      ),
+      d(
+        "italic",
+        /* @__PURE__ */ s(ie, {}),
+        "斜体 Ctrl+I",
+        () => v("*", "*", "斜体")
+      ),
+      d(
+        "strike",
+        /* @__PURE__ */ s(oe, {}),
+        "删除线",
+        () => v("~~", "~~", "删除线")
+      ),
+      /* @__PURE__ */ s("span", { className: g.mdSep }),
+      d("quote", "❝", "引用", () => C("> ")),
+      d(
+        "ul",
+        /* @__PURE__ */ s(se, {}),
+        "无序列表",
+        () => C("- ")
+      ),
+      d(
+        "ol",
+        /* @__PURE__ */ s(ae, {}),
+        "有序列表",
+        () => C("1. ")
+      ),
+      d(
+        "task",
+        /* @__PURE__ */ s(ce, {}),
+        "任务列表",
+        () => C("- [ ] ")
+      ),
+      /* @__PURE__ */ s("span", { className: g.mdSep }),
+      d(
+        "code",
+        /* @__PURE__ */ s(le, {}),
+        "代码块",
+        () => v("```ts\n", "\n```", "code")
+      ),
+      d(
+        "inlineCode",
+        /* @__PURE__ */ s(ue, {}),
+        "行内代码",
+        () => v("`", "`", "code")
+      ),
+      d(
+        "link",
+        /* @__PURE__ */ s(de, {}),
+        "链接 Ctrl+K",
+        () => v("[", "](url)", "链接文本")
+      ),
+      d(
+        "image",
+        /* @__PURE__ */ s(me, {}),
+        "图片（可粘贴/拖拽）",
+        () => {
+          var e;
+          return (e = H.current) == null ? void 0 : e.click();
+        }
+      ),
+      d(
+        "table",
+        /* @__PURE__ */ s(fe, {}),
+        "表格",
+        () => F(`
+| 列1 | 列2 | 列3 |
+| --- | --- | --- |
+| | | |
+`)
+      ),
+      d("hr", "—", "分割线", () => F(`
+---
+`)),
+      d(
+        "mermaid",
+        "M",
+        "Mermaid 流程图",
+        () => F(Qe)
+      ),
+      d(
+        "sequence",
+        "Seq",
+        "Mermaid 时序图",
+        () => F(Ne)
+      )
+    ] }),
+    /* @__PURE__ */ s(
+      "textarea",
+      {
+        ref: D,
+        className: g.textarea,
+        value: r,
+        onChange: (e) => T(e.target.value),
+        onKeyDown: te,
+        onPaste: Z,
+        onDrop: ee,
+        onDragOver: (e) => e.preventDefault(),
+        placeholder: S,
+        spellCheck: !1
+      }
+    ),
+    /* @__PURE__ */ s(
+      "input",
+      {
+        ref: H,
+        type: "file",
+        accept: "image/*",
+        style: { display: "none" },
+        onChange: (e) => {
+          var c;
+          const n = (c = e.target.files) == null ? void 0 : c[0];
+          n && B(n), e.target.value = "";
+        }
+      }
+    )
+  ] }) });
+});
+export {
+  ct as M
+};