sykpcomposer 1.19.68 → 1.19.70

package/dist/{ImageComponent-0dfe5bec.js → ImageComponent-41ba8efa.js}

@@ -1,11 +1,11 @@
-import { j as v, u as ce, a as ae, d as G, w as q, x as J, $ as Q, b as ne, c as de, e as le, f as ge, C as _, g as ue, k as pe, h as we, I as me, r as xe, i as fe, l as ye, L as Ce, P as ve, m as De, t as be } from "./index-fb76087e.js";
-import { d as Re } from "./LexicalNestedComposer.prod-04dec5eb.js";
-import f, { useRef as L, PureComponent as Ee, createRef as re, useState as K, useCallback as V, useEffect as te, Suspense as Me } from "react";
+import { j as D, u as ce, a as ae, x as V, $ as q, w as ee, d as J, b as ne, c as de, e as le, f as ge, C as B, g as ue, k as pe, h as we, I as me, r as xe, i as fe, l as ye, L as Ce, P as ve, m as De, t as be } from "./index-59f941bf.js";
+import { d as Re } from "./LexicalNestedComposer.prod-72630258.js";
+import y, { useRef as L, PureComponent as Ee, createRef as ie, useState as U, useCallback as G, useEffect as Q, Suspense as Me } from "react";
 import "react-dom";
