@layers-app/editor 0.0.17 → 0.0.19

package/dist/layers.COWIfs98.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),s=require("react"),_=require("react-i18next"),t=require("./layers.C31Xdz2y.js"),E=require("@mantine/core"),U=require("@tabler/icons-react"),A=i=>{const{width:g,height:r,isLoading:l,isError:h,src:f,id:m,altText:p,imageRef:j,maxWidth:v}=i;return n.jsxs("div",{className:"media-wrapper",style:{width:g,height:r,display:"inline-flex",position:"relative"},children:[n.jsx(E.LoadingOverlay,{visible:l,zIndex:1e3,overlayProps:{backgroundOpacity:.5},loaderProps:{size:24,color:"black"}}),n.jsx(E.LoadingOverlay,{visible:h,zIndex:1e3,overlayProps:{backgroundOpacity:.5},loaderProps:{children:n.jsx(E.Flex,{bg:"white",maw:300,justify:"center",children:n.jsx(E.Alert,{variant:"light",color:"red",title:"Ошибка загрузки",icon:n.jsx(U.IconInfoCircle,{}),children:"Попробуйте загрузить заново."})})}}),n.jsx(B,{className:null,src:f,altText:p,imageRef:j,width:"inherit",height:"inherit",maxWidth:v||"auto",id:m})]})};function B({altText:i,className:g,imageRef:r,src:l,width:h,height:f,maxWidth:m,id:p}){return n.jsx("img",{className:g||void 0,src:l,alt:i,ref:r,style:{height:f,maxWidth:m,width:h},draggable:"false","data-id":p})}function G({src:i,altText:g,nodeKey:r,width:l,height:h,maxWidth:f,showCaption:m,caption:p,id:j,create:v,alignment:D}){const M=s.useRef(null),[W,S]=s.useState(!0),[P,F]=s.useState(!1),{isCollabActive:R}=t.l(),[u]=t.u(),[x,b]=s.useState(!0),[d,w]=s.useState({width:0,height:0}),{fetchUploadMedia:O,fetchDeleteMedia:z}=s.useContext(t.Context),{t:y}=_.useTranslation();s.useEffect(()=>{if(!i||i.startsWith("data:image/")){S(!1);return}const e=new Image;e.src=i,e.onload=()=>S(!1),e.onerror=()=>{S(!1),F(!0)}},[i]);const H=(e,a)=>{u.update(()=>{t.Ft(null);const c=t.Ct(r);t.$isImageNode(c)&&c.setWidthAndHeight(e,a)})},{historyState:L}=t.useSharedHistoryContext(),{settings:{showNestedEditorTreeView:k}}=t.useSettings(),[C,I]=s.useState(!1);function T(e){return e.endsWith(".svg")||e.includes("image/svg+xml")}function $(e){return new Promise((a,c)=>{if(T(e)){a(0);return}const o=new Image;o.src=e,o.onload=()=>{a(o.width)},o.onerror=()=>{c(new Error("Failed to load image"))}})}return s.useEffect(()=>{v&&I(!0)},[v]),s.useEffect(()=>{let e=l,a=h,c=100;i&&$(i).then(o=>{typeof e=="number"&&e<c&&o<c?(b(!0),w({width:e,height:a})):o<c?(b(!0),w({width:"auto",height:"auto"})):(w({width:o,height:o}),b(!1))})},[i]),s.useEffect(()=>{d.width&&d.height&&x&&u.update(()=>{const e=t.Ct(r);t.$isImageNode(e)&&e.setWidthAndHeight(d.width,d.height)})},[d.width,d.height,x]),s.useEffect(()=>{const e=document.documentElement;t.toggleLockScroll(C,e)},[C]),i?x?n.jsx(A,{width:d.width,height:d.height,isLoading:W,isError:P,isIcon:x,src:i,id:j,editor:u,nodeKey:r,fetchDeleteMedia:z,altText:g,imageRef:M,maxWidth:f,showCaption:m,caption:p,isCollabActive:R,historyState:L,showNestedEditorTreeView:k,t:y}):n.jsx(t.ResizableContainer,{editor:u,isIcon:x,width:typeof l=="string"&&l.includes("%")?parseFloat(l):l,height:typeof h=="string"&&h.includes("%")?parseFloat(h):l,initialWidth:d.width||"",initialHeight:d.height||"",onResizeEnd:H,alignment:D,children:n.jsx(A,{width:"inherit",height:"inherit",isLoading:W,isError:P,isIcon:x,src:i,id:j,editor:u,nodeKey:r,fetchDeleteMedia:z,altText:g,imageRef:M,maxWidth:f,showCaption:m,caption:p,isCollabActive:R,historyState:L,showNestedEditorTreeView:k,t:y})}):n.jsx(t.ImagePicker,{uploading:!1,onUpload:e=>{!O||!e.length||(e.forEach((a,c)=>{O(a,(o,q)=>{c===0?u.update(()=>{const N=t.Ct(r);t.$isImageNode(N)&&(N.setSrc(o),N.setId(q))}):u.dispatchCommand(t.INSERT_IMAGE_COMMAND,{altText:"",src:o,id:q})})}),I(!1))},popoverProps:{opened:C,position:"bottom",onChange:I},onChange:e=>{I(!1),u.update(()=>{const a=t.Ct(r);t.$isImageNode(a)&&a.setSrc(e)})},children:n.jsx(t.EmptyNodeButton,{title:y("editor.image.add_photo"),icon:"photo",onClick:()=>I(!C)})})}exports.default=G;

