sykpcomposer 0.0.388 → 0.0.390

package/dist/ImageComponent-8d6f3ac9.js

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