sykpcomposer 0.0.225 → 0.0.228

package/dist/{ImageComponent-d7557a1f.js → ImageComponent-5fc589b6.js}

@@ -1,9 +1,9 @@
-import { j as v, u as he, a as ce, d as U, w as G, x as J, $ as Q, b as te, c as de, e as le, f as ge, C as I, g as ue, k as pe, h as we, I as me, r as xe, i as fe, l as ye, m as Ce, t as ve } from "./index-858ce1f1.js";
-import { d as De, L as be, P as Re } from "./Placeholder-dd3f559e.js";
-import f, { useRef as Y, PureComponent as Ee, createRef as ne, useState as O, useCallback as F, useEffect as ee, Suspense as Me } from "react";
+import { j as v, u as ce, a as ae, d as F, w as V, x as q, $ as J, b as ne, c as de, e as le, f as ge, C as I, g as ue, k as pe, h as we, I as me, r as xe, i as fe, l as ye, m as Ce, t as ve } from "./index-63da0e16.js";
+import { d as De, L as be, P as Re } from "./Placeholder-874b4a67.js";
+import f, { useRef as Y, PureComponent as Ee, createRef as ie, useState as W, useCallback as T, useEffect as te, Suspense as Me } from "react";
 import "react-dom";
-function Z(g, t, e) {
-  return Math.min(Math.max(g, t), e);
+function ee(l, t, e) {
+  return Math.min(Math.max(l, t), e);
 }
 const y = {
   east: 1,
@@ -12,7 +12,7 @@ const y = {
   west: 4
 };
 function Pe({
-  onResizeStart: g,
+  onResizeStart: l,
   onResizeEnd: t,
   buttonRef: e,
   imageRef: o,
@@ -22,10 +22,10 @@ function Pe({
   setShowCaption: p,
   captionsEnabled: s
 }) {
-  const r = Y(null), a = Y({
+  const r = Y(null), d = Y({
     priority: "",
     value: "default"
-  }), d = Y({
+  }), a = Y({
     currentHeight: 0,
     currentWidth: 0,
     direction: 0,
@@ -35,78 +35,78 @@ function Pe({
     startWidth: 0,
     startX: 0,
     startY: 0
-  }), l = i.getRootElement(), c = l !== null ? l.getBoundingClientRect().width - 20 : 100, C = l !== null ? l.getBoundingClientRect().height - 20 : 100, M = 100, x = 100, z = (u) => {
-    const w = u === y.east || u === y.west, m = u === y.north || u === y.south, N = u & y.north && u & y.west || u & y.south && u & y.east, $ = w ? "ew" : m ? "ns" : N ? "nwse" : "nesw";
-    l !== null && l.style.setProperty(
+  }), g = i.getRootElement(), c = g !== null ? g.getBoundingClientRect().width - 20 : 100, C = g !== null ? g.getBoundingClientRect().height - 20 : 100, P = 100, x = 100, $ = (w) => {
+    const u = w === y.east || w === y.west, m = w === y.north || w === y.south, H = w & y.north && w & y.west || w & y.south && w & y.east, E = u ? "ew" : m ? "ns" : H ? "nwse" : "nesw";
+    g !== null && g.style.setProperty(
       "cursor",
-      `${$}-resize`,
+      `${E}-resize`,
       "important"
     ), document.body !== null && (document.body.style.setProperty(
       "cursor",
-      `${$}-resize`,
+      `${E}-resize`,
       "important"
-    ), a.current.value = document.body.style.getPropertyValue(
+    ), d.current.value = document.body.style.getPropertyValue(
       "-webkit-user-select"
-    ), a.current.priority = document.body.style.getPropertyPriority(
+    ), d.current.priority = document.body.style.getPropertyPriority(
       "-webkit-user-select"
     ), document.body.style.setProperty(
       "-webkit-user-select",
       "none",
       "important"
     ));
-  }, W = () => {
-    l !== null && l.style.setProperty("cursor", "text"), document.body !== null && (document.body.style.setProperty("cursor", "default"), document.body.style.setProperty(
+  }, K = () => {
+    g !== null && g.style.setProperty("cursor", "text"), document.body !== null && (document.body.style.setProperty("cursor", "default"), document.body.style.setProperty(
       "-webkit-user-select",
-      a.current.value,
-      a.current.priority
+      d.current.value,
+      d.current.priority
     ));
-  }, H = (u, w) => {
+  }, z = (w, u) => {
     if (!i.isEditable())
       return;
-    const m = o.current, N = r.current;
-    if (m !== null && N !== null) {
-      u.preventDefault();
-      const { width: $, height: D } = m.getBoundingClientRect(), b = d.current;
-      b.startWidth = $, b.startHeight = D, b.ratio = $ / D, b.currentWidth = $, b.currentHeight = D, b.startX = u.clientX, b.startY = u.clientY, b.isResizing = !0, b.direction = w, z(w), g(), N.classList.add("image-control-wrapper--resizing"), m.style.height = `${D}px`, m.style.width = `${$}px`, document.addEventListener("pointermove", L), document.addEventListener("pointerup", R);
+    const m = o.current, H = r.current;
+    if (m !== null && H !== null) {
+      w.preventDefault();
+      const { width: E, height: b } = m.getBoundingClientRect(), D = a.current;
+      D.startWidth = E, D.startHeight = b, D.ratio = E / b, D.currentWidth = E, D.currentHeight = b, D.startX = w.clientX, D.startY = w.clientY, D.isResizing = !0, D.direction = u, $(u), l(), H.classList.add("image-control-wrapper--resizing"), m.style.height = `${b}px`, m.style.width = `${E}px`, document.addEventListener("pointermove", j), document.addEventListener("pointerup", k);
     }
-  }, L = (u) => {
-    const w = o.current, m = d.current, N = m.direction & (y.east | y.west), $ = m.direction & (y.south | y.north);
-    if (w !== null && m.isResizing) {
-      if (N && $) {
-        let D = Math.floor(m.startX - u.clientX);
-        D = m.direction & y.east ? -D : D;
-        const b = Z(
-          m.startWidth + D,
-          M,
+  }, j = (w) => {
+    const u = o.current, m = a.current, H = m.direction & (y.east | y.west), E = m.direction & (y.south | y.north);
+    if (u !== null && m.isResizing) {
+      if (H && E) {
+        let b = Math.floor(m.startX - w.clientX);
+        b = m.direction & y.east ? -b : b;
+        const D = ee(
+          m.startWidth + b,
+          P,
           c
-        ), T = b / m.ratio;
-        w.style.width = `${b}px`, w.style.height = `${T}px`, m.currentHeight = T, m.currentWidth = b;
-      } else if ($) {
-        let D = Math.floor(m.startY - u.clientY);
-        D = m.direction & y.south ? -D : D;
-        const b = Z(
-          m.startHeight + D,
+        ), L = D / m.ratio;
+        u.style.width = `${D}px`, u.style.height = `${L}px`, m.currentHeight = L, m.currentWidth = D;
+      } else if (E) {
+        let b = Math.floor(m.startY - w.clientY);
+        b = m.direction & y.south ? -b : b;
+        const D = ee(
+          m.startHeight + b,
           x,
           C
         );
-        w.style.height = `${b}px`, w.style.maxHeight = `${b}px`, m.currentHeight = b;
+        u.style.height = `${D}px`, u.style.maxHeight = `${D}px`, m.currentHeight = D;
       } else {
-        let D = Math.floor(m.startX - u.clientX);
-        D = m.direction & y.east ? -D : D;
-        const b = Z(
-          m.startWidth + D,
-          M,
+        let b = Math.floor(m.startX - w.clientX);
+        b = m.direction & y.east ? -b : b;
+        const D = ee(
+          m.startWidth + b,
+          P,
           c
         );
-        w.style.width = `${b}px`, w.style.maxWidth = `${b}px`, m.currentWidth = b;
+        u.style.width = `${D}px`, u.style.maxWidth = `${D}px`, m.currentWidth = D;
       }
-      w && (w.setAttribute("width", `${m.currentWidth}`), w.setAttribute("height", `${m.currentHeight}`));
+      u && (u.setAttribute("width", `${m.currentWidth}`), u.setAttribute("height", `${m.currentHeight}`));
     }
-  }, R = () => {
-    const u = o.current, w = d.current, m = r.current;
-    if (u !== null && m !== null && w.isResizing) {
-      const N = w.currentWidth, $ = w.currentHeight;
-      w.startWidth = 0, w.startHeight = 0, w.ratio = 0, w.startX = 0, w.startY = 0, w.currentWidth = 0, w.currentHeight = 0, w.isResizing = !1, m.classList.remove("image-control-wrapper--resizing"), W(), t(N, $), document.removeEventListener("pointermove", L), document.removeEventListener("pointerup", R);
+  }, k = () => {
+    const w = o.current, u = a.current, m = r.current;
+    if (w !== null && m !== null && u.isResizing) {
+      const H = u.currentWidth, E = u.currentHeight;
+      u.startWidth = 0, u.startHeight = 0, u.ratio = 0, u.startX = 0, u.startY = 0, u.currentWidth = 0, u.currentHeight = 0, u.isResizing = !1, m.classList.remove("image-control-wrapper--resizing"), K(), t(H, E), document.removeEventListener("pointermove", j), document.removeEventListener("pointerup", k);
     }
   };
   return /* @__PURE__ */ v.jsxs("div", { ref: r, children: [
@@ -114,8 +114,8 @@ function Pe({
       "div",
       {
         className: "image-resizer image-resizer-n",
-        onPointerDown: (u) => {
-          H(u, y.north);
+        onPointerDown: (w) => {
+          z(w, y.north);
         }
       }
     ),
@@ -123,8 +123,8 @@ function Pe({
       "div",
       {
         className: "image-resizer image-resizer-ne",
-        onPointerDown: (u) => {
-          H(u, y.north | y.east);
+        onPointerDown: (w) => {
+          z(w, y.north | y.east);
         }
       }
     ),
@@ -132,8 +132,8 @@ function Pe({
       "div",
       {
         className: "image-resizer image-resizer-e",
-        onPointerDown: (u) => {
-          H(u, y.east);
+        onPointerDown: (w) => {
+          z(w, y.east);
         }
       }
     ),
@@ -141,8 +141,8 @@ function Pe({
       "div",
       {
         className: "image-resizer image-resizer-se",
-        onPointerDown: (u) => {
-          H(u, y.south | y.east);
+        onPointerDown: (w) => {
+          z(w, y.south | y.east);
         }
       }
     ),
@@ -150,8 +150,8 @@ function Pe({
       "div",
       {
         className: "image-resizer image-resizer-s",
-        onPointerDown: (u) => {
-          H(u, y.south);
+        onPointerDown: (w) => {
+          z(w, y.south);
         }
       }
     ),
@@ -159,8 +159,8 @@ function Pe({
       "div",
       {
         className: "image-resizer image-resizer-sw",
-        onPointerDown: (u) => {
-          H(u, y.south | y.west);
+        onPointerDown: (w) => {
+          z(w, y.south | y.west);
         }
       }
     ),
@@ -168,8 +168,8 @@ function Pe({
       "div",
       {
         className: "image-resizer image-resizer-w",
-        onPointerDown: (u) => {
-          H(u, y.west);
+        onPointerDown: (w) => {
+          z(w, y.west);
         }
       }
     ),
@@ -177,62 +177,62 @@ function Pe({
       "div",
       {
         className: "image-resizer image-resizer-nw",
-        onPointerDown: (u) => {
-          H(u, y.north | y.west);
+        onPointerDown: (w) => {
+          z(w, y.north | y.west);
         }
       }
     )
   ] });
 }
-const V = {
+const Q = {
   x: 0,
   y: 0,
   width: 0,
   height: 0,
   unit: "px"
-}, j = (g, t, e) => Math.min(Math.max(g, t), e), He = (...g) => g.filter((t) => t && typeof t == "string").join(" "), ie = (g, t) => g === t || g.width === t.width && g.height === t.height && g.x === t.x && g.y === t.y && g.unit === t.unit;
-function A(g, t, e) {
-  return g.unit === "%" ? { ...V, ...g, unit: "%" } : {
+}, A = (l, t, e) => Math.min(Math.max(l, t), e), He = (...l) => l.filter((t) => t && typeof t == "string").join(" "), re = (l, t) => l === t || l.width === t.width && l.height === t.height && l.x === t.x && l.y === t.y && l.unit === t.unit;
+function B(l, t, e) {
+  return l.unit === "%" ? { ...Q, ...l, unit: "%" } : {
     unit: "%",
-    x: g.x ? g.x / t * 100 : 0,
-    y: g.y ? g.y / e * 100 : 0,
-    width: g.width ? g.width / t * 100 : 0,
-    height: g.height ? g.height / e * 100 : 0
+    x: l.x ? l.x / t * 100 : 0,
+    y: l.y ? l.y / e * 100 : 0,
+    width: l.width ? l.width / t * 100 : 0,
+    height: l.height ? l.height / e * 100 : 0
   };
 }
-function _(g, t, e) {
-  return g.unit ? g.unit === "px" ? { ...V, ...g, unit: "px" } : {
+function _(l, t, e) {
+  return l.unit ? l.unit === "px" ? { ...Q, ...l, unit: "px" } : {
     unit: "px",
-    x: g.x ? g.x * t / 100 : 0,
-    y: g.y ? g.y * e / 100 : 0,
-    width: g.width ? g.width * t / 100 : 0,
-    height: g.height ? g.height * e / 100 : 0
-  } : { ...V, ...g, unit: "px" };
+    x: l.x ? l.x * t / 100 : 0,
+    y: l.y ? l.y * e / 100 : 0,
+    width: l.width ? l.width * t / 100 : 0,
+    height: l.height ? l.height * e / 100 : 0
+  } : { ...Q, ...l, unit: "px" };
 }
-function re(g, t, e, o, n, i = 0, h = 0, p = o, s = n) {
-  const r = { ...g };
-  let a = Math.min(i, o), d = Math.min(h, n), l = Math.min(p, o), c = Math.min(s, n);
-  t && (t > 1 ? (a = h ? h * t : a, d = a / t, l = p * t) : (d = i ? i / t : d, a = d * t, c = s / t)), r.y < 0 && (r.height = Math.max(r.height + r.y, d), r.y = 0), r.x < 0 && (r.width = Math.max(r.width + r.x, a), r.x = 0);
+function oe(l, t, e, o, n, i = 0, h = 0, p = o, s = n) {
+  const r = { ...l };
+  let d = Math.min(i, o), a = Math.min(h, n), g = Math.min(p, o), c = Math.min(s, n);
+  t && (t > 1 ? (d = h ? h * t : d, a = d / t, g = p * t) : (a = i ? i / t : a, d = a * t, c = s / t)), r.y < 0 && (r.height = Math.max(r.height + r.y, a), r.y = 0), r.x < 0 && (r.width = Math.max(r.width + r.x, d), r.x = 0);
   const C = o - (r.x + r.width);
-  C < 0 && (r.x = Math.min(r.x, o - a), r.width += C);
-  const M = n - (r.y + r.height);
-  if (M < 0 && (r.y = Math.min(r.y, n - d), r.height += M), r.width < a && ((e === "sw" || e == "nw") && (r.x -= a - r.width), r.width = a), r.height < d && ((e === "nw" || e == "ne") && (r.y -= d - r.height), r.height = d), r.width > l && ((e === "sw" || e == "nw") && (r.x -= l - r.width), r.width = l), r.height > c && ((e === "nw" || e == "ne") && (r.y -= c - r.height), r.height = c), t) {
+  C < 0 && (r.x = Math.min(r.x, o - d), r.width += C);
+  const P = n - (r.y + r.height);
+  if (P < 0 && (r.y = Math.min(r.y, n - a), r.height += P), r.width < d && ((e === "sw" || e == "nw") && (r.x -= d - r.width), r.width = d), r.height < a && ((e === "nw" || e == "ne") && (r.y -= a - r.height), r.height = a), r.width > g && ((e === "sw" || e == "nw") && (r.x -= g - r.width), r.width = g), r.height > c && ((e === "nw" || e == "ne") && (r.y -= c - r.height), r.height = c), t) {
     const x = r.width / r.height;
     if (x < t) {
-      const z = Math.max(r.width / t, d);
-      (e === "nw" || e == "ne") && (r.y -= z - r.height), r.height = z;
+      const $ = Math.max(r.width / t, a);
+      (e === "nw" || e == "ne") && (r.y -= $ - r.height), r.height = $;
     } else if (x > t) {
-      const z = Math.max(r.height * t, a);
-      (e === "sw" || e == "nw") && (r.x -= z - r.width), r.width = z;
+      const $ = Math.max(r.height * t, d);
+      (e === "sw" || e == "nw") && (r.x -= $ - r.width), r.width = $;
     }
   }
   return r;
 }
-function $e(g, t, e, o) {
-  const n = { ...g };
+function $e(l, t, e, o) {
+  const n = { ...l };
   return t === "ArrowLeft" ? o === "nw" ? (n.x -= e, n.y -= e, n.width += e, n.height += e) : o === "w" ? (n.x -= e, n.width += e) : o === "sw" ? (n.x -= e, n.width += e, n.height += e) : o === "ne" ? (n.y += e, n.width -= e, n.height -= e) : o === "e" ? n.width -= e : o === "se" && (n.width -= e, n.height -= e) : t === "ArrowRight" && (o === "nw" ? (n.x += e, n.y += e, n.width -= e, n.height -= e) : o === "w" ? (n.x += e, n.width -= e) : o === "sw" ? (n.x += e, n.width -= e, n.height -= e) : o === "ne" ? (n.y -= e, n.width += e, n.height += e) : o === "e" ? n.width += e : o === "se" && (n.width += e, n.height += e)), t === "ArrowUp" ? o === "nw" ? (n.x -= e, n.y -= e, n.width += e, n.height += e) : o === "n" ? (n.y -= e, n.height += e) : o === "ne" ? (n.y -= e, n.width += e, n.height += e) : o === "sw" ? (n.x += e, n.width -= e, n.height -= e) : o === "s" ? n.height -= e : o === "se" && (n.width -= e, n.height -= e) : t === "ArrowDown" && (o === "nw" ? (n.x += e, n.y += e, n.width -= e, n.height -= e) : o === "n" ? (n.y += e, n.height -= e) : o === "ne" ? (n.y += e, n.width -= e, n.height -= e) : o === "sw" ? (n.x -= e, n.width += e, n.height += e) : o === "s" ? n.height += e : o === "se" && (n.width += e, n.height += e)), n;
 }
-const B = { capture: !0, passive: !1 };
+const O = { capture: !0, passive: !1 };
 let ze = 0;
 const X = class S extends Ee {
   constructor() {
@@ -244,7 +244,7 @@ const X = class S extends Ee {
       clientX: 0,
       clientY: 0,
       isResize: !0
-    }, this.componentRef = ne(), this.mediaRef = ne(), this.initChangeCalled = !1, this.instanceId = `rc-${ze++}`, this.state = {
+    }, this.componentRef = ie(), this.mediaRef = ie(), this.initChangeCalled = !1, this.instanceId = `rc-${ze++}`, this.state = {
       cropIsActive: !1,
       newCropIsBeingDrawn: !1
     }, this.onCropPointerDown = (t) => {
@@ -256,17 +256,17 @@ const X = class S extends Ee {
         return;
       t.cancelable && t.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: !0 });
       const h = t.target.dataset.ord, p = !!h;
-      let s = t.clientX, r = t.clientY, a = i.x, d = i.y;
+      let s = t.clientX, r = t.clientY, d = i.x, a = i.y;
       if (h) {
-        const l = t.clientX - n.x, c = t.clientY - n.y;
-        let C = 0, M = 0;
-        h === "ne" || h == "e" ? (C = l - (i.x + i.width), M = c - i.y, a = i.x, d = i.y + i.height) : h === "se" || h === "s" ? (C = l - (i.x + i.width), M = c - (i.y + i.height), a = i.x, d = i.y) : h === "sw" || h == "w" ? (C = l - i.x, M = c - (i.y + i.height), a = i.x + i.width, d = i.y) : (h === "nw" || h == "n") && (C = l - i.x, M = c - i.y, a = i.x + i.width, d = i.y + i.height), s = a + n.x + C, r = d + n.y + M;
+        const g = t.clientX - n.x, c = t.clientY - n.y;
+        let C = 0, P = 0;
+        h === "ne" || h == "e" ? (C = g - (i.x + i.width), P = c - i.y, d = i.x, a = i.y + i.height) : h === "se" || h === "s" ? (C = g - (i.x + i.width), P = c - (i.y + i.height), d = i.x, a = i.y) : h === "sw" || h == "w" ? (C = g - i.x, P = c - (i.y + i.height), d = i.x + i.width, a = i.y) : (h === "nw" || h == "n") && (C = g - i.x, P = c - i.y, d = i.x + i.width, a = i.y + i.height), s = d + n.x + C, r = a + n.y + P;
       }
       this.evData = {
         startClientX: s,
         startClientY: r,
-        startCropX: a,
-        startCropY: d,
+        startCropX: d,
+        startCropY: a,
         clientX: t.clientX,
         clientY: t.clientY,
         isResize: p,
@@ -277,7 +277,7 @@ const X = class S extends Ee {
       if (o || n || i && e)
         return;
       t.cancelable && t.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: !0 });
-      const s = t.clientX - p.x, r = t.clientY - p.y, a = {
+      const s = t.clientX - p.x, r = t.clientY - p.y, d = {
         unit: "px",
         x: s,
         y: r,
@@ -292,7 +292,7 @@ const X = class S extends Ee {
         clientX: t.clientX,
         clientY: t.clientY,
         isResize: !0
-      }, this.mouseDownOnCrop = !0, h(_(a, p.width, p.height), A(a, p.width, p.height)), this.setState({ cropIsActive: !0, newCropIsBeingDrawn: !0 });
+      }, this.mouseDownOnCrop = !0, h(_(d, p.width, p.height), B(d, p.width, p.height)), this.setState({ cropIsActive: !0, newCropIsBeingDrawn: !0 });
     }, this.onDocPointerMove = (t) => {
       const { crop: e, disabled: o, onChange: n, onDragStart: i } = this.props, h = this.getBox();
       if (o || !e || !this.mouseDownOnCrop)
@@ -301,9 +301,9 @@ const X = class S extends Ee {
       const { evData: p } = this;
       p.clientX = t.clientX, p.clientY = t.clientY;
       let s;
-      p.isResize ? s = this.resizeCrop() : s = this.dragCrop(), ie(e, s) || n(
+      p.isResize ? s = this.resizeCrop() : s = this.dragCrop(), re(e, s) || n(
         _(s, h.width, h.height),
-        A(s, h.width, h.height)
+        B(s, h.width, h.height)
       );
     }, this.onComponentKeyDown = (t) => {
       const { crop: e, disabled: o, onChange: n, onComplete: i } = this.props;
@@ -313,11 +313,11 @@ const X = class S extends Ee {
       let p = !1;
       if (!e)
         return;
-      const s = this.getBox(), r = this.makePixelCrop(s), a = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? S.nudgeStepLarge : t.shiftKey ? S.nudgeStepMedium : S.nudgeStep;
-      if (h === "ArrowLeft" ? (r.x -= a, p = !0) : h === "ArrowRight" ? (r.x += a, p = !0) : h === "ArrowUp" ? (r.y -= a, p = !0) : h === "ArrowDown" && (r.y += a, p = !0), p) {
-        t.cancelable && t.preventDefault(), r.x = j(r.x, 0, s.width - r.width), r.y = j(r.y, 0, s.height - r.height);
-        const d = _(r, s.width, s.height), l = A(r, s.width, s.height);
-        n(d, l), i && i(d, l);
+      const s = this.getBox(), r = this.makePixelCrop(s), d = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? S.nudgeStepLarge : t.shiftKey ? S.nudgeStepMedium : S.nudgeStep;
+      if (h === "ArrowLeft" ? (r.x -= d, p = !0) : h === "ArrowRight" ? (r.x += d, p = !0) : h === "ArrowUp" ? (r.y -= d, p = !0) : h === "ArrowDown" && (r.y += d, p = !0), p) {
+        t.cancelable && t.preventDefault(), r.x = A(r.x, 0, s.width - r.width), r.y = A(r.y, 0, s.height - r.height);
+        const a = _(r, s.width, s.height), g = B(r, s.width, s.height);
+        n(a, g), i && i(a, g);
       }
     }, this.onHandlerKeyDown = (t, e) => {
       const {
@@ -328,33 +328,33 @@ const X = class S extends Ee {
         minHeight: p = 0,
         maxWidth: s,
         maxHeight: r,
-        onChange: a,
-        onComplete: d
-      } = this.props, l = this.getBox();
+        onChange: d,
+        onComplete: a
+      } = this.props, g = this.getBox();
       if (i || !n)
         return;
       if (t.key === "ArrowUp" || t.key === "ArrowDown" || t.key === "ArrowLeft" || t.key === "ArrowRight")
         t.stopPropagation(), t.preventDefault();
       else
         return;
-      const c = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? S.nudgeStepLarge : t.shiftKey ? S.nudgeStepMedium : S.nudgeStep, C = _(n, l.width, l.height), M = $e(C, t.key, c, e), x = re(
-        M,
+      const c = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? S.nudgeStepLarge : t.shiftKey ? S.nudgeStepMedium : S.nudgeStep, C = _(n, g.width, g.height), P = $e(C, t.key, c, e), x = oe(
+        P,
         o,
         e,
-        l.width,
-        l.height,
+        g.width,
+        g.height,
         h,
         p,
         s,
         r
       );
-      if (!ie(n, x)) {
-        const z = A(x, l.width, l.height);
-        a(x, z), d && d(x, z);
+      if (!re(n, x)) {
+        const $ = B(x, g.width, g.height);
+        d(x, $), a && a(x, $);
       }
     }, this.onDocPointerDone = (t) => {
       const { crop: e, disabled: o, onComplete: n, onDragEnd: i } = this.props, h = this.getBox();
-      this.unbindDocMove(), !(o || !e) && this.mouseDownOnCrop && (this.mouseDownOnCrop = !1, this.dragStarted = !1, i && i(t), n && n(_(e, h.width, h.height), A(e, h.width, h.height)), this.setState({ cropIsActive: !1, newCropIsBeingDrawn: !1 }));
+      this.unbindDocMove(), !(o || !e) && this.mouseDownOnCrop && (this.mouseDownOnCrop = !1, this.dragStarted = !1, i && i(t), n && n(_(e, h.width, h.height), B(e, h.width, h.height)), this.setState({ cropIsActive: !1, newCropIsBeingDrawn: !1 }));
     }, this.onDragFocus = () => {
       var t;
       (t = this.componentRef.current) == null || t.scrollTo(0, 0);
@@ -376,17 +376,17 @@ const X = class S extends Ee {
     const { crop: e, onComplete: o } = this.props;
     if (o && !t.crop && e) {
       const { width: n, height: i } = this.getBox();
-      n && i && o(_(e, n, i), A(e, n, i));
+      n && i && o(_(e, n, i), B(e, n, i));
     }
   }
   componentWillUnmount() {
     this.resizeObserver && this.resizeObserver.disconnect(), this.unbindDocMove();
   }
   bindDocMove() {
-    this.docMoveBound || (this.document.addEventListener("pointermove", this.onDocPointerMove, B), this.document.addEventListener("pointerup", this.onDocPointerDone, B), this.document.addEventListener("pointercancel", this.onDocPointerDone, B), this.docMoveBound = !0);
+    this.docMoveBound || (this.document.addEventListener("pointermove", this.onDocPointerMove, O), this.document.addEventListener("pointerup", this.onDocPointerDone, O), this.document.addEventListener("pointercancel", this.onDocPointerDone, O), this.docMoveBound = !0);
   }
   unbindDocMove() {
-    this.docMoveBound && (this.document.removeEventListener("pointermove", this.onDocPointerMove, B), this.document.removeEventListener("pointerup", this.onDocPointerDone, B), this.document.removeEventListener("pointercancel", this.onDocPointerDone, B), this.docMoveBound = !1);
+    this.docMoveBound && (this.document.removeEventListener("pointermove", this.onDocPointerMove, O), this.document.removeEventListener("pointerup", this.onDocPointerDone, O), this.document.removeEventListener("pointercancel", this.onDocPointerDone, O), this.docMoveBound = !1);
   }
   getCropStyle() {
     const { crop: t } = this.props;
@@ -400,7 +400,7 @@ const X = class S extends Ee {
   }
   dragCrop() {
     const { evData: t } = this, e = this.getBox(), o = this.makePixelCrop(e), n = t.clientX - t.startClientX, i = t.clientY - t.startClientY;
-    return o.x = j(t.startCropX + n, 0, e.width - o.width), o.y = j(t.startCropY + i, 0, e.height - o.height), o;
+    return o.x = A(t.startCropX + n, 0, e.width - o.width), o.y = A(t.startCropY + i, 0, e.height - o.height), o;
   }
   getPointRegion(t, e, o, n) {
     const { evData: i } = this, h = i.clientX - t.x, p = i.clientY - t.y;
@@ -416,9 +416,9 @@ const X = class S extends Ee {
   resizeCrop() {
     const { evData: t } = this, { aspect: e = 0, maxWidth: o, maxHeight: n } = this.props, i = this.getBox(), [h, p] = this.resolveMinDimensions(i, e, this.props.minWidth, this.props.minHeight);
     let s = this.makePixelCrop(i);
-    const r = this.getPointRegion(i, t.ord, h, p), a = t.ord || r;
-    let d = t.clientX - t.startClientX, l = t.clientY - t.startClientY;
-    (h && a === "nw" || a === "w" || a === "sw") && (d = Math.min(d, -h)), (p && a === "nw" || a === "n" || a === "ne") && (l = Math.min(l, -p));
+    const r = this.getPointRegion(i, t.ord, h, p), d = t.ord || r;
+    let a = t.clientX - t.startClientX, g = t.clientY - t.startClientY;
+    (h && d === "nw" || d === "w" || d === "sw") && (a = Math.min(a, -h)), (p && d === "nw" || d === "n" || d === "ne") && (g = Math.min(g, -p));
     const c = {
       unit: "px",
       x: 0,
@@ -426,8 +426,8 @@ const X = class S extends Ee {
       width: 0,
       height: 0
     };
-    r === "ne" ? (c.x = t.startCropX, c.width = d, e ? (c.height = c.width / e, c.y = t.startCropY - c.height) : (c.height = Math.abs(l), c.y = t.startCropY - c.height)) : r === "se" ? (c.x = t.startCropX, c.y = t.startCropY, c.width = d, e ? c.height = c.width / e : c.height = l) : r === "sw" ? (c.x = t.startCropX + d, c.y = t.startCropY, c.width = Math.abs(d), e ? c.height = c.width / e : c.height = l) : r === "nw" && (c.x = t.startCropX + d, c.width = Math.abs(d), e ? (c.height = c.width / e, c.y = t.startCropY - c.height) : (c.height = Math.abs(l), c.y = t.startCropY + l));
-    const C = re(
+    r === "ne" ? (c.x = t.startCropX, c.width = a, e ? (c.height = c.width / e, c.y = t.startCropY - c.height) : (c.height = Math.abs(g), c.y = t.startCropY - c.height)) : r === "se" ? (c.x = t.startCropX, c.y = t.startCropY, c.width = a, e ? c.height = c.width / e : c.height = g) : r === "sw" ? (c.x = t.startCropX + a, c.y = t.startCropY, c.width = Math.abs(a), e ? c.height = c.width / e : c.height = g) : r === "nw" && (c.x = t.startCropX + a, c.width = Math.abs(a), e ? (c.height = c.width / e, c.y = t.startCropY - c.height) : (c.height = Math.abs(g), c.y = t.startCropY + g));
+    const C = oe(
       c,
       e,
       r,
@@ -438,7 +438,7 @@ const X = class S extends Ee {
       o,
       n
     );
-    return e || S.xyOrds.indexOf(a) > -1 ? s = C : S.xOrds.indexOf(a) > -1 ? (s.x = C.x, s.width = C.width) : S.yOrds.indexOf(a) > -1 && (s.y = C.y, s.height = C.height), s.x = j(s.x, 0, i.width - s.width), s.y = j(s.y, 0, i.height - s.height), s;
+    return e || S.xyOrds.indexOf(d) > -1 ? s = C : S.xOrds.indexOf(d) > -1 ? (s.x = C.x, s.width = C.width) : S.yOrds.indexOf(d) > -1 && (s.y = C.y, s.height = C.height), s.x = A(s.x, 0, i.width - s.width), s.y = A(s.y, 0, i.height - s.height), s;
   }
   renderCropSelection() {
     const {
@@ -547,17 +547,17 @@ const X = class S extends Ee {
       );
   }
   makePixelCrop(t) {
-    const e = { ...V, ...this.props.crop || {} };
+    const e = { ...Q, ...this.props.crop || {} };
     return _(e, t.width, t.height);
   }
   render() {
-    const { aspect: t, children: e, circularCrop: o, className: n, crop: i, disabled: h, locked: p, style: s, ruleOfThirds: r } = this.props, { cropIsActive: a, newCropIsBeingDrawn: d } = this.state, l = i ? this.renderCropSelection() : null, c = He(
+    const { aspect: t, children: e, circularCrop: o, className: n, crop: i, disabled: h, locked: p, style: s, ruleOfThirds: r } = this.props, { cropIsActive: d, newCropIsBeingDrawn: a } = this.state, g = i ? this.renderCropSelection() : null, c = He(
       "ReactCrop",
       n,
-      a && "ReactCrop--active",
+      d && "ReactCrop--active",
       h && "ReactCrop--disabled",
       p && "ReactCrop--locked",
-      d && "ReactCrop--new-crop",
+      a && "ReactCrop--new-crop",
       i && t && "ReactCrop--fixed-aspect",
       i && o && "ReactCrop--circular-crop",
       i && r && "ReactCrop--rule-of-thirds",
@@ -582,7 +582,7 @@ const X = class S extends Ee {
         height: `${i.height}${i.unit}`,
         fill: "black"
       }
-    ))), /* @__PURE__ */ f.createElement("rect", { fill: "black", fillOpacity: 0.5, width: "100%", height: "100%", mask: `url(#hole-${this.instanceId})` })) : void 0, l);
+    ))), /* @__PURE__ */ f.createElement("rect", { fill: "black", fillOpacity: 0.5, width: "100%", height: "100%", mask: `url(#hole-${this.instanceId})` })) : void 0, g);
   }
 };
 X.xOrds = ["e", "w"], X.yOrds = ["n", "s"], X.xyOrds = ["nw", "ne", "se", "sw"], X.nudgeStep = 1, X.nudgeStepMedium = 10, X.nudgeStepLarge = 100, X.defaultProps = {
@@ -599,9 +599,9 @@ X.xOrds = ["e", "w"], X.yOrds = ["n", "s"], X.xyOrds = ["nw", "ne", "se", "sw"],
   }
 };
 let Ne = X;
-const oe = ve();
-function ke({
-  altText: g,
+const se = ve();
+function Se({
+  altText: l,
   className: t,
   src: e,
   width: o,
@@ -610,9 +610,10 @@ function ke({
   imageRef: h,
   startCrop: p,
   setStartCrop: s,
-  isFocused: r
+  isFocused: r,
+  nodeKey: d
 }) {
-  const [a, d] = O(null), [l, c] = O(null), [C, M] = O({
+  const [a, g] = W(null), [c, C] = W(null), [P, x] = W({
     //@ts-ignore
     unit: "px",
     // Can be 'px' or '%'
@@ -620,57 +621,60 @@ function ke({
     y: 25,
     width: 50,
     height: 50
-  }), x = () => {
+  }), [$] = ae(), K = () => {
     if (a) {
-      const R = h.current;
-      if (!R || !a)
+      const u = h.current;
+      if (!u || !a)
         return;
-      const u = R.naturalWidth / R.width, w = R.naturalHeight / R.height, m = new OffscreenCanvas(
-        a.width * u,
-        a.height * w
-      ), N = m.getContext("2d");
-      if (!N)
+      const m = u.naturalWidth / u.width, H = u.naturalHeight / u.height, E = new OffscreenCanvas(
+        a.width * m,
+        a.height * H
+      ), b = E.getContext("2d");
+      if (!b)
         throw new Error("No 2D context available");
-      N.drawImage(
-        R,
-        a.x * u,
-        a.y * w,
-        a.width * u,
-        a.height * w,
+      b.drawImage(
+        u,
+        a.x * m,
+        a.y * H,
+        a.width * m,
+        a.height * H,
         0,
         0,
-        a.width * u,
-        a.height * w
-      ), m.convertToBlob({ type: "image/png" }).then(($) => {
-        const D = URL.createObjectURL($);
-        c(D), s(!1);
+        a.width * m,
+        a.height * H
+      ), E.convertToBlob({ type: "image/png" }).then((D) => {
+        const L = URL.createObjectURL(D);
+        C(L), s(!1), $.update(() => {
+          const G = q(d);
+          J(G) && G.setSrc(L);
+        });
       });
     }
   }, z = () => {
-    p || s((R) => {
-      if (R === !1) {
-        const u = h.current;
-        M({
+    p || s((u) => {
+      if (u === !1) {
+        const m = h.current;
+        x({
           unit: "px",
           // Can be 'px' or '%'
           x: 0,
           y: 0,
-          width: u.width,
-          height: u.height
+          width: m.width,
+          height: m.height
         });
       }
-      return !R;
+      return !u;
     });
-  }, W = Y(null), H = Y(null);
-  ee(() => {
-    a && (W.current = a);
+  }, j = Y(null), k = Y(null);
+  te(() => {
+    a && (j.current = a);
   }, [a]);
-  const L = (R) => {
-    H.current && !H.current.contains(R.target) && s(!1);
+  const w = (u) => {
+    k.current && !k.current.contains(u.target) && s(!1);
   };
-  return ee(() => (document.addEventListener("mousedown", L), () => {
-    document.removeEventListener("mousedown", L);
-  }), []), /* @__PURE__ */ v.jsxs("div", { ref: H, children: [
+  return te(() => (document.addEventListener("mousedown", w), () => {
+    document.removeEventListener("mousedown", w);
+  }), []), /* @__PURE__ */ v.jsxs("div", { ref: k, children: [
     r && /* @__PURE__ */ v.jsx(
       "button",
       {
@@ -685,22 +689,22 @@ function ke({
       {
         style: { zIndex: 999 },
         className: "image-caption-button",
-        onClick: () => x(),
+        onClick: () => K(),
         children: "Apply Crop"
       }
     ),
     p ? /* @__PURE__ */ v.jsx(
       Ne,
       {
-        crop: C,
-        onChange: (R) => M(R),
-        onComplete: (R) => d(R),
+        crop: P,
+        onChange: (u) => x(u),
+        onComplete: (u) => g(u),
         children: /* @__PURE__ */ v.jsx(
           "img",
           {
             className: t || void 0,
-            src: l || e,
-            alt: g,
+            src: c || e,
+            alt: l,
             ref: h,
             style: {
               height: n,
@@ -717,8 +721,8 @@ function ke({
         "img",
         {
           className: t || void 0,
-          src: l || e,
-          alt: g,
+          src: c || e,
+          alt: l,
           ref: h,
           style: {
             height: n,
@@ -732,7 +736,7 @@ function ke({
   ] });
 }
 function Ye({
-  src: g,
+  src: l,
   altText: t,
   nodeKey: e,
   width: o,
@@ -742,138 +746,139 @@ function Ye({
   showCaption: p,
   caption: s
 }) {
-  const r = Y(null), a = Y(null), [d, l, c] = he(e), [C, M] = O(!1), [x] = ce(), [z, W] = O(null), [H, L] = O(!1), R = Y(null), u = F(
-    (P) => {
-      if (d && U(G())) {
-        P.preventDefault();
-        const k = J(e);
-        if (Q(k))
-          return k.remove(), !0;
+  const r = Y(null), d = Y(null), [a, g, c] = ce(e), [C, P] = W(!1), [x] = ae(), [$, K] = W(null), [z, j] = W(!1), k = Y(null), w = T(
+    (M) => {
+      if (a && F(V())) {
+        M.preventDefault();
+        const N = q(e);
+        if (J(N))
+          return N.remove(), !0;
       }
       return !1;
     },
-    [d, e]
-  ), w = F(
-    (P) => {
-      const E = G(), k = a.current;
-      if (d && U(E) && E.getNodes().length === 1) {
+    [a, e]
+  ), u = T(
+    (M) => {
+      const R = V(), N = d.current;
+      if (a && F(R) && R.getNodes().length === 1) {
         if (p)
-          return te(null), P.preventDefault(), s.focus(), !0;
-        if (k !== null && k !== document.activeElement)
-          return P.preventDefault(), k.focus(), !0;
+          return ne(null), M.preventDefault(), s.focus(), !0;
+        if (N !== null && N !== document.activeElement)
+          return M.preventDefault(), N.focus(), !0;
       }
       return !1;
     },
-    [s, d, p]
-  ), m = F(
-    (P) => R.current === s || a.current === P.target ? (te(null), x.update(() => {
-      l(!0);
-      const E = x.getRootElement();
-      E !== null && E.focus();
+    [s, a, p]
+  ), m = T(
+    (M) => k.current === s || d.current === M.target ? (ne(null), x.update(() => {
+      g(!0);
+      const R = x.getRootElement();
+      R !== null && R.focus();
     }), !0) : !1,
-    [s, x, l]
-  ), N = F(
-    (P) => {
-      const E = P;
-      return C ? !0 : E.target === r.current ? (E.shiftKey ? l(!d) : (c(), l(!0)), !0) : !1;
+    [s, x, g]
+  ), H = T(
+    (M) => {
+      const R = M;
+      return C ? !0 : R.target === r.current ? (R.shiftKey ? g(!a) : (c(), g(!0)), !0) : !1;
     },
-    [C, d, l, c]
-  ), $ = F(
-    (P) => {
+    [C, a, g, c]
+  ), E = T(
+    (M) => {
       x.getEditorState().read(() => {
-        const E = G();
-        P.target.tagName === "IMG" && de(E) && E.getNodes().length === 1 && x.dispatchCommand(
-          oe,
-          P
+        const R = V();
+        M.target.tagName === "IMG" && de(R) && R.getNodes().length === 1 && x.dispatchCommand(
+          se,
+          M
         );
       });
     },
     [x]
   );
-  ee(() => {
-    let P = !0;
-    const E = x.getRootElement(), k = le(
-      x.registerUpdateListener(({ editorState: K }) => {
-        P && W(K.read(() => G()));
+  te(() => {
+    let M = !0;
+    const R = x.getRootElement(), N = le(
+      x.registerUpdateListener(({ editorState: U }) => {
+        M && K(U.read(() => V()));
       }),
       x.registerCommand(
         fe,
-        (K, ae) => (R.current = ae, !1),
+        (U, he) => (k.current = he, !1),
         I
       ),
       x.registerCommand(
         xe,
-        N,
+        H,
         I
       ),
       x.registerCommand(
-        oe,
-        N,
+        se,
+        H,
         I
       ),
       x.registerCommand(
         me,
-        (K) => K.target === r.current ? (K.preventDefault(), !0) : !1,
+        (U) => U.target === r.current ? (U.preventDefault(), !0) : !1,
         I
       ),
       x.registerCommand(
         we,
-        u,
+        w,
         I
       ),
       x.registerCommand(
         pe,
-        u,
+        w,
         I
       ),
-      x.registerCommand(ue, w, I),
+      x.registerCommand(ue, u, I),
       x.registerCommand(ge, m, I)
     );
-    return E == null || E.addEventListener("contextmenu", $), () => {
-      P = !1, k(), E == null || E.removeEventListener("contextmenu", $);
+    return R == null || R.addEventListener("contextmenu", E), () => {
+      M = !1, N(), R == null || R.removeEventListener("contextmenu", E);
     };
   }, [
     c,
     x,
     C,
-    d,
+    a,
     e,
-    u,
     w,
+    u,
     m,
-    N,
-    $,
-    l
+    H,
+    E,
+    g
   ]);
-  const D = () => {
+  const b = () => {
     x.update(() => {
-      const P = J(e);
-      Q(P) && P.setShowCaption(!0);
+      const M = q(e);
+      J(M) && M.setShowCaption(!0);
     });
-  }, b = (P, E) => {
+  }, D = (M, R) => {
     setTimeout(() => {
-      M(!1);
+      P(!1);
     }, 200), x.update(() => {
-      const k = J(e);
-      Q(k) && k.setWidthAndHeight(P, E);
+      const N = q(e);
+      console.log(N, "node"), J(N) && N.setWidthAndHeight(M, R);
     });
-  }, T = () => {
-    H || M(!0);
-  }, se = d && U(z) && !C, q = d || C;
+  }, L = () => {
+    z || P(!0);
+  }, G = a && F($) && !C, Z = a || C;
   return /* @__PURE__ */ v.jsx(Me, { fallback: null, children: /* @__PURE__ */ v.jsxs(v.Fragment, { children: [
-    /* @__PURE__ */ v.jsx("div", { draggable: se, children: /* @__PURE__ */ v.jsx(
-      ke,
+    /* @__PURE__ */ v.jsx("div", { draggable: G, children: /* @__PURE__ */ v.jsx(
+      Se,
       {
-        className: q ? `focused ${U(z) ? "draggable" : ""}` : null,
-        src: g,
+        className: Z ? `focused ${F($) ? "draggable" : ""}` : null,
+        src: l,
         altText: t,
         width: o,
         height: n,
         maxWidth: i,
         imageRef: r,
-        startCrop: H,
-        setStartCrop: L,
-        isFocused: q
+        startCrop: z,
+        setStartCrop: j,
+        isFocused: Z,
+        nodeKey: e
       }
     ) }),
     p && /* @__PURE__ */ v.jsx("div", { className: "image-caption-container", children: /* @__PURE__ */ v.jsx(De, { initialEditor: s, children: /* @__PURE__ */ v.jsx(
@@ -884,18 +889,18 @@ function Ye({
         ErrorBoundary: Ce
       }
     ) }) }),
-    !H && h && U(z) && q && /* @__PURE__ */ v.jsx(
+    !z && h && F($) && Z && /* @__PURE__ */ v.jsx(
       Pe,
       {
         showCaption: p,
-        setShowCaption: D,
+        setShowCaption: b,
         editor: x,
-        buttonRef: a,
+        buttonRef: d,
         maxWidth: i,
-        onResizeStart: H ? () => {
-        } : T,
-        onResizeEnd: H ? () => {
-        } : b,
+        onResizeStart: z ? () => {
+        } : L,
+        onResizeEnd: z ? () => {
+        } : D,
         captionsEnabled: !1,
         imageRef: r
       }
@@ -903,7 +908,7 @@ function Ye({
   ] }) });
 }
 export {
-  oe as RIGHT_CLICK_IMAGE_COMMAND,
+  se as RIGHT_CLICK_IMAGE_COMMAND,
   Ye as default
 };
-//# sourceMappingURL=ImageComponent-d7557a1f.js.map
+//# sourceMappingURL=ImageComponent-5fc589b6.js.map