@layers-app/editor 0.0.10 → 0.0.11

package/dist/layers.qcUUnbCI.js

@@ -0,0 +1,281 @@
+import { jsx as o, jsxs as G } from "react/jsx-runtime";
+import { useRef as V, useState as I, useContext as q, useEffect as w } from "react";
+import { useTranslation as J } from "react-i18next";
+import { l as Q, u as X, C as Y, a as Z, b as K, c as C, $ as E, t as ee, I as te, E as ie, d as oe, R as ne, F as ae } from "./layers.BngHKUYL.js";
+import { LoadingOverlay as T, Flex as se, Alert as re } from "@mantine/core";
+import { IconInfoCircle as le } from "@tabler/icons-react";
+const j = (t) => {
+  const {
+    width: c,
+    height: a,
+    isLoading: s,
+    isError: d,
+    src: g,
+    id: f,
+    altText: u,
+    imageRef: b,
+    maxWidth: v
+  } = t;
+  return /* @__PURE__ */ G(
+    "div",
+    {
+      className: "media-wrapper",
+      style: {
+        width: c,
+        height: a,
+        display: "inline-flex",
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ o(
+          T,
+          {
+            visible: s,
+            zIndex: 1e3,
+            overlayProps: { backgroundOpacity: 0.5 },
+            loaderProps: { size: 24, color: "black" }
+          }
+        ),
+        /* @__PURE__ */ o(
+          T,
+          {
+            visible: d,
+            zIndex: 1e3,
+            overlayProps: { backgroundOpacity: 0.5 },
+            loaderProps: {
+              children: /* @__PURE__ */ o(se, { bg: "white", maw: 300, justify: "center", children: /* @__PURE__ */ o(
+                re,
+                {
+                  variant: "light",
+                  color: "red",
+                  title: "Ошибка загрузки",
+                  icon: /* @__PURE__ */ o(le, {}),
+                  children: "Попробуйте загрузить заново."
+                }
+              ) })
+            }
+          }
+        ),
+        /* @__PURE__ */ o(
+          de,
+          {
+            className: null,
+            src: g,
+            altText: u,
+            imageRef: b,
+            width: "inherit",
+            height: "inherit",
+            maxWidth: v || "auto",
+            id: f
+          }
+        )
+      ]
+    }
+  );
+};
+function de({
+  altText: t,
+  className: c,
+  imageRef: a,
+  src: s,
+  width: d,
+  height: g,
+  maxWidth: f,
+  id: u
+}) {
+  return /* @__PURE__ */ o(
+    "img",
+    {
+      className: c || void 0,
+      src: s,
+      alt: t,
+      ref: a,
+      style: {
+        height: g,
+        maxWidth: f,
+        width: d
+      },
+      draggable: "false",
+      "data-id": u
+    }
+  );
+}
+function pe({
+  src: t,
+  altText: c,
+  nodeKey: a,
+  width: s,
+  height: d,
+  maxWidth: g,
+  showCaption: f,
+  caption: u,
+  id: b,
+  create: v,
+  alignment: _
+}) {
+  const z = V(null), [R, y] = I(!0), [k, D] = I(!1), { isCollabActive: A } = Q(), [h] = X(), [m, S] = I(!0), [r, W] = I({
+    width: 0,
+    height: 0
+  }), { fetchUploadImage: F, fetchDeleteImage: L } = q(Y), { t: N } = J();
+  w(() => {
+    if (!t || t.startsWith("data:image/")) {
+      y(!1);
+      return;
+    }
+    const e = new Image();
+    e.src = t, e.onload = () => y(!1), e.onerror = () => {
+      y(!1), D(!0);
+    };
+  }, [t]);
+  const U = (e, n) => {
+    h.update(() => {
+      ae(null);
+      const l = C(a);
+      E(l) && l.setWidthAndHeight(e, n);
+    });
+  }, { historyState: O } = Z(), {
+    settings: { showNestedEditorTreeView: H }
+  } = K(), [x, p] = I(!1);
+  function $(e) {
+    return e.endsWith(".svg") || e.includes("image/svg+xml");
+  }
+  function B(e) {
+    return new Promise((n, l) => {
+      if ($(e)) {
+        n(0);
+        return;
+      }
+      const i = new Image();
+      i.src = e, i.onload = () => {
+        n(i.width);
+      }, i.onerror = () => {
+        l(new Error("Failed to load image"));
+      };
+    });
+  }
+  return w(() => {
+    v && p(!0);
+  }, [v]), w(() => {
+    let e = s, n = d, l = 100;
+    t && B(t).then((i) => {
+      typeof e == "number" && e < l && i < l ? (S(!0), W({
+        width: e,
+        height: n
+      })) : i < l ? (S(!0), W({
+        width: "auto",
+        height: "auto"
+      })) : (W({
+        width: i,
+        height: i
+      }), S(!1));
+    });
+  }, [t]), w(() => {
+    r.width && r.height && m && h.update(() => {
+      const e = C(a);
+      E(e) && e.setWidthAndHeight(r.width, r.height);
+    });
+  }, [r.width, r.height, m]), w(() => {
+    const e = document.documentElement;
+    ee(x, e);
+  }, [x]), t ? m ? /* @__PURE__ */ o(
+    j,
+    {
+      width: r.width,
+      height: r.height,
+      isLoading: R,
+      isError: k,
+      isIcon: m,
+      src: t,
+      id: b,
+      editor: h,
+      nodeKey: a,
+      fetchDeleteImage: L,
+      altText: c,
+      imageRef: z,
+      maxWidth: g,
+      showCaption: f,
+      caption: u,
+      isCollabActive: A,
+      historyState: O,
+      showNestedEditorTreeView: H,
+      t: N
+    }
+  ) : /* @__PURE__ */ o(
+    ne,
+    {
+      editor: h,
+      isIcon: m,
+      width: typeof s == "string" && s.includes("%") ? parseFloat(s) : s,
+      height: typeof d == "string" && d.includes("%") ? parseFloat(d) : s,
+      initialWidth: r.width || "",
+      initialHeight: r.height || "",
+      onResizeEnd: U,
+      alignment: _,
+      children: /* @__PURE__ */ o(
+        j,
+        {
+          width: "inherit",
+          height: "inherit",
+          isLoading: R,
+          isError: k,
+          isIcon: m,
+          src: t,
+          id: b,
+          editor: h,
+          nodeKey: a,
+          fetchDeleteImage: L,
+          altText: c,
+          imageRef: z,
+          maxWidth: g,
+          showCaption: f,
+          caption: u,
+          isCollabActive: A,
+          historyState: O,
+          showNestedEditorTreeView: H,
+          t: N
+        }
+      )
+    }
+  ) : /* @__PURE__ */ o(
+    te,
+    {
+      uploading: !1,
+      onUpload: (e) => {
+        !F || !e.length || (e.forEach((n, l) => {
+          F(n, (i, M) => {
+            l === 0 ? h.update(() => {
+              const P = C(a);
+              E(P) && (P.setSrc(i), P.setId(M));
+            }) : h.dispatchCommand(oe, {
+              altText: "",
+              src: i,
+              id: M
+            });
+          });
+        }), p(!1));
+      },
+      popoverProps: {
+        opened: x,
+        position: "bottom",
+        onChange: p
+      },
+      onChange: (e) => {
+        p(!1), h.update(() => {
+          const n = C(a);
+          E(n) && n.setSrc(e);
+        });
+      },
+      children: /* @__PURE__ */ o(
+        ie,
+        {
+          title: N("editor.image.add_photo"),
+          icon: "photo",
+          onClick: () => p(!x)
+        }
+      )
+    }
+  );
+}
+export {
+  pe as default
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@layers-app/editor",
   "private": false,
-  "version": "0.0.10",
+  "version": "0.0.11",
   "type": "module",
   "scripts": {
     "start": "vite",
@@ -68,7 +68,7 @@
     "sass": "^1.71.1",
     "typescript": "^5.5.4",
     "typescript-eslint": "^8.2.0",
-    "vite": "^5.1.1",
+    "vite": "^6.2.2",
     "vite-plugin-commonjs": "^0.10.1",
     "vite-plugin-css-injected-by-js": "^3.5.0",
     "vite-plugin-dts": "^4.0.0-beta.1",