@layers-app/shared 0.0.24 → 0.0.26

package/dist/layers.Cv0RBArs-D32HURxV.js

@@ -0,0 +1,343 @@
+import { jsxs as g, Fragment as A, jsx as n } from "react/jsx-runtime";
+import { useState as I, useRef as T, useCallback as S, useEffect as K, Suspense as F, useContext as U, useMemo as W } from "react";
+import { f as B, b as q, p as G, d as V, T as D, M, t as Y, j as P, L as z, N as H, h as _, c as J, g as Q, q as X, G as Z, V as ee, i as te, A as ae, o as ne, l as le, m as re, r as ie, s as j, Y as oe, e as se } from "./index-Vul891jq.js";
+import { TextInput as ce, Button as de } from "@mantine/core";
+function ue(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+var pe = ue(function(e) {
+  const t = new URLSearchParams();
+  t.append("code", e);
+  for (let a = 1; a < arguments.length; a++) t.append("v", arguments[a]);
+  throw Error(`Minified Lexical error #${e}; visit https://lexical.dev/docs/error?${t} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`);
+});
+function R(e) {
+  const t = e.transform();
+  return t !== null ? /* @__PURE__ */ new Set([t]) : /* @__PURE__ */ new Set();
+}
+function he({ initialEditor: e, children: t, initialNodes: a, initialTheme: r, skipCollabChecks: d }) {
+  const s = T(!1), i = U(j);
+  i == null && pe(9);
+  const [h, { getTheme: w }] = i, N = W(() => {
+    const o = r || w() || void 0, E = oe(i, o);
+    if (o !== void 0 && (e._config.theme = o), e._parentEditor = h, a) for (let l of a) {
+      let x = null, m = null;
+      if (typeof l != "function") {
+        const C = l;
+        l = C.replace, x = C.with, m = C.withKlass || null;
+      }
+      const y = e._nodes.get(l.getType());
+      e._nodes.set(l.getType(), { exportDOM: y ? y.exportDOM : void 0, klass: l, replace: x, replaceWithKlass: m, transforms: R(l) });
+    }
+    else {
+      const l = e._nodes = new Map(h._nodes);
+      for (const [x, m] of l) e._nodes.set(x, { exportDOM: m.exportDOM, klass: m.klass, replace: m.replace, replaceWithKlass: m.replaceWithKlass, transforms: R(m.klass) });
+    }
+    return e._config.namespace = h._config.namespace, e._editable = h._editable, [e, E];
+  }, []), { isCollabActive: v, yjsDocMap: b } = se(), c = d || s.current || b.has(e.getKey());
+  return K(() => {
+    c && (s.current = !0);
+  }, [c]), K(() => h.registerEditableListener((o) => {
+    e.setEditable(o);
+  }), [e, h]), n(j.Provider, { value: N, children: !v || c ? t : null });
+}
+function me({
+  "data-test-id": e,
+  children: t,
+  className: a,
+  onClick: r,
+  disabled: d,
+  small: s,
+  title: i
+}) {
+  return /* @__PURE__ */ n(de, { onClick: r, disabled: d, variant: "filled", children: t });
+}
+function fe({
+  children: e,
+  className: t
+}) {
+  return /* @__PURE__ */ n("div", { className: t || "Placeholder__root", children: e });
+}
+function ge({
+  children: e,
+  label: t,
+  className: a,
+  ...r
+}) {
+  return /* @__PURE__ */ g("div", { className: "Input__wrapper", children: [
+    /* @__PURE__ */ n("label", { style: { marginTop: "-1em" }, className: "Input__label", children: t }),
+    /* @__PURE__ */ n("select", { ...r, className: a || "select", children: e })
+  ] });
+}
+function ve({
+  label: e,
+  value: t,
+  onChange: a,
+  placeholder: r = "",
+  "data-test-id": d,
+  type: s = "text"
+}) {
+  return /* @__PURE__ */ n(
+    ce,
+    {
+      type: s,
+      placeholder: r,
+      value: t,
+      onChange: (i) => {
+        a(i.target.value);
+      },
+      label: e,
+      "data-test-id": d,
+      mb: 10
+    }
+  );
+}
+const $ = /* @__PURE__ */ new Set();
+function be(e) {
+  if (!$.has(e))
+    throw new Promise((t) => {
+      const a = new Image();
+      a.src = e, a.onload = () => {
+        $.add(e), t(null);
+      };
+    });
+}
+function Ce({
+  altText: e,
+  className: t,
+  imageRef: a,
+  src: r,
+  width: d,
+  height: s,
+  position: i
+}) {
+  return be(r), /* @__PURE__ */ n(
+    "img",
+    {
+      className: t || void 0,
+      src: r,
+      alt: e,
+      ref: a,
+      "data-position": i,
+      style: {
+        display: "block",
+        height: s,
+        width: d
+      },
+      draggable: "false"
+    }
+  );
+}
+function _e({
+  activeEditor: e,
+  nodeKey: t,
+  onClose: a
+}) {
+  const r = e.getEditorState().read(
+    () => B(t)
+  ), [d, s] = I(r.getAltText()), [i, h] = I(r.getShowCaption()), [w, N] = I(r.getPosition()), v = (o) => {
+    h(o.target.checked);
+  }, b = (o) => {
+    N(o.target.value);
+  }, c = () => {
+    const o = { altText: d, position: w, showCaption: i };
+    r && e.update(() => {
+      r.update(o);
+    }), a();
+  };
+  return /* @__PURE__ */ g(A, { children: [
+    /* @__PURE__ */ n("div", { style: { marginBottom: "1em" }, children: /* @__PURE__ */ n(
+      ve,
+      {
+        label: "Alt-текст",
+        placeholder: "Альтернативный текст",
+        onChange: s,
+        value: d,
+        "data-test-id": "image-modal-alt-text-input"
+      }
+    ) }),
+    /* @__PURE__ */ g(
+      ge,
+      {
+        style: { marginBottom: "1em", width: "208px" },
+        value: w,
+        label: "Position",
+        name: "position",
+        id: "position-select",
+        onChange: b,
+        children: [
+          /* @__PURE__ */ n("option", { value: "left", children: "Left" }),
+          /* @__PURE__ */ n("option", { value: "right", children: "Right" }),
+          /* @__PURE__ */ n("option", { value: "full", children: "Full Width" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ g("div", { className: "Input__wrapper", children: [
+      /* @__PURE__ */ n(
+        "input",
+        {
+          id: "caption",
+          type: "checkbox",
+          checked: i,
+          onChange: v
+        }
+      ),
+      /* @__PURE__ */ n("label", { htmlFor: "caption", children: "Show Caption" })
+    ] }),
+    /* @__PURE__ */ n(
+      me,
+      {
+        "data-test-id": "image-modal-file-upload-btn",
+        onClick: () => c(),
+        children: "Применить"
+      }
+    )
+  ] });
+}
+function Ee({
+  src: e,
+  altText: t,
+  nodeKey: a,
+  width: r,
+  height: d,
+  showCaption: s,
+  caption: i,
+  position: h
+}) {
+  const [w, N] = q(), v = T(null), b = T(null), [c, o, E] = G(a), [l] = V(), [x, m] = I(null), y = T(null), C = S(
+    (u) => {
+      if (c && D(M())) {
+        u.preventDefault();
+        const f = B(a);
+        Y(f) && f.remove();
+      }
+      return !1;
+    },
+    [c, a]
+  ), L = S(
+    (u) => {
+      const f = M(), p = b.current;
+      if (c && D(f) && f.getNodes().length === 1) {
+        if (s)
+          return P(null), u.preventDefault(), i.focus(), !0;
+        if (p !== null && p !== document.activeElement)
+          return u.preventDefault(), p.focus(), !0;
+      }
+      return !1;
+    },
+    [i, c, s]
+  ), O = S(
+    (u) => y.current === i || b.current === u.target ? (P(null), l.update(() => {
+      o(!0);
+      const f = l.getRootElement();
+      f !== null && f.focus();
+    }), !0) : !1,
+    [i, l, o]
+  );
+  return K(() => {
+    let u = !0;
+    const f = z(
+      l.registerUpdateListener(({ editorState: p }) => {
+        u && m(p.read(() => M()));
+      }),
+      l.registerCommand(
+        te,
+        (p, k) => (y.current = k, !1),
+        _
+      ),
+      l.registerCommand(
+        ee,
+        (p) => {
+          const k = p;
+          return k.target === v.current ? (k.shiftKey ? o(!c) : (E(), o(!0)), !0) : !1;
+        },
+        _
+      ),
+      l.registerCommand(
+        Z,
+        (p) => p.target === v.current ? (p.preventDefault(), !0) : !1,
+        _
+      ),
+      l.registerCommand(
+        X,
+        C,
+        _
+      ),
+      l.registerCommand(
+        Q,
+        C,
+        _
+      ),
+      l.registerCommand(J, L, _),
+      l.registerCommand(
+        H,
+        O,
+        _
+      )
+    );
+    return () => {
+      u = !1, f();
+    };
+  }, [
+    E,
+    l,
+    c,
+    a,
+    C,
+    L,
+    O,
+    o
+  ]), /* @__PURE__ */ g(F, { fallback: null, children: [
+    /* @__PURE__ */ g(A, { children: [
+      /* @__PURE__ */ g("div", { draggable: !1, children: [
+        /* @__PURE__ */ n(
+          "button",
+          {
+            className: "image-edit-button",
+            ref: b,
+            onClick: () => {
+              N("Update Inline Image", (u) => /* @__PURE__ */ n(
+                _e,
+                {
+                  activeEditor: l,
+                  nodeKey: a,
+                  onClose: u
+                }
+              ));
+            },
+            children: "Edit"
+          }
+        ),
+        /* @__PURE__ */ n(
+          Ce,
+          {
+            className: c ? `focused ${D(x) ? "draggable" : ""}` : null,
+            src: e,
+            altText: t,
+            imageRef: v,
+            width: r,
+            height: d,
+            position: h
+          }
+        )
+      ] }),
+      s && /* @__PURE__ */ n("div", { className: "image-caption-container", children: /* @__PURE__ */ g(he, { initialEditor: i, children: [
+        /* @__PURE__ */ n(ae, {}),
+        /* @__PURE__ */ n(ne, {}),
+        /* @__PURE__ */ n(
+          le,
+          {
+            contentEditable: /* @__PURE__ */ n(ie, { className: "InlineImageNode__contentEditable" }),
+            placeholder: /* @__PURE__ */ n(fe, { className: "InlineImageNode__placeholder", children: "Enter a caption..." }),
+            ErrorBoundary: re
+          }
+        )
+      ] }) })
+    ] }),
+    w
+  ] });
+}
+export {
+  _e as UpdateInlineImageDialog,
+  Ee as default
+};

package/dist/layers.DRxNz4Ly-Cp9JbXSH.js

@@ -0,0 +1,281 @@
+import { jsx as o, jsxs as $ } from "react/jsx-runtime";
+import { useRef as B, useState as w, useContext as q, useEffect as x } from "react";
+import { useTranslation as G } from "react-i18next";
+import { e as J, d as Q, n as X, u as Y, O as M, f as C, E, _ as ee, k as te, a as ie, H as oe, Z as ae, j as re } from "./index-Vul891jq.js";
+import { LoadingOverlay as L, Flex as se, Alert as ne } from "@mantine/core";
+import { IconInfoCircle as he } from "@tabler/icons-react";
+const D = (t) => {
+  const {
+    width: c,
+    height: r,
+    isLoading: s,
+    isError: d,
+    src: g,
+    id: m,
+    altText: p,
+    imageRef: v,
+    maxWidth: y
+  } = t;
+  return /* @__PURE__ */ $(
+    "div",
+    {
+      className: "media-wrapper",
+      style: {
+        width: c,
+        height: r,
+        display: "inline-flex",
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ o(
+          L,
+          {
+            visible: s,
+            zIndex: 1e3,
+            overlayProps: { backgroundOpacity: 0.5 },
+            loaderProps: { size: 24, color: "black" }
+          }
+        ),
+        /* @__PURE__ */ o(
+          L,
+          {
+            visible: d,
+            zIndex: 1e3,
+            overlayProps: { backgroundOpacity: 0.5 },
+            loaderProps: {
+              children: /* @__PURE__ */ o(se, { bg: "white", maw: 300, justify: "center", children: /* @__PURE__ */ o(
+                ne,
+                {
+                  variant: "light",
+                  color: "red",
+                  title: "Ошибка загрузки",
+                  icon: /* @__PURE__ */ o(he, {}),
+                  children: "Попробуйте загрузить заново."
+                }
+              ) })
+            }
+          }
+        ),
+        /* @__PURE__ */ o(
+          de,
+          {
+            className: null,
+            src: g,
+            altText: p,
+            imageRef: v,
+            width: "inherit",
+            height: "inherit",
+            maxWidth: y || "auto",
+            id: m
+          }
+        )
+      ]
+    }
+  );
+};
+function de({
+  altText: t,
+  className: c,
+  imageRef: r,
+  src: s,
+  width: d,
+  height: g,
+  maxWidth: m,
+  id: p
+}) {
+  return /* @__PURE__ */ o(
+    "img",
+    {
+      className: c || void 0,
+      src: s,
+      alt: t,
+      ref: r,
+      style: {
+        height: g,
+        maxWidth: m,
+        width: d
+      },
+      draggable: "false",
+      "data-id": p
+    }
+  );
+}
+function ue({
+  src: t,
+  altText: c,
+  nodeKey: r,
+  width: s,
+  height: d,
+  maxWidth: g,
+  showCaption: m,
+  caption: p,
+  id: v,
+  create: y,
+  alignment: K
+}) {
+  const k = B(null), [A, W] = w(!0), [O, U] = w(!1), { isCollabActive: P } = J(), [l] = Q(), [f, b] = w(!0), [n, T] = w({
+    width: 0,
+    height: 0
+  }), { fetchUploadImage: S, fetchDeleteImage: j } = q(X), { t: N } = G();
+  x(() => {
+    if (!t || t.startsWith("data:image/")) {
+      W(!1);
+      return;
+    }
+    const e = new Image();
+    e.src = t, e.onload = () => W(!1), e.onerror = () => {
+      W(!1), U(!0);
+    };
+  }, [t]);
+  const V = (e, a) => {
+    l.update(() => {
+      re(null);
+      const h = C(r);
+      E(h) && h.setWidthAndHeight(e, a);
+    });
+  }, { historyState: H } = Y(), {
+    settings: { showNestedEditorTreeView: z }
+  } = M(), [I, u] = w(!1);
+  function _(e) {
+    return e.endsWith(".svg") || e.includes("image/svg+xml");
+  }
+  function Z(e) {
+    return new Promise((a, h) => {
+      if (_(e)) {
+        a(0);
+        return;
+      }
+      const i = new Image();
+      i.src = e, i.onload = () => {
+        a(i.width);
+      }, i.onerror = () => {
+        h(new Error("Failed to load image"));
+      };
+    });
+  }
+  return x(() => {
+    y && u(!0);
+  }, [y]), x(() => {
+    let e = s, a = d, h = 100;
+    t && Z(t).then((i) => {
+      typeof e == "number" && e < h && i < h ? (b(!0), T({
+        width: e,
+        height: a
+      })) : i < h ? (b(!0), T({
+        width: "auto",
+        height: "auto"
+      })) : (T({
+        width: i,
+        height: i
+      }), b(!1));
+    });
+  }, [t]), x(() => {
+    n.width && n.height && f && l.update(() => {
+      const e = C(r);
+      E(e) && e.setWidthAndHeight(n.width, n.height);
+    });
+  }, [n.width, n.height, f]), x(() => {
+    const e = document.documentElement;
+    ee(I, e);
+  }, [I]), t ? f ? /* @__PURE__ */ o(
+    D,
+    {
+      width: n.width,
+      height: n.height,
+      isLoading: A,
+      isError: O,
+      isIcon: f,
+      src: t,
+      id: v,
+      editor: l,
+      nodeKey: r,
+      fetchDeleteImage: j,
+      altText: c,
+      imageRef: k,
+      maxWidth: g,
+      showCaption: m,
+      caption: p,
+      isCollabActive: P,
+      historyState: H,
+      showNestedEditorTreeView: z,
+      t: N
+    }
+  ) : /* @__PURE__ */ o(
+    te,
+    {
+      editor: l,
+      isIcon: f,
+      width: typeof s == "string" && s.includes("%") ? parseFloat(s) : s,
+      height: typeof d == "string" && d.includes("%") ? parseFloat(d) : s,
+      initialWidth: n.width || "",
+      initialHeight: n.height || "",
+      onResizeEnd: V,
+      alignment: K,
+      children: /* @__PURE__ */ o(
+        D,
+        {
+          width: "inherit",
+          height: "inherit",
+          isLoading: A,
+          isError: O,
+          isIcon: f,
+          src: t,
+          id: v,
+          editor: l,
+          nodeKey: r,
+          fetchDeleteImage: j,
+          altText: c,
+          imageRef: k,
+          maxWidth: g,
+          showCaption: m,
+          caption: p,
+          isCollabActive: P,
+          historyState: H,
+          showNestedEditorTreeView: z,
+          t: N
+        }
+      )
+    }
+  ) : /* @__PURE__ */ o(
+    ie,
+    {
+      uploading: !1,
+      onUpload: (e) => {
+        !S || !e.length || (e.forEach((a, h) => {
+          S(a, (i, F) => {
+            h === 0 ? l.update(() => {
+              const R = C(r);
+              E(R) && (R.setSrc(i), R.setId(F));
+            }) : l.dispatchCommand(ae, {
+              altText: "",
+              src: i,
+              id: F
+            });
+          });
+        }), u(!1));
+      },
+      popoverProps: {
+        opened: I,
+        position: "bottom",
+        onChange: u
+      },
+      onChange: (e) => {
+        u(!1), l.update(() => {
+          const a = C(r);
+          E(a) && a.setSrc(e);
+        });
+      },
+      children: /* @__PURE__ */ o(
+        oe,
+        {
+          title: N("editor.image.add_photo"),
+          icon: "photo",
+          onClick: () => u(!I)
+        }
+      )
+    }
+  );
+}
+export {
+  ue as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layers-app/shared",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "files": [
     "dist"
   ],