package/dist/{layers.BgmvxWuS.js → layers.CsVBstP7.js}

@@ -1,10 +1,10 @@
 import { jsx as o, jsxs as G } from "react/jsx-runtime";
-import { useRef as V, useState as I, useContext as q, useEffect as v } from "react";
+import { useRef as V, useState as I, useContext as q, useEffect as w } from "react";
 import { useTranslation as J } from "react-i18next";
-import { l as Q, u as X, C as Y, a as Z, b as K, c as C, $ as E, t as ee, I as te, E as ie, d as oe, R as ne, F as ae } from "./layers.BtDUR7c8.js";
-import { LoadingOverlay as T, Flex as se, Alert as re } from "@mantine/core";
+import { l as Q, u as X, C as Y, a as Z, b as K, c as C, $ as E, t as ee, I as te, E as ie, d as oe, R as ne, F as ae } from "./layers.q72Rt2k1.js";
+import { LoadingOverlay as H, Flex as se, Alert as re } from "@mantine/core";
 import { IconInfoCircle as le } from "@tabler/icons-react";
-const j = (t) => {
+const T = (t) => {
   const {
     width: c,
     height: a,
@@ -13,8 +13,8 @@ const j = (t) => {
     src: g,
     id: f,
     altText: u,
-    imageRef: w,
-    maxWidth: b
+    imageRef: b,
+    maxWidth: v
   } = t;
   return /* @__PURE__ */ G(
     "div",
@@ -28,7 +28,7 @@ const j = (t) => {
       },
       children: [
         /* @__PURE__ */ o(
-          T,
+          H,
           {
             visible: s,
             zIndex: 1e3,
@@ -37,7 +37,7 @@ const j = (t) => {
           }
         ),
         /* @__PURE__ */ o(
-          T,
+          H,
           {
             visible: d,
             zIndex: 1e3,
@@ -62,10 +62,10 @@ const j = (t) => {
             className: null,
             src: g,
             altText: u,
-            imageRef: w,
+            imageRef: b,
             width: "inherit",
             height: "inherit",
-            maxWidth: b || "auto",
+            maxWidth: v || "auto",
             id: f
           }
         )
@@ -109,22 +109,22 @@ function pe({
   maxWidth: g,
   showCaption: f,
   caption: u,
-  id: w,
-  create: b,
-  alignment: _
+  id: b,
+  create: v,
+  alignment: j
 }) {
-  const z = V(null), [R, y] = I(!0), [k, D] = I(!1), { isCollabActive: A } = Q(), [h] = X(), [m, S] = I(!0), [r, W] = I({
+  const P = V(null), [z, y] = I(!0), [R, _] = I(!1), { isCollabActive: k } = Q(), [h] = X(), [m, S] = I(!0), [r, W] = I({
     width: 0,
     height: 0
-  }), { fetchUploadImage: F, fetchDeleteImage: L } = q(Y), { t: N } = J();
-  v(() => {
+  }), { fetchUploadMedia: A, fetchDeleteMedia: F } = q(Y), { t: M } = J();
+  w(() => {
     if (!t || t.startsWith("data:image/")) {
       y(!1);
       return;
     }
     const e = new Image();
     e.src = t, e.onload = () => y(!1), e.onerror = () => {
-      y(!1), D(!0);
+      y(!1), _(!0);
     };
   }, [t]);
   const U = (e, n) => {
@@ -133,8 +133,8 @@ function pe({
       const l = C(a);
       E(l) && l.setWidthAndHeight(e, n);
     });
-  }, { historyState: O } = Z(), {
-    settings: { showNestedEditorTreeView: H }
+  }, { historyState: L } = Z(), {
+    settings: { showNestedEditorTreeView: O }
   } = K(), [x, p] = I(!1);
   function $(e) {
     return e.endsWith(".svg") || e.includes("image/svg+xml");
@@ -153,9 +153,9 @@ function pe({
       };
     });
   }
-  return v(() => {
-    b && p(!0);
-  }, [b]), v(() => {
+  return w(() => {
+    v && p(!0);
+  }, [v]), w(() => {
     let e = s, n = d, l = 100;
     t && B(t).then((i) => {
       typeof e == "number" && e < l && i < l ? (S(!0), W({
@@ -169,36 +169,36 @@ function pe({
         height: i
       }), S(!1));
     });
-  }, [t]), v(() => {
+  }, [t]), w(() => {
     r.width && r.height && m && h.update(() => {
       const e = C(a);
       E(e) && e.setWidthAndHeight(r.width, r.height);
     });
-  }, [r.width, r.height, m]), v(() => {
+  }, [r.width, r.height, m]), w(() => {
     const e = document.documentElement;
     ee(x, e);
   }, [x]), t ? m ? /* @__PURE__ */ o(
-    j,
+    T,
     {
       width: r.width,
       height: r.height,
-      isLoading: R,
-      isError: k,
+      isLoading: z,
+      isError: R,
       isIcon: m,
       src: t,
-      id: w,
+      id: b,
       editor: h,
       nodeKey: a,
-      fetchDeleteImage: L,
+      fetchDeleteMedia: F,
       altText: c,
-      imageRef: z,
+      imageRef: P,
       maxWidth: g,
       showCaption: f,
       caption: u,
-      isCollabActive: A,
-      historyState: O,
-      showNestedEditorTreeView: H,
-      t: N
+      isCollabActive: k,
+      historyState: L,
+      showNestedEditorTreeView: O,
+      t: M
     }
   ) : /* @__PURE__ */ o(
     ne,
@@ -210,29 +210,29 @@ function pe({
       initialWidth: r.width || "",
       initialHeight: r.height || "",
       onResizeEnd: U,
-      alignment: _,
+      alignment: j,
       children: /* @__PURE__ */ o(
-        j,
+        T,
         {
           width: "inherit",
           height: "inherit",
-          isLoading: R,
-          isError: k,
+          isLoading: z,
+          isError: R,
           isIcon: m,
           src: t,
-          id: w,
+          id: b,
           editor: h,
           nodeKey: a,
-          fetchDeleteImage: L,
+          fetchDeleteMedia: F,
           altText: c,
-          imageRef: z,
+          imageRef: P,
           maxWidth: g,
           showCaption: f,
           caption: u,
-          isCollabActive: A,
-          historyState: O,
-          showNestedEditorTreeView: H,
-          t: N
+          isCollabActive: k,
+          historyState: L,
+          showNestedEditorTreeView: O,
+          t: M
         }
       )
     }
@@ -241,15 +241,15 @@ function pe({
     {
       uploading: !1,
       onUpload: (e) => {
-        !F || !e.length || (e.forEach((n, l) => {
-          F(n, (i, M) => {
+        !A || !e.length || (e.forEach((n, l) => {
+          A(n, (i, D) => {
             l === 0 ? h.update(() => {
-              const P = C(a);
-              E(P) && (P.setSrc(i), P.setId(M));
+              const N = C(a);
+              E(N) && (N.setSrc(i), N.setId(D));
             }) : h.dispatchCommand(oe, {
               altText: "",
               src: i,
-              id: M
+              id: D
             });
           });
         }), p(!1));
@@ -268,7 +268,7 @@ function pe({
       children: /* @__PURE__ */ o(
         ie,
         {
-          title: N("editor.image.add_photo"),
+          title: M("editor.image.add_photo"),
           icon: "photo",
           onClick: () => p(!x)
         }

package/dist/{layers.CjmCIVDQ.js → layers.Dp_VLKWP.js}

@@ -1,6 +1,6 @@
 import { jsx as a, jsxs as v, Fragment as j } from "react/jsx-runtime";
 import { useRef as k, useContext as K, useMemo as U, useEffect as P, useState as T, useCallback as y, Suspense as W } from "react";
-import { e as R, o as q, l as z, f as G, g as H, u as J, w as M, h as D, c as A, i as Q, F as $, N as V, j as X, K as w, k as Y, m as Z, n as ee, D as te, r as ne, p as ae, L as le, q as oe, s as re, v as ie, x as se } from "./layers.BtDUR7c8.js";
+import { e as R, o as q, l as z, f as G, g as H, u as J, w as M, h as D, c as A, i as Q, F as $, N as V, j as X, K as w, k as Y, m as Z, n as ee, D as te, r as ne, p as ae, L as le, q as re, s as oe, v as ie, x as se } from "./layers.q72Rt2k1.js";
 import { Button as ce, TextInput as ue } from "@mantine/core";
 function de(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
@@ -15,11 +15,11 @@ function O(e) {
   const t = e.transform();
   return t !== null ? /* @__PURE__ */ new Set([t]) : /* @__PURE__ */ new Set();
 }
-function fe({ initialEditor: e, children: t, initialNodes: n, initialTheme: c, skipCollabChecks: r }) {
-  const i = k(!1), o = K(R);
-  o == null && me(9);
-  const [m, { getTheme: E }] = o, x = U(() => {
-    const d = c || E() || void 0, p = q(o, d);
+function fe({ initialEditor: e, children: t, initialNodes: n, initialTheme: c, skipCollabChecks: o }) {
+  const i = k(!1), r = K(R);
+  r == null && me(9);
+  const [m, { getTheme: E }] = r, x = U(() => {
+    const d = c || E() || void 0, p = q(r, d);
     if (d !== void 0 && (e._config.theme = d), e._parentEditor = m, n) for (let l of n) {
       let I = null, g = null;
       if (typeof l != "function") {
@@ -34,7 +34,7 @@ function fe({ initialEditor: e, children: t, initialNodes: n, initialTheme: c, s
       for (const [I, g] of l) e._nodes.set(I, { exportDOM: g.exportDOM, klass: g.klass, replace: g.replace, replaceWithKlass: g.replaceWithKlass, transforms: O(g.klass) });
     }
     return e._config.namespace = m._config.namespace, e._editable = m._editable, [e, p];
-  }, []), { isCollabActive: b, yjsDocMap: C } = z(), u = r || i.current || C.has(e.getKey());
+  }, []), { isCollabActive: b, yjsDocMap: C } = z(), u = o || i.current || C.has(e.getKey());
   return P(() => {
     u && (i.current = !0);
   }, [u]), P(() => m.registerEditableListener((d) => {
@@ -46,11 +46,11 @@ function pe({
   children: t,
   className: n,
   onClick: c,
-  disabled: r,
+  disabled: o,
   small: i,
-  title: o
+  title: r
 }) {
-  return /* @__PURE__ */ a(ce, { onClick: c, disabled: r, variant: "filled", children: t });
+  return /* @__PURE__ */ a(ce, { onClick: c, disabled: o, variant: "filled", children: t });
 }
 function ge({
   children: e,
@@ -74,7 +74,7 @@ function ve({
   value: t,
   onChange: n,
   placeholder: c = "",
-  "data-test-id": r,
+  "data-test-id": o,
   type: i = "text"
 }) {
   return /* @__PURE__ */ a(
@@ -83,11 +83,11 @@ function ve({
       type: i,
       placeholder: c,
       value: t,
-      onChange: (o) => {
-        n(o.target.value);
+      onChange: (r) => {
+        n(r.target.value);
       },
       label: e,
-      "data-test-id": r,
+      "data-test-id": o,
       mb: 10
     }
   );
@@ -107,9 +107,9 @@ function Ce({
   className: t,
   imageRef: n,
   src: c,
-  width: r,
+  width: o,
   height: i,
-  position: o
+  position: r
 }) {
   return be(c), /* @__PURE__ */ a(
     "img",
@@ -118,11 +118,11 @@ function Ce({
       src: c,
       alt: e,
       ref: n,
-      "data-position": o,
+      "data-position": r,
       style: {
         display: "block",
         height: i,
-        width: r
+        width: o
       },
       draggable: "false"
     }
@@ -133,16 +133,16 @@ function _e({
   nodeKey: t,
   onClose: n
 }) {
-  const r = e.getEditorState().read(
+  const o = e.getEditorState().read(
     () => A(t)
-  ), [i, o] = T(r.getAltText()), [m, E] = T(r.getShowCaption()), [x, b] = T(r.getPosition()), C = (p) => {
+  ), [i, r] = T(o.getAltText()), [m, E] = T(o.getShowCaption()), [x, b] = T(o.getPosition()), C = (p) => {
     E(p.target.checked);
   }, u = (p) => {
     b(p.target.value);
   }, d = () => {
     const p = { altText: i, position: x, showCaption: m };
-    r && e.update(() => {
-      r.update(p);
+    o && e.update(() => {
+      o.update(p);
     }), n();
   };
   return /* @__PURE__ */ v(j, { children: [
@@ -151,7 +151,7 @@ function _e({
       {
         label: "Alt-текст",
         placeholder: "Альтернативный текст",
-        onChange: o,
+        onChange: r,
         value: i,
         "data-test-id": "image-modal-alt-text-input"
       }
@@ -199,9 +199,9 @@ function Ne({
   altText: t,
   nodeKey: n,
   width: c,
-  height: r,
+  height: o,
   showCaption: i,
-  caption: o,
+  caption: r,
   position: m
 }) {
   const [E, x] = G(), b = k(null), C = k(null), [u, d, p] = H(n), [l] = J(), [I, g] = T(null), S = k(null), _ = y(
@@ -219,20 +219,20 @@ function Ne({
       const h = D(), s = C.current;
       if (u && M(h) && h.getNodes().length === 1) {
         if (i)
-          return $(null), f.preventDefault(), o.focus(), !0;
+          return $(null), f.preventDefault(), r.focus(), !0;
         if (s !== null && s !== document.activeElement)
           return f.preventDefault(), s.focus(), !0;
       }
       return !1;
     },
-    [o, u, i]
+    [r, u, i]
   ), L = y(
-    (f) => S.current === o || C.current === f.target ? ($(null), l.update(() => {
+    (f) => S.current === r || C.current === f.target ? ($(null), l.update(() => {
       d(!0);
       const h = l.getRootElement();
       h !== null && h.focus();
     }), !0) : !1,
-    [o, l, d]
+    [r, l, d]
   );
   return P(() => {
     let f = !0;
@@ -316,16 +316,16 @@ function Ne({
             altText: t,
             imageRef: b,
             width: c,
-            height: r,
+            height: o,
             position: m
           }
         )
       ] }),
-      i && /* @__PURE__ */ a("div", { className: "image-caption-container", children: /* @__PURE__ */ v(fe, { initialEditor: o, children: [
+      i && /* @__PURE__ */ a("div", { className: "image-caption-container", children: /* @__PURE__ */ v(fe, { initialEditor: r, children: [
         /* @__PURE__ */ a(le, {}),
-        /* @__PURE__ */ a(oe, {}),
+        /* @__PURE__ */ a(re, {}),
         /* @__PURE__ */ a(
-          re,
+          oe,
           {
             contentEditable: /* @__PURE__ */ a(se, { className: "InlineImageNode__contentEditable" }),
             placeholder: /* @__PURE__ */ a(ge, { className: "InlineImageNode__placeholder", children: "Enter a caption..." }),