sykpcomposer 1.1.1 → 1.19.2

package/dist/ImageComponent-855cf80f.js

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