@layers-app/editor 2.2.42 → 2.2.43

package/dist/layers.Dsw7pDbX.js

@@ -0,0 +1,748 @@
+import { jsxs as I, jsx as n, Fragment as L } from "react/jsx-runtime";
+import { useMemo as X, useState as b, useCallback as D, useContext as he, useRef as Le, useEffect as S } from "react";
+import { useTranslation as U } from "react-i18next";
+import { useLexicalComposerContext as z } from "@lexical/react/LexicalComposerContext";
+import { Menu as x, Flex as ce, Stack as Ue, Button as B, Box as ze, LoadingOverlay as _e } from "@mantine/core";
+import { $getNodeByKey as N, COMMAND_PRIORITY_LOW as Fe, $setSelection as He } from "lexical";
+import { y as je, A as Y, K as $e, H as E, z as fe, n as we, B as be, D as ve, F as O, N as ye, G as Be, J as Ve, q as Ge, C as Ie, L as Xe, P as Ye, Q as V, S as Ze, U as qe, V as Je, W as Qe, X as Ke, Y as et, R as tt, m as ue, O as ot, k as me, Z as pe, o as nt } from "./layers.BJCeJUWZ.js";
+import { AttachmentsGalleryModal as Ce, showErrorNotification as it } from "@layers-app/shared";
+import { useLexicalEditable as Z } from "@lexical/react/useLexicalEditable";
+import { useDisclosure as G } from "@mantine/hooks";
+import "@lexical/react/LexicalDecoratorBlockNode";
+import "@lexical/utils";
+import "@lexical/mark";
+import "@lexical/code";
+import "@lexical/selection";
+import "react-dom";
+import "@lexical/react/LexicalErrorBoundary";
+import "@lexical/react/LexicalBlockWithAlignableContents";
+import "@mantine/notifications";
+function at(e, i) {
+  const o = document.createElement("a");
+  o.href = e, o.download = i, o.rel = "noopener", document.body.appendChild(o), o.click(), o.remove();
+}
+function q(e) {
+  try {
+    const o = new URL(e, window.location.origin).pathname.split("/").pop() || "image";
+    return o.includes(".") ? o : `${o}.png`;
+  } catch {
+    return "image";
+  }
+}
+async function J(e, i) {
+  const o = await fetch(e);
+  if (!o.ok)
+    throw new Error("fetch failed");
+  const a = await o.blob(), l = URL.createObjectURL(a);
+  try {
+    at(l, i);
+  } finally {
+    setTimeout(() => URL.revokeObjectURL(l), 0);
+  }
+}
+function De({
+  opened: e,
+  onOpenChange: i,
+  t: o,
+  onDownload: a,
+  onDelete: l
+}) {
+  return /* @__PURE__ */ I(
+    x,
+    {
+      opened: e,
+      onChange: i,
+      transitionProps: je,
+      shadow: "md",
+      position: "bottom-start",
+      offset: 4,
+      withinPortal: !0,
+      closeOnItemClick: !0,
+      children: [
+        /* @__PURE__ */ n(x.Target, { children: /* @__PURE__ */ n(
+          Y,
+          {
+            label: o("editor.toolbar.more"),
+            icon: $e,
+            iconColor: "var(--mantine-color-gray-text)",
+            "aria-label": o("editor.toolbar.more")
+          }
+        ) }),
+        /* @__PURE__ */ I(x.Dropdown, { p: 4, w: 164, onMouseDown: (r) => r.preventDefault(), children: [
+          /* @__PURE__ */ n(
+            x.Item,
+            {
+              leftSection: /* @__PURE__ */ n(ce, { align: "center", justify: "center", c: "gray.6", children: /* @__PURE__ */ n(E, { icon: fe, size: 16 }) }),
+              onClick: (r) => {
+                r.stopPropagation(), a();
+              },
+              children: o("editor.gallery.download")
+            }
+          ),
+          /* @__PURE__ */ n(
+            x.Item,
+            {
+              color: "red",
+              leftSection: /* @__PURE__ */ n(ce, { align: "center", justify: "center", c: "red.6", children: /* @__PURE__ */ n(E, { icon: we, size: 16 }) }),
+              onClick: (r) => {
+                r.stopPropagation(), l();
+              },
+              children: o("editor.contextMenu.delete")
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+const Ne = ({
+  t: e,
+  src: i,
+  setShown: o,
+  id: a
+}) => {
+  const [l, { open: r, close: m }] = G(!1), g = be(), p = X(() => [
+    {
+      id: !a || a === "0" ? "" : a,
+      Url: i ?? "",
+      contentType: "image/*",
+      originalFileName: "",
+      fileSize: 0,
+      storageType: "",
+      storagePath: "",
+      fileName: "",
+      parentType: "",
+      parentId: "",
+      ownerId: "",
+      createdAt: /* @__PURE__ */ new Date(),
+      updatedAt: /* @__PURE__ */ new Date(),
+      version: 0,
+      deleted: !1,
+      deletedAt: /* @__PURE__ */ new Date()
+    }
+  ], [i, a]);
+  return /* @__PURE__ */ I(L, { children: [
+    /* @__PURE__ */ n(
+      Ce,
+      {
+        opened: l,
+        onOpenChange: (h) => {
+          h ? r() : m();
+        },
+        attachments: p,
+        allowDownload: g
+      }
+    ),
+    /* @__PURE__ */ n(
+      Y,
+      {
+        label: e("editor.image.preview"),
+        icon: ve,
+        iconColor: "var(--mantine-color-gray-text)",
+        "aria-label": e("editor.image.preview"),
+        onClick: () => {
+          o(!1), r();
+        }
+      }
+    )
+  ] });
+}, rt = ({
+  nodeKey: e,
+  src: i
+}) => {
+  const [o] = z(), a = Z(), [l, r] = b(!1), [m, g] = b(!1), { t: p } = U(), u = D(() => {
+    o.update(() => {
+      const C = N(e);
+      O(C) && C.remove();
+    });
+  }, [o, e]), h = D(async () => {
+    if (i)
+      try {
+        await J(i, q(i));
+      } catch {
+      }
+  }, [i]);
+  return /* @__PURE__ */ I(
+    "div",
+    {
+      className: `media-actions ${a ? "" : "media-actions--readonly"}`,
+      children: [
+        /* @__PURE__ */ n(Ne, { t: p, src: i, setShown: () => {
+        } }),
+        a && /* @__PURE__ */ I(L, { children: [
+          /* @__PURE__ */ n(
+            ye,
+            {
+              opened: l,
+              setOpened: r,
+              t: p,
+              editor: o,
+              nodeKey: e,
+              setShown: () => {
+              }
+            }
+          ),
+          /* @__PURE__ */ n(
+            De,
+            {
+              opened: m,
+              onOpenChange: g,
+              t: p,
+              onDownload: () => void h(),
+              onDelete: u
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}, lt = () => {
+};
+function st({ nodeKey: e, src: i, id: o }) {
+  const { t: a } = U(), [l] = z(), r = Z(), [m, g] = b(!1), [p, u] = b(!1), h = D(() => {
+    u(!1), l.update(() => {
+      const v = N(e);
+      if (!O(v)) return;
+      const A = v.getParent();
+      Be(A) ? A.remove() : v.remove();
+    });
+  }, [l, e]), C = D(async () => {
+    if (i)
+      try {
+        await J(i, q(i));
+      } catch {
+      }
+  }, [i]);
+  return /* @__PURE__ */ I(
+    "div",
+    {
+      className: "media-actions visible",
+      style: {
+        position: "absolute",
+        top: 10,
+        right: 10,
+        zIndex: 10,
+        pointerEvents: "auto",
+        display: "flex",
+        gap: 4
+      },
+      onClick: (v) => v.stopPropagation(),
+      children: [
+        /* @__PURE__ */ n(Ne, { t: a, src: i, setShown: lt, id: o }),
+        r && /* @__PURE__ */ I(L, { children: [
+          /* @__PURE__ */ n(
+            ye,
+            {
+              opened: m,
+              setOpened: g,
+              t: a,
+              editor: l,
+              nodeKey: e
+            }
+          ),
+          /* @__PURE__ */ n(
+            De,
+            {
+              opened: p,
+              onOpenChange: u,
+              t: a,
+              onDownload: () => void C(),
+              onDelete: h
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function dt({ nodeKey: e, src: i, id: o }) {
+  const { t: a } = U(), [l] = z(), r = Z(), m = be(), [g, { open: p, close: u }] = G(!1), [h, { open: C, close: v }] = G(!1), A = X(
+    () => [
+      {
+        id: !o || o === "0" ? "" : o,
+        Url: i ?? "",
+        contentType: "image/*",
+        originalFileName: "",
+        fileSize: 0,
+        storageType: "",
+        storagePath: "",
+        fileName: "",
+        parentType: "",
+        parentId: "",
+        ownerId: "",
+        createdAt: /* @__PURE__ */ new Date(),
+        updatedAt: /* @__PURE__ */ new Date(),
+        version: 0,
+        deleted: !1,
+        deletedAt: /* @__PURE__ */ new Date()
+      }
+    ],
+    [i, o]
+  ), T = () => {
+    u(), C();
+  }, P = D(async () => {
+    if (u(), !!i)
+      try {
+        await J(i, q(i));
+      } catch {
+      }
+  }, [i, u]), c = D(() => {
+    u(), l.update(() => {
+      const f = N(e);
+      O(f) && f.remove();
+    });
+  }, [l, e, u]);
+  return /* @__PURE__ */ I(L, { children: [
+    /* @__PURE__ */ n(
+      "div",
+      {
+        className: "image-touch-actions",
+        style: {
+          position: "absolute",
+          top: 8,
+          right: 8,
+          zIndex: 10,
+          pointerEvents: "auto"
+        },
+        onClick: (f) => f.stopPropagation(),
+        children: /* @__PURE__ */ n(
+          Y,
+          {
+            label: a("editor.toolbar.more"),
+            icon: Ve,
+            iconColor: "var(--mantine-color-gray-text)",
+            "aria-label": a("editor.toolbar.more"),
+            onClick: p
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ n(
+      Ce,
+      {
+        opened: h,
+        onOpenChange: (f) => f ? C() : v(),
+        attachments: A,
+        allowDownload: m
+      }
+    ),
+    /* @__PURE__ */ n(
+      Ge,
+      {
+        opened: g,
+        onClose: u,
+        title: a("editor.image.mobileActions"),
+        children: /* @__PURE__ */ I(Ue, { gap: 4, p: 0, children: [
+          /* @__PURE__ */ n(
+            B,
+            {
+              type: "button",
+              variant: "subtle",
+              color: "gray",
+              fullWidth: !0,
+              justify: "flex-start",
+              bg: "var(--editor-action-bg)",
+              onClick: T,
+              leftSection: /* @__PURE__ */ n(
+                E,
+                {
+                  icon: ve,
+                  size: 16,
+                  color: "var(--mantine-color-dimmed)"
+                }
+              ),
+              children: a("editor.image.previewFullScreen")
+            }
+          ),
+          m && /* @__PURE__ */ n(
+            B,
+            {
+              type: "button",
+              variant: "subtle",
+              color: "gray",
+              fullWidth: !0,
+              justify: "flex-start",
+              bg: "var(--editor-action-bg)",
+              onClick: () => void P(),
+              leftSection: /* @__PURE__ */ n(
+                E,
+                {
+                  icon: fe,
+                  size: 16,
+                  color: "var(--mantine-color-dimmed)"
+                }
+              ),
+              children: a("editor.gallery.download")
+            }
+          ),
+          r && /* @__PURE__ */ n(
+            B,
+            {
+              type: "button",
+              variant: "subtle",
+              color: "red",
+              fullWidth: !0,
+              justify: "flex-start",
+              bg: "var(--editor-action-bg)",
+              onClick: c,
+              leftSection: /* @__PURE__ */ n(
+                E,
+                {
+                  icon: we,
+                  size: 16,
+                  color: "var(--mantine-color-red-6)"
+                }
+              ),
+              children: a("editor.actions.delete")
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+const ge = (e) => {
+  const {
+    width: i,
+    height: o,
+    isLoading: a,
+    isError: l,
+    src: r,
+    id: m,
+    altText: g,
+    imageRef: p,
+    maxWidth: u,
+    aspectRatio: h
+  } = e;
+  return /* @__PURE__ */ I(
+    "div",
+    {
+      className: "media-wrapper",
+      "data-reserved-box": h ? "" : void 0,
+      style: {
+        width: i,
+        height: h ? "auto" : o,
+        aspectRatio: h || void 0,
+        display: "inline-flex",
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ n(
+          _e,
+          {
+            visible: a,
+            zIndex: 1e3,
+            overlayProps: { backgroundOpacity: 0.5 },
+            loaderProps: { size: 24, color: "black" }
+          }
+        ),
+        /* @__PURE__ */ n(
+          ct,
+          {
+            className: null,
+            src: r,
+            altText: g,
+            imageRef: p,
+            width: "inherit",
+            height: "inherit",
+            maxWidth: u || "auto",
+            id: m
+          }
+        ),
+        me && /* @__PURE__ */ n(dt, { nodeKey: e.nodeKey, src: r, id: m }),
+        pe && /* @__PURE__ */ n(st, { nodeKey: e.nodeKey, src: r, id: m }),
+        nt && !me && !pe && /* @__PURE__ */ n(rt, { nodeKey: e.nodeKey, src: r })
+      ]
+    }
+  );
+};
+function ct({
+  altText: e,
+  className: i,
+  imageRef: o,
+  src: a,
+  width: l,
+  height: r,
+  maxWidth: m,
+  id: g
+}) {
+  const [p, u] = b(!1);
+  return /* @__PURE__ */ n(
+    "img",
+    {
+      className: `${i || void 0} ${p ? "" : "loading"}`,
+      src: a,
+      alt: e,
+      ref: o,
+      style: {
+        height: r,
+        maxWidth: m,
+        width: l
+      },
+      onLoad: () => {
+        a.includes("splash") ? setTimeout(() => {
+          u(!0);
+        }, 100) : u(!0);
+      },
+      draggable: "false",
+      "data-id": g
+    }
+  );
+}
+function Wt(e) {
+  const { disable: i } = he(Ie);
+  return i && Xe.isPlaceholderSrc(e.src) ? null : /* @__PURE__ */ n(ut, { ...e });
+}
+function ut({
+  src: e,
+  altText: i,
+  nodeKey: o,
+  width: a,
+  height: l,
+  maxWidth: r,
+  showCaption: m,
+  caption: g,
+  id: p,
+  create: u,
+  alignment: h,
+  imagePickerTab: C,
+  aspectRatio: v
+}) {
+  var se, de;
+  const A = Le(null), [T, P] = b(!0), [c] = z(), [f, _] = b(!0), [y, F] = b({
+    width: 0,
+    height: 0
+  }), { start: Q } = Ye(), [mt, H] = b(0), {
+    fetchUploadMedia: R,
+    fetchDeleteMedia: K,
+    maxFileSize: pt,
+    imperativeHandleRef: M,
+    disable: Oe
+  } = he(Ie), W = V.has(e) && (((se = V.get(e)) == null ? void 0 : se.mediaNodeKeys.length) === 0 || ((de = V.get(e)) == null ? void 0 : de.mediaNodeKeys.length) === void 0 || e.trim() === ""), { t: k } = U(), ee = (t) => {
+    if (typeof t == "number") return t > 0 ? t : null;
+    if (typeof t == "string" && !t.includes("%")) {
+      const s = parseFloat(t);
+      return Number.isFinite(s) && s > 0 ? s : null;
+    }
+    return null;
+  }, te = ee(a), oe = ee(l), ne = te && oe ? te / oe : void 0, [Ae, Pe] = b(
+    void 0
+  ), ie = X(() => {
+    try {
+      const t = parseFloat(
+        localStorage.getItem("layers-img-ratio:" + e) || ""
+      );
+      return Number.isFinite(t) && t > 0 ? t : void 0;
+    } catch {
+      return;
+    }
+  }, [e]), Se = ne ?? v ?? ie ?? Ae, [xe, ae] = b(!1), Ee = !xe && !ne && (v ?? ie) != null, [gt, Te] = b(0);
+  S(() => c.registerDecoratorListener(() => {
+    Te((t) => t + 1);
+  }), [W]), S(() => {
+    const t = c.getElementByKey(o);
+    t && (t.style.removeProperty("aspect-ratio"), t.style.removeProperty("width"));
+  }, [c, o]), S(() => {
+    if (!e || e.startsWith("data:image/") || !e.trim()) {
+      P(!1);
+      return;
+    }
+    const t = new Image();
+    t.src = e, t.onload = () => {
+      if (P(!1), t.naturalWidth) {
+        const s = t.naturalWidth / t.naturalHeight;
+        if (Pe(s), t.naturalWidth >= 100)
+          try {
+            localStorage.setItem("layers-img-ratio:" + e, String(s));
+          } catch {
+          }
+        !v && t.naturalWidth >= 100 && c.update(
+          () => {
+            const d = N(o);
+            O(d) && d.getAspectRatio() == null && d.setAspectRatio(s);
+          },
+          { tag: "history-merge" }
+        );
+      }
+    }, t.onerror = () => {
+      P(!1);
+    };
+  }, [e, W]);
+  const Re = (t, s) => {
+    c.update(() => {
+      He(null);
+      const d = N(o);
+      O(d) && d.setWidthAndHeight(t, s);
+    });
+  }, { historyState: re } = Ze(), {
+    settings: { showNestedEditorTreeView: le }
+  } = qe();
+  function Me(t) {
+    return t.endsWith(".svg") || t.includes("image/svg+xml");
+  }
+  function We(t) {
+    return new Promise((s, d) => {
+      if (Me(t)) {
+        s(0);
+        return;
+      }
+      const w = new Image();
+      w.src = t, w.onload = () => {
+        s(w.width);
+      }, w.onerror = () => {
+        d(new Error("Failed to load image"));
+      };
+    });
+  }
+  S(() => {
+    let t = a, s = l, d = 100;
+    (e.includes("unsplash") ? e.trim() : !W && e.trim() || e.includes("upload-src-editor")) && e !== "upload" && We(e).then((w) => {
+      typeof t == "number" && t < d && w < d ? (_(!0), F({
+        width: t,
+        height: s
+      })) : w < d ? (_(!0), F({
+        width: "auto",
+        height: "auto"
+      })) : (F({
+        width: w,
+        height: w
+      }), _(!1)), ae(!0);
+    }).catch((w) => {
+      ae(!0), console.warn("Ошибка при загрузке изображения:", w.message);
+    });
+  }, [e, W]), S(() => {
+    y.width && y.height && f && c.update(() => {
+      const t = N(o);
+      O(t) && t.setWidthAndHeight(y.width, y.height);
+    });
+  }, [y.width, y.height, f]);
+  const ke = D(
+    (t) => Je(c, o, t),
+    [c, o]
+  ), j = D(
+    (t, s) => {
+      P(!1), c.update(() => {
+        const d = N(o);
+        O(d) && (d.setSrc(t), d.setId(s));
+      });
+    },
+    [c, o]
+  ), $ = D(
+    (t) => {
+      P(!0);
+      const s = Q();
+      R && R(
+        t[0],
+        (d, w) => {
+          j(d, w), H(0);
+        },
+        (d) => {
+          d && it({
+            message: k("editor.gallery.errorFile")
+          }), H(0), j(e.startsWith("blob:") ? "upload" : "", "");
+        },
+        s,
+        (d) => {
+          H(d);
+        }
+      );
+    },
+    [R, Q, k, j, e]
+  );
+  return S(() => c.registerCommand(
+    Qe,
+    (t) => !e.startsWith("blob:") && e !== "upload" || t.targetNodeKey !== o ? !1 : ($(t.files), !0),
+    Fe
+  ), [c, $, o, e]), !e || e === "upload" ? /* @__PURE__ */ n(ze, { "data-editor-image-picker-drop-root": !0, w: "100%", children: /* @__PURE__ */ n(
+    Ke,
+    {
+      inline: !0,
+      nodeKey: o,
+      defaultTabValue: C,
+      onWriteTabToNode: ke,
+      uploading: !1,
+      onUpload: (t) => {
+        !R || !t.length || $(t);
+      },
+      popoverProps: {
+        opened: !0,
+        position: "bottom",
+        zIndex: et
+      },
+      onChange: (t) => {
+        c.update(() => {
+          const s = N(o);
+          O(s) && s.setSrc(t);
+        });
+      }
+    }
+  ) }) : f && !Ee ? /* @__PURE__ */ n(
+    ge,
+    {
+      width: y.width,
+      height: y.height,
+      isLoading: T,
+      isError: !1,
+      isIcon: f,
+      src: e,
+      id: p,
+      editor: c,
+      nodeKey: o,
+      fetchDeleteMedia: K,
+      altText: i,
+      imageRef: A,
+      maxWidth: r,
+      showCaption: m,
+      caption: g,
+      isCollabActive: !1,
+      historyState: re,
+      showNestedEditorTreeView: le,
+      t: k
+    }
+  ) : /* @__PURE__ */ n(
+    tt,
+    {
+      editor: c,
+      isIcon: f,
+      width: ue(a),
+      height: ue(l),
+      initialWidth: y.width || "",
+      initialHeight: y.height || "",
+      onResizeEnd: Re,
+      alignment: h,
+      disable: Oe,
+      onRegisterDecoratorEnter: (t) => {
+        M != null && M.current && (M.current.decoratorEnterAction = t);
+      },
+      onActivate: () => c.dispatchCommand(ot, "show_menu"),
+      children: /* @__PURE__ */ n(
+        ge,
+        {
+          width: "inherit",
+          height: "inherit",
+          aspectRatio: Se,
+          isLoading: T,
+          isError: !1,
+          isIcon: f,
+          src: e,
+          id: p,
+          editor: c,
+          nodeKey: o,
+          fetchDeleteMedia: K,
+          altText: i,
+          imageRef: A,
+          maxWidth: r,
+          showCaption: m,
+          caption: g,
+          isCollabActive: !1,
+          historyState: re,
+          showNestedEditorTreeView: le,
+          t: k
+        }
+      )
+    }
+  );
+}
+export {
+  Wt as default
+};