sykpcomposer 0.0.119 → 0.0.121

package/dist/ImageComponent-bada47c6.js

@@ -0,0 +1,851 @@
+import { I as ee, j as v, u as de, d as O, w as G, x as J, $ as Q, a as re, b as le, c as ge, e as ue, C as _, f as pe, k as me, g as we, h as xe, r as fe, i as ye, l as Ce, m as ve, t as De } from "./index-ee741b06.js";
+import { u as be, d as Re, L as Ee, P as Me } from "./Placeholder-af3ee855.js";
+import x, { useRef as L, useContext as te, PureComponent as Pe, createRef as ie, useState as Se, useCallback as U, useEffect as V, Suspense as He } from "react";
+import "react-dom";
+function Z(d, t, e) {
+  return Math.min(Math.max(d, t), e);
+}
+const f = {
+  east: 1,
+  north: 8,
+  south: 2,
+  west: 4
+};
+function $e({
+  onResizeStart: d,
+  onResizeEnd: t,
+  buttonRef: e,
+  // imageRef,
+  maxWidth: s,
+  editor: n,
+  showCaption: r,
+  setShowCaption: h,
+  captionsEnabled: g
+}) {
+  const o = L(null), i = L({
+    priority: "",
+    value: "default"
+  }), c = L({
+    currentHeight: 0,
+    currentWidth: 0,
+    direction: 0,
+    isResizing: !1,
+    ratio: 0,
+    startHeight: 0,
+    startWidth: 0,
+    startX: 0,
+    startY: 0
+  }), l = te(ee);
+  if (!l)
+    throw new Error("SomeComponent must be used within an ImageProvider");
+  const { imageRef: u } = l, a = n.getRootElement(), C = a !== null ? a.getBoundingClientRect().width - 20 : 100, S = a !== null ? a.getBoundingClientRect().height - 20 : 100, y = 100, M = 100, k = (p) => {
+    const w = p === f.east || p === f.west, m = p === f.north || p === f.south, z = p & f.north && p & f.west || p & f.south && p & f.east, H = w ? "ew" : m ? "ns" : z ? "nwse" : "nesw";
+    a !== null && a.style.setProperty(
+      "cursor",
+      `${H}-resize`,
+      "important"
+    ), document.body !== null && (document.body.style.setProperty(
+      "cursor",
+      `${H}-resize`,
+      "important"
+    ), i.current.value = document.body.style.getPropertyValue(
+      "-webkit-user-select"
+    ), i.current.priority = document.body.style.getPropertyPriority(
+      "-webkit-user-select"
+    ), document.body.style.setProperty(
+      "-webkit-user-select",
+      "none",
+      "important"
+    ));
+  }, b = () => {
+    a !== null && a.style.setProperty("cursor", "text"), document.body !== null && (document.body.style.setProperty("cursor", "default"), document.body.style.setProperty(
+      "-webkit-user-select",
+      i.current.value,
+      i.current.priority
+    ));
+  }, $ = (p, w) => {
+    if (!n.isEditable())
+      return;
+    const m = u.current, z = o.current;
+    if (m !== null && z !== null) {
+      p.preventDefault();
+      const { width: H, height: R } = m.getBoundingClientRect(), D = c.current;
+      D.startWidth = H, D.startHeight = R, D.ratio = H / R, D.currentWidth = H, D.currentHeight = R, D.startX = p.clientX, D.startY = p.clientY, D.isResizing = !0, D.direction = w, k(w), d(), z.classList.add("image-control-wrapper--resizing"), m.style.height = `${R}px`, m.style.width = `${H}px`, document.addEventListener("pointermove", F), document.addEventListener("pointerup", K);
+    }
+  }, F = (p) => {
+    const w = u.current, m = c.current, z = m.direction & (f.east | f.west), H = m.direction & (f.south | f.north);
+    if (w !== null && m.isResizing) {
+      if (z && H) {
+        let R = Math.floor(m.startX - p.clientX);
+        R = m.direction & f.east ? -R : R;
+        const D = Z(
+          m.startWidth + R,
+          y,
+          C
+        ), T = D / m.ratio;
+        w.style.width = `${D}px`, w.style.height = `${T}px`, m.currentHeight = T, m.currentWidth = D;
+      } else if (H) {
+        let R = Math.floor(m.startY - p.clientY);
+        R = m.direction & f.south ? -R : R;
+        const D = Z(
+          m.startHeight + R,
+          M,
+          S
+        );
+        w.style.height = `${D}px`, w.style.maxHeight = `${D}px`, m.currentHeight = D;
+      } else {
+        let R = Math.floor(m.startX - p.clientX);
+        R = m.direction & f.east ? -R : R;
+        const D = Z(
+          m.startWidth + R,
+          y,
+          C
+        );
+        w.style.width = `${D}px`, w.style.maxWidth = `${D}px`, m.currentWidth = D;
+      }
+      w && (w.setAttribute("width", `${m.currentWidth}`), w.setAttribute("height", `${m.currentHeight}`));
+    }
+  }, K = () => {
+    const p = u.current, w = c.current, m = o.current;
+    if (p !== null && m !== null && w.isResizing) {
+      const z = w.currentWidth, H = 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"), b(), t(z, H), document.removeEventListener("pointermove", F), document.removeEventListener("pointerup", K);
+    }
+  };
+  return /* @__PURE__ */ v.jsxs("div", { ref: o, children: [
+    /* @__PURE__ */ v.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-n",
+        onPointerDown: (p) => {
+          $(p, f.north);
+        }
+      }
+    ),
+    /* @__PURE__ */ v.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-ne",
+        onPointerDown: (p) => {
+          $(p, f.north | f.east);
+        }
+      }
+    ),
+    /* @__PURE__ */ v.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-e",
+        onPointerDown: (p) => {
+          $(p, f.east);
+        }
+      }
+    ),
+    /* @__PURE__ */ v.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-se",
+        onPointerDown: (p) => {
+          $(p, f.south | f.east);
+        }
+      }
+    ),
+    /* @__PURE__ */ v.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-s",
+        onPointerDown: (p) => {
+          $(p, f.south);
+        }
+      }
+    ),
+    /* @__PURE__ */ v.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-sw",
+        onPointerDown: (p) => {
+          $(p, f.south | f.west);
+        }
+      }
+    ),
+    /* @__PURE__ */ v.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-w",
+        onPointerDown: (p) => {
+          $(p, f.west);
+        }
+      }
+    ),
+    /* @__PURE__ */ v.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-nw",
+        onPointerDown: (p) => {
+          $(p, f.north | f.west);
+        }
+      }
+    )
+  ] });
+}
+const q = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  unit: "px"
+}, j = (d, t, e) => Math.min(Math.max(d, t), e), ze = (...d) => d.filter((t) => t && typeof t == "string").join(" "), oe = (d, t) => d === t || d.width === t.width && d.height === t.height && d.x === t.x && d.y === t.y && d.unit === t.unit;
+function A(d, t, e) {
+  return d.unit === "%" ? { ...q, ...d, unit: "%" } : {
+    unit: "%",
+    x: d.x ? d.x / t * 100 : 0,
+    y: d.y ? d.y / e * 100 : 0,
+    width: d.width ? d.width / t * 100 : 0,
+    height: d.height ? d.height / e * 100 : 0
+  };
+}
+function X(d, t, e) {
+  return d.unit ? d.unit === "px" ? { ...q, ...d, unit: "px" } : {
+    unit: "px",
+    x: d.x ? d.x * t / 100 : 0,
+    y: d.y ? d.y * e / 100 : 0,
+    width: d.width ? d.width * t / 100 : 0,
+    height: d.height ? d.height * e / 100 : 0
+  } : { ...q, ...d, unit: "px" };
+}
+function se(d, t, e, s, n, r = 0, h = 0, g = s, o = n) {
+  const i = { ...d };
+  let c = Math.min(r, s), l = Math.min(h, n), u = Math.min(g, s), a = Math.min(o, n);
+  t && (t > 1 ? (c = h ? h * t : c, l = c / t, u = g * t) : (l = r ? r / t : l, c = l * t, a = o / t)), i.y < 0 && (i.height = Math.max(i.height + i.y, l), i.y = 0), i.x < 0 && (i.width = Math.max(i.width + i.x, c), i.x = 0);
+  const C = s - (i.x + i.width);
+  C < 0 && (i.x = Math.min(i.x, s - c), i.width += C);
+  const S = n - (i.y + i.height);
+  if (S < 0 && (i.y = Math.min(i.y, n - l), i.height += S), i.width < c && ((e === "sw" || e == "nw") && (i.x -= c - i.width), i.width = c), i.height < l && ((e === "nw" || e == "ne") && (i.y -= l - i.height), i.height = l), i.width > u && ((e === "sw" || e == "nw") && (i.x -= u - i.width), i.width = u), i.height > a && ((e === "nw" || e == "ne") && (i.y -= a - i.height), i.height = a), t) {
+    const y = i.width / i.height;
+    if (y < t) {
+      const M = Math.max(i.width / t, l);
+      (e === "nw" || e == "ne") && (i.y -= M - i.height), i.height = M;
+    } else if (y > t) {
+      const M = Math.max(i.height * t, c);
+      (e === "sw" || e == "nw") && (i.x -= M - i.width), i.width = M;
+    }
+  }
+  return i;
+}
+function Ne(d, t, e, s) {
+  const n = { ...d };
+  return t === "ArrowLeft" ? s === "nw" ? (n.x -= e, n.y -= e, n.width += e, n.height += e) : s === "w" ? (n.x -= e, n.width += e) : s === "sw" ? (n.x -= e, n.width += e, n.height += e) : s === "ne" ? (n.y += e, n.width -= e, n.height -= e) : s === "e" ? n.width -= e : s === "se" && (n.width -= e, n.height -= e) : t === "ArrowRight" && (s === "nw" ? (n.x += e, n.y += e, n.width -= e, n.height -= e) : s === "w" ? (n.x += e, n.width -= e) : s === "sw" ? (n.x += e, n.width -= e, n.height -= e) : s === "ne" ? (n.y -= e, n.width += e, n.height += e) : s === "e" ? n.width += e : s === "se" && (n.width += e, n.height += e)), t === "ArrowUp" ? s === "nw" ? (n.x -= e, n.y -= e, n.width += e, n.height += e) : s === "n" ? (n.y -= e, n.height += e) : s === "ne" ? (n.y -= e, n.width += e, n.height += e) : s === "sw" ? (n.x += e, n.width -= e, n.height -= e) : s === "s" ? n.height -= e : s === "se" && (n.width -= e, n.height -= e) : t === "ArrowDown" && (s === "nw" ? (n.x += e, n.y += e, n.width -= e, n.height -= e) : s === "n" ? (n.y += e, n.height -= e) : s === "ne" ? (n.y += e, n.width -= e, n.height -= e) : s === "sw" ? (n.x -= e, n.width += e, n.height += e) : s === "s" ? n.height += e : s === "se" && (n.width += e, n.height += e)), n;
+}
+const B = { capture: !0, passive: !1 };
+let ke = 0;
+const Y = class I extends Pe {
+  constructor() {
+    super(...arguments), this.docMoveBound = !1, this.mouseDownOnCrop = !1, this.dragStarted = !1, this.evData = {
+      startClientX: 0,
+      startClientY: 0,
+      startCropX: 0,
+      startCropY: 0,
+      clientX: 0,
+      clientY: 0,
+      isResize: !0
+    }, this.componentRef = ie(), this.mediaRef = ie(), this.initChangeCalled = !1, this.instanceId = `rc-${ke++}`, this.state = {
+      cropIsActive: !1,
+      newCropIsBeingDrawn: !1
+    }, this.onCropPointerDown = (t) => {
+      const { crop: e, disabled: s } = this.props, n = this.getBox();
+      if (!e)
+        return;
+      const r = X(e, n.width, n.height);
+      if (s)
+        return;
+      t.cancelable && t.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: !0 });
+      const h = t.target.dataset.ord, g = !!h;
+      let o = t.clientX, i = t.clientY, c = r.x, l = r.y;
+      if (h) {
+        const u = t.clientX - n.x, a = t.clientY - n.y;
+        let C = 0, S = 0;
+        h === "ne" || h == "e" ? (C = u - (r.x + r.width), S = a - r.y, c = r.x, l = r.y + r.height) : h === "se" || h === "s" ? (C = u - (r.x + r.width), S = a - (r.y + r.height), c = r.x, l = r.y) : h === "sw" || h == "w" ? (C = u - r.x, S = a - (r.y + r.height), c = r.x + r.width, l = r.y) : (h === "nw" || h == "n") && (C = u - r.x, S = a - r.y, c = r.x + r.width, l = r.y + r.height), o = c + n.x + C, i = l + n.y + S;
+      }
+      this.evData = {
+        startClientX: o,
+        startClientY: i,
+        startCropX: c,
+        startCropY: l,
+        clientX: t.clientX,
+        clientY: t.clientY,
+        isResize: g,
+        ord: h
+      }, this.mouseDownOnCrop = !0, this.setState({ cropIsActive: !0 });
+    }, this.onComponentPointerDown = (t) => {
+      const { crop: e, disabled: s, locked: n, keepSelection: r, onChange: h } = this.props, g = this.getBox();
+      if (s || n || r && e)
+        return;
+      t.cancelable && t.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: !0 });
+      const o = t.clientX - g.x, i = t.clientY - g.y, c = {
+        unit: "px",
+        x: o,
+        y: i,
+        width: 0,
+        height: 0
+      };
+      this.evData = {
+        startClientX: t.clientX,
+        startClientY: t.clientY,
+        startCropX: o,
+        startCropY: i,
+        clientX: t.clientX,
+        clientY: t.clientY,
+        isResize: !0
+      }, this.mouseDownOnCrop = !0, h(X(c, g.width, g.height), A(c, g.width, g.height)), this.setState({ cropIsActive: !0, newCropIsBeingDrawn: !0 });
+    }, this.onDocPointerMove = (t) => {
+      const { crop: e, disabled: s, onChange: n, onDragStart: r } = this.props, h = this.getBox();
+      if (s || !e || !this.mouseDownOnCrop)
+        return;
+      t.cancelable && t.preventDefault(), this.dragStarted || (this.dragStarted = !0, r && r(t));
+      const { evData: g } = this;
+      g.clientX = t.clientX, g.clientY = t.clientY;
+      let o;
+      g.isResize ? o = this.resizeCrop() : o = this.dragCrop(), oe(e, o) || n(
+        X(o, h.width, h.height),
+        A(o, h.width, h.height)
+      );
+    }, this.onComponentKeyDown = (t) => {
+      const { crop: e, disabled: s, onChange: n, onComplete: r } = this.props;
+      if (s)
+        return;
+      const h = t.key;
+      let g = !1;
+      if (!e)
+        return;
+      const o = this.getBox(), i = this.makePixelCrop(o), c = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? I.nudgeStepLarge : t.shiftKey ? I.nudgeStepMedium : I.nudgeStep;
+      if (h === "ArrowLeft" ? (i.x -= c, g = !0) : h === "ArrowRight" ? (i.x += c, g = !0) : h === "ArrowUp" ? (i.y -= c, g = !0) : h === "ArrowDown" && (i.y += c, g = !0), g) {
+        t.cancelable && t.preventDefault(), i.x = j(i.x, 0, o.width - i.width), i.y = j(i.y, 0, o.height - i.height);
+        const l = X(i, o.width, o.height), u = A(i, o.width, o.height);
+        n(l, u), r && r(l, u);
+      }
+    }, this.onHandlerKeyDown = (t, e) => {
+      const {
+        aspect: s = 0,
+        crop: n,
+        disabled: r,
+        minWidth: h = 0,
+        minHeight: g = 0,
+        maxWidth: o,
+        maxHeight: i,
+        onChange: c,
+        onComplete: l
+      } = this.props, u = this.getBox();
+      if (r || !n)
+        return;
+      if (t.key === "ArrowUp" || t.key === "ArrowDown" || t.key === "ArrowLeft" || t.key === "ArrowRight")
+        t.stopPropagation(), t.preventDefault();
+      else
+        return;
+      const a = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? I.nudgeStepLarge : t.shiftKey ? I.nudgeStepMedium : I.nudgeStep, C = X(n, u.width, u.height), S = Ne(C, t.key, a, e), y = se(
+        S,
+        s,
+        e,
+        u.width,
+        u.height,
+        h,
+        g,
+        o,
+        i
+      );
+      if (!oe(n, y)) {
+        const M = A(y, u.width, u.height);
+        c(y, M), l && l(y, M);
+      }
+    }, this.onDocPointerDone = (t) => {
+      const { crop: e, disabled: s, onComplete: n, onDragEnd: r } = this.props, h = this.getBox();
+      this.unbindDocMove(), !(s || !e) && this.mouseDownOnCrop && (this.mouseDownOnCrop = !1, this.dragStarted = !1, r && r(t), n && n(X(e, h.width, h.height), A(e, h.width, h.height)), this.setState({ cropIsActive: !1, newCropIsBeingDrawn: !1 }));
+    }, this.onDragFocus = () => {
+      var t;
+      (t = this.componentRef.current) == null || t.scrollTo(0, 0);
+    };
+  }
+  get document() {
+    return document;
+  }
+  // We unfortunately get the bounding box every time as x+y changes
+  // due to scrolling.
+  getBox() {
+    const t = this.mediaRef.current;
+    if (!t)
+      return { x: 0, y: 0, width: 0, height: 0 };
+    const { x: e, y: s, width: n, height: r } = t.getBoundingClientRect();
+    return { x: e, y: s, width: n, height: r };
+  }
+  componentDidUpdate(t) {
+    const { crop: e, onComplete: s } = this.props;
+    if (s && !t.crop && e) {
+      const { width: n, height: r } = this.getBox();
+      n && r && s(X(e, n, r), A(e, n, r));
+    }
+  }
+  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);
+  }
+  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);
+  }
+  getCropStyle() {
+    const { crop: t } = this.props;
+    if (t)
+      return {
+        top: `${t.y}${t.unit}`,
+        left: `${t.x}${t.unit}`,
+        width: `${t.width}${t.unit}`,
+        height: `${t.height}${t.unit}`
+      };
+  }
+  dragCrop() {
+    const { evData: t } = this, e = this.getBox(), s = this.makePixelCrop(e), n = t.clientX - t.startClientX, r = t.clientY - t.startClientY;
+    return s.x = j(t.startCropX + n, 0, e.width - s.width), s.y = j(t.startCropY + r, 0, e.height - s.height), s;
+  }
+  getPointRegion(t, e, s, n) {
+    const { evData: r } = this, h = r.clientX - t.x, g = r.clientY - t.y;
+    let o;
+    n && e ? o = e === "nw" || e === "n" || e === "ne" : o = g < r.startCropY;
+    let i;
+    return s && e ? i = e === "nw" || e === "w" || e === "sw" : i = h < r.startCropX, i ? o ? "nw" : "sw" : o ? "ne" : "se";
+  }
+  resolveMinDimensions(t, e, s = 0, n = 0) {
+    const r = Math.min(s, 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];
+  }
+  resizeCrop() {
+    const { evData: t } = this, { aspect: e = 0, maxWidth: s, maxHeight: n } = this.props, r = this.getBox(), [h, g] = this.resolveMinDimensions(r, e, this.props.minWidth, this.props.minHeight);
+    let o = this.makePixelCrop(r);
+    const i = this.getPointRegion(r, t.ord, h, g), c = t.ord || i;
+    let l = t.clientX - t.startClientX, u = t.clientY - t.startClientY;
+    (h && c === "nw" || c === "w" || c === "sw") && (l = Math.min(l, -h)), (g && c === "nw" || c === "n" || c === "ne") && (u = Math.min(u, -g));
+    const a = {
+      unit: "px",
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+    i === "ne" ? (a.x = t.startCropX, a.width = l, e ? (a.height = a.width / e, a.y = t.startCropY - a.height) : (a.height = Math.abs(u), a.y = t.startCropY - a.height)) : i === "se" ? (a.x = t.startCropX, a.y = t.startCropY, a.width = l, e ? a.height = a.width / e : a.height = u) : i === "sw" ? (a.x = t.startCropX + l, a.y = t.startCropY, a.width = Math.abs(l), e ? a.height = a.width / e : a.height = u) : i === "nw" && (a.x = t.startCropX + l, a.width = Math.abs(l), e ? (a.height = a.width / e, a.y = t.startCropY - a.height) : (a.height = Math.abs(u), a.y = t.startCropY + u));
+    const C = se(
+      a,
+      e,
+      i,
+      r.width,
+      r.height,
+      h,
+      g,
+      s,
+      n
+    );
+    return e || I.xyOrds.indexOf(c) > -1 ? o = C : I.xOrds.indexOf(c) > -1 ? (o.x = C.x, o.width = C.width) : I.yOrds.indexOf(c) > -1 && (o.y = C.y, o.height = C.height), o.x = j(o.x, 0, r.width - o.width), o.y = j(o.y, 0, r.height - o.height), o;
+  }
+  renderCropSelection() {
+    const {
+      ariaLabels: t = I.defaultProps.ariaLabels,
+      disabled: e,
+      locked: s,
+      renderSelectionAddon: n,
+      ruleOfThirds: r,
+      crop: h
+    } = this.props, g = this.getCropStyle();
+    if (h)
+      return /* @__PURE__ */ x.createElement(
+        "div",
+        {
+          style: g,
+          className: "ReactCrop__crop-selection",
+          onPointerDown: this.onCropPointerDown,
+          "aria-label": t.cropArea,
+          tabIndex: 0,
+          onKeyDown: this.onComponentKeyDown,
+          role: "group"
+        },
+        !e && !s && /* @__PURE__ */ x.createElement("div", { className: "ReactCrop__drag-elements", onFocus: this.onDragFocus }, /* @__PURE__ */ x.createElement("div", { className: "ReactCrop__drag-bar ord-n", "data-ord": "n" }), /* @__PURE__ */ x.createElement("div", { className: "ReactCrop__drag-bar ord-e", "data-ord": "e" }), /* @__PURE__ */ x.createElement("div", { className: "ReactCrop__drag-bar ord-s", "data-ord": "s" }), /* @__PURE__ */ x.createElement("div", { className: "ReactCrop__drag-bar ord-w", "data-ord": "w" }), /* @__PURE__ */ x.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-nw",
+            "data-ord": "nw",
+            tabIndex: 0,
+            "aria-label": t.nwDragHandle,
+            onKeyDown: (o) => this.onHandlerKeyDown(o, "nw"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ x.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-n",
+            "data-ord": "n",
+            tabIndex: 0,
+            "aria-label": t.nDragHandle,
+            onKeyDown: (o) => this.onHandlerKeyDown(o, "n"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ x.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-ne",
+            "data-ord": "ne",
+            tabIndex: 0,
+            "aria-label": t.neDragHandle,
+            onKeyDown: (o) => this.onHandlerKeyDown(o, "ne"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ x.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-e",
+            "data-ord": "e",
+            tabIndex: 0,
+            "aria-label": t.eDragHandle,
+            onKeyDown: (o) => this.onHandlerKeyDown(o, "e"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ x.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-se",
+            "data-ord": "se",
+            tabIndex: 0,
+            "aria-label": t.seDragHandle,
+            onKeyDown: (o) => this.onHandlerKeyDown(o, "se"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ x.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-s",
+            "data-ord": "s",
+            tabIndex: 0,
+            "aria-label": t.sDragHandle,
+            onKeyDown: (o) => this.onHandlerKeyDown(o, "s"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ x.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-sw",
+            "data-ord": "sw",
+            tabIndex: 0,
+            "aria-label": t.swDragHandle,
+            onKeyDown: (o) => this.onHandlerKeyDown(o, "sw"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ x.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-w",
+            "data-ord": "w",
+            tabIndex: 0,
+            "aria-label": t.wDragHandle,
+            onKeyDown: (o) => this.onHandlerKeyDown(o, "w"),
+            role: "button"
+          }
+        )),
+        n && /* @__PURE__ */ x.createElement("div", { className: "ReactCrop__selection-addon", onPointerDown: (o) => o.stopPropagation() }, n(this.state)),
+        r && /* @__PURE__ */ x.createElement(x.Fragment, null, /* @__PURE__ */ x.createElement("div", { className: "ReactCrop__rule-of-thirds-hz" }), /* @__PURE__ */ x.createElement("div", { className: "ReactCrop__rule-of-thirds-vt" }))
+      );
+  }
+  makePixelCrop(t) {
+    const e = { ...q, ...this.props.crop || {} };
+    return X(e, t.width, t.height);
+  }
+  render() {
+    const { aspect: t, children: e, circularCrop: s, className: n, crop: r, disabled: h, locked: g, style: o, ruleOfThirds: i } = this.props, { cropIsActive: c, newCropIsBeingDrawn: l } = this.state, u = r ? this.renderCropSelection() : null, a = ze(
+      "ReactCrop",
+      n,
+      c && "ReactCrop--active",
+      h && "ReactCrop--disabled",
+      g && "ReactCrop--locked",
+      l && "ReactCrop--new-crop",
+      r && t && "ReactCrop--fixed-aspect",
+      r && s && "ReactCrop--circular-crop",
+      r && i && "ReactCrop--rule-of-thirds",
+      !this.dragStarted && r && !r.width && !r.height && "ReactCrop--invisible-crop",
+      s && "ReactCrop--no-animate"
+    );
+    return /* @__PURE__ */ x.createElement("div", { ref: this.componentRef, className: a, style: o }, /* @__PURE__ */ x.createElement("div", { ref: this.mediaRef, className: "ReactCrop__child-wrapper", onPointerDown: this.onComponentPointerDown }, e), r ? /* @__PURE__ */ x.createElement("svg", { className: "ReactCrop__crop-mask", width: "100%", height: "100%" }, /* @__PURE__ */ x.createElement("defs", null, /* @__PURE__ */ x.createElement("mask", { id: `hole-${this.instanceId}` }, /* @__PURE__ */ x.createElement("rect", { width: "100%", height: "100%", fill: "white" }), s ? /* @__PURE__ */ x.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}`,
+        fill: "black"
+      }
+    ) : /* @__PURE__ */ x.createElement(
+      "rect",
+      {
+        x: `${r.x}${r.unit}`,
+        y: `${r.y}${r.unit}`,
+        width: `${r.width}${r.unit}`,
+        height: `${r.height}${r.unit}`,
+        fill: "black"
+      }
+    ))), /* @__PURE__ */ x.createElement("rect", { fill: "black", fillOpacity: 0.5, width: "100%", height: "100%", mask: `url(#hole-${this.instanceId})` })) : void 0, u);
+  }
+};
+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 = {
+  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",
+    nDragHandle: "Use the up and down arrow keys to move the north drag handle to change the crop selection area",
+    neDragHandle: "Use the arrow keys to move the north east drag handle to change the crop selection area",
+    eDragHandle: "Use the up and down arrow keys to move the east drag handle to change the crop selection area",
+    seDragHandle: "Use the arrow keys to move the south east drag handle to change the crop selection area",
+    sDragHandle: "Use the up and down arrow keys to move the south drag handle to change the crop selection area",
+    swDragHandle: "Use the arrow keys to move the south west drag handle to change the crop selection area",
+    wDragHandle: "Use the up and down arrow keys to move the west drag handle to change the crop selection area"
+  }
+};
+let Ie = Y;
+const ae = De();
+function _e({
+  altText: d,
+  className: t,
+  src: e,
+  width: s,
+  height: n,
+  maxWidth: r
+}) {
+  const h = te(ee);
+  if (!h)
+    throw new Error("SomeComponent must be used within an ImageProvider");
+  const {
+    crop: g,
+    setCrop: o,
+    selectCrop: i,
+    setSelectCrop: c,
+    completedCrop: l,
+    setCompletedCrop: u,
+    croppedImage: a,
+    imageRef: C
+  } = h, S = L(null), y = L(null);
+  V(() => {
+    l && (S.current = l);
+  }, [l]);
+  const M = (k) => {
+    y.current && !y.current.contains(k.target) && c(!1);
+  };
+  return V(() => (document.addEventListener("mousedown", M), () => {
+    document.removeEventListener("mousedown", M);
+  }), []), /* @__PURE__ */ v.jsx("div", { ref: y, children: i ? /* @__PURE__ */ v.jsx(
+    Ie,
+    {
+      crop: g,
+      onChange: (k) => o(k),
+      onComplete: (k) => u(k),
+      children: /* @__PURE__ */ v.jsx(
+        "img",
+        {
+          className: t || void 0,
+          src: a || e,
+          alt: d,
+          ref: C,
+          style: {
+            height: n,
+            maxWidth: r,
+            width: s
+          },
+          draggable: "false"
+        }
+      )
+    }
+  ) : (
+    // When selectCrop is false, show the cropped image or original image
+    /* @__PURE__ */ v.jsx(
+      "img",
+      {
+        className: t || void 0,
+        src: a || e,
+        alt: d,
+        ref: C,
+        style: {
+          height: n,
+          maxWidth: r,
+          width: s
+        },
+        draggable: "false"
+      }
+    )
+  ) });
+}
+function Ae({
+  src: d,
+  altText: t,
+  nodeKey: e,
+  width: s,
+  height: n,
+  maxWidth: r,
+  resizable: h,
+  showCaption: g,
+  caption: o
+}) {
+  const i = te(ee);
+  if (!i)
+    throw new Error("SomeComponent must be used within an ImageProvider");
+  const { imageRef: c, setIsResizing: l, isResizing: u, selectCrop: a, setShowCropBtn: C } = i, S = L(null), [y, M, k] = be(e), [b] = de(), [$, F] = Se(null), K = L(null), p = U(
+    (P) => {
+      if (y && O(G())) {
+        P.preventDefault();
+        const N = J(e);
+        if (Q(N))
+          return N.remove(), !0;
+      }
+      return !1;
+    },
+    [y, e]
+  ), w = U(
+    (P) => {
+      const E = G(), N = S.current;
+      if (y && O(E) && E.getNodes().length === 1) {
+        if (g)
+          return re(null), P.preventDefault(), o.focus(), !0;
+        if (N !== null && N !== document.activeElement)
+          return P.preventDefault(), N.focus(), !0;
+      }
+      return !1;
+    },
+    [o, y, g]
+  ), m = U(
+    (P) => K.current === o || S.current === P.target ? (re(null), b.update(() => {
+      M(!0);
+      const E = b.getRootElement();
+      E !== null && E.focus();
+    }), !0) : !1,
+    [o, b, M]
+  ), z = U(
+    (P) => {
+      const E = P;
+      return u ? !0 : E.target === c.current ? (E.shiftKey ? M(!y) : (k(), M(!0)), !0) : !1;
+    },
+    [u, y, M, k]
+  ), H = U(
+    (P) => {
+      b.getEditorState().read(() => {
+        const E = G();
+        P.target.tagName === "IMG" && le(E) && E.getNodes().length === 1 && b.dispatchCommand(
+          ae,
+          P
+        );
+      });
+    },
+    [b]
+  );
+  V(() => {
+    let P = !0;
+    const E = b.getRootElement(), N = ge(
+      b.registerUpdateListener(({ editorState: W }) => {
+        P && F(W.read(() => G()));
+      }),
+      b.registerCommand(
+        ye,
+        (W, ce) => (K.current = ce, !1),
+        _
+      ),
+      b.registerCommand(
+        fe,
+        z,
+        _
+      ),
+      b.registerCommand(
+        ae,
+        z,
+        _
+      ),
+      b.registerCommand(
+        xe,
+        (W) => W.target === c.current ? (W.preventDefault(), !0) : !1,
+        _
+      ),
+      b.registerCommand(
+        we,
+        p,
+        _
+      ),
+      b.registerCommand(
+        me,
+        p,
+        _
+      ),
+      b.registerCommand(pe, w, _),
+      b.registerCommand(ue, m, _)
+    );
+    return E == null || E.addEventListener("contextmenu", H), () => {
+      P = !1, N(), E == null || E.removeEventListener("contextmenu", H);
+    };
+  }, [
+    k,
+    b,
+    u,
+    y,
+    e,
+    p,
+    w,
+    m,
+    z,
+    H,
+    M
+  ]);
+  const R = () => {
+    b.update(() => {
+      const P = J(e);
+      Q(P) && P.setShowCaption(!0);
+    });
+  }, D = (P, E) => {
+    setTimeout(() => {
+      l(!1);
+    }, 200), b.update(() => {
+      const N = J(e);
+      Q(N) && N.setWidthAndHeight(P, E);
+    });
+  }, T = () => {
+    a || l(!0);
+  }, he = y && O($) && !u, ne = y || u;
+  return V(() => {
+    C(y);
+  }, [y]), /* @__PURE__ */ v.jsx(He, { fallback: null, children: /* @__PURE__ */ v.jsxs(v.Fragment, { children: [
+    /* @__PURE__ */ v.jsx("div", { draggable: he, children: /* @__PURE__ */ v.jsx(
+      _e,
+      {
+        className: ne ? `focused ${O($) ? "draggable" : ""}` : null,
+        src: d,
+        altText: t,
+        width: s,
+        height: n,
+        maxWidth: r
+      }
+    ) }),
+    g && /* @__PURE__ */ v.jsx("div", { className: "image-caption-container", children: /* @__PURE__ */ v.jsx(Re, { initialEditor: o, children: /* @__PURE__ */ v.jsx(
+      Ce,
+      {
+        contentEditable: /* @__PURE__ */ v.jsx(Ee, { className: "ImageNode__contentEditable" }),
+        placeholder: /* @__PURE__ */ v.jsx(Me, { className: "ImageNode__placeholder", children: "Enter a caption..." }),
+        ErrorBoundary: ve
+      }
+    ) }) }),
+    !a && h && O($) && ne && /* @__PURE__ */ v.jsx(
+      $e,
+      {
+        showCaption: g,
+        setShowCaption: R,
+        editor: b,
+        buttonRef: S,
+        maxWidth: r,
+        onResizeStart: a ? () => {
+        } : T,
+        onResizeEnd: a ? () => {
+        } : D,
+        captionsEnabled: !1
+      }
+    )
+  ] }) });
+}
+export {
+  ae as RIGHT_CLICK_IMAGE_COMMAND,
+  Ae as default
+};
+//# sourceMappingURL=ImageComponent-bada47c6.js.map