@layers-app/editor 0.5.6-optimization → 0.5.6

package/dist/layers.qFWUlMDP.js

@@ -0,0 +1,282 @@
+import { jsx as i, jsxs as E, Fragment as G } from "react/jsx-runtime";
+import { useState as v, useEffect as _, useRef as T, useCallback as z, useMemo as P } from "react";
+import { R as Q, p as B, A as V, e as X, w as Y, x as w, f as J, h as Z, o as K, i as ee, j as te, k as ie, l as se, z as D, O as ne, s as ae } from "./layers.CPJv1Tc9.js";
+import { useTranslation as $ } from "react-i18next";
+import { Modal as le, Text as re, Flex as oe, Button as H, useMantineTheme as ce, Box as F, Tooltip as W, ActionIcon as L } from "@mantine/core";
+import { M as de, H as ue } from "./layers.DqSkTf9R.js";
+import { IconEdit as fe } from "@tabler/icons-react";
+const me = ({
+  isCloseModal: e,
+  setCloseModalOpen: n,
+  confirmClose: o
+}) => {
+  const { t: a } = $();
+  return /* @__PURE__ */ i(
+    le,
+    {
+      opened: e,
+      onClose: () => {
+        n(!1);
+      },
+      centered: !0,
+      title: a("editor.unsavedChanges.title"),
+      closeOnClickOutside: !0,
+      closeOnEscape: !0,
+      size: "500",
+      zIndex: 999,
+      children: /* @__PURE__ */ E("div", { children: [
+        /* @__PURE__ */ i(re, { mb: "md", children: a("editor.unsavedChanges.message") }),
+        /* @__PURE__ */ E(oe, { justify: "flex-end", gap: "sm", children: [
+          /* @__PURE__ */ i(
+            H,
+            {
+              variant: "default",
+              onClick: () => {
+                n(!1);
+              },
+              fullWidth: !0,
+              children: a("editor.unsavedChanges.cancel")
+            }
+          ),
+          /* @__PURE__ */ i(H, { color: "red", onClick: o, fullWidth: !0, children: a("editor.unsavedChanges.closeWithoutSaving") })
+        ] })
+      ] })
+    }
+  );
+}, he = (e) => {
+  var a;
+  const n = (a = e == null ? void 0 : e.firstElementChild) == null ? void 0 : a.firstElementChild, o = e.getAttribute("viewBox");
+  if (o != null) {
+    const r = o.split(" ");
+    e.setAttribute("width", r[2]), e.setAttribute("height", r[3]);
+  }
+  n && n.tagName === "style" && n.remove();
+};
+function pe({
+  elements: e,
+  files: n,
+  imageContainerRef: o,
+  appState: a,
+  editor: r,
+  rootClassName: s = null,
+  width: S = "inherit",
+  height: M = "inherit",
+  nodeKey: c,
+  alignment: N,
+  setModalOpen: p
+}) {
+  const [g, k] = v(null), [C, u] = v(!1);
+  ce();
+  const { t: m } = $();
+  _(() => {
+    (async () => {
+      const l = await de({
+        appState: a,
+        elements: e,
+        files: n
+      });
+      he(l), l.setAttribute("width", "100%"), l.setAttribute("height", "100%"), l.setAttribute("display", "block"), l.classList.add("excalidraw-svg"), k(l);
+    })();
+  }, [e, n, a]);
+  const x = (f, l) => {
+    r.update(() => {
+      Y(null);
+      const A = w(c);
+      return J(A) && A.setWidthAndHeight(f, l), !0;
+    });
+  }, O = (f) => {
+    Z(r, c);
+  };
+  return /* @__PURE__ */ i(
+    Q,
+    {
+      editor: r,
+      isIcon: !1,
+      isEmbed: !0,
+      width: B(S),
+      height: B(M),
+      onResizeEnd: x,
+      alignment: N,
+      children: /* @__PURE__ */ E(F, { className: "media-wrapper excaildraw", children: [
+        /* @__PURE__ */ E("div", { className: "media-actions", children: [
+          /* @__PURE__ */ i(W, { label: m("editor.link.edit"), children: /* @__PURE__ */ i(
+            L,
+            {
+              color: "gray",
+              "aria-label": "Settings",
+              className: "media-action",
+              variant: "default",
+              size: 24,
+              onClick: () => {
+                p(!0);
+              },
+              children: /* @__PURE__ */ i(fe, { size: 14 })
+            }
+          ) }),
+          /* @__PURE__ */ i(
+            V,
+            {
+              opened: C,
+              setOpened: u,
+              t: m,
+              editor: r,
+              nodeKey: c
+            }
+          ),
+          /* @__PURE__ */ i(W, { label: m("editor.actions.delete"), children: /* @__PURE__ */ i(
+            L,
+            {
+              color: "gray",
+              "aria-label": "Settings",
+              className: "media-action",
+              variant: "default",
+              size: 24,
+              onClick: O,
+              children: /* @__PURE__ */ i(X, { name: "trash", size: "14" })
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ i(
+          F,
+          {
+            w: "100%",
+            ref: (f) => {
+              f && o && (o.current = f);
+            },
+            className: s ?? "",
+            dangerouslySetInnerHTML: { __html: (g == null ? void 0 : g.outerHTML) ?? "" }
+          }
+        )
+      ] })
+    }
+  );
+}
+function Se({
+  nodeKey: e,
+  data: n,
+  width: o,
+  height: a,
+  alignment: r
+}) {
+  const [s] = K(), S = ee(), [M, c] = v(
+    n === "[]" && s.isEditable()
+  ), [N, p] = v(!1), g = T(null), k = T(null), C = T(null), [u, m, x] = te(e), [O, f] = v(!1), l = z(
+    (t) => (u && (t.preventDefault(), s.update(() => {
+      const d = w(e);
+      d && d.remove();
+    })), !1),
+    [s, u, e]
+  );
+  _(() => {
+    if (!S) {
+      u && x();
+      return;
+    }
+    return ie(
+      s.registerCommand(
+        ae,
+        (t) => {
+          const d = k.current, h = t.target;
+          return O ? !0 : d !== null && d.contains(h) ? (t.shiftKey || x(), m(!u), t.detail > 1 && c(!0), !0) : !1;
+        },
+        D
+      ),
+      s.registerCommand(
+        ne,
+        l,
+        D
+      ),
+      s.registerCommand(
+        se,
+        l,
+        D
+      )
+    );
+  }, [
+    x,
+    s,
+    u,
+    O,
+    l,
+    m,
+    S
+  ]);
+  const A = z(() => (c(!1), s.update(() => {
+    const t = w(e);
+    t && t.remove();
+  })), [s, e]), U = (t, d, h) => s.update(() => {
+    const I = w(e);
+    J(I) && (t && t.length > 0 || Object.keys(h).length > 0 ? I.setData(
+      JSON.stringify({
+        appState: d,
+        elements: t,
+        files: h
+      })
+    ) : I.remove());
+  }), {
+    elements: b = [],
+    files: R = {},
+    appState: j = {}
+  } = P(() => JSON.parse(n), [n]), y = z(() => {
+    c(!1), p(!1), C.current = !1, b.length === 0 && s.update(() => {
+      const t = w(e);
+      t && t.remove();
+    });
+  }, [s, e, b.length]), q = z(() => {
+    C.current ? p(!0) : y();
+  }, []);
+  return /* @__PURE__ */ E(G, { children: [
+    /* @__PURE__ */ i(
+      me,
+      {
+        isCloseModal: N,
+        confirmClose: y,
+        setCloseModalOpen: p
+      }
+    ),
+    /* @__PURE__ */ i(
+      ue,
+      {
+        initialElements: b,
+        isEdited: C,
+        initialFiles: R,
+        initialAppState: j,
+        isShown: M,
+        onDelete: A,
+        onClose: q,
+        onSave: (t, d, h) => {
+          U(t, d, h), c(!1);
+        },
+        closeOnClickOutside: !1
+      }
+    ),
+    b.length > 0 && /* @__PURE__ */ i(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: r
+        },
+        children: /* @__PURE__ */ i(
+          pe,
+          {
+            imageContainerRef: g,
+            className: "image",
+            elements: b,
+            files: R,
+            appState: j,
+            width: o,
+            height: a,
+            editor: s,
+            nodeKey: e,
+            alignment: r,
+            setModalOpen: c
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  Se as default
+};