markdown-flow-ui 0.2.13 → 0.2.15

package/dist/components/MarkdownFlowEditor/components/ImageInject.es.js

@@ -1,239 +1,240 @@
-import { j as s } from "../../../_virtual/jsx-runtime.es.js";
-import Q, { useContext as W, useState as d, useEffect as X, useMemo as Y } from "react";
-import { Button as w } from "../../ui/button.es.js";
-import { Input as T } from "../../ui/input.es.js";
-import Z from "../editor-context.es.js";
-import { isValidImageUrl as F, sanitizeImageUrl as ee } from "../utils/image.es.js";
-import { useTranslation as te } from "../../../node_modules/react-i18next/dist/es/useTranslation.es.js";
-import se from "../../../node_modules/lucide-react/dist/esm/icons/loader-circle.es.js";
-import D from "../../../node_modules/lucide-react/dist/esm/icons/upload.es.js";
-const re = Q.forwardRef(
-  ({ value: n, onSelect: B, uploadProps: a }, O) => {
-    const { t: c } = te(), { setDialogOpen: C } = W(Z), [i, u] = d({
-      resourceUrl: n?.resourceUrl ?? "",
-      resourceTitle: n?.resourceTitle ?? "",
-      scalePercent: n?.scalePercent ?? 100
-    }), [j, x] = d(
-      !!n?.resourceUrl
-    ), [f, y] = d(n?.resourceUrl ?? ""), [S, b] = d(
-      n?.scalePercent ?? 100
-    ), [R, I] = d(
-      n?.scalePercent !== void 0 ? String(n.scalePercent) : "100"
-    ), [v, g] = d(""), [N, m] = d("idle"), o = N === "loading";
-    X(() => {
-      if (n?.resourceUrl) {
-        u((t) => ({
+import { jsxs as i, jsx as n, Fragment as B } from "react/jsx-runtime";
+import X, { useContext as Y, useState as u, useEffect as Z, useMemo as F } from "react";
+import { Button as C } from "../../ui/button.es.js";
+import { Input as S } from "../../ui/input.es.js";
+import ee from "../editor-context.es.js";
+import { isValidImageUrl as te, sanitizeImageUrl as ae } from "../utils/image.es.js";
+import { useTranslation as re } from "../../../node_modules/react-i18next/dist/es/useTranslation.es.js";
+import ne from "../../../node_modules/lucide-react/dist/esm/icons/loader-circle.es.js";
+import O from "../../../node_modules/lucide-react/dist/esm/icons/upload.es.js";
+const ce = X.forwardRef(
+  ({ value: s, onSelect: k, uploadProps: r }, V) => {
+    const { t: c } = re(), { setDialogOpen: I } = Y(ee), [l, f] = u({
+      resourceUrl: s?.resourceUrl ?? "",
+      resourceTitle: s?.resourceTitle ?? "",
+      scalePercent: s?.scalePercent ?? 100
+    }), [b, U] = u(
+      !!s?.resourceUrl
+    ), [g, N] = u(s?.resourceUrl ?? ""), [R, w] = u(
+      s?.scalePercent ?? 100
+    ), [v, L] = u(
+      s?.scalePercent !== void 0 ? String(s.scalePercent) : "100"
+    ), [D, h] = u(""), [T, m] = u("idle"), d = T === "loading";
+    Z(() => {
+      if (s?.resourceUrl) {
+        f((t) => ({
           ...t,
-          resourceUrl: n.resourceUrl ?? "",
-          resourceTitle: n.resourceTitle ?? t.resourceTitle ?? "",
-          scalePercent: n.scalePercent ?? t.scalePercent ?? 100
-        })), y(n.resourceUrl ?? "");
-        const e = n.scalePercent !== void 0 ? n.scalePercent : 100;
-        b(e), I(
-          n.scalePercent !== void 0 ? String(n.scalePercent) : String(e)
-        ), x(!0);
+          resourceUrl: s.resourceUrl ?? "",
+          resourceTitle: s.resourceTitle ?? t.resourceTitle ?? "",
+          scalePercent: s.scalePercent ?? t.scalePercent ?? 100
+        })), N(s.resourceUrl ?? "");
+        const e = s.scalePercent !== void 0 ? s.scalePercent : 100;
+        w(e), L(
+          s.scalePercent !== void 0 ? String(s.scalePercent) : String(e)
+        ), U(!0);
       }
       m("idle");
-    }, [n]);
-    const k = () => {
-      o || C(!1);
-    }, L = (e, t) => {
-      const r = ee(e);
-      u({
-        resourceUrl: r,
-        resourceTitle: t || i.resourceTitle || c("imageDefaultTitle"),
-        scalePercent: S
-      }), y(r), x(!0), g(""), N === "loading" && m("success");
-    }, V = () => {
-      o || i.resourceUrl && (B({
-        resourceUrl: i.resourceUrl,
-        resourceTitle: i.resourceTitle || c("imageDefaultTitle", "Image name"),
-        scalePercent: S
-      }), C(!1));
-    }, q = (e) => {
+    }, [s]);
+    const q = () => {
+      d || I(!1);
+    }, E = (e, t) => {
+      const a = ae(e);
+      f({
+        resourceUrl: a,
+        resourceTitle: t || l.resourceTitle || c("imageDefaultTitle"),
+        scalePercent: R
+      }), N(a), U(!0), h(""), T === "loading" && m("success");
+    }, z = () => {
+      d || l.resourceUrl && (k({
+        resourceUrl: l.resourceUrl,
+        resourceTitle: l.resourceTitle || c("imageDefaultTitle", "Image name"),
+        scalePercent: R
+      }), I(!1));
+    }, M = (e) => {
       const t = e.target.value.trim();
-      y(t), x(!1), g("");
-    }, z = (e) => {
-      u((t) => ({
+      N(t), U(!1), h("");
+    }, P = (e) => {
+      f((t) => ({
         ...t,
         resourceTitle: e.target.value
       }));
-    }, M = (e) => {
+    }, _ = (e) => {
       const t = e.target.value.replace(/[^\d]/g, "");
-      if (I(t), !t) {
-        b(void 0), u((l) => ({
-          ...l,
+      if (L(t), !t) {
+        w(void 0), f((o) => ({
+          ...o,
           scalePercent: void 0
         }));
         return;
       }
-      const r = Math.max(1, Math.min(1e3, Number(t)));
-      b(r), u((l) => ({
-        ...l,
-        scalePercent: r
+      const a = Math.max(1, Math.min(1e3, Number(t)));
+      w(a), f((o) => ({
+        ...o,
+        scalePercent: a
       }));
-    }, P = () => {
-      if (!o) {
-        if (m("idle"), !f) {
-          g(c("imageUrlRequired", "Please enter image URL"));
+    }, A = () => {
+      if (!d) {
+        if (m("idle"), !g) {
+          h(c("imageUrlRequired", "Please enter image URL"));
           return;
         }
-        if (!F(f)) {
-          g(c("imageInvalidUrl", "Please enter a valid image URL"));
+        if (!te(g)) {
+          h(c("imageInvalidUrl", "Please enter a valid image URL"));
           return;
         }
-        if (L(f), !i.resourceTitle && f)
+        if (E(g), !l.resourceTitle && g)
           try {
-            const e = new URL(f), t = decodeURIComponent(
+            const e = new URL(g), t = decodeURIComponent(
               e.pathname.split("/").filter(Boolean).pop() ?? ""
             );
-            t && u((r) => ({
-              ...r,
+            t && f((a) => ({
+              ...a,
               resourceTitle: t
             }));
           } catch (e) {
             console.error(e);
           }
       }
-    }, U = (e, t) => {
-      m("success"), L(e, t);
-    }, h = (e, t) => {
-      const r = e?.message || c("imageUploadError", "Upload failed, please retry");
-      g(r), m("error"), x(!!i.resourceUrl), a?.onError?.(e, t);
-    }, _ = async (e) => {
+    }, y = (e, t) => {
+      m("success"), E(e, t);
+    }, p = (e, t) => {
+      const a = e?.message || c("imageUploadError", "Upload failed, please retry");
+      h(a), m("error"), U(!!l.resourceUrl), r?.onError?.(e, t);
+    }, $ = async (e) => {
       const t = {
         file: e,
-        filename: a?.name,
-        data: typeof a?.data == "function" ? await a.data(e) : a?.data,
-        headers: a?.headers,
-        withCredentials: a?.withCredentials,
-        action: typeof a?.action == "function" ? await a.action(e) : a?.action,
-        onProgress: (r) => a?.onProgress?.(r, e),
-        onError: (r) => h(r, e),
-        onSuccess: (r) => {
-          a?.onSuccess?.(r, e);
-          const l = typeof r == "string" ? r : r?.url ?? r?.data?.url;
-          l ? U(l, e.name) : h(new Error("INVALID_RESPONSE"), e);
+        filename: r?.name,
+        data: typeof r?.data == "function" ? await r.data(e) : r?.data,
+        headers: r?.headers,
+        withCredentials: r?.withCredentials,
+        action: typeof r?.action == "function" ? await r.action(e) : r?.action,
+        onProgress: (a) => r?.onProgress?.(a, e),
+        onError: (a) => p(a, e),
+        onSuccess: (a) => {
+          r?.onSuccess?.(a, e);
+          const o = typeof a == "string" ? a : a?.url ?? a?.data?.url;
+          o ? y(o, e.name) : p(new Error("INVALID_RESPONSE"), e);
         }
       };
-      a?.customRequest?.(t);
-    }, A = async (e) => {
-      const t = typeof a?.action == "function" ? await a.action(e) : a?.action;
+      r?.customRequest?.(t);
+    }, G = async (e) => {
+      const t = typeof r?.action == "function" ? await r.action(e) : r?.action;
       if (!t) {
-        U(URL.createObjectURL(e), e.name);
+        y(URL.createObjectURL(e), e.name);
         return;
       }
       try {
-        const r = new FormData();
-        r.append(a?.name ?? "file", e);
-        const l = typeof a?.data == "function" ? await a.data(e) : a?.data;
-        l && Object.entries(l).forEach(([J, K]) => {
-          r.append(J, K);
+        const a = new FormData();
+        a.append(r?.name ?? "file", e);
+        const o = typeof r?.data == "function" ? await r.data(e) : r?.data;
+        o && Object.entries(o).forEach(([Q, W]) => {
+          a.append(Q, W);
         });
-        const p = await (await fetch(t, {
+        const x = await (await fetch(t, {
           method: "POST",
-          body: r,
-          headers: a?.headers,
-          credentials: a?.withCredentials ? "include" : "same-origin"
+          body: a,
+          headers: r?.headers,
+          credentials: r?.withCredentials ? "include" : "same-origin"
         })).json();
-        a?.onSuccess?.(p, e);
-        const E = typeof p == "string" ? p : p?.data;
-        E ? U(E, e.name) : h(new Error("INVALID_RESPONSE"), e);
-      } catch (r) {
-        h(r, e);
+        r?.onSuccess?.(x, e);
+        const j = typeof x == "string" ? x : x?.data;
+        j ? y(j, e.name) : p(new Error("INVALID_RESPONSE"), e);
+      } catch (a) {
+        p(a, e);
       }
-    }, $ = async (e) => {
+    }, H = async (e) => {
       try {
-        g("");
+        h("");
         let t = e;
-        if (a?.beforeUpload && (t = await a.beforeUpload(e), t === !1))
+        if (r?.beforeUpload && (t = await r.beforeUpload(e), t === !1))
           return;
         t instanceof Blob && !(t instanceof File) && (t = new File([t], e.name, {
           type: t.type || e.type
         }));
-        const r = t instanceof File ? t : e;
-        if (m("loading"), x(!1), a?.customRequest) {
-          await _(r);
+        const a = t instanceof File ? t : e;
+        if (m("loading"), U(!1), r?.customRequest) {
+          await $(a);
           return;
         }
-        if (a?.action) {
-          await A(r);
+        if (r?.action) {
+          await G(a);
           return;
         }
-        const l = URL.createObjectURL(r);
-        U(l, r.name), a?.onSuccess?.({ url: l }, r);
+        const o = URL.createObjectURL(a);
+        y(o, a.name), r?.onSuccess?.({ url: o }, a);
       } catch (t) {
-        m("error"), h(t, e);
+        m("error"), p(t, e);
       }
-    }, G = async (e) => {
+    }, J = async (e) => {
       const t = e.target.files?.[0];
-      t && (await $(t), e.target.value = "");
-    }, H = Y(
-      () => /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ s.jsx(
-          T,
+      t && (await H(t), e.target.value = "");
+    }, K = F(
+      () => /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ n(
+          S,
           {
             type: "text",
-            value: R,
-            onChange: M,
+            value: v,
+            onChange: _,
             className: "w-24",
             inputMode: "numeric",
             pattern: "[0-9]*"
           }
         ),
-        /* @__PURE__ */ s.jsx("span", { children: "%" })
+        /* @__PURE__ */ n("span", { children: "%" })
       ] }),
-      [R]
+      [v]
     );
-    return /* @__PURE__ */ s.jsxs("div", { ref: O, className: "space-y-6", children: [
-      /* @__PURE__ */ s.jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ s.jsx("label", { className: "text-sm font-medium text-foreground", children: c("imageUrlLabel", "URL") }),
-        /* @__PURE__ */ s.jsxs("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ s.jsx(
-            T,
+    return /* @__PURE__ */ i("div", { ref: V, className: "space-y-6", children: [
+      /* @__PURE__ */ i("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ n("label", { className: "text-sm font-medium text-foreground", children: c("imageUrlLabel", "URL") }),
+        /* @__PURE__ */ i("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ n(
+            S,
             {
               type: "text",
               placeholder: c("imageUrlPlaceholder", "Please enter image URL"),
-              value: f,
-              onChange: q,
+              dir: "ltr",
+              value: g,
+              onChange: M,
               autoComplete: "off"
             }
           ),
-          /* @__PURE__ */ s.jsx(
-            w,
+          /* @__PURE__ */ n(
+            C,
             {
               className: "h-8",
               variant: "outline",
               type: "button",
-              onClick: P,
+              onClick: A,
               children: c("imageRunButton", "Preview")
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ s.jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ s.jsx("label", { className: "text-sm font-medium text-foreground", children: c("imageUploadLabel", "Upload") }),
-        /* @__PURE__ */ s.jsxs(
+      /* @__PURE__ */ i("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ n("label", { className: "text-sm font-medium text-foreground", children: c("imageUploadLabel", "Upload") }),
+        /* @__PURE__ */ i(
           "label",
           {
-            className: `relative group flex h-48 w-full flex-col items-center justify-center overflow-hidden rounded-lg border border-dashed transition-colors ${j ? "bg-muted/40" : "bg-muted/10"} ${o ? "cursor-wait opacity-80 pointer-events-none" : "cursor-pointer"}`,
+            className: `relative group flex h-48 w-full flex-col items-center justify-center overflow-hidden rounded-lg border border-dashed transition-colors ${b ? "bg-muted/40" : "bg-muted/10"} ${d ? "cursor-wait opacity-80 pointer-events-none" : "cursor-pointer"}`,
             children: [
-              o && /* @__PURE__ */ s.jsxs("div", { className: "absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 bg-background/80", children: [
-                /* @__PURE__ */ s.jsx(se, { className: "h-6 w-6 animate-spin text-primary" }),
-                /* @__PURE__ */ s.jsx("span", { className: "text-sm text-muted-foreground", children: c("imageUploading", "Uploading...") })
+              d && /* @__PURE__ */ i("div", { className: "absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 bg-background/80", children: [
+                /* @__PURE__ */ n(ne, { className: "h-6 w-6 animate-spin text-primary" }),
+                /* @__PURE__ */ n("span", { className: "text-sm text-muted-foreground", children: c("imageUploading", "Uploading...") })
               ] }),
-              j && i.resourceUrl ? /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-                /* @__PURE__ */ s.jsx(
+              b && l.resourceUrl ? /* @__PURE__ */ i(B, { children: [
+                /* @__PURE__ */ n(
                   "img",
                   {
-                    src: i.resourceUrl,
-                    alt: i.resourceTitle || "preview",
+                    src: l.resourceUrl,
+                    alt: l.resourceTitle || c("imageDefaultTitle"),
                     className: "h-full w-full object-contain"
                   }
                 ),
-                !o && /* @__PURE__ */ s.jsxs("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-2 bg-[#D7D7D7] opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: [
-                  /* @__PURE__ */ s.jsx(
-                    D,
+                !d && /* @__PURE__ */ i("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-2 bg-[#D7D7D7] opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: [
+                  /* @__PURE__ */ n(
+                    O,
                     {
                       className: "h-6 w-6",
                       style: {
@@ -241,7 +242,7 @@ const re = Q.forwardRef(
                       }
                     }
                   ),
-                  /* @__PURE__ */ s.jsx(
+                  /* @__PURE__ */ n(
                     "span",
                     {
                       className: "text-sm",
@@ -255,64 +256,64 @@ const re = Q.forwardRef(
                     }
                   )
                 ] })
-              ] }) : /* @__PURE__ */ s.jsxs("div", { className: "flex flex-col items-center gap-2 text-sm text-muted-foreground", children: [
-                /* @__PURE__ */ s.jsx(D, { className: "h-6 w-6" }),
-                /* @__PURE__ */ s.jsx("span", { children: c("imageUploadPlaceholder", "Drag files or click to upload") })
+              ] }) : /* @__PURE__ */ i("div", { className: "flex flex-col items-center gap-2 text-sm text-muted-foreground", children: [
+                /* @__PURE__ */ n(O, { className: "h-6 w-6" }),
+                /* @__PURE__ */ n("span", { children: c("imageUploadPlaceholder", "Drag files or click to upload") })
               ] }),
-              /* @__PURE__ */ s.jsx(
+              /* @__PURE__ */ n(
                 "input",
                 {
                   type: "file",
                   accept: "image/*",
                   className: "hidden",
-                  disabled: o,
-                  onChange: G
+                  disabled: d,
+                  onChange: J
                 }
               )
             ]
           }
         ),
-        N === "success" && /* @__PURE__ */ s.jsx("p", { className: "text-xs text-muted-foreground", children: c("imageUploadSuccess", "Upload complete") })
+        T === "success" && /* @__PURE__ */ n("p", { className: "text-xs text-muted-foreground", children: c("imageUploadSuccess", "Upload complete") })
       ] }),
-      j && i.resourceUrl && /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-        /* @__PURE__ */ s.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ s.jsx("label", { className: "text-sm font-medium text-foreground", children: c("imageTitleLabel", "Image Title") }),
-          /* @__PURE__ */ s.jsx(
-            T,
+      b && l.resourceUrl && /* @__PURE__ */ i(B, { children: [
+        /* @__PURE__ */ i("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ n("label", { className: "text-sm font-medium text-foreground", children: c("imageTitleLabel", "Image Title") }),
+          /* @__PURE__ */ n(
+            S,
             {
               type: "text",
               placeholder: c(
                 "imageTitlePlaceholder",
                 "Please enter image title"
               ),
-              value: i.resourceTitle || "",
-              onChange: z
+              value: l.resourceTitle || "",
+              onChange: P
             }
           )
         ] }),
-        /* @__PURE__ */ s.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ s.jsx("label", { className: "text-sm font-medium text-foreground", children: c("imageScaleLabel", "Scale") }),
-          H
+        /* @__PURE__ */ i("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ n("label", { className: "text-sm font-medium text-foreground", children: c("imageScaleLabel", "Scale") }),
+          K
         ] })
       ] }),
-      !!v && /* @__PURE__ */ s.jsx("p", { className: "text-xs text-destructive", children: v }),
-      /* @__PURE__ */ s.jsxs("div", { className: "flex justify-end gap-2", children: [
-        /* @__PURE__ */ s.jsx(
-          w,
+      !!D && /* @__PURE__ */ n("p", { className: "text-xs text-destructive", children: D }),
+      /* @__PURE__ */ i("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ n(
+          C,
           {
             type: "button",
             variant: "outline",
-            onClick: k,
-            disabled: o,
+            onClick: q,
+            disabled: d,
             children: c("imageCancelButton", "Cancel")
           }
         ),
-        /* @__PURE__ */ s.jsx(
-          w,
+        /* @__PURE__ */ n(
+          C,
           {
             className: "h-8",
-            onClick: V,
-            disabled: !i?.resourceUrl || o,
+            onClick: z,
+            disabled: !l?.resourceUrl || d,
             children: c("imageUseButton", "Use Image")
           }
         )
@@ -320,8 +321,8 @@ const re = Q.forwardRef(
     ] });
   }
 );
-re.displayName = "ImageInject";
+ce.displayName = "ImageInject";
 export {
-  re as default
+  ce as default
 };
 //# sourceMappingURL=ImageInject.es.js.map