sykpcomposer 1.19.78 → 1.19.79

package/dist/ImageComponent-16bda209.js

@@ -0,0 +1,933 @@
+import { j as R, u as ce, a as se, x as F, $ as T, w as Z, d as V, b as te, c as de, e as le, f as ge, C as A, g as ue, k as pe, h as we, I as me, r as fe, i as ye, l as xe, L as Ce, P as ve, m as De, t as be } from "./index-bbfc5e64.js";
+import { d as Re } from "./LexicalNestedComposer.prod-ad2829c0.js";
+import x, { useRef as Y, PureComponent as Ee, createRef as ne, useState as G, useCallback as U, useEffect as q, Suspense as Me } from "react";
+import "react-dom";
+function ee(l, t, e) {
+  return Math.min(Math.max(l, t), e);
+}
+const v = {
+  east: 1,
+  north: 8,
+  south: 2,
+  west: 4
+};
+function Pe({
+  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, C = g !== null ? g.getBoundingClientRect().height - 20 : 100, P = 100, w = 100, N = (u) => {
+    const m = u === v.east || u === v.west, f = u === v.north || u === v.south, $ = u & v.north && u & v.west || u & v.south && u & v.east, H = m ? "ew" : f ? "ns" : $ ? "nwse" : "nesw";
+    g !== null && g.style.setProperty(
+      "cursor",
+      `${H}-resize`,
+      "important"
+    ), document.body !== null && (document.body.style.setProperty(
+      "cursor",
+      `${H}-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"
+    ));
+  }, K = () => {
+    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
+    ));
+  }, k = (u, m) => {
+    if (!r.isEditable())
+      return;
+    const f = o.current, $ = i.current;
+    if (f !== null && $ !== null) {
+      u.preventDefault();
+      const { width: H, height: D } = f.getBoundingClientRect(), b = a.current;
+      b.startWidth = H, b.startHeight = D, b.ratio = H / D, b.currentWidth = H, b.currentHeight = D, b.startX = u.clientX, b.startY = u.clientY, b.isResizing = !0, b.direction = m, N(m), l(), $.classList.add("image-control-wrapper--resizing"), f.style.height = `${D}px`, f.style.width = `${H}px`, document.addEventListener("pointermove", L), document.addEventListener("pointerup", M);
+    }
+  }, L = (u) => {
+    const m = o.current, f = a.current, $ = f.direction & (v.east | v.west), H = f.direction & (v.south | v.north);
+    if (m !== null && f.isResizing) {
+      if ($ && H) {
+        let D = Math.floor(f.startX - u.clientX);
+        D = f.direction & v.east ? -D : D;
+        const b = ee(
+          f.startWidth + D,
+          P,
+          c
+        ), j = b / f.ratio;
+        m.style.width = `${b}px`, m.style.height = `${j}px`, f.currentHeight = j, f.currentWidth = b;
+      } else if (H) {
+        let D = Math.floor(f.startY - u.clientY);
+        D = f.direction & v.south ? -D : D;
+        const b = ee(
+          f.startHeight + D,
+          w,
+          C
+        );
+        m.style.height = `${b}px`, m.style.maxHeight = `${b}px`, f.currentHeight = b;
+      } else {
+        let D = Math.floor(f.startX - u.clientX);
+        D = f.direction & v.east ? -D : D;
+        const b = ee(
+          f.startWidth + D,
+          P,
+          c
+        );
+        m.style.width = `${b}px`, m.style.maxWidth = `${b}px`, f.currentWidth = b;
+      }
+      m && (m.setAttribute("width", `${f.currentWidth}`), m.setAttribute("height", `${f.currentHeight}`));
+    }
+  }, M = () => {
+    const u = o.current, m = a.current, f = i.current;
+    if (u !== null && f !== null && m.isResizing) {
+      const $ = m.currentWidth, H = m.currentHeight;
+      m.startWidth = 0, m.startHeight = 0, m.ratio = 0, m.startX = 0, m.startY = 0, m.currentWidth = 0, m.currentHeight = 0, m.isResizing = !1, f.classList.remove("image-control-wrapper--resizing"), K(), t($, H), document.removeEventListener("pointermove", L), document.removeEventListener("pointerup", M);
+    }
+  };
+  return /* @__PURE__ */ R.jsxs("div", { ref: i, children: [
+    /* @__PURE__ */ R.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-n",
+        onPointerDown: (u) => {
+          k(u, v.north);
+        }
+      }
+    ),
+    /* @__PURE__ */ R.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-ne",
+        onPointerDown: (u) => {
+          k(u, v.north | v.east);
+        }
+      }
+    ),
+    /* @__PURE__ */ R.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-e",
+        onPointerDown: (u) => {
+          k(u, v.east);
+        }
+      }
+    ),
+    /* @__PURE__ */ R.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-se",
+        onPointerDown: (u) => {
+          k(u, v.south | v.east);
+        }
+      }
+    ),
+    /* @__PURE__ */ R.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-s",
+        onPointerDown: (u) => {
+          k(u, v.south);
+        }
+      }
+    ),
+    /* @__PURE__ */ R.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-sw",
+        onPointerDown: (u) => {
+          k(u, v.south | v.west);
+        }
+      }
+    ),
+    /* @__PURE__ */ R.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-w",
+        onPointerDown: (u) => {
+          k(u, v.west);
+        }
+      }
+    ),
+    /* @__PURE__ */ R.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-nw",
+        onPointerDown: (u) => {
+          k(u, v.north | v.west);
+        }
+      }
+    )
+  ] });
+}
+const J = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  unit: "px"
+}, B = (l, t, e) => Math.min(Math.max(l, t), e), ke = (...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 O(l, t, e) {
+  return l.unit === "%" ? { ...J, ...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 I(l, t, e) {
+  return l.unit ? l.unit === "px" ? { ...J, ...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
+  } : { ...J, ...l, unit: "px" };
+}
+function ie(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 C = o - (i.x + i.width);
+  C < 0 && (i.x = Math.min(i.x, o - d), i.width += C);
+  const P = n - (i.y + i.height);
+  if (P < 0 && (i.y = Math.min(i.y, n - a), i.height += P), 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 w = i.width / i.height;
+    if (w < t) {
+      const N = Math.max(i.width / t, a);
+      (e === "nw" || e == "ne") && (i.y -= N - i.height), i.height = N;
+    } else if (w > t) {
+      const N = Math.max(i.height * t, d);
+      (e === "sw" || e == "nw") && (i.x -= N - i.width), i.width = N;
+    }
+  }
+  return i;
+}
+function He(l, t, e, o) {
+  const n = { ...l };
+  return t === "ArrowLeft" ? o === "nw" ? (n.x -= e, n.y -= e, n.width += e, n.height += e) : o === "w" ? (n.x -= e, n.width += e) : o === "sw" ? (n.x -= e, n.width += e, n.height += e) : o === "ne" ? (n.y += e, n.width -= e, n.height -= e) : o === "e" ? n.width -= e : o === "se" && (n.width -= e, n.height -= e) : t === "ArrowRight" && (o === "nw" ? (n.x += e, n.y += e, n.width -= e, n.height -= e) : o === "w" ? (n.x += e, n.width -= e) : o === "sw" ? (n.x += e, n.width -= e, n.height -= e) : o === "ne" ? (n.y -= e, n.width += e, n.height += e) : o === "e" ? n.width += e : o === "se" && (n.width += e, n.height += e)), t === "ArrowUp" ? o === "nw" ? (n.x -= e, n.y -= e, n.width += e, n.height += e) : o === "n" ? (n.y -= e, n.height += e) : o === "ne" ? (n.y -= e, n.width += e, n.height += e) : o === "sw" ? (n.x += e, n.width -= e, n.height -= e) : o === "s" ? n.height -= e : o === "se" && (n.width -= e, n.height -= e) : t === "ArrowDown" && (o === "nw" ? (n.x += e, n.y += e, n.width -= e, n.height -= e) : o === "n" ? (n.y += e, n.height -= e) : o === "ne" ? (n.y += e, n.width -= e, n.height -= e) : o === "sw" ? (n.x -= e, n.width += e, n.height += e) : o === "s" ? n.height += e : o === "se" && (n.width += e, n.height += e)), n;
+}
+const W = { capture: !0, passive: !1 };
+let Ne = 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-${Ne++}`, this.state = {
+      cropIsActive: !1,
+      newCropIsBeingDrawn: !1
+    }, this.onCropPointerDown = (t) => {
+      const { crop: e, disabled: o } = this.props, n = this.getBox();
+      if (!e)
+        return;
+      const r = 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, 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 C = 0, P = 0;
+        h === "ne" || h == "e" ? (C = g - (r.x + r.width), P = c - r.y, d = r.x, a = r.y + r.height) : h === "se" || h === "s" ? (C = g - (r.x + r.width), P = c - (r.y + r.height), d = r.x, a = r.y) : h === "sw" || h == "w" ? (C = g - r.x, P = c - (r.y + r.height), d = r.x + r.width, a = r.y) : (h === "nw" || h == "n") && (C = g - r.x, P = c - r.y, d = r.x + r.width, a = r.y + r.height), s = d + n.x + C, i = a + n.y + P;
+      }
+      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(I(d, p.width, p.height), O(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(), re(e, s) || n(
+        I(s, h.width, h.height),
+        O(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) ? S.nudgeStepLarge : t.shiftKey ? S.nudgeStepMedium : S.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 = B(i.x, 0, s.width - i.width), i.y = B(i.y, 0, s.height - i.height);
+        const a = I(i, s.width, s.height), g = O(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) ? S.nudgeStepLarge : t.shiftKey ? S.nudgeStepMedium : S.nudgeStep, C = I(n, g.width, g.height), P = He(C, t.key, c, e), w = ie(
+        P,
+        o,
+        e,
+        g.width,
+        g.height,
+        h,
+        p,
+        s,
+        i
+      );
+      if (!re(n, w)) {
+        const N = O(w, g.width, g.height);
+        d(w, N), a && a(w, N);
+      }
+    }, 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(I(e, h.width, h.height), O(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(I(e, n, r), O(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 = B(t.startCropX + n, 0, e.width - o.width), o.y = B(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 C = ie(
+      c,
+      e,
+      i,
+      r.width,
+      r.height,
+      h,
+      p,
+      o,
+      n
+    );
+    return e || S.xyOrds.indexOf(d) > -1 ? s = C : S.xOrds.indexOf(d) > -1 ? (s.x = C.x, s.width = C.width) : S.yOrds.indexOf(d) > -1 && (s.y = C.y, s.height = C.height), s.x = B(s.x, 0, r.width - s.width), s.y = B(s.y, 0, r.height - s.height), s;
+  }
+  renderCropSelection() {
+    const {
+      ariaLabels: t = S.defaultProps.ariaLabels,
+      disabled: e,
+      locked: o,
+      renderSelectionAddon: n,
+      ruleOfThirds: r,
+      crop: h
+    } = this.props, p = this.getCropStyle();
+    if (h)
+      return /* @__PURE__ */ x.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__ */ x.createElement("div", { className: "ReactCrop__drag-elements", onFocus: this.onDragFocus }, /* @__PURE__ */ x.createElement("div", { className: "ReactCrop__drag-bar ord-n", "data-ord": "n" }), /* @__PURE__ */ x.createElement("div", { className: "ReactCrop__drag-bar ord-e", "data-ord": "e" }), /* @__PURE__ */ x.createElement("div", { className: "ReactCrop__drag-bar ord-s", "data-ord": "s" }), /* @__PURE__ */ x.createElement("div", { className: "ReactCrop__drag-bar ord-w", "data-ord": "w" }), /* @__PURE__ */ x.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-nw",
+            "data-ord": "nw",
+            tabIndex: 0,
+            "aria-label": t.nwDragHandle,
+            onKeyDown: (s) => this.onHandlerKeyDown(s, "nw"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ x.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-n",
+            "data-ord": "n",
+            tabIndex: 0,
+            "aria-label": t.nDragHandle,
+            onKeyDown: (s) => this.onHandlerKeyDown(s, "n"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ x.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-ne",
+            "data-ord": "ne",
+            tabIndex: 0,
+            "aria-label": t.neDragHandle,
+            onKeyDown: (s) => this.onHandlerKeyDown(s, "ne"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ x.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-e",
+            "data-ord": "e",
+            tabIndex: 0,
+            "aria-label": t.eDragHandle,
+            onKeyDown: (s) => this.onHandlerKeyDown(s, "e"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ x.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-se",
+            "data-ord": "se",
+            tabIndex: 0,
+            "aria-label": t.seDragHandle,
+            onKeyDown: (s) => this.onHandlerKeyDown(s, "se"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ x.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-s",
+            "data-ord": "s",
+            tabIndex: 0,
+            "aria-label": t.sDragHandle,
+            onKeyDown: (s) => this.onHandlerKeyDown(s, "s"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ x.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-sw",
+            "data-ord": "sw",
+            tabIndex: 0,
+            "aria-label": t.swDragHandle,
+            onKeyDown: (s) => this.onHandlerKeyDown(s, "sw"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ x.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-w",
+            "data-ord": "w",
+            tabIndex: 0,
+            "aria-label": t.wDragHandle,
+            onKeyDown: (s) => this.onHandlerKeyDown(s, "w"),
+            role: "button"
+          }
+        )),
+        n && /* @__PURE__ */ x.createElement("div", { className: "ReactCrop__selection-addon", onPointerDown: (s) => s.stopPropagation() }, n(this.state)),
+        r && /* @__PURE__ */ x.createElement(x.Fragment, null, /* @__PURE__ */ x.createElement("div", { className: "ReactCrop__rule-of-thirds-hz" }), /* @__PURE__ */ x.createElement("div", { className: "ReactCrop__rule-of-thirds-vt" }))
+      );
+  }
+  makePixelCrop(t) {
+    const e = { ...J, ...this.props.crop || {} };
+    return I(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 = ke(
+      "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__ */ x.createElement("div", { ref: this.componentRef, className: c, style: s }, /* @__PURE__ */ x.createElement("div", { ref: this.mediaRef, className: "ReactCrop__child-wrapper", onPointerDown: this.onComponentPointerDown }, e), r ? /* @__PURE__ */ x.createElement("svg", { className: "ReactCrop__crop-mask", width: "100%", height: "100%" }, /* @__PURE__ */ x.createElement("defs", null, /* @__PURE__ */ x.createElement("mask", { id: `hole-${this.instanceId}` }, /* @__PURE__ */ x.createElement("rect", { width: "100%", height: "100%", fill: "white" }), o ? /* @__PURE__ */ x.createElement(
+      "ellipse",
+      {
+        cx: `${r.x + r.width / 2}${r.unit}`,
+        cy: `${r.y + r.height / 2}${r.unit}`,
+        rx: `${r.width / 2}${r.unit}`,
+        ry: `${r.height / 2}${r.unit}`,
+        fill: "black"
+      }
+    ) : /* @__PURE__ */ x.createElement(
+      "rect",
+      {
+        x: `${r.x}${r.unit}`,
+        y: `${r.y}${r.unit}`,
+        width: `${r.width}${r.unit}`,
+        height: `${r.height}${r.unit}`,
+        fill: "black"
+      }
+    ))), /* @__PURE__ */ x.createElement("rect", { fill: "black", fillOpacity: 0.5, width: "100%", height: "100%", mask: `url(#hole-${this.instanceId})` })) : void 0, g);
+  }
+};
+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 $e = X;
+const oe = be();
+function ze({
+  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] = G(null), [c, C] = G({
+    //@ts-ignore
+    unit: "px",
+    // Can be 'px' or '%'
+    x: 25,
+    y: 25,
+    width: 50,
+    height: 50
+  }), [P] = se(), w = () => {
+    if (a) {
+      const M = h.current;
+      if (!M || !a)
+        return;
+      const u = M.naturalWidth / M.width, m = M.naturalHeight / M.height, f = new OffscreenCanvas(
+        a.width * u,
+        a.height * m
+      ), $ = f.getContext("2d");
+      if (!$)
+        throw new Error("No 2D context available");
+      $.drawImage(
+        M,
+        a.x * u,
+        a.y * m,
+        a.width * u,
+        a.height * m,
+        0,
+        0,
+        a.width * u,
+        a.height * m
+      ), f.convertToBlob({ type: "image/png" }).then((H) => {
+        s(!1);
+        const D = new FileReader();
+        D.onload = () => {
+          const b = D.result;
+          setTimeout(() => {
+            P.update(
+              () => {
+                const j = F(d);
+                T(j) && b && j.setSrc(b);
+              },
+              { tag: "crop" }
+            );
+          }, 100);
+        }, D.onerror = () => {
+          console.error("Error reading the cropped image blob");
+        }, D.readAsDataURL(H);
+      });
+    }
+  }, N = () => {
+    p || s((M) => {
+      if (M === !1) {
+        const u = h.current;
+        C({
+          unit: "px",
+          // Can be 'px' or '%'
+          x: 0,
+          y: 0,
+          width: u.width,
+          height: u.height
+        });
+      }
+      return !M;
+    });
+  }, K = Y(null), k = Y(null);
+  q(() => {
+    a && (K.current = a);
+  }, [a]);
+  const L = (M) => {
+    k.current && !k.current.contains(M.target) && s(!1);
+  };
+  return q(() => (document.addEventListener("mousedown", L), () => {
+    document.removeEventListener("mousedown", L);
+  }), []), /* @__PURE__ */ R.jsxs("div", { ref: k, children: [
+    i && /* @__PURE__ */ R.jsx(
+      "button",
+      {
+        style: { zIndex: 999 },
+        className: "image-caption-button",
+        onClick: () => N(),
+        children: "Crop"
+      }
+    ),
+    p && /* @__PURE__ */ R.jsx(
+      "button",
+      {
+        style: { zIndex: 999 },
+        className: "image-caption-button",
+        onClick: () => w(),
+        children: "Apply Crop"
+      }
+    ),
+    p ? /* @__PURE__ */ R.jsx(
+      $e,
+      {
+        crop: c,
+        onChange: (M) => C(M),
+        onComplete: (M) => g(M),
+        children: /* @__PURE__ */ R.jsx(
+          "img",
+          {
+            className: t || void 0,
+            src: e,
+            alt: l,
+            ref: h,
+            width: typeof o == "number" ? o : void 0,
+            height: typeof n == "number" ? n : void 0,
+            style: {
+              height: n,
+              maxWidth: r,
+              width: o
+            },
+            draggable: "false",
+            crossOrigin: "anonymous"
+          }
+        )
+      }
+    ) : (
+      // When startCrop is false, show the cropped image or original image
+      /* @__PURE__ */ R.jsx(
+        "img",
+        {
+          className: t || void 0,
+          src: e,
+          alt: l,
+          ref: h,
+          width: typeof o == "number" ? o : void 0,
+          height: typeof n == "number" ? n : void 0,
+          style: {
+            height: n,
+            maxWidth: r,
+            width: o
+          },
+          draggable: "false",
+          crossOrigin: "anonymous"
+        }
+      )
+    )
+  ] });
+}
+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), [C, P] = G(!1), [w] = se(), [N, K] = G(null), [k, L] = G(!1), M = Y(null), u = U((E) => a ? (E.preventDefault(), w.update(() => {
+    const y = F(e);
+    T(y) && y.remove();
+  }), !0) : !1, [a, w, e]), m = U(
+    (E) => {
+      const y = Z(), z = d.current;
+      if (a && V(y) && y.getNodes().length === 1) {
+        if (p)
+          return te(null), E.preventDefault(), s.focus(), !0;
+        if (z !== null && z !== document.activeElement)
+          return E.preventDefault(), z.focus(), !0;
+      }
+      return !1;
+    },
+    [s, a, p]
+  ), f = U(
+    (E) => M.current === s || d.current === E.target ? (te(null), w.update(() => {
+      g(!0);
+      const y = w.getRootElement();
+      y !== null && y.focus();
+    }), !0) : !1,
+    [s, w, g]
+  ), $ = U(
+    (E) => {
+      const y = E;
+      return C ? !0 : y.target === i.current ? (y.shiftKey ? g(!a) : (c(), g(!0)), !0) : !1;
+    },
+    [C, a, g, c]
+  ), H = U(
+    (E) => {
+      w.getEditorState().read(() => {
+        const y = Z();
+        E.target.tagName === "IMG" && de(y) && y.getNodes().length === 1 && w.dispatchCommand(
+          oe,
+          E
+        );
+      });
+    },
+    [w]
+  );
+  q(() => {
+    const E = (z) => {
+      (z.key === "Delete" || z.key === "Backspace") && a && (z.stopPropagation(), z.preventDefault(), w.update(() => {
+        const _ = F(e);
+        T(_) && _.remove();
+      }));
+    }, y = w.getRootElement();
+    return y == null || y.addEventListener("keydown", E), () => {
+      y == null || y.removeEventListener("keydown", E);
+    };
+  }, [a, w, e]), q(() => {
+    let E = !0;
+    const y = w.getRootElement(), z = le(
+      w.registerUpdateListener(({ editorState: _ }) => {
+        E && K(_.read(() => Z()));
+      }),
+      w.registerCommand(
+        ye,
+        (_, he) => (M.current = he, !1),
+        A
+      ),
+      w.registerCommand(
+        fe,
+        $,
+        A
+      ),
+      w.registerCommand(
+        oe,
+        $,
+        A
+      ),
+      w.registerCommand(
+        me,
+        (_) => _.target === i.current ? (_.preventDefault(), !0) : !1,
+        A
+      ),
+      w.registerCommand(
+        we,
+        u,
+        4
+      ),
+      w.registerCommand(
+        pe,
+        u,
+        4
+      ),
+      w.registerCommand(ue, m, A),
+      w.registerCommand(ge, f, A)
+    );
+    return y == null || y.addEventListener("contextmenu", H), () => {
+      E = !1, z(), y == null || y.removeEventListener("contextmenu", H);
+    };
+  }, [
+    c,
+    w,
+    C,
+    a,
+    e,
+    // onDelete,
+    m,
+    f,
+    $,
+    H,
+    g
+  ]);
+  const D = () => {
+    w.update(() => {
+      const E = F(e);
+      T(E) && E.setShowCaption(!0);
+    });
+  }, b = (E, y) => {
+    setTimeout(() => {
+      P(!1);
+    }, 200), w.update(() => {
+      const z = F(e);
+      console.log(z, "node"), T(z) && z.setWidthAndHeight(E, y);
+    });
+  }, j = () => {
+    k || P(!0);
+  }, ae = a && V(N) && !C, Q = a || C;
+  return /* @__PURE__ */ R.jsx(Me, { fallback: null, children: /* @__PURE__ */ R.jsxs(R.Fragment, { children: [
+    /* @__PURE__ */ R.jsx("div", { draggable: ae, children: /* @__PURE__ */ R.jsx(
+      ze,
+      {
+        className: Q ? `focused ${V(N) ? "draggable" : ""}` : null,
+        src: l,
+        altText: t,
+        width: o,
+        height: n,
+        maxWidth: r,
+        imageRef: i,
+        startCrop: k,
+        setStartCrop: L,
+        isFocused: Q,
+        nodeKey: e
+      }
+    ) }),
+    p && /* @__PURE__ */ R.jsx("div", { className: "image-caption-container", children: /* @__PURE__ */ R.jsx(Re, { initialEditor: s, children: /* @__PURE__ */ R.jsx(
+      xe,
+      {
+        contentEditable: /* @__PURE__ */ R.jsx(Ce, { className: "ImageNode__contentEditable" }),
+        placeholder: /* @__PURE__ */ R.jsx(ve, { className: "ImageNode__placeholder", children: "Enter a caption..." }),
+        ErrorBoundary: De
+      }
+    ) }) }),
+    !k && h && V(N) && Q && /* @__PURE__ */ R.jsx(
+      Pe,
+      {
+        showCaption: p,
+        setShowCaption: D,
+        editor: w,
+        buttonRef: d,
+        maxWidth: r,
+        onResizeStart: k ? () => {
+        } : j,
+        onResizeEnd: k ? () => {
+        } : b,
+        captionsEnabled: !1,
+        imageRef: i
+      }
+    )
+  ] }) });
+}
+export {
+  oe as RIGHT_CLICK_IMAGE_COMMAND,
+  Ye as default
+};
+//# sourceMappingURL=ImageComponent-16bda209.js.map