@layers-app/editor 0.5.10-optimization → 0.6.0-specific.2

package/dist/layers.DwBS80Kn.js

@@ -0,0 +1,285 @@
+import { jsx as d, jsxs as J } from "react/jsx-runtime";
+import { useRef as Q, useState as I, useContext as X, useEffect as g } from "react";
+import { useTranslation as Y } from "react-i18next";
+import { l as Z, o as K, C as ee, m as P, u as te, a as ie, b as L, $ as W, t as oe, U as ae, I as ne, c as se, E as re, R as de, p as F, d as le } from "./layers.Dawun4Ev.js";
+import { LoadingOverlay as he } from "@mantine/core";
+import { showErrorNotification as ge } from "@layers-app/shared";
+const T = (t) => {
+  const {
+    width: u,
+    height: n,
+    isLoading: l,
+    isError: v,
+    src: m,
+    id: f,
+    altText: c,
+    imageRef: p,
+    maxWidth: h
+  } = t;
+  return /* @__PURE__ */ J(
+    "div",
+    {
+      className: "media-wrapper",
+      style: {
+        width: u,
+        height: n,
+        display: "inline-flex",
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ d(
+          he,
+          {
+            visible: l,
+            zIndex: 1e3,
+            overlayProps: { backgroundOpacity: 0.5 },
+            loaderProps: { size: 24, color: "black" }
+          }
+        ),
+        /* @__PURE__ */ d(
+          ue,
+          {
+            className: null,
+            src: m,
+            altText: c,
+            imageRef: p,
+            width: "inherit",
+            height: "inherit",
+            maxWidth: h || "auto",
+            id: f
+          }
+        )
+      ]
+    }
+  );
+};
+function ue({
+  altText: t,
+  className: u,
+  imageRef: n,
+  src: l,
+  width: v,
+  height: m,
+  maxWidth: f,
+  id: c
+}) {
+  const [p, h] = I(!1);
+  return /* @__PURE__ */ d(
+    "img",
+    {
+      className: `${u || void 0} ${p ? "" : "loading"}`,
+      src: l,
+      alt: t,
+      ref: n,
+      style: {
+        height: m,
+        maxWidth: f,
+        width: v
+      },
+      onLoad: () => {
+        l.includes("splash") ? setTimeout(() => {
+          h(!0);
+        }, 100) : h(!0);
+      },
+      draggable: "false",
+      "data-id": c
+    }
+  );
+}
+function xe({
+  src: t,
+  altText: u,
+  nodeKey: n,
+  width: l,
+  height: v,
+  maxWidth: m,
+  showCaption: f,
+  caption: c,
+  id: p,
+  create: h,
+  alignment: j
+}) {
+  var _, $;
+  const R = Q(null), [E, C] = I(!0), { isCollabActive: A } = Z(), [r] = K(), [w, y] = I(!0), [s, z] = I({
+    width: 0,
+    height: 0
+  }), { fetchUploadMedia: M, fetchDeleteMedia: O, maxFileSize: me } = X(ee), b = P.has(t) && (((_ = P.get(t)) == null ? void 0 : _.mediaNodeKeys.length) === 0 || (($ = P.get(t)) == null ? void 0 : $.mediaNodeKeys.length) === void 0 || t.trim() === ""), { t: N } = Y(), [fe, B] = I(0);
+  g(() => r.registerDecoratorListener(() => {
+    B((e) => e + 1);
+  }), [b]), g(() => {
+    if (!t || t.startsWith("data:image/") || !t.trim()) {
+      C(!1);
+      return;
+    }
+    const e = new Image();
+    e.src = t, e.onload = () => C(!1), e.onerror = () => {
+      C(!1);
+    };
+  }, [t, b]);
+  const G = (e, i) => {
+    r.update(() => {
+      le(null);
+      const o = L(n);
+      W(o) && o.setWidthAndHeight(e, i);
+    });
+  }, { historyState: U } = te(), {
+    settings: { showNestedEditorTreeView: k }
+  } = ie(), [S, x] = I(!1);
+  function V(e) {
+    return e.endsWith(".svg") || e.includes("image/svg+xml");
+  }
+  function q(e) {
+    return new Promise((i, o) => {
+      if (V(e)) {
+        i(0);
+        return;
+      }
+      const a = new Image();
+      a.src = e, a.onload = () => {
+        i(a.width);
+      }, a.onerror = () => {
+        o(new Error("Failed to load image"));
+      };
+    });
+  }
+  g(() => {
+    h && x(!0);
+  }, [h]), g(() => {
+    let e = l, i = v, o = 100;
+    (t.includes("unsplash") ? t.trim() : !b && t.trim() || t.includes("upload-src-editor")) && t !== "upload" && q(t).then((a) => {
+      typeof e == "number" && e < o && a < o ? (y(!0), z({
+        width: e,
+        height: i
+      })) : a < o ? (y(!0), z({
+        width: "auto",
+        height: "auto"
+      })) : (z({
+        width: a,
+        height: a
+      }), y(!1));
+    }).catch((a) => {
+      console.warn("Ошибка при загрузке изображения:", a.message);
+    });
+  }, [t, b]), g(() => {
+    s.width && s.height && w && r.update(() => {
+      const e = L(n);
+      W(e) && e.setWidthAndHeight(s.width, s.height);
+    });
+  }, [s.width, s.height, w]), g(() => {
+    const e = document.documentElement;
+    oe(S, e);
+  }, [S]), g(() => r.registerCommand(
+    ae,
+    (e) => (t === "upload" && D(e), !1),
+    ne
+  ), [t, E]);
+  const H = (e, i) => {
+    C(!1), r.update(() => {
+      const o = L(n);
+      W(o) && (o.setSrc(e), o.setId(i));
+    });
+  }, D = (e) => {
+    C(!0), M && M(
+      e[0],
+      (i, o) => {
+        H(i, o);
+      },
+      (i) => {
+        i && ge({
+          message: N("editor.gallery.errorFile")
+        }), H("", "");
+      }
+    );
+  };
+  return !t || t === "upload" ? /* @__PURE__ */ d(
+    se,
+    {
+      uploading: !1,
+      onUpload: (e) => {
+        !M || !e.length || (D(e), x(!1));
+      },
+      popoverProps: {
+        opened: S,
+        position: "bottom",
+        onChange: x
+      },
+      onChange: (e) => {
+        x(!1), r.update(() => {
+          const i = L(n);
+          W(i) && i.setSrc(e);
+        });
+      },
+      children: /* @__PURE__ */ d(
+        re,
+        {
+          title: N("editor.image.add_photo"),
+          icon: "photo",
+          onClick: () => x(!S),
+          isLoading: E
+        }
+      )
+    }
+  ) : w ? /* @__PURE__ */ d(
+    T,
+    {
+      width: s.width,
+      height: s.height,
+      isLoading: E,
+      isError: !1,
+      isIcon: w,
+      src: t,
+      id: p,
+      editor: r,
+      nodeKey: n,
+      fetchDeleteMedia: O,
+      altText: u,
+      imageRef: R,
+      maxWidth: m,
+      showCaption: f,
+      caption: c,
+      isCollabActive: A,
+      historyState: U,
+      showNestedEditorTreeView: k,
+      t: N
+    }
+  ) : /* @__PURE__ */ d(
+    de,
+    {
+      editor: r,
+      isIcon: w,
+      width: F(l),
+      height: F(v),
+      initialWidth: s.width || "",
+      initialHeight: s.height || "",
+      onResizeEnd: G,
+      alignment: j,
+      children: /* @__PURE__ */ d(
+        T,
+        {
+          width: "inherit",
+          height: "inherit",
+          isLoading: E,
+          isError: !1,
+          isIcon: w,
+          src: t,
+          id: p,
+          editor: r,
+          nodeKey: n,
+          fetchDeleteMedia: O,
+          altText: u,
+          imageRef: R,
+          maxWidth: m,
+          showCaption: f,
+          caption: c,
+          isCollabActive: A,
+          historyState: U,
+          showNestedEditorTreeView: k,
+          t: N
+        }
+      )
+    }
+  );
+}
+export {
+  xe as default
+};