@layers-app/editor 2.0.3 → 2.1.2

package/dist/layers.n7_pucol.js

@@ -0,0 +1,559 @@
+import { jsx as l, jsxs as S, Fragment as le } from "react/jsx-runtime";
+import { useContext as ae, useMemo as ie, useState as B, useEffect as A, useRef as j, useCallback as F, Suspense as me, lazy as ge } from "react";
+import { useLexicalComposerContext as he } from "@lexical/react/LexicalComposerContext";
+import { useLexicalEditable as Ce } from "@lexical/react/useLexicalEditable";
+import { useLexicalNodeSelection as pe } from "@lexical/react/useLexicalNodeSelection";
+import { mergeRegister as xe } from "@lexical/utils";
+import { $setSelection as be, $getNodeByKey as V, CLICK_COMMAND as ve, COMMAND_PRIORITY_LOW as J, KEY_DELETE_COMMAND as Ee, KEY_BACKSPACE_COMMAND as we } from "lexical";
+import { C as se, R as ye, v as X, s as Z, A as K, K as ke, z as P, N as Te, f as ee, B as De, e as Me, H as te, t as Oe, a as ce, D as oe, l as Ne, p as _e, F as re, G as Se, J as Ae, L as Be } from "./layers.BJmB3Omq.js";
+import { useTranslation as Q } from "react-i18next";
+import { Modal as Le, Text as Re, Flex as ze, Button as q, Box as ne, Stack as We, useMantineColorScheme as je, Loader as Fe } from "@mantine/core";
+import { useDisclosure as Ie } from "@mantine/hooks";
+import "@lexical/mark";
+import "@lexical/code";
+import { BottomDrawerWithoutHeader as He } from "@layers-app/shared";
+const Ge = ({
+  isCloseModal: n,
+  setCloseModalOpen: a,
+  confirmClose: C
+}) => {
+  const { t: p } = Q();
+  return /* @__PURE__ */ l(
+    Le,
+    {
+      opened: n,
+      onClose: () => {
+        a(!1);
+      },
+      centered: !0,
+      title: p("editor.unsavedChanges.title"),
+      closeOnClickOutside: !0,
+      closeOnEscape: !0,
+      size: "500",
+      zIndex: 999,
+      children: /* @__PURE__ */ S("div", { children: [
+        /* @__PURE__ */ l(Re, { mb: "md", children: p("editor.unsavedChanges.message") }),
+        /* @__PURE__ */ S(ze, { justify: "flex-end", gap: "sm", children: [
+          /* @__PURE__ */ l(
+            q,
+            {
+              variant: "default",
+              onClick: () => {
+                a(!1);
+              },
+              fullWidth: !0,
+              children: p("editor.unsavedChanges.cancel")
+            }
+          ),
+          /* @__PURE__ */ l(q, { color: "red", onClick: C, fullWidth: !0, children: p("editor.unsavedChanges.closeWithoutSaving") })
+        ] })
+      ] })
+    }
+  );
+};
+function Ve({
+  imageContainerRef: n,
+  editor: a,
+  rootClassName: C = null,
+  width: p = "inherit",
+  height: u = "inherit",
+  nodeKey: s,
+  alignment: I,
+  setModalOpen: L,
+  previewSVG: r,
+  isModalOpen: m
+}) {
+  const { disable: g, imperativeHandleRef: v } = ae(se), H = ie(() => r ?? "", [r]), [T, h] = B(!1), [
+    G,
+    { open: E, close: D }
+  ] = Ie(!1), { t: b } = Q();
+  A(() => {
+    m && h(!1);
+  }, [m]);
+  const M = (e, x) => {
+    a.update(() => {
+      be(null);
+      const i = V(s);
+      return ce(i) && i.setWidthAndHeight(e, x), !0;
+    });
+  }, w = () => {
+    oe(a, s);
+  }, R = () => {
+    D(), L(!0);
+  }, O = () => {
+    D(), oe(a, s);
+  };
+  return /* @__PURE__ */ S(
+    ye,
+    {
+      editor: a,
+      isIcon: !1,
+      isEmbed: !0,
+      width: Z(p),
+      height: Z(u),
+      onResizeEnd: M,
+      alignment: I,
+      disable: g,
+      onRegisterDecoratorEnter: (e) => {
+        v != null && v.current && (v.current.decoratorEnterAction = e);
+      },
+      onActivate: () => a.dispatchCommand(Oe, "show_menu"),
+      children: [
+        /* @__PURE__ */ S(ne, { className: "media-wrapper excaildraw", children: [
+          /* @__PURE__ */ l(
+            "div",
+            {
+              className: `media-actions${X || !De ? " visible" : ""}`,
+              children: X ? /* @__PURE__ */ l(
+                K,
+                {
+                  "aria-label": b("editor.toolbar.more"),
+                  label: b("editor.toolbar.more"),
+                  flexBorder: !0,
+                  onClick: E,
+                  icon: ke,
+                  iconColor: "var(--mantine-color-gray-text)"
+                }
+              ) : /* @__PURE__ */ S(le, { children: [
+                /* @__PURE__ */ l(
+                  K,
+                  {
+                    "aria-label": "Settings",
+                    label: b("editor.link.edit"),
+                    flexBorder: !0,
+                    onClick: () => {
+                      L(!0);
+                    },
+                    icon: P,
+                    iconColor: "var(--mantine-color-gray-text)"
+                  }
+                ),
+                /* @__PURE__ */ l(
+                  Te,
+                  {
+                    opened: T,
+                    setOpened: h,
+                    t: b,
+                    editor: a,
+                    nodeKey: s,
+                    flexBorder: !0
+                  }
+                ),
+                /* @__PURE__ */ l(
+                  K,
+                  {
+                    "aria-label": "Delete",
+                    label: b("editor.actions.delete"),
+                    flexBorder: !0,
+                    onClick: w,
+                    icon: ee,
+                    iconColor: "var(--mantine-color-red-outline)"
+                  }
+                )
+              ] })
+            }
+          ),
+          /* @__PURE__ */ l(
+            ne,
+            {
+              w: "100%",
+              ref: (e) => {
+                e && n && (n.current = e);
+              },
+              className: C ?? "",
+              dangerouslySetInnerHTML: { __html: H }
+            }
+          )
+        ] }),
+        X && /* @__PURE__ */ l(
+          Me,
+          {
+            opened: G,
+            onClose: D,
+            title: b("editor.image.mobileActions"),
+            children: /* @__PURE__ */ S(We, { gap: 4, p: 0, children: [
+              /* @__PURE__ */ l(
+                q,
+                {
+                  type: "button",
+                  variant: "subtle",
+                  color: "gray",
+                  fullWidth: !0,
+                  justify: "flex-start",
+                  bg: "light-dark(var(--mantine-color-gray-0), var(--mantine-color-gray-outline-hover))",
+                  onClick: R,
+                  leftSection: /* @__PURE__ */ l(
+                    te,
+                    {
+                      icon: P,
+                      size: 16,
+                      color: "var(--mantine-color-dimmed)"
+                    }
+                  ),
+                  children: b("editor.link.edit")
+                }
+              ),
+              /* @__PURE__ */ l(
+                q,
+                {
+                  type: "button",
+                  variant: "subtle",
+                  color: "red",
+                  fullWidth: !0,
+                  justify: "flex-start",
+                  bg: "light-dark(var(--mantine-color-gray-0), var(--mantine-color-gray-outline-hover))",
+                  onClick: O,
+                  leftSection: /* @__PURE__ */ l(
+                    te,
+                    {
+                      icon: ee,
+                      size: 16,
+                      color: "var(--mantine-color-red-6)"
+                    }
+                  ),
+                  children: b("editor.actions.delete")
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+let U = null;
+const $e = /* @__PURE__ */ ge(async () => {
+  var a;
+  const n = await import("./layers._V8aXe_7.js").then((C) => C.K);
+  return !U && n && (U = n.exportToSvg || ((a = n.default) == null ? void 0 : a.exportToSvg) || n.default), { default: n.Excalidraw };
+}), qe = () => {
+  const [n, a] = B(
+    null
+  ), C = F(
+    (p) => a(p),
+    []
+  );
+  return [n, C];
+};
+function Ue({
+  onSave: n,
+  initialElements: a,
+  initialAppState: C,
+  initialFiles: p,
+  isShown: u = !1,
+  onDelete: s,
+  onClose: I,
+  isEdited: L
+}) {
+  const [r, m] = qe(), { i18n: g, t: v } = Q(), { colorScheme: H } = je(), T = j(!1), [h, G] = B(a), [E, D] = B(p), [b, M] = B(u);
+  A(() => {
+    u && M(!0);
+  }, [u]), A(() => {
+    !u || T.current || (T.current = !0, Promise.resolve({           }));
+  }, [u]), A(() => {
+    u && setTimeout(() => {
+      var e, x;
+      (e = r == null ? void 0 : r.refresh) == null || e.call(r), (x = r == null ? void 0 : r.scrollToContent) == null || x.call(r);
+    }, 500);
+  }, [u, r]), A(() => {
+    if (!u)
+      return;
+    const e = (o, c) => {
+      const t = v(o);
+      return t.startsWith("editor.menu") ? c : t;
+    }, x = e(
+      "editor.menu.excalidraw.tools.frameTool",
+      g.language === "ru" ? "Инструмент рамки" : g.language === "es" ? "Herramienta de marco" : "Frame tool"
+    ), i = e(
+      "editor.menu.excalidraw.tools.webEmbed",
+      g.language === "ru" ? "Веб-встраивание" : g.language === "es" ? "Incrustación web" : "Web Embed"
+    ), d = e(
+      "editor.menu.excalidraw.tools.generate",
+      g.language === "ru" ? "Генерировать" : g.language === "es" ? "Generar" : "Generate"
+    ), z = {
+      "Frame tool": x,
+      "Web Embed": i,
+      "Web embeded": i,
+      Generate: d
+    }, W = () => {
+      const o = document.querySelector(".App-toolbar__extra-tools-dropdown");
+      if (!o)
+        return;
+      const c = document.createTreeWalker(
+        o,
+        NodeFilter.SHOW_TEXT,
+        null
+      );
+      let t;
+      for (; t = c.nextNode(); )
+        if (t.nodeType === Node.TEXT_NODE && t.textContent) {
+          const f = t.textContent.trim();
+          for (const [k, _] of Object.entries(z))
+            if (f === k && _ && !f.includes(_)) {
+              t.textContent = t.textContent.replace(k, _);
+              break;
+            }
+        }
+    }, N = () => {
+      setTimeout(() => {
+        W();
+      }, 0);
+    }, y = setTimeout(() => {
+      const o = document.querySelector(
+        ".excalidraw-container"
+      );
+      if (o) {
+        const c = o.querySelector(
+          ".App-toolbar__extra-tools-trigger"
+        );
+        c && c.addEventListener("click", N);
+      }
+    }, 300);
+    return () => {
+      clearTimeout(y);
+      const o = document.querySelector(
+        ".excalidraw-container"
+      );
+      if (o) {
+        const c = o.querySelector(
+          ".App-toolbar__extra-tools-trigger"
+        );
+        c && c.removeEventListener("click", N);
+      }
+    };
+  }, [u, g.language, v]);
+  const w = F(async () => {
+    var W, N, y;
+    let e = U;
+    if (!e || typeof e != "function") {
+      const o = await import("./layers._V8aXe_7.js").then((c) => c.K);
+      e = o.exportToSvg || ((W = o.default) == null ? void 0 : W.exportToSvg) || o.default, e && typeof e == "function" && (U = e);
+    }
+    if (!e || typeof e != "function") {
+      const o = await import("./layers._V8aXe_7.js").then((t) => t.K), c = o ? Object.keys(o) : [];
+      throw console.error("Excalidraw module structure:", {
+        keys: c,
+        hasExportToSvg: o && "exportToSvg" in o,
+        hasDefault: o && "default" in o,
+        moduleType: typeof o,
+        module: o
+      }), new Error(
+        `exportToSvg is not available from @excalidraw/excalidraw. Module keys: ${c.join(", ")}. Please ensure @excalidraw/excalidraw is properly installed.`
+      );
+    }
+    const x = ((N = r == null ? void 0 : r.getAppState) == null ? void 0 : N.call(r)) ?? C, i = await e({
+      appState: x,
+      elements: h,
+      files: E
+    }), d = (y = i == null ? void 0 : i.firstElementChild) == null ? void 0 : y.firstElementChild, z = i.getAttribute("viewBox");
+    if (z != null) {
+      const o = z.split(" ");
+      i.setAttribute("width", o[2]), i.setAttribute("height", o[3]);
+    }
+    return d && d.tagName === "style" && d.remove(), i.setAttribute("width", "100%"), i.setAttribute("height", "100%"), i.setAttribute("display", "block"), i.classList.add("excalidraw-svg"), i.outerHTML;
+  }, [h, E, r, C]), R = () => {
+    if (h && h.filter((e) => !e.isDeleted).length > 0) {
+      const e = r == null ? void 0 : r.getAppState(), x = {
+        exportBackground: e == null ? void 0 : e.exportBackground,
+        exportScale: e == null ? void 0 : e.exportScale,
+        exportWithDarkMode: (e == null ? void 0 : e.theme) === "dark",
+        isBindingEnabled: e == null ? void 0 : e.isBindingEnabled,
+        isLoading: e == null ? void 0 : e.isLoading,
+        name: e == null ? void 0 : e.name,
+        theme: e == null ? void 0 : e.theme,
+        viewBackgroundColor: e == null ? void 0 : e.viewBackgroundColor,
+        viewModeEnabled: e == null ? void 0 : e.viewModeEnabled,
+        zenModeEnabled: e == null ? void 0 : e.zenModeEnabled,
+        zoom: e == null ? void 0 : e.zoom
+      };
+      (async () => {
+        const i = await w();
+        n(h, x, E, i);
+      })();
+    } else
+      s();
+  }, O = (e, x, i) => {
+    (e == null ? void 0 : e.length) !== (a == null ? void 0 : a.length) && (L.current = !0), G(e), D(i);
+  };
+  return /* @__PURE__ */ l(
+    He,
+    {
+      opened: u,
+      onClose: I,
+      onSave: R,
+      className: "excaildraw-modal",
+      closeOnEscape: !1,
+      children: b && /* @__PURE__ */ l(
+        me,
+        {
+          fallback: /* @__PURE__ */ l(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                height: "100%",
+                minHeight: "400px"
+              },
+              children: /* @__PURE__ */ l(Fe, { size: "sm" })
+            }
+          ),
+          children: /* @__PURE__ */ l(
+            $e,
+            {
+              langCode: Ne[g.language],
+              theme: H,
+              onChange: O,
+              excalidrawAPI: m,
+              initialData: {
+                appState: { ...C || { isLoading: !1 } },
+                elements: a,
+                files: p,
+                scrollToContent: !0
+              }
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function it({
+  nodeKey: n,
+  data: a,
+  width: C,
+  height: p,
+  alignment: u
+}) {
+  var c;
+  const [s] = he(), { fetchUploadMedia: I, fetchDeleteMedia: L } = ae(se), r = Ce(), m = ie(() => _e(a), [a]), g = j(
+    re(m.files ?? {})
+  ), v = j(
+    Object.keys(m.files ?? {})
+  );
+  A(() => {
+    const t = re(m.files ?? {});
+    for (const f of Object.keys(t))
+      g.current[f] = t[f];
+  }, [m.files]);
+  const H = ((c = m == null ? void 0 : m.elements) == null ? void 0 : c.length) === 0 && !m.previewSVG, [T, h] = B(
+    H && s.isEditable()
+  ), [G, E] = B(!1), D = j(null), b = j(null), M = j(null), [w, R, O] = pe(n), e = F(
+    (t) => (w && (t.preventDefault(), s.update(() => {
+      const f = V(n);
+      f && f.remove();
+    })), !1),
+    [s, w, n]
+  );
+  A(() => {
+    if (!r) {
+      w && O();
+      return;
+    }
+    return xe(
+      s.registerCommand(
+        ve,
+        (t) => {
+          const f = b.current, k = t.target;
+          return f !== null && f.contains(k) ? (t.shiftKey || O(), R(!w), t.detail > 1 && h(!0), !0) : !1;
+        },
+        J
+      ),
+      s.registerCommand(
+        Ee,
+        e,
+        J
+      ),
+      s.registerCommand(
+        we,
+        e,
+        J
+      )
+    );
+  }, [O, s, w, e, R, r]);
+  const x = F(() => (h(!1), s.update(() => {
+    const t = V(n);
+    t && t.remove();
+  })), [s, n]), i = async (t, f, k, _) => {
+    const { files: $, urlByDataUrl: de, attachmentIdByFileId: ue } = await Se(k, I, g.current);
+    g.current = Ae(
+      v.current,
+      $,
+      ue,
+      L
+    ), v.current = Object.keys($);
+    const fe = Be(_, de);
+    s.update(() => {
+      const Y = V(n);
+      ce(Y) && (t && t.length > 0 || Object.keys($).length > 0 ? Y.setData(
+        JSON.stringify({
+          appState: f,
+          elements: t,
+          files: $,
+          previewSVG: fe
+        })
+      ) : Y.remove());
+    });
+  }, { elements: d = [], files: z = {}, appState: W = {}, previewSVG: N } = m, y = F(() => {
+    h(!1), E(!1), M.current = !1, (d == null ? void 0 : d.length) === 0 && s.update(() => {
+      const t = V(n);
+      t && t.remove();
+    });
+  }, [s, n, d == null ? void 0 : d.length]), o = F(() => {
+    M.current ? E(!0) : y();
+  }, [y]);
+  return /* @__PURE__ */ S(le, { children: [
+    /* @__PURE__ */ l(
+      Ge,
+      {
+        isCloseModal: G,
+        confirmClose: y,
+        setCloseModalOpen: E
+      }
+    ),
+    /* @__PURE__ */ l(
+      Ue,
+      {
+        initialElements: d,
+        isEdited: M,
+        initialFiles: z,
+        initialAppState: W,
+        isShown: T,
+        onDelete: x,
+        onClose: o,
+        onSave: async (t, f, k, _) => {
+          await i(t, f, k, _), h(!1);
+        },
+        closeOnClickOutside: !1
+      }
+    ),
+    (d == null ? void 0 : d.length) && /* @__PURE__ */ l(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: u
+        },
+        children: /* @__PURE__ */ l(
+          Ve,
+          {
+            imageContainerRef: D,
+            className: "image",
+            width: C,
+            height: p,
+            editor: s,
+            nodeKey: n,
+            alignment: u,
+            setModalOpen: h,
+            previewSVG: N,
+            isModalOpen: T
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  it as default
+};

package/dist/{layers.N6_5lF1j.js → layers.pLv3k2Ct.js}

@@ -1,7 +1,7 @@
-import { l as Nr, a2 as yv, a3 as mv, a4 as bv, g as ao, A as wv, Y as Ev, P as Cn, i as Dn, d as xv, T as Tv } from "./layers.Dxg3oCoU.js";
-import { t as Cv } from "./layers.ZIr-W1fJ.js";
-import { c as Dv } from "./layers.Dv_7Hild.js";
-import "./layers.BBKyXJ19.js";
+import { l as Nr, a2 as yv, a3 as mv, a4 as bv, g as ao, A as wv, Y as Ev, P as Cn, i as Dn, d as xv, T as Tv } from "./layers.BqQb9N_9.js";
+import { x as Cv } from "./layers.BJmB3Omq.js";
+import { c as Dv } from "./layers.D0eBTcYq.js";
+import "./layers._V8aXe_7.js";
 import "lodash-es/memoize.js";
 import "lodash-es/merge.js";
 import "lodash-es/isEmpty.js";

package/dist/{layers.Ch5N_NP0.js → layers.sdU_7oll.js}

@@ -1,10 +1,10 @@
-import { J as Sn } from "./layers.BBKyXJ19.js";
-import { ab as Qe, ac as _n, ad as je, ae as $e, af as Je, ag as ne, ah as Yn, a as Un, s as Fn, n as En, o as Ln, b as An, c as Wn, g as Dt, d as Rt, e as In, ai as nt, l as $t, j as On, q as Hn, u as Nn } from "./layers.Dxg3oCoU.js";
-import { t as Te } from "./layers.ZIr-W1fJ.js";
+import { J as Sn } from "./layers._V8aXe_7.js";
+import { ab as Qe, ac as _n, ad as je, ae as $e, af as Je, ag as ne, ah as Yn, a as Un, s as Fn, n as En, o as Ln, b as An, c as Wn, g as Dt, d as Rt, e as In, ai as nt, l as $t, j as On, q as Hn, u as Nn } from "./layers.BqQb9N_9.js";
+import { x as Te } from "./layers.BJmB3Omq.js";
 import "lodash-es/memoize.js";
 import "lodash-es/merge.js";
 import "lodash-es/isEmpty.js";
-import { b as Vn, t as Fe, c as Pn, a as zn, l as Rn } from "./layers.Dw33lVYc.js";
+import { b as Vn, t as Fe, c as Pn, a as zn, l as Rn } from "./layers.DSxPKJQz.js";
 import { i as qn } from "./layers.DjUOC4st.js";
 function Bn(t, e) {
   let n;