-function ee(l, t, e) {
+function te(l, t, e) {
   return Math.min(Math.max(l, t), e);
 }
-const y = {
+const C = {
   east: 1,
   north: 8,
   south: 2,
@@ -17,12 +17,12 @@ function Pe({
   buttonRef: e,
   imageRef: o,
   maxWidth: n,
-  editor: r,
+  editor: i,
   showCaption: h,
   setShowCaption: p,
   captionsEnabled: s
 }) {
-  const i = L(null), d = L({
+  const r = L(null), d = L({
     priority: "",
     value: "default"
   }), a = L({
@@ -35,15 +35,15 @@ function Pe({
     startWidth: 0,
     startX: 0,
     startY: 0
-  }), g = r.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 = i.getRootElement(), c = g !== null ? g.getBoundingClientRect().width - 20 : 100, v = g !== null ? g.getBoundingClientRect().height - 20 : 100, P = 100, x = 100, H = (w) => {
+    const u = w === C.east || w === C.west, m = w === C.north || w === C.south, k = w & C.north && w & C.west || w & C.south && w & C.east, M = u ? "ew" : m ? "ns" : k ? "nwse" : "nesw";
     g !== null && g.style.setProperty(
       "cursor",
-      `${E}-resize`,
+      `${M}-resize`,
       "important"
     ), document.body !== null && (document.body.style.setProperty(
       "cursor",
-      `${E}-resize`,
+      `${M}-resize`,
       "important"
     ), d.current.value = document.body.style.getPropertyValue(
       "-webkit-user-select"
@@ -54,131 +54,131 @@ function Pe({
       "none",
       "important"
     ));
-  }, U = () => {
+  }, F = () => {
     g !== null && g.style.setProperty("cursor", "text"), document.body !== null && (document.body.style.setProperty("cursor", "default"), document.body.style.setProperty(
       "-webkit-user-select",
       d.current.value,
       d.current.priority
     ));
-  }, z = (w, u) => {
-    if (!r.isEditable())
+  }, N = (w, u) => {
+    if (!i.isEditable())
       return;
-    const m = o.current, H = i.current;
-    if (m !== null && H !== null) {
+    const m = o.current, k = r.current;
+    if (m !== null && k !== 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);
+      const { width: M, height: R } = m.getBoundingClientRect(), b = a.current;
+      b.startWidth = M, b.startHeight = R, b.ratio = M / R, b.currentWidth = M, b.currentHeight = R, b.startX = w.clientX, b.startY = w.clientY, b.isResizing = !0, b.direction = u, H(u), l(), k.classList.add("image-control-wrapper--resizing"), m.style.height = `${R}px`, m.style.width = `${M}px`, document.addEventListener("pointermove", j), document.addEventListener("pointerup", S);
     }
   }, j = (w) => {
-    const u = o.current, m = a.current, H = m.direction & (y.east | y.west), E = m.direction & (y.south | y.north);
+    const u = o.current, m = a.current, k = m.direction & (C.east | C.west), M = m.direction & (C.south | C.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,
+      if (k && M) {
+        let R = Math.floor(m.startX - w.clientX);
+        R = m.direction & C.east ? -R : R;
+        const b = te(
+          m.startWidth + R,
           P,
           c
-        ), I = D / m.ratio;
-        u.style.width = `${D}px`, u.style.height = `${I}px`, m.currentHeight = I, 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,
+        ), I = b / m.ratio;
+        u.style.width = `${b}px`, u.style.height = `${I}px`, m.currentHeight = I, m.currentWidth = b;
+      } else if (M) {
+        let R = Math.floor(m.startY - w.clientY);
+        R = m.direction & C.south ? -R : R;
+        const b = te(
+          m.startHeight + R,
           x,
-          C
+          v
         );
-        u.style.height = `${D}px`, u.style.maxHeight = `${D}px`, m.currentHeight = D;
+        u.style.height = `${b}px`, u.style.maxHeight = `${b}px`, m.currentHeight = b;
       } else {
-        let b = Math.floor(m.startX - w.clientX);
-        b = m.direction & y.east ? -b : b;
-        const D = ee(
-          m.startWidth + b,
+        let R = Math.floor(m.startX - w.clientX);
+        R = m.direction & C.east ? -R : R;
+        const b = te(
+          m.startWidth + R,
           P,
           c
         );
-        u.style.width = `${D}px`, u.style.maxWidth = `${D}px`, m.currentWidth = D;
+        u.style.width = `${b}px`, u.style.maxWidth = `${b}px`, m.currentWidth = b;
       }
       u && (u.setAttribute("width", `${m.currentWidth}`), u.setAttribute("height", `${m.currentHeight}`));
     }
-  }, k = () => {
-    const w = o.current, u = a.current, m = i.current;
+  }, S = () => {
+    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"), U(), t(H, E), document.removeEventListener("pointermove", j), document.removeEventListener("pointerup", k);
+      const k = u.currentWidth, M = 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"), F(), t(k, M), document.removeEventListener("pointermove", j), document.removeEventListener("pointerup", S);
     }
   };
-  return /* @__PURE__ */ v.jsxs("div", { ref: i, children: [
-    /* @__PURE__ */ v.jsx(
+  return /* @__PURE__ */ D.jsxs("div", { ref: r, children: [
+    /* @__PURE__ */ D.jsx(
       "div",
       {
         className: "image-resizer image-resizer-n",
         onPointerDown: (w) => {
-          z(w, y.north);
+          N(w, C.north);
         }
       }
     ),
-    /* @__PURE__ */ v.jsx(
+    /* @__PURE__ */ D.jsx(
       "div",
       {
         className: "image-resizer image-resizer-ne",
         onPointerDown: (w) => {
-          z(w, y.north | y.east);
+          N(w, C.north | C.east);
         }
       }
     ),
-    /* @__PURE__ */ v.jsx(
+    /* @__PURE__ */ D.jsx(
       "div",
       {
         className: "image-resizer image-resizer-e",
         onPointerDown: (w) => {
-          z(w, y.east);
+          N(w, C.east);
         }
       }
     ),
-    /* @__PURE__ */ v.jsx(
+    /* @__PURE__ */ D.jsx(
       "div",
       {
         className: "image-resizer image-resizer-se",
         onPointerDown: (w) => {
-          z(w, y.south | y.east);
+          N(w, C.south | C.east);
         }
       }
     ),
-    /* @__PURE__ */ v.jsx(
+    /* @__PURE__ */ D.jsx(
       "div",
       {
         className: "image-resizer image-resizer-s",
         onPointerDown: (w) => {
-          z(w, y.south);
+          N(w, C.south);
         }
       }
     ),
-    /* @__PURE__ */ v.jsx(
+    /* @__PURE__ */ D.jsx(
       "div",
       {
         className: "image-resizer image-resizer-sw",
         onPointerDown: (w) => {
-          z(w, y.south | y.west);
+          N(w, C.south | C.west);
         }
       }
     ),
-    /* @__PURE__ */ v.jsx(
+    /* @__PURE__ */ D.jsx(
       "div",
       {
         className: "image-resizer image-resizer-w",
         onPointerDown: (w) => {
-          z(w, y.west);
+          N(w, C.west);
         }
       }
     ),
-    /* @__PURE__ */ v.jsx(
+    /* @__PURE__ */ D.jsx(
       "div",
       {
         className: "image-resizer image-resizer-nw",
         onPointerDown: (w) => {
-          z(w, y.north | y.west);
+          N(w, C.north | C.west);
         }
       }
     )
@@ -190,7 +190,7 @@ const Z = {
   width: 0,
   height: 0,
   unit: "px"
-}, B = (l, t, e) => Math.min(Math.max(l, t), e), He = (...l) => l.filter((t) => t && typeof t == "string").join(" "), ie = (l, t) => l === t || l.width === t.width && l.height === t.height && l.x === t.x && l.y === t.y && l.unit === t.unit;
+}, O = (l, t, e) => Math.min(Math.max(l, t), e), ke = (...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 W(l, t, e) {
   return l.unit === "%" ? { ...Z, ...l, unit: "%" } : {
     unit: "%",
@@ -209,32 +209,32 @@ function X(l, t, e) {
     height: l.height ? l.height * e / 100 : 0
   } : { ...Z, ...l, unit: "px" };
 }
-function oe(l, t, e, o, n, r = 0, h = 0, p = o, s = n) {
-  const i = { ...l };
-  let d = Math.min(r, 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 = r ? r / t : a, d = a * t, c = s / t)), i.y < 0 && (i.height = Math.max(i.height + i.y, a), i.y = 0), i.x < 0 && (i.width = Math.max(i.width + i.x, d), i.x = 0);
-  const C = o - (i.x + i.width);
-  C < 0 && (i.x = Math.min(i.x, o - d), i.width += C);
-  const P = n - (i.y + i.height);
-  if (P < 0 && (i.y = Math.min(i.y, n - a), i.height += P), i.width < d && ((e === "sw" || e == "nw") && (i.x -= d - i.width), i.width = d), i.height < a && ((e === "nw" || e == "ne") && (i.y -= a - i.height), i.height = a), i.width > g && ((e === "sw" || e == "nw") && (i.x -= g - i.width), i.width = g), i.height > c && ((e === "nw" || e == "ne") && (i.y -= c - i.height), i.height = c), t) {
-    const x = i.width / i.height;
+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 v = o - (r.x + r.width);
+  v < 0 && (r.x = Math.min(r.x, o - d), r.width += v);
+  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 $ = Math.max(i.width / t, a);
-      (e === "nw" || e == "ne") && (i.y -= $ - i.height), i.height = $;
+      const H = Math.max(r.width / t, a);
+      (e === "nw" || e == "ne") && (r.y -= H - r.height), r.height = H;
     } else if (x > t) {
-      const $ = Math.max(i.height * t, d);
-      (e === "sw" || e == "nw") && (i.x -= $ - i.width), i.width = $;
+      const H = Math.max(r.height * t, d);
+      (e === "sw" || e == "nw") && (r.x -= H - r.width), r.width = H;
     }
   }
-  return i;
+  return r;
 }
-function $e(l, t, e, o) {
+function He(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 O = { capture: !0, passive: !1 };
-let ze = 0;
-const Y = class S extends Ee {
+const K = { capture: !0, passive: !1 };
+let Ne = 0;
+const Y = class z extends Ee {
   constructor() {
     super(...arguments), this.docMoveBound = !1, this.mouseDownOnCrop = !1, this.dragStarted = !1, this.evData = {
       startClientX: 0,
@@ -244,27 +244,27 @@ const Y = class S extends Ee {
       clientX: 0,
       clientY: 0,
       isResize: !0
-    }, this.componentRef = re(), this.mediaRef = re(), this.initChangeCalled = !1, this.instanceId = `rc-${ze++}`, this.state = {
+    }, this.componentRef = ie(), this.mediaRef = ie(), this.initChangeCalled = !1, this.instanceId = `rc-${Ne++}`, this.state = {
       cropIsActive: !1,
       newCropIsBeingDrawn: !1
     }, this.onCropPointerDown = (t) => {
       const { crop: e, disabled: o } = this.props, n = this.getBox();
       if (!e)
         return;
-      const r = X(e, n.width, n.height);
+      const i = X(e, n.width, n.height);
       if (o)
         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, i = t.clientY, d = r.x, a = r.y;
+      let s = t.clientX, r = t.clientY, d = i.x, a = i.y;
       if (h) {
         const g = t.clientX - n.x, c = t.clientY - n.y;
-        let C = 0, P = 0;
-        h === "ne" || h == "e" ? (C = g - (r.x + r.width), P = c - r.y, d = r.x, a = r.y + r.height) : h === "se" || h === "s" ? (C = g - (r.x + r.width), P = c - (r.y + r.height), d = r.x, a = r.y) : h === "sw" || h == "w" ? (C = g - r.x, P = c - (r.y + r.height), d = r.x + r.width, a = r.y) : (h === "nw" || h == "n") && (C = g - r.x, P = c - r.y, d = r.x + r.width, a = r.y + r.height), s = d + n.x + C, i = a + n.y + P;
+        let v = 0, P = 0;
+        h === "ne" || h == "e" ? (v = g - (i.x + i.width), P = c - i.y, d = i.x, a = i.y + i.height) : h === "se" || h === "s" ? (v = g - (i.x + i.width), P = c - (i.y + i.height), d = i.x, a = i.y) : h === "sw" || h == "w" ? (v = g - i.x, P = c - (i.y + i.height), d = i.x + i.width, a = i.y) : (h === "nw" || h == "n") && (v = g - i.x, P = c - i.y, d = i.x + i.width, a = i.y + i.height), s = d + n.x + v, r = a + n.y + P;
       }
       this.evData = {
         startClientX: s,
-        startClientY: i,
+        startClientY: r,
         startCropX: d,
         startCropY: a,
         clientX: t.clientX,
@@ -273,14 +273,14 @@ const Y = class S extends Ee {
         ord: h
       }, this.mouseDownOnCrop = !0, this.setState({ cropIsActive: !0 });
     }, this.onComponentPointerDown = (t) => {
-      const { crop: e, disabled: o, locked: n, keepSelection: r, onChange: h } = this.props, p = this.getBox();
-      if (o || n || r && e)
+      const { crop: e, disabled: o, locked: n, keepSelection: i, onChange: h } = this.props, p = this.getBox();
+      if (o || n || i && e)
         return;
       t.cancelable && t.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: !0 });
-      const s = t.clientX - p.x, i = t.clientY - p.y, d = {
+      const s = t.clientX - p.x, r = t.clientY - p.y, d = {
         unit: "px",
         x: s,
-        y: i,
+        y: r,
         width: 0,
         height: 0
       };
@@ -288,56 +288,56 @@ const Y = class S extends Ee {
         startClientX: t.clientX,
         startClientY: t.clientY,
         startCropX: s,
-        startCropY: i,
+        startCropY: r,
         clientX: t.clientX,
         clientY: t.clientY,
         isResize: !0
       }, this.mouseDownOnCrop = !0, h(X(d, p.width, p.height), W(d, p.width, p.height)), this.setState({ cropIsActive: !0, newCropIsBeingDrawn: !0 });
     }, this.onDocPointerMove = (t) => {
-      const { crop: e, disabled: o, onChange: n, onDragStart: r } = this.props, h = this.getBox();
+      const { crop: e, disabled: o, onChange: n, onDragStart: i } = this.props, h = this.getBox();
       if (o || !e || !this.mouseDownOnCrop)
         return;
-      t.cancelable && t.preventDefault(), this.dragStarted || (this.dragStarted = !0, r && r(t));
+      t.cancelable && t.preventDefault(), this.dragStarted || (this.dragStarted = !0, i && i(t));
       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(
         X(s, h.width, h.height),
         W(s, h.width, h.height)
       );
     }, this.onComponentKeyDown = (t) => {
-      const { crop: e, disabled: o, onChange: n, onComplete: r } = this.props;
+      const { crop: e, disabled: o, onChange: n, onComplete: i } = this.props;
       if (o)
         return;
       const h = t.key;
       let p = !1;
       if (!e)
         return;
-      const s = this.getBox(), i = this.makePixelCrop(s), d = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? S.nudgeStepLarge : t.shiftKey ? S.nudgeStepMedium : S.nudgeStep;
-      if (h === "ArrowLeft" ? (i.x -= d, p = !0) : h === "ArrowRight" ? (i.x += d, p = !0) : h === "ArrowUp" ? (i.y -= d, p = !0) : h === "ArrowDown" && (i.y += d, p = !0), p) {
-        t.cancelable && t.preventDefault(), i.x = B(i.x, 0, s.width - i.width), i.y = B(i.y, 0, s.height - i.height);
-        const a = X(i, s.width, s.height), g = W(i, s.width, s.height);
-        n(a, g), r && r(a, g);
+      const s = this.getBox(), r = this.makePixelCrop(s), d = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? z.nudgeStepLarge : t.shiftKey ? z.nudgeStepMedium : z.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 = O(r.x, 0, s.width - r.width), r.y = O(r.y, 0, s.height - r.height);
+        const a = X(r, s.width, s.height), g = W(r, s.width, s.height);
+        n(a, g), i && i(a, g);
       }
     }, this.onHandlerKeyDown = (t, e) => {
       const {
         aspect: o = 0,
         crop: n,
-        disabled: r,
+        disabled: i,
         minWidth: h = 0,
         minHeight: p = 0,
         maxWidth: s,
-        maxHeight: i,
+        maxHeight: r,
         onChange: d,
         onComplete: a
       } = this.props, g = this.getBox();
-      if (r || !n)
+      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 = X(n, g.width, g.height), P = $e(C, t.key, c, e), x = oe(
+      const c = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? z.nudgeStepLarge : t.shiftKey ? z.nudgeStepMedium : z.nudgeStep, v = X(n, g.width, g.height), P = He(v, t.key, c, e), x = oe(
         P,
         o,
         e,
@@ -346,15 +346,15 @@ const Y = class S extends Ee {
         h,
         p,
         s,
-        i
+        r
       );
-      if (!ie(n, x)) {
-        const $ = W(x, g.width, g.height);
-        d(x, $), a && a(x, $);
+      if (!re(n, x)) {
+        const H = W(x, g.width, g.height);
+        d(x, H), a && a(x, H);
       }
     }, this.onDocPointerDone = (t) => {
-      const { crop: e, disabled: o, onComplete: n, onDragEnd: r } = this.props, h = this.getBox();
-      this.unbindDocMove(), !(o || !e) && this.mouseDownOnCrop && (this.mouseDownOnCrop = !1, this.dragStarted = !1, r && r(t), n && n(X(e, h.width, h.height), W(e, h.width, h.height)), this.setState({ cropIsActive: !1, newCropIsBeingDrawn: !1 }));
+      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(X(e, h.width, h.height), W(e, h.width, h.height)), this.setState({ cropIsActive: !1, newCropIsBeingDrawn: !1 }));
     }, this.onDragFocus = () => {
       var t;
       (t = this.componentRef.current) == null || t.scrollTo(0, 0);
@@ -369,24 +369,24 @@ const Y = class S extends Ee {
     const t = this.mediaRef.current;
     if (!t)
       return { x: 0, y: 0, width: 0, height: 0 };
-    const { x: e, y: o, width: n, height: r } = t.getBoundingClientRect();
-    return { x: e, y: o, width: n, height: r };
+    const { x: e, y: o, width: n, height: i } = t.getBoundingClientRect();
+    return { x: e, y: o, width: n, height: i };
   }
   componentDidUpdate(t) {
     const { crop: e, onComplete: o } = this.props;
     if (o && !t.crop && e) {
-      const { width: n, height: r } = this.getBox();
-      n && r && o(X(e, n, r), W(e, n, r));
+      const { width: n, height: i } = this.getBox();
+      n && i && o(X(e, n, i), W(e, n, i));
     }
   }
   componentWillUnmount() {
     this.resizeObserver && this.resizeObserver.disconnect(), this.unbindDocMove();
   }
   bindDocMove() {
-    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);
+    this.docMoveBound || (this.document.addEventListener("pointermove", this.onDocPointerMove, K), this.document.addEventListener("pointerup", this.onDocPointerDone, K), this.document.addEventListener("pointercancel", this.onDocPointerDone, K), this.docMoveBound = !0);
   }
   unbindDocMove() {
-    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);
+    this.docMoveBound && (this.document.removeEventListener("pointermove", this.onDocPointerMove, K), this.document.removeEventListener("pointerup", this.onDocPointerDone, K), this.document.removeEventListener("pointercancel", this.onDocPointerDone, K), this.docMoveBound = !1);
   }
   getCropStyle() {
     const { crop: t } = this.props;
@@ -399,24 +399,24 @@ const Y = class S extends Ee {
       };
   }
   dragCrop() {
-    const { evData: t } = this, e = this.getBox(), o = this.makePixelCrop(e), n = t.clientX - t.startClientX, r = t.clientY - t.startClientY;
-    return o.x = B(t.startCropX + n, 0, e.width - o.width), o.y = B(t.startCropY + r, 0, e.height - o.height), o;
+    const { evData: t } = this, e = this.getBox(), o = this.makePixelCrop(e), n = t.clientX - t.startClientX, i = t.clientY - t.startClientY;
+    return o.x = O(t.startCropX + n, 0, e.width - o.width), o.y = O(t.startCropY + i, 0, e.height - o.height), o;
   }
   getPointRegion(t, e, o, n) {
-    const { evData: r } = this, h = r.clientX - t.x, p = r.clientY - t.y;
+    const { evData: i } = this, h = i.clientX - t.x, p = i.clientY - t.y;
     let s;
-    n && e ? s = e === "nw" || e === "n" || e === "ne" : s = p < r.startCropY;
-    let i;
-    return o && e ? i = e === "nw" || e === "w" || e === "sw" : i = h < r.startCropX, i ? s ? "nw" : "sw" : s ? "ne" : "se";
+    n && e ? s = e === "nw" || e === "n" || e === "ne" : s = p < i.startCropY;
+    let r;
+    return o && e ? r = e === "nw" || e === "w" || e === "sw" : r = h < i.startCropX, r ? s ? "nw" : "sw" : s ? "ne" : "se";
   }
   resolveMinDimensions(t, e, o = 0, n = 0) {
-    const r = Math.min(o, t.width), h = Math.min(n, t.height);
-    return !e || !r && !h ? [r, h] : e > 1 ? r ? [r, r / e] : [h * e, h] : h ? [h * e, h] : [r, r / e];
+    const i = Math.min(o, t.width), h = Math.min(n, t.height);
+    return !e || !i && !h ? [i, h] : e > 1 ? i ? [i, i / e] : [h * e, h] : h ? [h * e, h] : [i, i / e];
   }
   resizeCrop() {
-    const { evData: t } = this, { aspect: e = 0, maxWidth: o, maxHeight: n } = this.props, r = this.getBox(), [h, p] = this.resolveMinDimensions(r, e, this.props.minWidth, this.props.minHeight);
-    let s = this.makePixelCrop(r);
-    const i = this.getPointRegion(r, t.ord, h, p), d = t.ord || i;
+    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), 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 = {
@@ -426,31 +426,31 @@ const Y = class S extends Ee {
       width: 0,
       height: 0
     };
-    i === "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)) : i === "se" ? (c.x = t.startCropX, c.y = t.startCropY, c.width = a, e ? c.height = c.width / e : c.height = g) : i === "sw" ? (c.x = t.startCropX + a, c.y = t.startCropY, c.width = Math.abs(a), e ? c.height = c.width / e : c.height = g) : i === "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(
+    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 v = oe(
       c,
       e,
-      i,
-      r.width,
-      r.height,
+      r,
+      i.width,
+      i.height,
       h,
       p,
       o,
       n
     );
-    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 = B(s.x, 0, r.width - s.width), s.y = B(s.y, 0, r.height - s.height), s;
+    return e || z.xyOrds.indexOf(d) > -1 ? s = v : z.xOrds.indexOf(d) > -1 ? (s.x = v.x, s.width = v.width) : z.yOrds.indexOf(d) > -1 && (s.y = v.y, s.height = v.height), s.x = O(s.x, 0, i.width - s.width), s.y = O(s.y, 0, i.height - s.height), s;
   }
   renderCropSelection() {
     const {
-      ariaLabels: t = S.defaultProps.ariaLabels,
+      ariaLabels: t = z.defaultProps.ariaLabels,
       disabled: e,
       locked: o,
       renderSelectionAddon: n,
-      ruleOfThirds: r,
+      ruleOfThirds: i,
       crop: h
     } = this.props, p = this.getCropStyle();
     if (h)
-      return /* @__PURE__ */ f.createElement(
+      return /* @__PURE__ */ y.createElement(
         "div",
         {
           style: p,
@@ -461,7 +461,7 @@ const Y = class S extends Ee {
           onKeyDown: this.onComponentKeyDown,
           role: "group"
         },
-        !e && !o && /* @__PURE__ */ f.createElement("div", { className: "ReactCrop__drag-elements", onFocus: this.onDragFocus }, /* @__PURE__ */ f.createElement("div", { className: "ReactCrop__drag-bar ord-n", "data-ord": "n" }), /* @__PURE__ */ f.createElement("div", { className: "ReactCrop__drag-bar ord-e", "data-ord": "e" }), /* @__PURE__ */ f.createElement("div", { className: "ReactCrop__drag-bar ord-s", "data-ord": "s" }), /* @__PURE__ */ f.createElement("div", { className: "ReactCrop__drag-bar ord-w", "data-ord": "w" }), /* @__PURE__ */ f.createElement(
+        !e && !o && /* @__PURE__ */ y.createElement("div", { className: "ReactCrop__drag-elements", onFocus: this.onDragFocus }, /* @__PURE__ */ y.createElement("div", { className: "ReactCrop__drag-bar ord-n", "data-ord": "n" }), /* @__PURE__ */ y.createElement("div", { className: "ReactCrop__drag-bar ord-e", "data-ord": "e" }), /* @__PURE__ */ y.createElement("div", { className: "ReactCrop__drag-bar ord-s", "data-ord": "s" }), /* @__PURE__ */ y.createElement("div", { className: "ReactCrop__drag-bar ord-w", "data-ord": "w" }), /* @__PURE__ */ y.createElement(
           "div",
           {
             className: "ReactCrop__drag-handle ord-nw",
@@ -471,7 +471,7 @@ const Y = class S extends Ee {
             onKeyDown: (s) => this.onHandlerKeyDown(s, "nw"),
             role: "button"
           }
-        ), /* @__PURE__ */ f.createElement(
+        ), /* @__PURE__ */ y.createElement(
           "div",
           {
             className: "ReactCrop__drag-handle ord-n",
@@ -481,7 +481,7 @@ const Y = class S extends Ee {
             onKeyDown: (s) => this.onHandlerKeyDown(s, "n"),
             role: "button"
           }
-        ), /* @__PURE__ */ f.createElement(
+        ), /* @__PURE__ */ y.createElement(
           "div",
           {
             className: "ReactCrop__drag-handle ord-ne",
@@ -491,7 +491,7 @@ const Y = class S extends Ee {
             onKeyDown: (s) => this.onHandlerKeyDown(s, "ne"),
             role: "button"
           }
-        ), /* @__PURE__ */ f.createElement(
+        ), /* @__PURE__ */ y.createElement(
           "div",
           {
             className: "ReactCrop__drag-handle ord-e",
@@ -501,7 +501,7 @@ const Y = class S extends Ee {
             onKeyDown: (s) => this.onHandlerKeyDown(s, "e"),
             role: "button"
           }
-        ), /* @__PURE__ */ f.createElement(
+        ), /* @__PURE__ */ y.createElement(
           "div",
           {
             className: "ReactCrop__drag-handle ord-se",
@@ -511,7 +511,7 @@ const Y = class S extends Ee {
             onKeyDown: (s) => this.onHandlerKeyDown(s, "se"),
             role: "button"
           }
-        ), /* @__PURE__ */ f.createElement(
+        ), /* @__PURE__ */ y.createElement(
           "div",
           {
             className: "ReactCrop__drag-handle ord-s",
@@ -521,7 +521,7 @@ const Y = class S extends Ee {
             onKeyDown: (s) => this.onHandlerKeyDown(s, "s"),
             role: "button"
           }
-        ), /* @__PURE__ */ f.createElement(
+        ), /* @__PURE__ */ y.createElement(
           "div",
           {
             className: "ReactCrop__drag-handle ord-sw",
@@ -531,7 +531,7 @@ const Y = class S extends Ee {
             onKeyDown: (s) => this.onHandlerKeyDown(s, "sw"),
             role: "button"
           }
-        ), /* @__PURE__ */ f.createElement(
+        ), /* @__PURE__ */ y.createElement(
           "div",
           {
             className: "ReactCrop__drag-handle ord-w",
@@ -542,8 +542,8 @@ const Y = class S extends Ee {
             role: "button"
           }
         )),
-        n && /* @__PURE__ */ f.createElement("div", { className: "ReactCrop__selection-addon", onPointerDown: (s) => s.stopPropagation() }, n(this.state)),
-        r && /* @__PURE__ */ f.createElement(f.Fragment, null, /* @__PURE__ */ f.createElement("div", { className: "ReactCrop__rule-of-thirds-hz" }), /* @__PURE__ */ f.createElement("div", { className: "ReactCrop__rule-of-thirds-vt" }))
+        n && /* @__PURE__ */ y.createElement("div", { className: "ReactCrop__selection-addon", onPointerDown: (s) => s.stopPropagation() }, n(this.state)),
+        i && /* @__PURE__ */ y.createElement(y.Fragment, null, /* @__PURE__ */ y.createElement("div", { className: "ReactCrop__rule-of-thirds-hz" }), /* @__PURE__ */ y.createElement("div", { className: "ReactCrop__rule-of-thirds-vt" }))
       );
   }
   makePixelCrop(t) {
@@ -551,38 +551,38 @@ const Y = class S extends Ee {
     return X(e, t.width, t.height);
   }
   render() {
-    const { aspect: t, children: e, circularCrop: o, className: n, crop: r, disabled: h, locked: p, style: s, ruleOfThirds: i } = this.props, { cropIsActive: d, newCropIsBeingDrawn: a } = this.state, g = r ? 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 = ke(
       "ReactCrop",
       n,
       d && "ReactCrop--active",
       h && "ReactCrop--disabled",
       p && "ReactCrop--locked",
       a && "ReactCrop--new-crop",
-      r && t && "ReactCrop--fixed-aspect",
-      r && o && "ReactCrop--circular-crop",
-      r && i && "ReactCrop--rule-of-thirds",
-      !this.dragStarted && r && !r.width && !r.height && "ReactCrop--invisible-crop",
+      i && t && "ReactCrop--fixed-aspect",
+      i && o && "ReactCrop--circular-crop",
+      i && r && "ReactCrop--rule-of-thirds",
+      !this.dragStarted && i && !i.width && !i.height && "ReactCrop--invisible-crop",
       o && "ReactCrop--no-animate"
     );
-    return /* @__PURE__ */ f.createElement("div", { ref: this.componentRef, className: c, style: s }, /* @__PURE__ */ f.createElement("div", { ref: this.mediaRef, className: "ReactCrop__child-wrapper", onPointerDown: this.onComponentPointerDown }, e), r ? /* @__PURE__ */ f.createElement("svg", { className: "ReactCrop__crop-mask", width: "100%", height: "100%" }, /* @__PURE__ */ f.createElement("defs", null, /* @__PURE__ */ f.createElement("mask", { id: `hole-${this.instanceId}` }, /* @__PURE__ */ f.createElement("rect", { width: "100%", height: "100%", fill: "white" }), o ? /* @__PURE__ */ f.createElement(
+    return /* @__PURE__ */ y.createElement("div", { ref: this.componentRef, className: c, style: s }, /* @__PURE__ */ y.createElement("div", { ref: this.mediaRef, className: "ReactCrop__child-wrapper", onPointerDown: this.onComponentPointerDown }, e), i ? /* @__PURE__ */ y.createElement("svg", { className: "ReactCrop__crop-mask", width: "100%", height: "100%" }, /* @__PURE__ */ y.createElement("defs", null, /* @__PURE__ */ y.createElement("mask", { id: `hole-${this.instanceId}` }, /* @__PURE__ */ y.createElement("rect", { width: "100%", height: "100%", fill: "white" }), o ? /* @__PURE__ */ y.createElement(
       "ellipse",
       {
-        cx: `${r.x + r.width / 2}${r.unit}`,
-        cy: `${r.y + r.height / 2}${r.unit}`,
-        rx: `${r.width / 2}${r.unit}`,
-        ry: `${r.height / 2}${r.unit}`,
+        cx: `${i.x + i.width / 2}${i.unit}`,
+        cy: `${i.y + i.height / 2}${i.unit}`,
+        rx: `${i.width / 2}${i.unit}`,
+        ry: `${i.height / 2}${i.unit}`,
         fill: "black"
       }
-    ) : /* @__PURE__ */ f.createElement(
+    ) : /* @__PURE__ */ y.createElement(
       "rect",
       {
-        x: `${r.x}${r.unit}`,
-        y: `${r.y}${r.unit}`,
-        width: `${r.width}${r.unit}`,
-        height: `${r.height}${r.unit}`,
+        x: `${i.x}${i.unit}`,
+        y: `${i.y}${i.unit}`,
+        width: `${i.width}${i.unit}`,
+        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, g);
+    ))), /* @__PURE__ */ y.createElement("rect", { fill: "black", fillOpacity: 0.5, width: "100%", height: "100%", mask: `url(#hole-${this.instanceId})` })) : void 0, g);
   }
 };
 Y.xOrds = ["e", "w"], Y.yOrds = ["n", "s"], Y.xyOrds = ["nw", "ne", "se", "sw"], Y.nudgeStep = 1, Y.nudgeStepMedium = 10, Y.nudgeStepLarge = 100, Y.defaultProps = {
@@ -598,22 +598,22 @@ Y.xOrds = ["e", "w"], Y.yOrds = ["n", "s"], Y.xyOrds = ["nw", "ne", "se", "sw"],
     wDragHandle: "Use the up and down arrow keys to move the west drag handle to change the crop selection area"
   }
 };
-let Ne = Y;
+let $e = Y;
 const se = be();
-function Se({
+function ze({
   altText: l,
   className: t,
   src: e,
   width: o,
   height: n,
-  maxWidth: r,
+  maxWidth: i,
   imageRef: h,
   startCrop: p,
   setStartCrop: s,
-  isFocused: i,
+  isFocused: r,
   nodeKey: d
 }) {
-  const [a, g] = K(null), [c, C] = K(null), [P, x] = K({
+  const [a, g] = U(null), [c, v] = U(null), [P, x] = U({
     //@ts-ignore
     unit: "px",
     // Can be 'px' or '%'
@@ -621,42 +621,42 @@ function Se({
     y: 25,
     width: 50,
     height: 50
-  }), [$] = ae(), U = () => {
+  }), [H] = ae(), F = () => {
     if (a) {
       const u = h.current;
       if (!u || !a)
         return;
-      const m = u.naturalWidth / u.width, H = u.naturalHeight / u.height, E = new OffscreenCanvas(
+      const m = u.naturalWidth / u.width, k = u.naturalHeight / u.height, M = new OffscreenCanvas(
         a.width * m,
-        a.height * H
-      ), b = E.getContext("2d");
-      if (!b)
+        a.height * k
+      ), R = M.getContext("2d");
+      if (!R)
         throw new Error("No 2D context available");
-      b.drawImage(
+      R.drawImage(
         u,
         a.x * m,
-        a.y * H,
+        a.y * k,
         a.width * m,
-        a.height * H,
+        a.height * k,
         0,
         0,
         a.width * m,
-        a.height * H
-      ), E.convertToBlob({ type: "image/png" }).then((D) => {
+        a.height * k
+      ), M.convertToBlob({ type: "image/png" }).then((b) => {
         s(!1);
         const I = new FileReader();
         I.onload = () => {
-          const F = I.result;
-          C(F), $.update(() => {
-            const A = J(d);
-            Q(A) && F && A.setSrc(F);
+          const T = I.result;
+          v(T), H.update(() => {
+            const A = V(d);
+            q(A) && T && A.setSrc(T);
           });
         }, I.onerror = () => {
           console.log("error");
-        }, I.readAsDataURL(D);
+        }, I.readAsDataURL(b);
       });
     }
-  }, z = () => {
+  }, N = () => {
     p || s((u) => {
       if (u === !1) {
         const m = h.current;
@@ -671,41 +671,41 @@ function Se({
       }
       return !u;
     });
-  }, j = L(null), k = L(null);
-  te(() => {
+  }, j = L(null), S = L(null);
+  Q(() => {
     a && (j.current = a);
   }, [a]);
   const w = (u) => {
-    k.current && !k.current.contains(u.target) && s(!1);
+    S.current && !S.current.contains(u.target) && s(!1);
   };
-  return te(() => (document.addEventListener("mousedown", w), () => {
+  return Q(() => (document.addEventListener("mousedown", w), () => {
     document.removeEventListener("mousedown", w);
-  }), []), /* @__PURE__ */ v.jsxs("div", { ref: k, children: [
-    i && /* @__PURE__ */ v.jsx(
+  }), []), /* @__PURE__ */ D.jsxs("div", { ref: S, children: [
+    r && /* @__PURE__ */ D.jsx(
       "button",
       {
         style: { zIndex: 999 },
         className: "image-caption-button",
-        onClick: () => z(),
+        onClick: () => N(),
         children: "Crop"
       }
     ),
-    p && /* @__PURE__ */ v.jsx(
+    p && /* @__PURE__ */ D.jsx(
       "button",
       {
         style: { zIndex: 999 },
         className: "image-caption-button",
-        onClick: () => U(),
+        onClick: () => F(),
         children: "Apply Crop"
       }
     ),
-    p ? /* @__PURE__ */ v.jsx(
-      Ne,
+    p ? /* @__PURE__ */ D.jsx(
+      $e,
       {
         crop: P,
         onChange: (u) => x(u),
         onComplete: (u) => g(u),
-        children: /* @__PURE__ */ v.jsx(
+        children: /* @__PURE__ */ D.jsx(
           "img",
           {
             className: t || void 0,
@@ -714,16 +714,17 @@ function Se({
             ref: h,
             style: {
               height: n,
-              maxWidth: r,
+              maxWidth: i,
               width: o
             },
-            draggable: "false"
+            draggable: "false",
+            crossOrigin: "anonymous"
           }
         )
       }
     ) : (
       // When startCrop is false, show the cropped image or original image
-      /* @__PURE__ */ v.jsx(
+      /* @__PURE__ */ D.jsx(
         "img",
         {
           className: t || void 0,
@@ -732,10 +733,11 @@ function Se({
           ref: h,
           style: {
             height: n,
-            maxWidth: r,
+            maxWidth: i,
             width: o
           },
-          draggable: "false"
+          draggable: "false",
+          crossOrigin: "anonymous"
         }
       )
     )
@@ -747,168 +749,170 @@ function Ye({
   nodeKey: e,
   width: o,
   height: n,
-  maxWidth: r,
+  maxWidth: i,
   resizable: h,
   showCaption: p,
   caption: s
 }) {
-  const i = L(null), d = L(null), [a, g, c] = ce(e), [C, P] = K(!1), [x] = ae(), [$, U] = K(null), [z, j] = K(!1), k = L(null), w = V(
-    (M) => {
-      if (a && G(q())) {
-        M.preventDefault();
-        const N = J(e);
-        if (Q(N))
-          return N.remove(), !0;
-      }
-      return !1;
-    },
-    [a, e]
-  ), u = V(
-    (M) => {
-      const R = q(), N = d.current;
-      if (a && G(R) && R.getNodes().length === 1) {
+  const r = L(null), d = L(null), [a, g, c] = ce(e), [v, P] = U(!1), [x] = ae(), [H, F] = U(null), [N, j] = U(!1), S = L(null), w = G((E) => a ? (E.preventDefault(), x.update(() => {
+    const f = V(e);
+    q(f) && f.remove();
+  }), !0) : !1, [a, x, e]), u = G(
+    (E) => {
+      const f = ee(), $ = d.current;
+      if (a && J(f) && f.getNodes().length === 1) {
         if (p)
-          return ne(null), M.preventDefault(), s.focus(), !0;
-        if (N !== null && N !== document.activeElement)
-          return M.preventDefault(), N.focus(), !0;
+          return ne(null), E.preventDefault(), s.focus(), !0;
+        if ($ !== null && $ !== document.activeElement)
+          return E.preventDefault(), $.focus(), !0;
       }
       return !1;
     },
     [s, a, p]
-  ), m = V(
-    (M) => k.current === s || d.current === M.target ? (ne(null), x.update(() => {
+  ), m = G(
+    (E) => S.current === s || d.current === E.target ? (ne(null), x.update(() => {
       g(!0);
-      const R = x.getRootElement();
-      R !== null && R.focus();
+      const f = x.getRootElement();
+      f !== null && f.focus();
     }), !0) : !1,
     [s, x, g]
-  ), H = V(
-    (M) => {
-      const R = M;
-      return C ? !0 : R.target === i.current ? (R.shiftKey ? g(!a) : (c(), g(!0)), !0) : !1;
+  ), k = G(
+    (E) => {
+      const f = E;
+      return v ? !0 : f.target === r.current ? (f.shiftKey ? g(!a) : (c(), g(!0)), !0) : !1;
     },
-    [C, a, g, c]
-  ), E = V(
-    (M) => {
+    [v, a, g, c]
+  ), M = G(
+    (E) => {
       x.getEditorState().read(() => {
-        const R = q();
-        M.target.tagName === "IMG" && de(R) && R.getNodes().length === 1 && x.dispatchCommand(
+        const f = ee();
+        E.target.tagName === "IMG" && de(f) && f.getNodes().length === 1 && x.dispatchCommand(
           se,
-          M
+          E
         );
       });
     },
     [x]
   );
-  te(() => {
-    let M = !0;
-    const R = x.getRootElement(), N = le(
-      x.registerUpdateListener(({ editorState: T }) => {
-        M && U(T.read(() => q()));
+  Q(() => {
+    const E = ($) => {
+      ($.key === "Delete" || $.key === "Backspace") && a && ($.stopPropagation(), $.preventDefault(), x.update(() => {
+        const _ = V(e);
+        q(_) && _.remove();
+      }));
+    }, f = x.getRootElement();
+    return f == null || f.addEventListener("keydown", E), () => {
+      f == null || f.removeEventListener("keydown", E);
+    };
+  }, [a, x, e]), Q(() => {
+    let E = !0;
+    const f = x.getRootElement(), $ = le(
+      x.registerUpdateListener(({ editorState: _ }) => {
+        E && F(_.read(() => ee()));
       }),
       x.registerCommand(
         fe,
-        (T, he) => (k.current = he, !1),
-        _
+        (_, he) => (S.current = he, !1),
+        B
       ),
       x.registerCommand(
         xe,
-        H,
-        _
+        k,
+        B
       ),
       x.registerCommand(
         se,
-        H,
-        _
+        k,
+        B
       ),
       x.registerCommand(
         me,
-        (T) => T.target === i.current ? (T.preventDefault(), !0) : !1,
-        _
+        (_) => _.target === r.current ? (_.preventDefault(), !0) : !1,
+        B
       ),
       x.registerCommand(
         we,
         w,
-        _
+        4
       ),
       x.registerCommand(
         pe,
         w,
-        _
+        4
       ),
-      x.registerCommand(ue, u, _),
-      x.registerCommand(ge, m, _)
+      x.registerCommand(ue, u, B),
+      x.registerCommand(ge, m, B)
     );
-    return R == null || R.addEventListener("contextmenu", E), () => {
-      M = !1, N(), R == null || R.removeEventListener("contextmenu", E);
+    return f == null || f.addEventListener("contextmenu", M), () => {
+      E = !1, $(), f == null || f.removeEventListener("contextmenu", M);
     };
   }, [
     c,
     x,
-    C,
+    v,
     a,
     e,
-    w,
+    // onDelete,
     u,
     m,
-    H,
-    E,
+    k,
+    M,
     g
   ]);
-  const b = () => {
+  const R = () => {
     x.update(() => {
-      const M = J(e);
-      Q(M) && M.setShowCaption(!0);
+      const E = V(e);
+      q(E) && E.setShowCaption(!0);
     });
-  }, D = (M, R) => {
+  }, b = (E, f) => {
     setTimeout(() => {
       P(!1);
     }, 200), x.update(() => {
-      const N = J(e);
-      console.log(N, "node"), Q(N) && N.setWidthAndHeight(M, R);
+      const $ = V(e);
+      console.log($, "node"), q($) && $.setWidthAndHeight(E, f);
     });
   }, I = () => {
-    z || P(!0);
-  }, F = a && G($) && !C, A = a || C;
-  return /* @__PURE__ */ v.jsx(Me, { fallback: null, children: /* @__PURE__ */ v.jsxs(v.Fragment, { children: [
-    /* @__PURE__ */ v.jsx("div", { draggable: F, children: /* @__PURE__ */ v.jsx(
-      Se,
+    N || P(!0);
+  }, T = a && J(H) && !v, A = a || v;
+  return /* @__PURE__ */ D.jsx(Me, { fallback: null, children: /* @__PURE__ */ D.jsxs(D.Fragment, { children: [
+    /* @__PURE__ */ D.jsx("div", { draggable: T, children: /* @__PURE__ */ D.jsx(
+      ze,
       {
-        className: A ? `focused ${G($) ? "draggable" : ""}` : null,
+        className: A ? `focused ${J(H) ? "draggable" : ""}` : null,
         src: l,
         altText: t,
         width: o,
         height: n,
-        maxWidth: r,
-        imageRef: i,
-        startCrop: z,
+        maxWidth: i,
+        imageRef: r,
+        startCrop: N,
         setStartCrop: j,
         isFocused: A,
         nodeKey: e
       }
     ) }),
-    p && /* @__PURE__ */ v.jsx("div", { className: "image-caption-container", children: /* @__PURE__ */ v.jsx(Re, { initialEditor: s, children: /* @__PURE__ */ v.jsx(
+    p && /* @__PURE__ */ D.jsx("div", { className: "image-caption-container", children: /* @__PURE__ */ D.jsx(Re, { initialEditor: s, children: /* @__PURE__ */ D.jsx(
       ye,
       {
-        contentEditable: /* @__PURE__ */ v.jsx(Ce, { className: "ImageNode__contentEditable" }),
-        placeholder: /* @__PURE__ */ v.jsx(ve, { className: "ImageNode__placeholder", children: "Enter a caption..." }),
+        contentEditable: /* @__PURE__ */ D.jsx(Ce, { className: "ImageNode__contentEditable" }),
+        placeholder: /* @__PURE__ */ D.jsx(ve, { className: "ImageNode__placeholder", children: "Enter a caption..." }),
         ErrorBoundary: De
       }
     ) }) }),
-    !z && h && G($) && A && /* @__PURE__ */ v.jsx(
+    !N && h && J(H) && A && /* @__PURE__ */ D.jsx(
       Pe,
       {
         showCaption: p,
-        setShowCaption: b,
+        setShowCaption: R,
         editor: x,
         buttonRef: d,
-        maxWidth: r,
-        onResizeStart: z ? () => {
+        maxWidth: i,
+        onResizeStart: N ? () => {
         } : I,
-        onResizeEnd: z ? () => {
-        } : D,
+        onResizeEnd: N ? () => {
+        } : b,
         captionsEnabled: !1,
-        imageRef: i
+        imageRef: r
       }
     )
   ] }) });
@@ -917,4 +921,4 @@ export {
   se as RIGHT_CLICK_IMAGE_COMMAND,
   Ye as default
 };
-//# sourceMappingURL=ImageComponent-0dfe5bec.js.map
+//# sourceMappingURL=ImageComponent-41ba8efa.js.map