@layers-app/editor 0.7.47 → 0.7.49

package/dist/layers.DReq7_oC.js

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