sykpcomposer 0.0.396 → 0.0.398

package/dist/{ImageComponent-fc39a03e.js → ImageComponent-ced58b97.js}

@@ -1,6 +1,6 @@
-import { j as D, u as ce, a as ae, $ as T, b as V, c as q, d as J, e as ne, f as de, m as le, S as ge, C as z, g as ue, D as pe, K as me, h as we, i as xe, k as Ce, R as fe, L as ye, P as De, l as ve, n as be } from "./index-75a3fc49.js";
-import { L as Re } from "./LexicalNestedComposer.esm-6289c7f2.js";
-import C, { useRef as A, PureComponent as Ee, createRef as ie, useState as B, useCallback as G, useEffect as te, Suspense as Me } from "react";
+import { j as v, u as ce, a as ae, $ as G, b as q, c as J, d as Q, e as ne, f as de, m as le, S as ge, C as z, g as ue, D as pe, K as we, h as me, i as xe, k as Ce, R as fe, L as ye, P as De, l as ve, n as be } from "./index-7c78a104.js";
+import { L as Re } from "./LexicalNestedComposer.esm-9f194204.js";
+import C, { useRef as Y, PureComponent as Ee, createRef as ie, useState as U, useCallback as V, useEffect as te, Suspense as Me } from "react";
 import "react-dom";
 function ee(l, t, e) {
   return Math.min(Math.max(l, t), e);
@@ -22,10 +22,10 @@ function Ne({
   setShowCaption: p,
   captionsEnabled: s
 }) {
-  const r = A(null), d = A({
+  const r = Y(null), d = Y({
     priority: "",
     value: "default"
-  }), a = A({
+  }), a = Y({
     currentHeight: 0,
     currentWidth: 0,
     direction: 0,
@@ -35,15 +35,15 @@ function Ne({
     startWidth: 0,
     startX: 0,
     startY: 0
-  }), g = i.getRootElement(), c = g !== null ? g.getBoundingClientRect().width - 20 : 100, y = g !== null ? g.getBoundingClientRect().height - 20 : 100, N = 100, x = 100, P = (m) => {
-    const u = m === f.east || m === f.west, w = m === f.north || m === f.south, _ = m & f.north && m & f.west || m & f.south && m & f.east, E = u ? "ew" : w ? "ns" : _ ? "nwse" : "nesw";
+  }), g = i.getRootElement(), c = g !== null ? g.getBoundingClientRect().width - 20 : 100, y = g !== null ? g.getBoundingClientRect().height - 20 : 100, N = 100, x = 100, P = (w) => {
+    const u = w === f.east || w === f.west, m = w === f.north || w === f.south, _ = w & f.north && w & f.west || w & f.south && w & f.east, M = u ? "ew" : m ? "ns" : _ ? "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,145 +54,145 @@ function Ne({
       "none",
       "important"
     ));
-  }, W = () => {
+  }, T = () => {
     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
     ));
-  }, S = (m, u) => {
+  }, S = (w, u) => {
     if (!i.isEditable())
       return;
-    const w = o.current, _ = r.current;
-    if (w !== null && _ !== null) {
-      m.preventDefault();
-      const { width: E, height: b } = w.getBoundingClientRect(), v = a.current;
-      v.startWidth = E, v.startHeight = b, v.ratio = E / b, v.currentWidth = E, v.currentHeight = b, v.startX = m.clientX, v.startY = m.clientY, v.isResizing = !0, v.direction = u, P(u), l(), _.classList.add("image-control-wrapper--resizing"), w.style.height = `${b}px`, w.style.width = `${E}px`, document.addEventListener("pointermove", X), document.addEventListener("pointerup", I);
+    const m = o.current, _ = r.current;
+    if (m !== null && _ !== null) {
+      w.preventDefault();
+      const { width: M, height: b } = m.getBoundingClientRect(), D = a.current;
+      D.startWidth = M, D.startHeight = b, D.ratio = M / b, D.currentWidth = M, D.currentHeight = b, D.startX = w.clientX, D.startY = w.clientY, D.isResizing = !0, D.direction = u, P(u), l(), _.classList.add("image-control-wrapper--resizing"), m.style.height = `${b}px`, m.style.width = `${M}px`, document.addEventListener("pointermove", k), document.addEventListener("pointerup", I);
     }
-  }, X = (m) => {
-    const u = o.current, w = a.current, _ = w.direction & (f.east | f.west), E = w.direction & (f.south | f.north);
-    if (u !== null && w.isResizing) {
-      if (_ && E) {
-        let b = Math.floor(w.startX - m.clientX);
-        b = w.direction & f.east ? -b : b;
-        const v = ee(
-          w.startWidth + b,
+  }, k = (w) => {
+    const u = o.current, m = a.current, _ = m.direction & (f.east | f.west), M = m.direction & (f.south | f.north);
+    if (u !== null && m.isResizing) {
+      if (_ && M) {
+        let b = Math.floor(m.startX - w.clientX);
+        b = m.direction & f.east ? -b : b;
+        const D = ee(
+          m.startWidth + b,
           N,
           c
-        ), L = v / w.ratio;
-        u.style.width = `${v}px`, u.style.height = `${L}px`, w.currentHeight = L, w.currentWidth = v;
-      } else if (E) {
-        let b = Math.floor(w.startY - m.clientY);
-        b = w.direction & f.south ? -b : b;
-        const v = ee(
-          w.startHeight + b,
+        ), X = D / m.ratio;
+        u.style.width = `${D}px`, u.style.height = `${X}px`, m.currentHeight = X, m.currentWidth = D;
+      } else if (M) {
+        let b = Math.floor(m.startY - w.clientY);
+        b = m.direction & f.south ? -b : b;
+        const D = ee(
+          m.startHeight + b,
           x,
           y
         );
-        u.style.height = `${v}px`, u.style.maxHeight = `${v}px`, w.currentHeight = v;
+        u.style.height = `${D}px`, u.style.maxHeight = `${D}px`, m.currentHeight = D;
       } else {
-        let b = Math.floor(w.startX - m.clientX);
-        b = w.direction & f.east ? -b : b;
-        const v = ee(
-          w.startWidth + b,
+        let b = Math.floor(m.startX - w.clientX);
+        b = m.direction & f.east ? -b : b;
+        const D = ee(
+          m.startWidth + b,
           N,
           c
         );
-        u.style.width = `${v}px`, u.style.maxWidth = `${v}px`, w.currentWidth = v;
+        u.style.width = `${D}px`, u.style.maxWidth = `${D}px`, m.currentWidth = D;
       }
-      u && (u.setAttribute("width", `${w.currentWidth}`), u.setAttribute("height", `${w.currentHeight}`));
+      u && (u.setAttribute("width", `${m.currentWidth}`), u.setAttribute("height", `${m.currentHeight}`));
     }
   }, I = () => {
-    const m = o.current, u = a.current, w = r.current;
-    if (m !== null && w !== null && u.isResizing) {
-      const _ = 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, w.classList.remove("image-control-wrapper--resizing"), W(), t(_, E), document.removeEventListener("pointermove", X), document.removeEventListener("pointerup", I);
+    const w = o.current, u = a.current, m = r.current;
+    if (w !== null && m !== null && u.isResizing) {
+      const _ = 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"), T(), t(_, M), document.removeEventListener("pointermove", k), document.removeEventListener("pointerup", I);
     }
   };
-  return /* @__PURE__ */ D.jsxs("div", { ref: r, children: [
-    /* @__PURE__ */ D.jsx(
+  return /* @__PURE__ */ v.jsxs("div", { ref: r, children: [
+    /* @__PURE__ */ v.jsx(
       "div",
       {
         className: "image-resizer image-resizer-n",
-        onPointerDown: (m) => {
-          S(m, f.north);
+        onPointerDown: (w) => {
+          S(w, f.north);
         }
       }
     ),
-    /* @__PURE__ */ D.jsx(
+    /* @__PURE__ */ v.jsx(
       "div",
       {
         className: "image-resizer image-resizer-ne",
-        onPointerDown: (m) => {
-          S(m, f.north | f.east);
+        onPointerDown: (w) => {
+          S(w, f.north | f.east);
         }
       }
     ),
-    /* @__PURE__ */ D.jsx(
+    /* @__PURE__ */ v.jsx(
       "div",
       {
         className: "image-resizer image-resizer-e",
-        onPointerDown: (m) => {
-          S(m, f.east);
+        onPointerDown: (w) => {
+          S(w, f.east);
         }
       }
     ),
-    /* @__PURE__ */ D.jsx(
+    /* @__PURE__ */ v.jsx(
       "div",
       {
         className: "image-resizer image-resizer-se",
-        onPointerDown: (m) => {
-          S(m, f.south | f.east);
+        onPointerDown: (w) => {
+          S(w, f.south | f.east);
         }
       }
     ),
-    /* @__PURE__ */ D.jsx(
+    /* @__PURE__ */ v.jsx(
       "div",
       {
         className: "image-resizer image-resizer-s",
-        onPointerDown: (m) => {
-          S(m, f.south);
+        onPointerDown: (w) => {
+          S(w, f.south);
         }
       }
     ),
-    /* @__PURE__ */ D.jsx(
+    /* @__PURE__ */ v.jsx(
       "div",
       {
         className: "image-resizer image-resizer-sw",
-        onPointerDown: (m) => {
-          S(m, f.south | f.west);
+        onPointerDown: (w) => {
+          S(w, f.south | f.west);
         }
       }
     ),
-    /* @__PURE__ */ D.jsx(
+    /* @__PURE__ */ v.jsx(
       "div",
       {
         className: "image-resizer image-resizer-w",
-        onPointerDown: (m) => {
-          S(m, f.west);
+        onPointerDown: (w) => {
+          S(w, f.west);
         }
       }
     ),
-    /* @__PURE__ */ D.jsx(
+    /* @__PURE__ */ v.jsx(
       "div",
       {
         className: "image-resizer image-resizer-nw",
-        onPointerDown: (m) => {
-          S(m, f.north | f.west);
+        onPointerDown: (w) => {
+          S(w, f.north | f.west);
         }
       }
     )
   ] });
 }
-const Q = {
+const Z = {
   x: 0,
   y: 0,
   width: 0,
   height: 0,
   unit: "px"
-}, O = (l, t, e) => Math.min(Math.max(l, t), e), _e = (...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 K(l, t, e) {
-  return l.unit === "%" ? { ...Q, ...l, unit: "%" } : {
+}, j = (l, t, e) => Math.min(Math.max(l, t), e), _e = (...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 === "%" ? { ...Z, ...l, unit: "%" } : {
     unit: "%",
     x: l.x ? l.x / t * 100 : 0,
     y: l.y ? l.y / e * 100 : 0,
@@ -200,14 +200,14 @@ function K(l, t, e) {
     height: l.height ? l.height / e * 100 : 0
   };
 }
-function Y(l, t, e) {
-  return l.unit ? l.unit === "px" ? { ...Q, ...l, unit: "px" } : {
+function A(l, t, e) {
+  return l.unit ? l.unit === "px" ? { ...Z, ...l, unit: "px" } : {
     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" };
+  } : { ...Z, ...l, unit: "px" };
 }
 function oe(l, t, e, o, n, i = 0, h = 0, p = o, s = n) {
   const r = { ...l };
@@ -232,9 +232,9 @@ function Pe(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 j = { capture: !0, passive: !1 };
+const W = { capture: !0, passive: !1 };
 let Se = 0;
-const k = class $ extends Ee {
+const L = class $ extends Ee {
   constructor() {
     super(...arguments), this.docMoveBound = !1, this.mouseDownOnCrop = !1, this.dragStarted = !1, this.evData = {
       startClientX: 0,
@@ -251,7 +251,7 @@ const k = class $ extends Ee {
       const { crop: e, disabled: o } = this.props, n = this.getBox();
       if (!e)
         return;
-      const i = Y(e, n.width, n.height);
+      const i = A(e, n.width, n.height);
       if (o)
         return;
       t.cancelable && t.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: !0 });
@@ -292,7 +292,7 @@ const k = class $ extends Ee {
         clientX: t.clientX,
         clientY: t.clientY,
         isResize: !0
-      }, this.mouseDownOnCrop = !0, h(Y(d, p.width, p.height), K(d, p.width, p.height)), this.setState({ cropIsActive: !0, newCropIsBeingDrawn: !0 });
+      }, this.mouseDownOnCrop = !0, h(A(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)
@@ -302,8 +302,8 @@ const k = class $ extends Ee {
       p.clientX = t.clientX, p.clientY = t.clientY;
       let s;
       p.isResize ? s = this.resizeCrop() : s = this.dragCrop(), re(e, s) || n(
-        Y(s, h.width, h.height),
-        K(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;
@@ -315,8 +315,8 @@ const k = class $ extends Ee {
         return;
       const s = this.getBox(), r = this.makePixelCrop(s), d = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? $.nudgeStepLarge : t.shiftKey ? $.nudgeStepMedium : $.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 = Y(r, s.width, s.height), g = K(r, s.width, s.height);
+        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 a = A(r, s.width, s.height), g = B(r, s.width, s.height);
         n(a, g), i && i(a, g);
       }
     }, this.onHandlerKeyDown = (t, e) => {
@@ -337,7 +337,7 @@ const k = class $ extends Ee {
         t.stopPropagation(), t.preventDefault();
       else
         return;
-      const c = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? $.nudgeStepLarge : t.shiftKey ? $.nudgeStepMedium : $.nudgeStep, y = Y(n, g.width, g.height), N = Pe(y, t.key, c, e), x = oe(
+      const c = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? $.nudgeStepLarge : t.shiftKey ? $.nudgeStepMedium : $.nudgeStep, y = A(n, g.width, g.height), N = Pe(y, t.key, c, e), x = oe(
         N,
         o,
         e,
@@ -349,12 +349,12 @@ const k = class $ extends Ee {
         r
       );
       if (!re(n, x)) {
-        const P = K(x, g.width, g.height);
+        const P = B(x, g.width, g.height);
         d(x, P), a && a(x, P);
       }
     }, 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(Y(e, h.width, h.height), K(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(A(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 k = class $ extends Ee {
     const { crop: e, onComplete: o } = this.props;
     if (o && !t.crop && e) {
       const { width: n, height: i } = this.getBox();
-      n && i && o(Y(e, n, i), K(e, n, i));
+      n && i && o(A(e, n, i), B(e, n, i));
     }
   }
   componentWillUnmount() {
     this.resizeObserver && this.resizeObserver.disconnect(), this.unbindDocMove();
   }
   bindDocMove() {
-    this.docMoveBound || (this.document.addEventListener("pointermove", this.onDocPointerMove, j), this.document.addEventListener("pointerup", this.onDocPointerDone, j), this.document.addEventListener("pointercancel", this.onDocPointerDone, j), this.docMoveBound = !0);
+    this.docMoveBound || (this.document.addEventListener("pointermove", this.onDocPointerMove, W), this.document.addEventListener("pointerup", this.onDocPointerDone, W), this.document.addEventListener("pointercancel", this.onDocPointerDone, W), this.docMoveBound = !0);
   }
   unbindDocMove() {
-    this.docMoveBound && (this.document.removeEventListener("pointermove", this.onDocPointerMove, j), this.document.removeEventListener("pointerup", this.onDocPointerDone, j), this.document.removeEventListener("pointercancel", this.onDocPointerDone, j), this.docMoveBound = !1);
+    this.docMoveBound && (this.document.removeEventListener("pointermove", this.onDocPointerMove, W), this.document.removeEventListener("pointerup", this.onDocPointerDone, W), this.document.removeEventListener("pointercancel", this.onDocPointerDone, W), this.docMoveBound = !1);
   }
   getCropStyle() {
     const { crop: t } = this.props;
@@ -400,7 +400,7 @@ const k = class $ 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 = O(t.startCropX + n, 0, e.width - o.width), o.y = O(t.startCropY + i, 0, e.height - o.height), o;
+    return o.x = j(t.startCropX + n, 0, e.width - o.width), o.y = j(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;
@@ -438,7 +438,7 @@ const k = class $ extends Ee {
       o,
       n
     );
-    return e || $.xyOrds.indexOf(d) > -1 ? s = y : $.xOrds.indexOf(d) > -1 ? (s.x = y.x, s.width = y.width) : $.yOrds.indexOf(d) > -1 && (s.y = y.y, s.height = y.height), s.x = O(s.x, 0, i.width - s.width), s.y = O(s.y, 0, i.height - s.height), s;
+    return e || $.xyOrds.indexOf(d) > -1 ? s = y : $.xOrds.indexOf(d) > -1 ? (s.x = y.x, s.width = y.width) : $.yOrds.indexOf(d) > -1 && (s.y = y.y, s.height = y.height), s.x = j(s.x, 0, i.width - s.width), s.y = j(s.y, 0, i.height - s.height), s;
   }
   renderCropSelection() {
     const {
@@ -547,8 +547,8 @@ const k = class $ extends Ee {
       );
   }
   makePixelCrop(t) {
-    const e = { ...Q, ...this.props.crop || {} };
-    return Y(e, t.width, t.height);
+    const e = { ...Z, ...this.props.crop || {} };
+    return A(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: d, newCropIsBeingDrawn: a } = this.state, g = i ? this.renderCropSelection() : null, c = _e(
@@ -585,7 +585,7 @@ const k = class $ extends Ee {
     ))), /* @__PURE__ */ C.createElement("rect", { fill: "black", fillOpacity: 0.5, width: "100%", height: "100%", mask: `url(#hole-${this.instanceId})` })) : void 0, g);
   }
 };
-k.xOrds = ["e", "w"], k.yOrds = ["n", "s"], k.xyOrds = ["nw", "ne", "se", "sw"], k.nudgeStep = 1, k.nudgeStepMedium = 10, k.nudgeStepLarge = 100, k.defaultProps = {
+L.xOrds = ["e", "w"], L.yOrds = ["n", "s"], L.xyOrds = ["nw", "ne", "se", "sw"], L.nudgeStep = 1, L.nudgeStepMedium = 10, L.nudgeStepLarge = 100, L.defaultProps = {
   ariaLabels: {
     cropArea: "Use the arrow keys to move the crop selection area",
     nwDragHandle: "Use the arrow keys to move the north west drag handle to change the crop selection area",
@@ -598,7 +598,7 @@ k.xOrds = ["e", "w"], k.yOrds = ["n", "s"], k.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 He = k;
+let He = L;
 const se = be("RIGHT_CLICK_IMAGE_COMMAND");
 function $e({
   altText: l,
@@ -613,7 +613,7 @@ function $e({
   isFocused: r,
   nodeKey: d
 }) {
-  const [a, g] = B(null), [c, y] = B(null), [N, x] = B({
+  const [a, g] = U(null), [c, y] = U(null), [N, x] = U({
     //@ts-ignore
     unit: "px",
     // Can be 'px' or '%'
@@ -621,61 +621,68 @@ function $e({
     y: 25,
     width: 50,
     height: 50
-  }), [P] = ae(), W = () => {
+  }), [P] = ae(), T = () => {
     if (a) {
       const u = h.current;
       if (!u || !a)
         return;
-      const w = u.naturalWidth / u.width, _ = u.naturalHeight / u.height, E = new OffscreenCanvas(
-        a.width * w,
+      const m = u.naturalWidth / u.width, _ = u.naturalHeight / u.height, M = new OffscreenCanvas(
+        a.width * m,
         a.height * _
-      ), b = E.getContext("2d");
+      ), b = M.getContext("2d");
       if (!b)
         throw new Error("No 2D context available");
       b.drawImage(
         u,
-        a.x * w,
+        a.x * m,
         a.y * _,
-        a.width * w,
+        a.width * m,
         a.height * _,
         0,
         0,
-        a.width * w,
+        a.width * m,
         a.height * _
-      ), E.convertToBlob({ type: "image/png" }).then((v) => {
-        const L = URL.createObjectURL(v);
-        y(L), s(!1), P.update(() => {
-          const F = q(d);
-          J(F) && F.setSrc(L);
-        });
+      ), M.convertToBlob({ type: "image/png" }).then((D) => {
+        const X = URL.createObjectURL(D);
+        y(X), s(!1);
+        const O = new FileReader();
+        O.onload = () => {
+          const K = O.result;
+          P.update(() => {
+            const R = J(d);
+            Q(R) && K && R.setSrc(K);
+          });
+        }, O.onerror = () => {
+          console.log("error");
+        }, O.readAsDataURL(D);
       });
     }
   }, S = () => {
     p || s((u) => {
       if (u === !1) {
-        const w = h.current;
+        const m = h.current;
         x({
           unit: "px",
           // Can be 'px' or '%'
           x: 0,
           y: 0,
-          width: w.width,
-          height: w.height
+          width: m.width,
+          height: m.height
         });
       }
       return !u;
     });
-  }, X = A(null), I = A(null);
+  }, k = Y(null), I = Y(null);
   te(() => {
-    a && (X.current = a);
+    a && (k.current = a);
   }, [a]);
-  const m = (u) => {
+  const w = (u) => {
     I.current && !I.current.contains(u.target) && s(!1);
   };
-  return te(() => (document.addEventListener("mousedown", m), () => {
-    document.removeEventListener("mousedown", m);
-  }), []), /* @__PURE__ */ D.jsxs("div", { ref: I, children: [
-    r && /* @__PURE__ */ D.jsx(
+  return te(() => (document.addEventListener("mousedown", w), () => {
+    document.removeEventListener("mousedown", w);
+  }), []), /* @__PURE__ */ v.jsxs("div", { ref: I, children: [
+    r && /* @__PURE__ */ v.jsx(
       "button",
       {
         style: { zIndex: 999 },
@@ -684,22 +691,22 @@ function $e({
         children: "Crop"
       }
     ),
-    p && /* @__PURE__ */ D.jsx(
+    p && /* @__PURE__ */ v.jsx(
       "button",
       {
         style: { zIndex: 999 },
         className: "image-caption-button",
-        onClick: () => W(),
+        onClick: () => T(),
         children: "Apply Crop"
       }
     ),
-    p ? /* @__PURE__ */ D.jsx(
+    p ? /* @__PURE__ */ v.jsx(
       He,
       {
         crop: N,
         onChange: (u) => x(u),
         onComplete: (u) => g(u),
-        children: /* @__PURE__ */ D.jsx(
+        children: /* @__PURE__ */ v.jsx(
           "img",
           {
             className: t || void 0,
@@ -717,7 +724,7 @@ function $e({
       }
     ) : (
       // When startCrop is false, show the cropped image or original image
-      /* @__PURE__ */ D.jsx(
+      /* @__PURE__ */ v.jsx(
         "img",
         {
           className: t || void 0,
@@ -735,7 +742,7 @@ function $e({
     )
   ] });
 }
-function Ae({
+function Ye({
   src: l,
   altText: t,
   nodeKey: e,
@@ -746,63 +753,63 @@ function Ae({
   showCaption: p,
   caption: s
 }) {
-  const r = A(null), d = A(null), [a, g, c] = ce(e), [y, N] = B(!1), [x] = ae(), [P, W] = B(null), [S, X] = B(!1), I = A(null), m = G(
-    (M) => {
-      if (a && T(V())) {
-        M.preventDefault();
-        const H = q(e);
-        if (J(H))
+  const r = Y(null), d = Y(null), [a, g, c] = ce(e), [y, N] = U(!1), [x] = ae(), [P, T] = U(null), [S, k] = U(!1), I = Y(null), w = V(
+    (R) => {
+      if (a && G(q())) {
+        R.preventDefault();
+        const H = J(e);
+        if (Q(H))
           return H.remove(), !0;
       }
       return !1;
     },
     [a, e]
-  ), u = G(
-    (M) => {
-      const R = V(), H = d.current;
-      if (a && T(R) && R.getNodes().length === 1) {
+  ), u = V(
+    (R) => {
+      const E = q(), H = d.current;
+      if (a && G(E) && E.getNodes().length === 1) {
         if (p)
-          return ne(null), M.preventDefault(), s.focus(), !0;
+          return ne(null), R.preventDefault(), s.focus(), !0;
         if (H !== null && H !== document.activeElement)
-          return M.preventDefault(), H.focus(), !0;
+          return R.preventDefault(), H.focus(), !0;
       }
       return !1;
     },
     [s, a, p]
-  ), w = G(
-    (M) => I.current === s || d.current === M.target ? (ne(null), x.update(() => {
+  ), m = V(
+    (R) => I.current === s || d.current === R.target ? (ne(null), x.update(() => {
       g(!0);
-      const R = x.getRootElement();
-      R !== null && R.focus();
+      const E = x.getRootElement();
+      E !== null && E.focus();
     }), !0) : !1,
     [s, x, g]
-  ), _ = G(
-    (M) => {
-      const R = M;
-      return y ? !0 : R.target === r.current ? (R.shiftKey ? g(!a) : (c(), g(!0)), !0) : !1;
+  ), _ = V(
+    (R) => {
+      const E = R;
+      return y ? !0 : E.target === r.current ? (E.shiftKey ? g(!a) : (c(), g(!0)), !0) : !1;
     },
     [y, a, g, c]
-  ), E = G(
-    (M) => {
+  ), M = V(
+    (R) => {
       x.getEditorState().read(() => {
-        const R = V();
-        M.target.tagName === "IMG" && de(R) && R.getNodes().length === 1 && x.dispatchCommand(
+        const E = q();
+        R.target.tagName === "IMG" && de(E) && E.getNodes().length === 1 && x.dispatchCommand(
           se,
-          M
+          R
         );
       });
     },
     [x]
   );
   te(() => {
-    let M = !0;
-    const R = x.getRootElement(), H = le(
-      x.registerUpdateListener(({ editorState: U }) => {
-        M && W(U.read(() => V()));
+    let R = !0;
+    const E = x.getRootElement(), H = le(
+      x.registerUpdateListener(({ editorState: F }) => {
+        R && T(F.read(() => q()));
       }),
       x.registerCommand(
         ge,
-        (U, he) => (I.current = he, !1),
+        (F, he) => (I.current = he, !1),
         z
       ),
       x.registerCommand(
@@ -817,24 +824,24 @@ function Ae({
       ),
       x.registerCommand(
         pe,
-        (U) => U.target === r.current ? (U.preventDefault(), !0) : !1,
+        (F) => F.target === r.current ? (F.preventDefault(), !0) : !1,
         z
       ),
       x.registerCommand(
-        me,
-        m,
+        we,
+        w,
         z
       ),
       x.registerCommand(
-        we,
-        m,
+        me,
+        w,
         z
       ),
       x.registerCommand(xe, u, z),
-      x.registerCommand(Ce, w, z)
+      x.registerCommand(Ce, m, z)
     );
-    return R == null || R.addEventListener("contextmenu", E), () => {
-      M = !1, H(), R == null || R.removeEventListener("contextmenu", E);
+    return E == null || E.addEventListener("contextmenu", M), () => {
+      R = !1, H(), E == null || E.removeEventListener("contextmenu", M);
     };
   }, [
     c,
@@ -842,33 +849,33 @@ function Ae({
     y,
     a,
     e,
-    m,
-    u,
     w,
+    u,
+    m,
     _,
-    E,
+    M,
     g
   ]);
   const b = () => {
     x.update(() => {
-      const M = q(e);
-      J(M) && M.setShowCaption(!0);
+      const R = J(e);
+      Q(R) && R.setShowCaption(!0);
     });
-  }, v = (M, R) => {
+  }, D = (R, E) => {
     setTimeout(() => {
       N(!1);
     }, 200), x.update(() => {
-      const H = q(e);
-      console.log(H, "node"), J(H) && H.setWidthAndHeight(M, R);
+      const H = J(e);
+      console.log(H, "node"), Q(H) && H.setWidthAndHeight(R, E);
     });
-  }, L = () => {
+  }, X = () => {
     S || N(!0);
-  }, F = a && T(P) && !y, Z = a || y;
-  return /* @__PURE__ */ D.jsx(Me, { fallback: null, children: /* @__PURE__ */ D.jsxs(D.Fragment, { children: [
-    /* @__PURE__ */ D.jsx("div", { draggable: F, children: /* @__PURE__ */ D.jsx(
+  }, O = a && G(P) && !y, K = a || y;
+  return /* @__PURE__ */ v.jsx(Me, { fallback: null, children: /* @__PURE__ */ v.jsxs(v.Fragment, { children: [
+    /* @__PURE__ */ v.jsx("div", { draggable: O, children: /* @__PURE__ */ v.jsx(
       $e,
       {
-        className: Z ? `focused ${T(P) ? "draggable" : ""}` : null,
+        className: K ? `focused ${G(P) ? "draggable" : ""}` : null,
         src: l,
         altText: t,
         width: o,
@@ -876,20 +883,20 @@ function Ae({
         maxWidth: i,
         imageRef: r,
         startCrop: S,
-        setStartCrop: X,
-        isFocused: Z,
+        setStartCrop: k,
+        isFocused: K,
         nodeKey: e
       }
     ) }),
-    p && /* @__PURE__ */ D.jsx("div", { className: "image-caption-container", children: /* @__PURE__ */ D.jsx(Re, { initialEditor: s, children: /* @__PURE__ */ D.jsx(
+    p && /* @__PURE__ */ v.jsx("div", { className: "image-caption-container", children: /* @__PURE__ */ v.jsx(Re, { initialEditor: s, children: /* @__PURE__ */ v.jsx(
       fe,
       {
-        contentEditable: /* @__PURE__ */ D.jsx(ye, { className: "ImageNode__contentEditable" }),
-        placeholder: /* @__PURE__ */ D.jsx(De, { className: "ImageNode__placeholder", children: "Enter a caption..." }),
+        contentEditable: /* @__PURE__ */ v.jsx(ye, { className: "ImageNode__contentEditable" }),
+        placeholder: /* @__PURE__ */ v.jsx(De, { className: "ImageNode__placeholder", children: "Enter a caption..." }),
         ErrorBoundary: ve
       }
     ) }) }),
-    !S && h && T(P) && Z && /* @__PURE__ */ D.jsx(
+    !S && h && G(P) && K && /* @__PURE__ */ v.jsx(
       Ne,
       {
         showCaption: p,
@@ -898,9 +905,9 @@ function Ae({
         buttonRef: d,
         maxWidth: i,
         onResizeStart: S ? () => {
-        } : L,
+        } : X,
         onResizeEnd: S ? () => {
-        } : v,
+        } : D,
         captionsEnabled: !1,
         imageRef: r
       }
@@ -909,6 +916,6 @@ function Ae({
 }
 export {
   se as RIGHT_CLICK_IMAGE_COMMAND,
-  Ae as default
+  Ye as default
 };
-//# sourceMappingURL=ImageComponent-fc39a03e.js.map
+//# sourceMappingURL=ImageComponent-ced58b97.js.map