sykpcomposer 1.19.77 → 1.19.79

package/dist/ImageComponent-b86c2533.js

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