@layers-app/editor 2.2.33 → 2.2.34

package/dist/layers.BbbH0QJR.js

@@ -0,0 +1,712 @@
+import { jsxs as k, jsx as o, Fragment as V } from "react/jsx-runtime";
+import { useMemo as ae, useState as C, useCallback as b, useContext as se, useRef as ve, useEffect as A } from "react";
+import { useTranslation as P } from "react-i18next";
+import { useLexicalComposerContext as z } from "@lexical/react/LexicalComposerContext";
+import { Menu as N, Flex as te, Stack as ye, Button as H, Box as Le, LoadingOverlay as De } from "@mantine/core";
+import { $getNodeByKey as L, COMMAND_PRIORITY_LOW as Me, $setSelection as Ae } from "lexical";
+import { y as Ne, k as G, m as Oe, H as O, z as le, D as de, B as D, N as ce, F as xe, G as Se, q as Ee, C as ue, J as Te, K as We, L as $, Q as Pe, S as ze, T as Ue, U as je, V as _e, W as Re, R as Fe, O as He, r as oe, j as ne, X as ie, o as $e } from "./layers.VpNxXdcm.js";
+import { AttachmentsGalleryModal as pe, showErrorNotification as Be } from "@layers-app/shared";
+import { useLexicalEditable as Ve } from "@lexical/react/useLexicalEditable";
+import { useDisclosure as B } 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";
+const me = [
+  ["path", { d: "M8.00001 3.09779C8.00001 3.09779 4.03375 2.74194 3.38784 3.38785C2.74192 4.03375 3.09784 8 3.09784 8", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }],
+  ["path", { d: "M8.00001 20.9022C8.00001 20.9022 4.03375 21.2581 3.38784 20.6122C2.74192 19.9662 3.09784 16 3.09784 16", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "1" }],
+  ["path", { d: "M16 3.09779C16 3.09779 19.9663 2.74194 20.6122 3.38785C21.2581 4.03375 20.9022 8 20.9022 8", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "2" }],
+  ["path", { d: "M16 20.9022C16 20.9022 19.9663 21.2581 20.6122 20.6122C21.2581 19.9662 20.9022 16 20.9022 16", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "3" }],
+  ["path", { d: "M14.0107 9.99847L20.0625 3.94678", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "4" }],
+  ["path", { d: "M9.99696 14.0024L3.63966 20.3807", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "5" }],
+  ["path", { d: "M9.99732 10.0024L3.84571 3.85889", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "6" }],
+  ["path", { d: "M13.9795 14.0024L20.5279 20.4983", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "7" }]
+];
+function Ge(e, n) {
+  const t = document.createElement("a");
+  t.href = e, t.download = n, t.rel = "noopener", document.body.appendChild(t), t.click(), t.remove();
+}
+function X(e) {
+  try {
+    const t = new URL(e, window.location.origin).pathname.split("/").pop() || "image";
+    return t.includes(".") ? t : `${t}.png`;
+  } catch {
+    return "image";
+  }
+}
+async function q(e, n) {
+  const t = await fetch(e);
+  if (!t.ok)
+    throw new Error("fetch failed");
+  const r = await t.blob(), s = URL.createObjectURL(r);
+  try {
+    Ge(s, n);
+  } finally {
+    setTimeout(() => URL.revokeObjectURL(s), 0);
+  }
+}
+function he({
+  opened: e,
+  onOpenChange: n,
+  t,
+  onDownload: r,
+  onDelete: s
+}) {
+  return /* @__PURE__ */ k(
+    N,
+    {
+      opened: e,
+      onChange: n,
+      transitionProps: Ne,
+      shadow: "md",
+      position: "bottom-start",
+      offset: 4,
+      withinPortal: !0,
+      closeOnItemClick: !0,
+      children: [
+        /* @__PURE__ */ o(N.Target, { children: /* @__PURE__ */ o(
+          G,
+          {
+            label: t("editor.toolbar.more"),
+            icon: Oe,
+            iconColor: "var(--mantine-color-gray-text)",
+            "aria-label": t("editor.toolbar.more")
+          }
+        ) }),
+        /* @__PURE__ */ k(N.Dropdown, { p: 4, w: 164, onMouseDown: (a) => a.preventDefault(), children: [
+          /* @__PURE__ */ o(
+            N.Item,
+            {
+              leftSection: /* @__PURE__ */ o(te, { align: "center", justify: "center", c: "gray.6", children: /* @__PURE__ */ o(O, { icon: le, size: 16 }) }),
+              onClick: (a) => {
+                a.stopPropagation(), r();
+              },
+              children: t("editor.gallery.download")
+            }
+          ),
+          /* @__PURE__ */ o(
+            N.Item,
+            {
+              color: "red",
+              leftSection: /* @__PURE__ */ o(te, { align: "center", justify: "center", c: "red.6", children: /* @__PURE__ */ o(O, { icon: de, size: 16 }) }),
+              onClick: (a) => {
+                a.stopPropagation(), s();
+              },
+              children: t("editor.contextMenu.delete")
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+const ge = ({
+  t: e,
+  src: n,
+  setShown: t,
+  id: r
+}) => {
+  const [s, { open: a, close: u }] = B(!1), d = ae(() => [
+    {
+      id: !r || r === "0" ? "" : r,
+      Url: n ?? "",
+      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()
+    }
+  ], [n, r]);
+  return /* @__PURE__ */ k(V, { children: [
+    /* @__PURE__ */ o(
+      pe,
+      {
+        opened: s,
+        onOpenChange: (m) => {
+          m ? a() : u();
+        },
+        attachments: d
+      }
+    ),
+    /* @__PURE__ */ o(
+      G,
+      {
+        label: e("editor.image.preview"),
+        icon: me,
+        iconColor: "var(--mantine-color-gray-text)",
+        "aria-label": e("editor.image.preview"),
+        onClick: () => {
+          t(!1), a();
+        }
+      }
+    )
+  ] });
+}, Xe = ({
+  nodeKey: e,
+  src: n
+}) => {
+  const [t] = z(), r = Ve(), [s, a] = C(!1), [u, d] = C(!1), { t: p } = P(), m = b(() => {
+    t.update(() => {
+      const f = L(e);
+      D(f) && f.remove();
+    });
+  }, [t, e]), I = b(async () => {
+    if (n)
+      try {
+        await q(n, X(n));
+      } catch {
+      }
+  }, [n]);
+  return /* @__PURE__ */ k(
+    "div",
+    {
+      className: `media-actions ${r ? "" : "media-actions--readonly"}`,
+      children: [
+        /* @__PURE__ */ o(ge, { t: p, src: n, setShown: () => {
+        } }),
+        r && /* @__PURE__ */ k(V, { children: [
+          /* @__PURE__ */ o(
+            ce,
+            {
+              opened: s,
+              setOpened: a,
+              t: p,
+              editor: t,
+              nodeKey: e,
+              setShown: () => {
+              }
+            }
+          ),
+          /* @__PURE__ */ o(
+            he,
+            {
+              opened: u,
+              onOpenChange: d,
+              t: p,
+              onDownload: () => void I(),
+              onDelete: m
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}, qe = () => {
+};
+function Je({ nodeKey: e, src: n, id: t }) {
+  const { t: r } = P(), [s] = z(), [a, u] = C(!1), [d, p] = C(!1), m = b(() => {
+    p(!1), s.update(() => {
+      const f = L(e);
+      if (!D(f)) return;
+      const v = f.getParent();
+      xe(v) ? v.remove() : f.remove();
+    });
+  }, [s, e]), I = b(async () => {
+    if (n)
+      try {
+        await q(n, X(n));
+      } catch {
+      }
+  }, [n]);
+  return /* @__PURE__ */ k(
+    "div",
+    {
+      className: "media-actions visible",
+      style: {
+        position: "absolute",
+        top: 10,
+        right: 10,
+        zIndex: 10,
+        pointerEvents: "auto",
+        display: "flex",
+        gap: 4
+      },
+      onClick: (f) => f.stopPropagation(),
+      children: [
+        /* @__PURE__ */ o(ge, { t: r, src: n, setShown: qe, id: t }),
+        /* @__PURE__ */ o(
+          ce,
+          {
+            opened: a,
+            setOpened: u,
+            t: r,
+            editor: s,
+            nodeKey: e
+          }
+        ),
+        /* @__PURE__ */ o(
+          he,
+          {
+            opened: d,
+            onOpenChange: p,
+            t: r,
+            onDownload: () => void I(),
+            onDelete: m
+          }
+        )
+      ]
+    }
+  );
+}
+function Qe({ nodeKey: e, src: n, id: t }) {
+  const { t: r } = P(), [s] = z(), [a, { open: u, close: d }] = B(!1), [p, { open: m, close: I }] = B(!1), f = ae(
+    () => [
+      {
+        id: !t || t === "0" ? "" : t,
+        Url: n ?? "",
+        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()
+      }
+    ],
+    [n, t]
+  ), v = () => {
+    d(), m();
+  }, x = b(async () => {
+    if (d(), !!n)
+      try {
+        await q(n, X(n));
+      } catch {
+      }
+  }, [n, d]), y = b(() => {
+    d(), s.update(() => {
+      const l = L(e);
+      D(l) && l.remove();
+    });
+  }, [s, e, d]);
+  return /* @__PURE__ */ k(V, { children: [
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: "image-touch-actions",
+        style: {
+          position: "absolute",
+          top: 8,
+          right: 8,
+          zIndex: 10,
+          pointerEvents: "auto"
+        },
+        onClick: (l) => l.stopPropagation(),
+        children: /* @__PURE__ */ o(
+          G,
+          {
+            label: r("editor.toolbar.more"),
+            icon: Se,
+            iconColor: "var(--mantine-color-gray-text)",
+            "aria-label": r("editor.toolbar.more"),
+            onClick: u
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ o(
+      pe,
+      {
+        opened: p,
+        onOpenChange: (l) => l ? m() : I(),
+        attachments: f
+      }
+    ),
+    /* @__PURE__ */ o(
+      Ee,
+      {
+        opened: a,
+        onClose: d,
+        title: r("editor.image.mobileActions"),
+        children: /* @__PURE__ */ k(ye, { gap: 4, p: 0, children: [
+          /* @__PURE__ */ o(
+            H,
+            {
+              type: "button",
+              variant: "subtle",
+              color: "gray",
+              fullWidth: !0,
+              justify: "flex-start",
+              bg: "var(--editor-action-bg)",
+              onClick: v,
+              leftSection: /* @__PURE__ */ o(
+                O,
+                {
+                  icon: me,
+                  size: 16,
+                  color: "var(--mantine-color-dimmed)"
+                }
+              ),
+              children: r("editor.image.previewFullScreen")
+            }
+          ),
+          /* @__PURE__ */ o(
+            H,
+            {
+              type: "button",
+              variant: "subtle",
+              color: "gray",
+              fullWidth: !0,
+              justify: "flex-start",
+              bg: "var(--editor-action-bg)",
+              onClick: () => void x(),
+              leftSection: /* @__PURE__ */ o(
+                O,
+                {
+                  icon: le,
+                  size: 16,
+                  color: "var(--mantine-color-dimmed)"
+                }
+              ),
+              children: r("editor.gallery.download")
+            }
+          ),
+          /* @__PURE__ */ o(
+            H,
+            {
+              type: "button",
+              variant: "subtle",
+              color: "red",
+              fullWidth: !0,
+              justify: "flex-start",
+              bg: "var(--editor-action-bg)",
+              onClick: y,
+              leftSection: /* @__PURE__ */ o(
+                O,
+                {
+                  icon: de,
+                  size: 16,
+                  color: "var(--mantine-color-red-6)"
+                }
+              ),
+              children: r("editor.actions.delete")
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+const re = (e) => {
+  const {
+    width: n,
+    height: t,
+    isLoading: r,
+    isError: s,
+    src: a,
+    id: u,
+    altText: d,
+    imageRef: p,
+    maxWidth: m
+  } = e;
+  return /* @__PURE__ */ k(
+    "div",
+    {
+      className: "media-wrapper",
+      style: {
+        width: n,
+        height: t,
+        display: "inline-flex",
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ o(
+          De,
+          {
+            visible: r,
+            zIndex: 1e3,
+            overlayProps: { backgroundOpacity: 0.5 },
+            loaderProps: { size: 24, color: "black" }
+          }
+        ),
+        /* @__PURE__ */ o(
+          Ye,
+          {
+            className: null,
+            src: a,
+            altText: d,
+            imageRef: p,
+            width: "inherit",
+            height: "inherit",
+            maxWidth: m || "auto",
+            id: u
+          }
+        ),
+        ne && /* @__PURE__ */ o(Qe, { nodeKey: e.nodeKey, src: a, id: u }),
+        ie && /* @__PURE__ */ o(Je, { nodeKey: e.nodeKey, src: a, id: u }),
+        $e && !ne && !ie && /* @__PURE__ */ o(Xe, { nodeKey: e.nodeKey, src: a })
+      ]
+    }
+  );
+};
+function Ye({
+  altText: e,
+  className: n,
+  imageRef: t,
+  src: r,
+  width: s,
+  height: a,
+  maxWidth: u,
+  id: d
+}) {
+  const [p, m] = C(!1);
+  return /* @__PURE__ */ o(
+    "img",
+    {
+      className: `${n || void 0} ${p ? "" : "loading"}`,
+      src: r,
+      alt: e,
+      ref: t,
+      style: {
+        height: a,
+        maxWidth: u,
+        width: s
+      },
+      onLoad: () => {
+        r.includes("splash") ? setTimeout(() => {
+          m(!0);
+        }, 100) : m(!0);
+      },
+      draggable: "false",
+      "data-id": d
+    }
+  );
+}
+function It(e) {
+  const { disable: n } = se(ue);
+  return n && Te.isPlaceholderSrc(e.src) ? null : /* @__PURE__ */ o(Ze, { ...e });
+}
+function Ze({
+  src: e,
+  altText: n,
+  nodeKey: t,
+  width: r,
+  height: s,
+  maxWidth: a,
+  showCaption: u,
+  caption: d,
+  id: p,
+  create: m,
+  alignment: I,
+  imagePickerTab: f
+}) {
+  var K, ee;
+  const v = ve(null), [x, y] = C(!0), [l] = z(), [M, U] = C(!0), [w, j] = C({
+    width: 0,
+    height: 0
+  }), { start: J } = We(), [Ke, _] = C(0), {
+    fetchUploadMedia: S,
+    fetchDeleteMedia: Q,
+    maxFileSize: et,
+    imperativeHandleRef: E,
+    disable: fe
+  } = se(ue), T = $.has(e) && (((K = $.get(e)) == null ? void 0 : K.mediaNodeKeys.length) === 0 || ((ee = $.get(e)) == null ? void 0 : ee.mediaNodeKeys.length) === void 0 || e.trim() === ""), { t: W } = P(), [tt, we] = C(0);
+  A(() => l.registerDecoratorListener(() => {
+    we((i) => i + 1);
+  }), [T]), A(() => {
+    if (!e || e.startsWith("data:image/") || !e.trim()) {
+      y(!1);
+      return;
+    }
+    const i = new Image();
+    i.src = e, i.onload = () => y(!1), i.onerror = () => {
+      y(!1);
+    };
+  }, [e, T]);
+  const Ce = (i, h) => {
+    l.update(() => {
+      Ae(null);
+      const c = L(t);
+      D(c) && c.setWidthAndHeight(i, h);
+    });
+  }, { historyState: Y } = Pe(), {
+    settings: { showNestedEditorTreeView: Z }
+  } = ze();
+  function be(i) {
+    return i.endsWith(".svg") || i.includes("image/svg+xml");
+  }
+  function ke(i) {
+    return new Promise((h, c) => {
+      if (be(i)) {
+        h(0);
+        return;
+      }
+      const g = new Image();
+      g.src = i, g.onload = () => {
+        h(g.width);
+      }, g.onerror = () => {
+        c(new Error("Failed to load image"));
+      };
+    });
+  }
+  A(() => {
+    let i = r, h = s, c = 100;
+    (e.includes("unsplash") ? e.trim() : !T && e.trim() || e.includes("upload-src-editor")) && e !== "upload" && ke(e).then((g) => {
+      typeof i == "number" && i < c && g < c ? (U(!0), j({
+        width: i,
+        height: h
+      })) : g < c ? (U(!0), j({
+        width: "auto",
+        height: "auto"
+      })) : (j({
+        width: g,
+        height: g
+      }), U(!1));
+    }).catch((g) => {
+      console.warn("Ошибка при загрузке изображения:", g.message);
+    });
+  }, [e, T]), A(() => {
+    w.width && w.height && M && l.update(() => {
+      const i = L(t);
+      D(i) && i.setWidthAndHeight(w.width, w.height);
+    });
+  }, [w.width, w.height, M]);
+  const Ie = b(
+    (i) => Ue(l, t, i),
+    [l, t]
+  ), R = b(
+    (i, h) => {
+      y(!1), l.update(() => {
+        const c = L(t);
+        D(c) && (c.setSrc(i), c.setId(h));
+      });
+    },
+    [l, t]
+  ), F = b(
+    (i) => {
+      y(!0);
+      const h = J();
+      S && S(
+        i[0],
+        (c, g) => {
+          R(c, g), _(0);
+        },
+        (c) => {
+          c && Be({
+            message: W("editor.gallery.errorFile")
+          }), _(0), R(e.startsWith("blob:") ? "upload" : "", "");
+        },
+        h,
+        (c) => {
+          _(c);
+        }
+      );
+    },
+    [S, J, W, R, e]
+  );
+  return A(() => l.registerCommand(
+    je,
+    (i) => !e.startsWith("blob:") && e !== "upload" || i.targetNodeKey !== t ? !1 : (F(i.files), !0),
+    Me
+  ), [l, F, t, e]), !e || e === "upload" ? /* @__PURE__ */ o(Le, { "data-editor-image-picker-drop-root": !0, w: "100%", children: /* @__PURE__ */ o(
+    _e,
+    {
+      inline: !0,
+      nodeKey: t,
+      defaultTabValue: f,
+      onWriteTabToNode: Ie,
+      uploading: !1,
+      onUpload: (i) => {
+        !S || !i.length || F(i);
+      },
+      popoverProps: {
+        opened: !0,
+        position: "bottom",
+        zIndex: Re
+      },
+      onChange: (i) => {
+        l.update(() => {
+          const h = L(t);
+          D(h) && h.setSrc(i);
+        });
+      }
+    }
+  ) }) : M ? /* @__PURE__ */ o(
+    re,
+    {
+      width: w.width,
+      height: w.height,
+      isLoading: x,
+      isError: !1,
+      isIcon: M,
+      src: e,
+      id: p,
+      editor: l,
+      nodeKey: t,
+      fetchDeleteMedia: Q,
+      altText: n,
+      imageRef: v,
+      maxWidth: a,
+      showCaption: u,
+      caption: d,
+      isCollabActive: !1,
+      historyState: Y,
+      showNestedEditorTreeView: Z,
+      t: W
+    }
+  ) : /* @__PURE__ */ o(
+    Fe,
+    {
+      editor: l,
+      isIcon: M,
+      width: oe(r),
+      height: oe(s),
+      initialWidth: w.width || "",
+      initialHeight: w.height || "",
+      onResizeEnd: Ce,
+      alignment: I,
+      disable: fe,
+      onRegisterDecoratorEnter: (i) => {
+        E != null && E.current && (E.current.decoratorEnterAction = i);
+      },
+      onActivate: () => l.dispatchCommand(He, "show_menu"),
+      children: /* @__PURE__ */ o(
+        re,
+        {
+          width: "inherit",
+          height: "inherit",
+          isLoading: x,
+          isError: !1,
+          isIcon: M,
+          src: e,
+          id: p,
+          editor: l,
+          nodeKey: t,
+          fetchDeleteMedia: Q,
+          altText: n,
+          imageRef: v,
+          maxWidth: a,
+          showCaption: u,
+          caption: d,
+          isCollabActive: !1,
+          historyState: Y,
+          showNestedEditorTreeView: Z,
+          t: W
+        }
+      )
+    }
+  );
+}
+export {
+  It as default
+};