@layers-app/editor 0.5.1 → 0.5.3

package/dist/layers.BY5MS01o.js

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