@layers-app/editor 0.7.94 → 1.0.0

package/dist/layers.CMv-MGOo.js

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