sykpcomposer 0.0.108 → 0.0.111

package/dist/ImageComponent-c1cdbdf9.js

@@ -0,0 +1,883 @@
+import { j as C, u as ae, d as W, w as G, x as q, $ as J, a as te, b as he, c as ce, e as de, C as Y, f as le, k as ge, g as ue, I as pe, r as we, h as me, i as fe, l as xe, t as ye } from "./index-10f02946.js";
+import { u as Ce, d as ve, L as De, P as be } from "./Placeholder-38b55ad9.js";
+import x, { useRef as I, PureComponent as Re, createRef as ne, useState as K, useCallback as F, useEffect as Z, Suspense as Ee } from "react";
+import "react-dom";
+function Q(l, t, e) {
+  return Math.min(Math.max(l, t), e);
+}
+const y = {
+  east: 1,
+  north: 8,
+  south: 2,
+  west: 4
+};
+function Me({
+  onResizeStart: l,
+  onResizeEnd: t,
+  buttonRef: e,
+  imageRef: o,
+  maxWidth: n,
+  editor: r,
+  showCaption: a,
+  setShowCaption: u,
+  captionsEnabled: s
+}) {
+  const i = I(null), c = I({
+    priority: "",
+    value: "default"
+  }), g = I({
+    currentHeight: 0,
+    currentWidth: 0,
+    direction: 0,
+    isResizing: !1,
+    ratio: 0,
+    startHeight: 0,
+    startWidth: 0,
+    startX: 0,
+    startY: 0
+  }), d = r.getRootElement(), h = n || (d !== null ? d.getBoundingClientRect().width - 20 : 100), v = d !== null ? d.getBoundingClientRect().height - 20 : 100, D = 100, k = 100, m = (p) => {
+    const f = p === y.east || p === y.west, w = p === y.north || p === y.south, N = p & y.north && p & y.west || p & y.south && p & y.east, H = f ? "ew" : w ? "ns" : N ? "nwse" : "nesw";
+    d !== null && d.style.setProperty(
+      "cursor",
+      `${H}-resize`,
+      "important"
+    ), document.body !== null && (document.body.style.setProperty(
+      "cursor",
+      `${H}-resize`,
+      "important"
+    ), c.current.value = document.body.style.getPropertyValue(
+      "-webkit-user-select"
+    ), c.current.priority = document.body.style.getPropertyPriority(
+      "-webkit-user-select"
+    ), document.body.style.setProperty(
+      "-webkit-user-select",
+      "none",
+      "important"
+    ));
+  }, X = () => {
+    d !== null && d.style.setProperty("cursor", "text"), document.body !== null && (document.body.style.setProperty("cursor", "default"), document.body.style.setProperty(
+      "-webkit-user-select",
+      c.current.value,
+      c.current.priority
+    ));
+  }, S = (p, f) => {
+    if (!r.isEditable())
+      return;
+    const w = o.current, N = i.current;
+    if (w !== null && N !== null) {
+      p.preventDefault();
+      const { width: H, height: R } = w.getBoundingClientRect(), E = g.current;
+      E.startWidth = H, E.startHeight = R, E.ratio = H / R, E.currentWidth = H, E.currentHeight = R, E.startX = p.clientX, E.startY = p.clientY, E.isResizing = !0, E.direction = f, m(f), l(), N.classList.add("image-control-wrapper--resizing"), w.style.height = `${R}px`, w.style.width = `${H}px`, document.addEventListener("pointermove", b), document.addEventListener("pointerup", z);
+    }
+  }, b = (p) => {
+    const f = o.current, w = g.current, N = w.direction & (y.east | y.west), H = w.direction & (y.south | y.north);
+    if (f !== null && w.isResizing)
+      if (N && H) {
+        let R = Math.floor(w.startX - p.clientX);
+        R = w.direction & y.east ? -R : R;
+        const E = Q(
+          w.startWidth + R,
+          D,
+          h
+        ), T = E / w.ratio;
+        f.style.width = `${E}px`, f.style.height = `${T}px`, w.currentHeight = T, w.currentWidth = E;
+      } else if (H) {
+        let R = Math.floor(w.startY - p.clientY);
+        R = w.direction & y.south ? -R : R;
+        const E = Q(
+          w.startHeight + R,
+          k,
+          v
+        );
+        f.style.height = `${E}px`, w.currentHeight = E;
+      } else {
+        let R = Math.floor(w.startX - p.clientX);
+        R = w.direction & y.east ? -R : R;
+        const E = Q(
+          w.startWidth + R,
+          D,
+          h
+        );
+        f.style.width = `${E}px`, w.currentWidth = E;
+      }
+  }, z = () => {
+    const p = o.current, f = g.current, w = i.current;
+    if (p !== null && w !== null && f.isResizing) {
+      const N = f.currentWidth, H = f.currentHeight;
+      f.startWidth = 0, f.startHeight = 0, f.ratio = 0, f.startX = 0, f.startY = 0, f.currentWidth = 0, f.currentHeight = 0, f.isResizing = !1, w.classList.remove("image-control-wrapper--resizing"), X(), t(N, H), document.removeEventListener("pointermove", b), document.removeEventListener("pointerup", z);
+    }
+  };
+  return /* @__PURE__ */ C.jsxs("div", { ref: i, children: [
+    !a && s && /* @__PURE__ */ C.jsx(
+      "button",
+      {
+        className: "image-caption-button",
+        ref: e,
+        onClick: () => {
+          u(!a);
+        },
+        children: "Add Caption"
+      }
+    ),
+    /* @__PURE__ */ C.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-n",
+        onPointerDown: (p) => {
+          S(p, y.north);
+        }
+      }
+    ),
+    /* @__PURE__ */ C.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-ne",
+        onPointerDown: (p) => {
+          S(p, y.north | y.east);
+        }
+      }
+    ),
+    /* @__PURE__ */ C.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-e",
+        onPointerDown: (p) => {
+          S(p, y.east);
+        }
+      }
+    ),
+    /* @__PURE__ */ C.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-se",
+        onPointerDown: (p) => {
+          S(p, y.south | y.east);
+        }
+      }
+    ),
+    /* @__PURE__ */ C.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-s",
+        onPointerDown: (p) => {
+          S(p, y.south);
+        }
+      }
+    ),
+    /* @__PURE__ */ C.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-sw",
+        onPointerDown: (p) => {
+          S(p, y.south | y.west);
+        }
+      }
+    ),
+    /* @__PURE__ */ C.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-w",
+        onPointerDown: (p) => {
+          S(p, y.west);
+        }
+      }
+    ),
+    /* @__PURE__ */ C.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-nw",
+        onPointerDown: (p) => {
+          S(p, y.north | y.west);
+        }
+      }
+    )
+  ] });
+}
+const V = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  unit: "px"
+}, A = (l, t, e) => Math.min(Math.max(l, t), e), Pe = (...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 === "%" ? { ...V, ...l, unit: "%" } : {
+    unit: "%",
+    x: l.x ? l.x / t * 100 : 0,
+    y: l.y ? l.y / e * 100 : 0,
+    width: l.width ? l.width / t * 100 : 0,
+    height: l.height ? l.height / e * 100 : 0
+  };
+}
+function L(l, t, e) {
+  return l.unit ? l.unit === "px" ? { ...V, ...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
+  } : { ...V, ...l, unit: "px" };
+}
+function ie(l, t, e, o, n, r = 0, a = 0, u = o, s = n) {
+  const i = { ...l };
+  let c = Math.min(r, o), g = Math.min(a, n), d = Math.min(u, o), h = Math.min(s, n);
+  t && (t > 1 ? (c = a ? a * t : c, g = c / t, d = u * t) : (g = r ? r / t : g, c = g * t, h = s / t)), i.y < 0 && (i.height = Math.max(i.height + i.y, g), i.y = 0), i.x < 0 && (i.width = Math.max(i.width + i.x, c), i.x = 0);
+  const v = o - (i.x + i.width);
+  v < 0 && (i.x = Math.min(i.x, o - c), i.width += v);
+  const D = n - (i.y + i.height);
+  if (D < 0 && (i.y = Math.min(i.y, n - g), i.height += D), i.width < c && ((e === "sw" || e == "nw") && (i.x -= c - i.width), i.width = c), i.height < g && ((e === "nw" || e == "ne") && (i.y -= g - i.height), i.height = g), i.width > d && ((e === "sw" || e == "nw") && (i.x -= d - i.width), i.width = d), i.height > h && ((e === "nw" || e == "ne") && (i.y -= h - i.height), i.height = h), t) {
+    const k = i.width / i.height;
+    if (k < t) {
+      const m = Math.max(i.width / t, g);
+      (e === "nw" || e == "ne") && (i.y -= m - i.height), i.height = m;
+    } else if (k > t) {
+      const m = Math.max(i.height * t, c);
+      (e === "sw" || e == "nw") && (i.x -= m - i.width), i.width = m;
+    }
+  }
+  return i;
+}
+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 ke = 0;
+const j = class _ extends Re {
+  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 = ne(), this.mediaRef = ne(), this.initChangeCalled = !1, this.instanceId = `rc-${ke++}`, this.state = {
+      cropIsActive: !1,
+      newCropIsBeingDrawn: !1
+    }, this.onCropPointerDown = (t) => {
+      const { crop: e, disabled: o } = this.props, n = this.getBox();
+      if (!e)
+        return;
+      const r = L(e, n.width, n.height);
+      if (o)
+        return;
+      t.cancelable && t.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: !0 });
+      const a = t.target.dataset.ord, u = !!a;
+      let s = t.clientX, i = t.clientY, c = r.x, g = r.y;
+      if (a) {
+        const d = t.clientX - n.x, h = t.clientY - n.y;
+        let v = 0, D = 0;
+        a === "ne" || a == "e" ? (v = d - (r.x + r.width), D = h - r.y, c = r.x, g = r.y + r.height) : a === "se" || a === "s" ? (v = d - (r.x + r.width), D = h - (r.y + r.height), c = r.x, g = r.y) : a === "sw" || a == "w" ? (v = d - r.x, D = h - (r.y + r.height), c = r.x + r.width, g = r.y) : (a === "nw" || a == "n") && (v = d - r.x, D = h - r.y, c = r.x + r.width, g = r.y + r.height), s = c + n.x + v, i = g + n.y + D;
+      }
+      this.evData = {
+        startClientX: s,
+        startClientY: i,
+        startCropX: c,
+        startCropY: g,
+        clientX: t.clientX,
+        clientY: t.clientY,
+        isResize: u,
+        ord: a
+      }, this.mouseDownOnCrop = !0, this.setState({ cropIsActive: !0 });
+    }, this.onComponentPointerDown = (t) => {
+      const { crop: e, disabled: o, locked: n, keepSelection: r, onChange: a } = this.props, u = this.getBox();
+      if (o || n || r && e)
+        return;
+      t.cancelable && t.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: !0 });
+      const s = t.clientX - u.x, i = t.clientY - u.y, c = {
+        unit: "px",
+        x: s,
+        y: i,
+        width: 0,
+        height: 0
+      };
+      this.evData = {
+        startClientX: t.clientX,
+        startClientY: t.clientY,
+        startCropX: s,
+        startCropY: i,
+        clientX: t.clientX,
+        clientY: t.clientY,
+        isResize: !0
+      }, this.mouseDownOnCrop = !0, a(L(c, u.width, u.height), B(c, u.width, u.height)), this.setState({ cropIsActive: !0, newCropIsBeingDrawn: !0 });
+    }, this.onDocPointerMove = (t) => {
+      const { crop: e, disabled: o, onChange: n, onDragStart: r } = this.props, a = this.getBox();
+      if (o || !e || !this.mouseDownOnCrop)
+        return;
+      t.cancelable && t.preventDefault(), this.dragStarted || (this.dragStarted = !0, r && r(t));
+      const { evData: u } = this;
+      u.clientX = t.clientX, u.clientY = t.clientY;
+      let s;
+      u.isResize ? s = this.resizeCrop() : s = this.dragCrop(), re(e, s) || n(
+        L(s, a.width, a.height),
+        B(s, a.width, a.height)
+      );
+    }, this.onComponentKeyDown = (t) => {
+      const { crop: e, disabled: o, onChange: n, onComplete: r } = this.props;
+      if (o)
+        return;
+      const a = t.key;
+      let u = !1;
+      if (!e)
+        return;
+      const s = this.getBox(), i = this.makePixelCrop(s), c = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? _.nudgeStepLarge : t.shiftKey ? _.nudgeStepMedium : _.nudgeStep;
+      if (a === "ArrowLeft" ? (i.x -= c, u = !0) : a === "ArrowRight" ? (i.x += c, u = !0) : a === "ArrowUp" ? (i.y -= c, u = !0) : a === "ArrowDown" && (i.y += c, u = !0), u) {
+        t.cancelable && t.preventDefault(), i.x = A(i.x, 0, s.width - i.width), i.y = A(i.y, 0, s.height - i.height);
+        const g = L(i, s.width, s.height), d = B(i, s.width, s.height);
+        n(g, d), r && r(g, d);
+      }
+    }, this.onHandlerKeyDown = (t, e) => {
+      const {
+        aspect: o = 0,
+        crop: n,
+        disabled: r,
+        minWidth: a = 0,
+        minHeight: u = 0,
+        maxWidth: s,
+        maxHeight: i,
+        onChange: c,
+        onComplete: g
+      } = this.props, d = 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 h = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? _.nudgeStepLarge : t.shiftKey ? _.nudgeStepMedium : _.nudgeStep, v = L(n, d.width, d.height), D = He(v, t.key, h, e), k = ie(
+        D,
+        o,
+        e,
+        d.width,
+        d.height,
+        a,
+        u,
+        s,
+        i
+      );
+      if (!re(n, k)) {
+        const m = B(k, d.width, d.height);
+        c(k, m), g && g(k, m);
+      }
+    }, this.onDocPointerDone = (t) => {
+      const { crop: e, disabled: o, onComplete: n, onDragEnd: r } = this.props, a = this.getBox();
+      this.unbindDocMove(), !(o || !e) && this.mouseDownOnCrop && (this.mouseDownOnCrop = !1, this.dragStarted = !1, r && r(t), n && n(L(e, a.width, a.height), B(e, a.width, a.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: o, width: n, height: r } = t.getBoundingClientRect();
+    return { x: e, y: o, width: n, height: r };
+  }
+  componentDidUpdate(t) {
+    const { crop: e, onComplete: o } = this.props;
+    if (o && !t.crop && e) {
+      const { width: n, height: r } = this.getBox();
+      n && r && o(L(e, n, r), B(e, n, r));
+    }
+  }
+  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);
+  }
+  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);
+  }
+  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(), o = this.makePixelCrop(e), n = t.clientX - t.startClientX, r = t.clientY - t.startClientY;
+    return o.x = A(t.startCropX + n, 0, e.width - o.width), o.y = A(t.startCropY + r, 0, e.height - o.height), o;
+  }
+  getPointRegion(t, e, o, n) {
+    const { evData: r } = this, a = r.clientX - t.x, u = r.clientY - t.y;
+    let s;
+    n && e ? s = e === "nw" || e === "n" || e === "ne" : s = u < r.startCropY;
+    let i;
+    return o && e ? i = e === "nw" || e === "w" || e === "sw" : i = a < r.startCropX, i ? s ? "nw" : "sw" : s ? "ne" : "se";
+  }
+  resolveMinDimensions(t, e, o = 0, n = 0) {
+    const r = Math.min(o, t.width), a = Math.min(n, t.height);
+    return !e || !r && !a ? [r, a] : e > 1 ? r ? [r, r / e] : [a * e, a] : a ? [a * e, a] : [r, r / e];
+  }
+  resizeCrop() {
+    const { evData: t } = this, { aspect: e = 0, maxWidth: o, maxHeight: n } = this.props, r = this.getBox(), [a, u] = this.resolveMinDimensions(r, e, this.props.minWidth, this.props.minHeight);
+    let s = this.makePixelCrop(r);
+    const i = this.getPointRegion(r, t.ord, a, u), c = t.ord || i;
+    let g = t.clientX - t.startClientX, d = t.clientY - t.startClientY;
+    (a && c === "nw" || c === "w" || c === "sw") && (g = Math.min(g, -a)), (u && c === "nw" || c === "n" || c === "ne") && (d = Math.min(d, -u));
+    const h = {
+      unit: "px",
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+    i === "ne" ? (h.x = t.startCropX, h.width = g, e ? (h.height = h.width / e, h.y = t.startCropY - h.height) : (h.height = Math.abs(d), h.y = t.startCropY - h.height)) : i === "se" ? (h.x = t.startCropX, h.y = t.startCropY, h.width = g, e ? h.height = h.width / e : h.height = d) : i === "sw" ? (h.x = t.startCropX + g, h.y = t.startCropY, h.width = Math.abs(g), e ? h.height = h.width / e : h.height = d) : i === "nw" && (h.x = t.startCropX + g, h.width = Math.abs(g), e ? (h.height = h.width / e, h.y = t.startCropY - h.height) : (h.height = Math.abs(d), h.y = t.startCropY + d));
+    const v = ie(
+      h,
+      e,
+      i,
+      r.width,
+      r.height,
+      a,
+      u,
+      o,
+      n
+    );
+    return e || _.xyOrds.indexOf(c) > -1 ? s = v : _.xOrds.indexOf(c) > -1 ? (s.x = v.x, s.width = v.width) : _.yOrds.indexOf(c) > -1 && (s.y = v.y, s.height = v.height), s.x = A(s.x, 0, r.width - s.width), s.y = A(s.y, 0, r.height - s.height), s;
+  }
+  renderCropSelection() {
+    const {
+      ariaLabels: t = _.defaultProps.ariaLabels,
+      disabled: e,
+      locked: o,
+      renderSelectionAddon: n,
+      ruleOfThirds: r,
+      crop: a
+    } = this.props, u = this.getCropStyle();
+    if (a)
+      return /* @__PURE__ */ x.createElement(
+        "div",
+        {
+          style: u,
+          className: "ReactCrop__crop-selection",
+          onPointerDown: this.onCropPointerDown,
+          "aria-label": t.cropArea,
+          tabIndex: 0,
+          onKeyDown: this.onComponentKeyDown,
+          role: "group"
+        },
+        !e && !o && /* @__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: (s) => this.onHandlerKeyDown(s, "nw"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ x.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-n",
+            "data-ord": "n",
+            tabIndex: 0,
+            "aria-label": t.nDragHandle,
+            onKeyDown: (s) => this.onHandlerKeyDown(s, "n"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ x.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-ne",
+            "data-ord": "ne",
+            tabIndex: 0,
+            "aria-label": t.neDragHandle,
+            onKeyDown: (s) => this.onHandlerKeyDown(s, "ne"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ x.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-e",
+            "data-ord": "e",
+            tabIndex: 0,
+            "aria-label": t.eDragHandle,
+            onKeyDown: (s) => this.onHandlerKeyDown(s, "e"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ x.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-se",
+            "data-ord": "se",
+            tabIndex: 0,
+            "aria-label": t.seDragHandle,
+            onKeyDown: (s) => this.onHandlerKeyDown(s, "se"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ x.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-s",
+            "data-ord": "s",
+            tabIndex: 0,
+            "aria-label": t.sDragHandle,
+            onKeyDown: (s) => this.onHandlerKeyDown(s, "s"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ x.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-sw",
+            "data-ord": "sw",
+            tabIndex: 0,
+            "aria-label": t.swDragHandle,
+            onKeyDown: (s) => this.onHandlerKeyDown(s, "sw"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ x.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-w",
+            "data-ord": "w",
+            tabIndex: 0,
+            "aria-label": t.wDragHandle,
+            onKeyDown: (s) => this.onHandlerKeyDown(s, "w"),
+            role: "button"
+          }
+        )),
+        n && /* @__PURE__ */ x.createElement("div", { className: "ReactCrop__selection-addon", onPointerDown: (s) => s.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 = { ...V, ...this.props.crop || {} };
+    return L(e, t.width, t.height);
+  }
+  render() {
+    const { aspect: t, children: e, circularCrop: o, className: n, crop: r, disabled: a, locked: u, style: s, ruleOfThirds: i } = this.props, { cropIsActive: c, newCropIsBeingDrawn: g } = this.state, d = r ? this.renderCropSelection() : null, h = Pe(
+      "ReactCrop",
+      n,
+      c && "ReactCrop--active",
+      a && "ReactCrop--disabled",
+      u && "ReactCrop--locked",
+      g && "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",
+      o && "ReactCrop--no-animate"
+    );
+    return /* @__PURE__ */ x.createElement("div", { ref: this.componentRef, className: h, style: s }, /* @__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" }), o ? /* @__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, d);
+  }
+};
+j.xOrds = ["e", "w"], j.yOrds = ["n", "s"], j.xyOrds = ["nw", "ne", "se", "sw"], j.nudgeStep = 1, j.nudgeStepMedium = 10, j.nudgeStepLarge = 100, j.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 Ne = j;
+const oe = ye();
+function Se({
+  altText: l,
+  className: t,
+  imageRef: e,
+  src: o,
+  width: n,
+  height: r,
+  maxWidth: a
+}) {
+  const [u, s] = K({
+    aspect: 1,
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 100
+  }), [i, c] = K(null), [g, d] = K(null), [h, v] = K(!1);
+  I("");
+  const D = I(null), k = I(null);
+  Z(() => {
+    i && (D.current = i);
+  }, [i]);
+  const m = () => {
+    v((b) => (b === !1 && s({ aspect: 1, x: 0, y: 0, width: 100, height: 100 }), !b));
+  }, X = (b) => {
+    k.current && !k.current.contains(b.target) && (console.log("Outside of the image clicked!"), v(!1));
+  };
+  Z(() => (document.addEventListener("mousedown", X), () => {
+    document.removeEventListener("mousedown", X);
+  }), []);
+  const S = () => {
+    if (i) {
+      const b = e.current;
+      if (!b || !i)
+        return;
+      const z = b.naturalWidth / b.width, p = b.naturalHeight / b.height, f = new OffscreenCanvas(
+        i.width * z,
+        i.height * p
+      ), w = f.getContext("2d");
+      if (!w)
+        throw new Error("No 2D context available");
+      w.drawImage(
+        b,
+        i.x * z,
+        i.y * p,
+        i.width * z,
+        i.height * p,
+        0,
+        0,
+        i.width * z,
+        i.height * p
+      ), f.convertToBlob({ type: "image/png" }).then((N) => {
+        const H = URL.createObjectURL(N);
+        d(H), v(!h), console.log("Updated cropped image:", H);
+      });
+    }
+  };
+  return /* @__PURE__ */ C.jsxs("div", { ref: k, children: [
+    h ? /* @__PURE__ */ C.jsx("button", { onClick: S, disabled: !i, children: "Apply Crop" }) : /* @__PURE__ */ C.jsx("button", { onClick: m, children: "Enable Crop" }),
+    h ? /* @__PURE__ */ C.jsx(
+      Ne,
+      {
+        crop: u,
+        onChange: (b) => s(b),
+        onComplete: (b) => c(b),
+        children: /* @__PURE__ */ C.jsx(
+          "img",
+          {
+            className: t || void 0,
+            src: g || o,
+            alt: l,
+            ref: e,
+            style: {
+              height: r,
+              maxWidth: a,
+              width: n
+            },
+            draggable: "false"
+          }
+        )
+      }
+    ) : (
+      // When selectCrop is false, show the cropped image or original image
+      /* @__PURE__ */ C.jsx(
+        "img",
+        {
+          className: t || void 0,
+          src: g || o,
+          alt: l,
+          ref: e,
+          style: {
+            height: r,
+            maxWidth: a,
+            width: n
+          },
+          draggable: "false"
+        }
+      )
+    )
+  ] });
+}
+function Xe({
+  src: l,
+  altText: t,
+  nodeKey: e,
+  width: o,
+  height: n,
+  maxWidth: r,
+  resizable: a,
+  showCaption: u,
+  caption: s,
+  captionsEnabled: i
+}) {
+  const c = I(null), g = I(null), [d, h, v] = Ce(e), [D, k] = K(!1), [m] = ae(), [X, S] = K(null), b = I(null), z = F(
+    (P) => {
+      if (d && W(G())) {
+        P.preventDefault();
+        const $ = q(e);
+        if (J($))
+          return $.remove(), !0;
+      }
+      return !1;
+    },
+    [d, e]
+  ), p = F(
+    (P) => {
+      const M = G(), $ = g.current;
+      if (d && W(M) && M.getNodes().length === 1) {
+        if (u)
+          return te(null), P.preventDefault(), s.focus(), !0;
+        if ($ !== null && $ !== document.activeElement)
+          return P.preventDefault(), $.focus(), !0;
+      }
+      return !1;
+    },
+    [s, d, u]
+  ), f = F(
+    (P) => b.current === s || g.current === P.target ? (te(null), m.update(() => {
+      h(!0);
+      const M = m.getRootElement();
+      M !== null && M.focus();
+    }), !0) : !1,
+    [s, m, h]
+  ), w = F(
+    (P) => {
+      const M = P;
+      return D ? !0 : M.target === c.current ? (M.shiftKey ? h(!d) : (v(), h(!0)), !0) : !1;
+    },
+    [D, d, h, v]
+  ), N = F(
+    (P) => {
+      m.getEditorState().read(() => {
+        const M = G();
+        P.target.tagName === "IMG" && he(M) && M.getNodes().length === 1 && m.dispatchCommand(
+          oe,
+          P
+        );
+      });
+    },
+    [m]
+  );
+  Z(() => {
+    let P = !0;
+    const M = m.getRootElement(), $ = ce(
+      m.registerUpdateListener(({ editorState: U }) => {
+        P && S(U.read(() => G()));
+      }),
+      m.registerCommand(
+        me,
+        (U, se) => (b.current = se, !1),
+        Y
+      ),
+      m.registerCommand(
+        we,
+        w,
+        Y
+      ),
+      m.registerCommand(
+        oe,
+        w,
+        Y
+      ),
+      m.registerCommand(
+        pe,
+        (U) => U.target === c.current ? (U.preventDefault(), !0) : !1,
+        Y
+      ),
+      m.registerCommand(
+        ue,
+        z,
+        Y
+      ),
+      m.registerCommand(
+        ge,
+        z,
+        Y
+      ),
+      m.registerCommand(le, p, Y),
+      m.registerCommand(de, f, Y)
+    );
+    return M == null || M.addEventListener("contextmenu", N), () => {
+      P = !1, $(), M == null || M.removeEventListener("contextmenu", N);
+    };
+  }, [
+    v,
+    m,
+    D,
+    d,
+    e,
+    z,
+    p,
+    f,
+    w,
+    N,
+    h
+  ]);
+  const H = () => {
+    m.update(() => {
+      const P = q(e);
+      J(P) && P.setShowCaption(!0);
+    });
+  }, R = (P, M) => {
+    setTimeout(() => {
+      k(!1);
+    }, 200), m.update(() => {
+      const $ = q(e);
+      J($) && $.setWidthAndHeight(P, M);
+    });
+  }, E = () => {
+    k(!0);
+  }, T = d && W(X) && !D, ee = d || D;
+  return /* @__PURE__ */ C.jsx(Ee, { fallback: null, children: /* @__PURE__ */ C.jsxs(C.Fragment, { children: [
+    /* @__PURE__ */ C.jsx("div", { draggable: T, children: /* @__PURE__ */ C.jsx(
+      Se,
+      {
+        className: ee ? `focused ${W(X) ? "draggable" : ""}` : null,
+        src: l,
+        altText: t,
+        imageRef: c,
+        width: o,
+        height: n,
+        maxWidth: r
+      }
+    ) }),
+    u && /* @__PURE__ */ C.jsx("div", { className: "image-caption-container", children: /* @__PURE__ */ C.jsx(ve, { initialEditor: s, children: /* @__PURE__ */ C.jsx(
+      fe,
+      {
+        contentEditable: /* @__PURE__ */ C.jsx(De, { className: "ImageNode__contentEditable" }),
+        placeholder: /* @__PURE__ */ C.jsx(be, { className: "ImageNode__placeholder", children: "Enter a caption..." }),
+        ErrorBoundary: xe
+      }
+    ) }) }),
+    a && W(X) && ee && /* @__PURE__ */ C.jsx(
+      Me,
+      {
+        showCaption: u,
+        setShowCaption: H,
+        editor: m,
+        buttonRef: g,
+        imageRef: c,
+        maxWidth: r,
+        onResizeStart: E,
+        onResizeEnd: R,
+        captionsEnabled: i
+      }
+    )
+  ] }) });
+}
+export {
+  oe as RIGHT_CLICK_IMAGE_COMMAND,
+  Xe as default
+};
+//# sourceMappingURL=ImageComponent-c1cdbdf9.js.map