sykpcomposer 0.0.141 → 0.0.144

package/dist/ImageComponent-d523586d.js

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