import Wt, { useRef as qe, useState as b, useCallback as Ue, useEffect as U } from "react";
var Bt = { exports: {} }, dt = {};
/**
 * @license React
 * react-jsx-runtime.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
var Ot;
function gr() {
  if (Ot)
    return dt;
  Ot = 1;
  var O = Wt, j = Symbol.for("react.element"), ee = Symbol.for("react.fragment"), D = Object.prototype.hasOwnProperty, _ = O.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, te = { key: !0, ref: !0, __self: !0, __source: !0 };
  function M(N, x, B) {
    var L, P = {}, Y = null, h = null;
    B !== void 0 && (Y = "" + B), x.key !== void 0 && (Y = "" + x.key), x.ref !== void 0 && (h = x.ref);
    for (L in x)
      D.call(x, L) && !te.hasOwnProperty(L) && (P[L] = x[L]);
    if (N && N.defaultProps)
      for (L in x = N.defaultProps, x)
        P[L] === void 0 && (P[L] = x[L]);
    return { $$typeof: j, type: N, key: Y, ref: h, props: P, _owner: _.current };
  }
  return dt.Fragment = ee, dt.jsx = M, dt.jsxs = M, dt;
}
var ut = {};
/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
var Mt;
function br() {
  return Mt || (Mt = 1, process.env.NODE_ENV !== "production" && function() {
    var O = Wt, j = Symbol.for("react.element"), ee = Symbol.for("react.portal"), D = Symbol.for("react.fragment"), _ = Symbol.for("react.strict_mode"), te = Symbol.for("react.profiler"), M = Symbol.for("react.provider"), N = Symbol.for("react.context"), x = Symbol.for("react.forward_ref"), B = Symbol.for("react.suspense"), L = Symbol.for("react.suspense_list"), P = Symbol.for("react.memo"), Y = Symbol.for("react.lazy"), h = Symbol.for("react.offscreen"), Re = Symbol.iterator, Ye = "@@iterator";
    function wt(t) {
      if (t === null || typeof t != "object")
        return null;
      var s = Re && t[Re] || t[Ye];
      return typeof s == "function" ? s : null;
    }
    var de = O.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
    function E(t) {
      {
        for (var s = arguments.length, o = new Array(s > 1 ? s - 1 : 0), d = 1; d < s; d++)
          o[d - 1] = arguments[d];
        Ve("error", t, o);
      }
    }
    function Ve(t, s, o) {
      {
        var d = de.ReactDebugCurrentFrame, g = d.getStackAddendum();
        g !== "" && (s += "%s", o = o.concat([g]));
        var v = o.map(function(m) {
          return String(m);
        });
        v.unshift("Warning: " + s), Function.prototype.apply.call(console[t], console, v);
      }
    }
    var Ne = !1, Xe = !1, Je = !1, Le = !1, ft = !1, re;
    re = Symbol.for("react.module.reference");
    function Ct(t) {
      return !!(typeof t == "string" || typeof t == "function" || t === D || t === te || ft || t === _ || t === B || t === L || Le || t === h || Ne || Xe || Je || typeof t == "object" && t !== null && (t.$$typeof === Y || t.$$typeof === P || t.$$typeof === M || t.$$typeof === N || t.$$typeof === x || // This needs to include all possible module reference object
      // types supported by any Flight configuration anywhere since
      // we don't know which Flight build this will end up being used
      // with.
      t.$$typeof === re || t.getModuleId !== void 0));
    }
    function Ae(t, s, o) {
      var d = t.displayName;
      if (d)
        return d;
      var g = s.displayName || s.name || "";
      return g !== "" ? o + "(" + g + ")" : o;
    }
    function _e(t) {
      return t.displayName || "Context";
    }
    function I(t) {
      if (t == null)
        return null;
      if (typeof t.tag == "number" && E("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof t == "function")
        return t.displayName || t.name || null;
      if (typeof t == "string")
        return t;
      switch (t) {
        case D:
          return "Fragment";
        case ee:
          return "Portal";
        case te:
          return "Profiler";
        case _:
          return "StrictMode";
        case B:
          return "Suspense";
        case L:
          return "SuspenseList";
      }
      if (typeof t == "object")
        switch (t.$$typeof) {
          case N:
            var s = t;
            return _e(s) + ".Consumer";
          case M:
            var o = t;
            return _e(o._context) + ".Provider";
          case x:
            return Ae(t, t.render, "ForwardRef");
          case P:
            var d = t.displayName || null;
            return d !== null ? d : I(t.type) || "Memo";
          case Y: {
            var g = t, v = g._payload, m = g._init;
            try {
              return I(m(v));
            } catch {
              return null;
            }
          }
        }
      return null;
    }
    var ne = Object.assign, ae = 0, De, Ke, mt, Pe, ve, pt, ye;
    function ht() {
    }
    ht.__reactDisabledLog = !0;
    function Ge() {
      {
        if (ae === 0) {
          De = console.log, Ke = console.info, mt = console.warn, Pe = console.error, ve = console.group, pt = console.groupCollapsed, ye = console.groupEnd;
          var t = {
            configurable: !0,
            enumerable: !0,
            value: ht,
            writable: !0
          };
          Object.defineProperties(console, {
            info: t,
            log: t,
            warn: t,
            error: t,
            group: t,
            groupCollapsed: t,
            groupEnd: t
          });
        }
        ae++;
      }
    }
    function Ze() {
      {
        if (ae--, ae === 0) {
          var t = {
            configurable: !0,
            enumerable: !0,
            writable: !0
          };
          Object.defineProperties(console, {
            log: ne({}, t, {
              value: De
            }),
            info: ne({}, t, {
              value: Ke
            }),
            warn: ne({}, t, {
              value: mt
            }),
            error: ne({}, t, {
              value: Pe
            }),
            group: ne({}, t, {
              value: ve
            }),
            groupCollapsed: ne({}, t, {
              value: pt
            }),
            groupEnd: ne({}, t, {
              value: ye
            })
          });
        }
        ae < 0 && E("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
      }
    }
    var H = de.ReactCurrentDispatcher, Qe;
    function ze(t, s, o) {
      {
        if (Qe === void 0)
          try {
            throw Error();
          } catch (g) {
            var d = g.stack.trim().match(/\n( *(at )?)/);
            Qe = d && d[1] || "";
          }
        return `
` + Qe + t;
      }
    }
    var Be = !1, J;
    {
      var Ie = typeof WeakMap == "function" ? WeakMap : Map;
      J = new Ie();
    }
    function kt(t, s) {
      if (!t || Be)
        return "";
      {
        var o = J.get(t);
        if (o !== void 0)
          return o;
      }
      var d;
      Be = !0;
      var g = Error.prepareStackTrace;
      Error.prepareStackTrace = void 0;
      var v;
      v = H.current, H.current = null, Ge();
      try {
        if (s) {
          var m = function() {
            throw Error();
          };
          if (Object.defineProperty(m.prototype, "props", {
            set: function() {
              throw Error();
            }
          }), typeof Reflect == "object" && Reflect.construct) {
            try {
              Reflect.construct(m, []);
            } catch (S) {
              d = S;
            }
            Reflect.construct(t, [], m);
          } else {
            try {
              m.call();
            } catch (S) {
              d = S;
            }
            t.call(m.prototype);
          }
        } else {
          try {
            throw Error();
          } catch (S) {
            d = S;
          }
          t();
        }
      } catch (S) {
        if (S && d && typeof S.stack == "string") {
          for (var f = S.stack.split(`
`), R = d.stack.split(`
`), w = f.length - 1, k = R.length - 1; w >= 1 && k >= 0 && f[w] !== R[k]; )
            k--;
          for (; w >= 1 && k >= 0; w--, k--)
            if (f[w] !== R[k]) {
              if (w !== 1 || k !== 1)
                do
                  if (w--, k--, k < 0 || f[w] !== R[k]) {
                    var A = `
` + f[w].replace(" at new ", " at ");
                    return t.displayName && A.includes("<anonymous>") && (A = A.replace("<anonymous>", t.displayName)), typeof t == "function" && J.set(t, A), A;
                  }
                while (w >= 1 && k >= 0);
              break;
            }
        }
      } finally {
        Be = !1, H.current = v, Ze(), Error.prepareStackTrace = g;
      }
      var K = t ? t.displayName || t.name : "", V = K ? ze(K) : "";
      return typeof t == "function" && J.set(t, V), V;
    }
    function He(t, s, o) {
      return kt(t, !1);
    }
    function z(t) {
      var s = t.prototype;
      return !!(s && s.isReactComponent);
    }
    function le(t, s, o) {
      if (t == null)
        return "";
      if (typeof t == "function")
        return kt(t, z(t));
      if (typeof t == "string")
        return ze(t);
      switch (t) {
        case B:
          return ze("Suspense");
        case L:
          return ze("SuspenseList");
      }
      if (typeof t == "object")
        switch (t.$$typeof) {
          case x:
            return He(t.render);
          case P:
            return le(t.type, s, o);
          case Y: {
            var d = t, g = d._payload, v = d._init;
            try {
              return le(v(g), s, o);
            } catch {
            }
          }
        }
      return "";
    }
    var W = Object.prototype.hasOwnProperty, $e = {}, xe = de.ReactDebugCurrentFrame;
    function se(t) {
      if (t) {
        var s = t._owner, o = le(t.type, t._source, s ? s.type : null);
        xe.setExtraStackFrame(o);
      } else
        xe.setExtraStackFrame(null);
    }
    function oe(t, s, o, d, g) {
      {
        var v = Function.call.bind(W);
        for (var m in t)
          if (v(t, m)) {
            var f = void 0;
            try {
              if (typeof t[m] != "function") {
                var R = Error((d || "React class") + ": " + o + " type `" + m + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof t[m] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
                throw R.name = "Invariant Violation", R;
              }
              f = t[m](s, m, d, o, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
            } catch (w) {
              f = w;
            }
            f && !(f instanceof Error) && (se(g), E("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", d || "React class", o, m, typeof f), se(null)), f instanceof Error && !(f.message in $e) && ($e[f.message] = !0, se(g), E("Failed %s type: %s", o, f.message), se(null));
          }
      }
    }
    var Oe = Array.isArray;
    function et(t) {
      return Oe(t);
    }
    function ue(t) {
      {
        var s = typeof Symbol == "function" && Symbol.toStringTag, o = s && t[Symbol.toStringTag] || t.constructor.name || "Object";
        return o;
      }
    }
    function gt(t) {
      try {
        return ie(t), !1;
      } catch {
        return !0;
      }
    }
    function ie(t) {
      return "" + t;
    }
    function tt(t) {
      if (gt(t))
        return E("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", ue(t)), ie(t);
    }
    var fe = de.ReactCurrentOwner, It = {
      key: !0,
      ref: !0,
      __self: !0,
      __source: !0
    }, rt, St, Me;
    Me = {};
    function jt(t) {
      if (W.call(t, "ref")) {
        var s = Object.getOwnPropertyDescriptor(t, "ref").get;
        if (s && s.isReactWarning)
          return !1;
      }
      return t.ref !== void 0;
    }
    function We(t) {
      if (W.call(t, "key")) {
        var s = Object.getOwnPropertyDescriptor(t, "key").get;
        if (s && s.isReactWarning)
          return !1;
      }
      return t.key !== void 0;
    }
    function nt(t, s) {
      if (typeof t.ref == "string" && fe.current && s && fe.current.stateNode !== s) {
        var o = I(fe.current.type);
        Me[o] || (E('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', I(fe.current.type), t.ref), Me[o] = !0);
      }
    }
    function Et(t, s) {
      {
        var o = function() {
          rt || (rt = !0, E("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", s));
        };
        o.isReactWarning = !0, Object.defineProperty(t, "key", {
          get: o,
          configurable: !0
        });
      }
    }
    function F(t, s) {
      {
        var o = function() {
          St || (St = !0, E("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", s));
        };
        o.isReactWarning = !0, Object.defineProperty(t, "ref", {
          get: o,
          configurable: !0
        });
      }
    }
    var Tt = function(t, s, o, d, g, v, m) {
      var f = {
        // This tag allows us to uniquely identify this as a React Element
        $$typeof: j,
        // Built-in properties that belong on the element
        type: t,
        key: s,
        ref: o,
        props: m,
        // Record the component responsible for creating this element.
        _owner: v
      };
      return f._store = {}, Object.defineProperty(f._store, "validated", {
        configurable: !1,
        enumerable: !1,
        writable: !0,
        value: !1
      }), Object.defineProperty(f, "_self", {
        configurable: !1,
        enumerable: !1,
        writable: !1,
        value: d
      }), Object.defineProperty(f, "_source", {
        configurable: !1,
        enumerable: !1,
        writable: !1,
        value: g
      }), Object.freeze && (Object.freeze(f.props), Object.freeze(f)), f;
    };
    function me(t, s, o, d, g) {
      {
        var v, m = {}, f = null, R = null;
        o !== void 0 && (tt(o), f = "" + o), We(s) && (tt(s.key), f = "" + s.key), jt(s) && (R = s.ref, nt(s, g));
        for (v in s)
          W.call(s, v) && !It.hasOwnProperty(v) && (m[v] = s[v]);
        if (t && t.defaultProps) {
          var w = t.defaultProps;
          for (v in w)
            m[v] === void 0 && (m[v] = w[v]);
        }
        if (f || R) {
          var k = typeof t == "function" ? t.displayName || t.name || "Unknown" : t;
          f && Et(m, k), R && F(m, k);
        }
        return Tt(t, f, R, g, d, fe.current, m);
      }
    }
    var at = de.ReactCurrentOwner, lt = de.ReactDebugCurrentFrame;
    function pe(t) {
      if (t) {
        var s = t._owner, o = le(t.type, t._source, s ? s.type : null);
        lt.setExtraStackFrame(o);
      } else
        lt.setExtraStackFrame(null);
    }
    var C;
    C = !1;
    function we(t) {
      return typeof t == "object" && t !== null && t.$$typeof === j;
    }
    function he() {
      {
        if (at.current) {
          var t = I(at.current.type);
          if (t)
            return `

Check the render method of \`` + t + "`.";
        }
        return "";
      }
    }
    function st(t) {
      {
        if (t !== void 0) {
          var s = t.fileName.replace(/^.*[\\\/]/, ""), o = t.lineNumber;
          return `

Check your code at ` + s + ":" + o + ".";
        }
        return "";
      }
    }
    var Ce = {};
    function Fe(t) {
      {
        var s = he();
        if (!s) {
          var o = typeof t == "string" ? t : t.displayName || t.name;
          o && (s = `

Check the top-level render call using <` + o + ">.");
        }
        return s;
      }
    }
    function ke(t, s) {
      {
        if (!t._store || t._store.validated || t.key != null)
          return;
        t._store.validated = !0;
        var o = Fe(s);
        if (Ce[o])
          return;
        Ce[o] = !0;
        var d = "";
        t && t._owner && t._owner !== at.current && (d = " It was passed a child from " + I(t._owner.type) + "."), pe(t), E('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', o, d), pe(null);
      }
    }
    function ge(t, s) {
      {
        if (typeof t != "object")
          return;
        if (et(t))
          for (var o = 0; o < t.length; o++) {
            var d = t[o];
            we(d) && ke(d, s);
          }
        else if (we(t))
          t._store && (t._store.validated = !0);
        else if (t) {
          var g = wt(t);
          if (typeof g == "function" && g !== t.entries)
            for (var v = g.call(t), m; !(m = v.next()).done; )
              we(m.value) && ke(m.value, s);
        }
      }
    }
    function ot(t) {
      {
        var s = t.type;
        if (s == null || typeof s == "string")
          return;
        var o;
        if (typeof s == "function")
          o = s.propTypes;
        else if (typeof s == "object" && (s.$$typeof === x || // Note: Memo only checks outer props here.
        // Inner props are checked in the reconciler.
        s.$$typeof === P))
          o = s.propTypes;
        else
          return;
        if (o) {
          var d = I(s);
          oe(o, t.props, "prop", d, t);
        } else if (s.PropTypes !== void 0 && !C) {
          C = !0;
          var g = I(s);
          E("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", g || "Unknown");
        }
        typeof s.getDefaultProps == "function" && !s.getDefaultProps.isReactClassApproved && E("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
      }
    }
    function y(t) {
      {
        for (var s = Object.keys(t.props), o = 0; o < s.length; o++) {
          var d = s[o];
          if (d !== "children" && d !== "key") {
            pe(t), E("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", d), pe(null);
            break;
          }
        }
        t.ref !== null && (pe(t), E("Invalid attribute `ref` supplied to `React.Fragment`."), pe(null));
      }
    }
    var $ = {};
    function bt(t, s, o, d, g, v) {
      {
        var m = Ct(t);
        if (!m) {
          var f = "";
          (t === void 0 || typeof t == "object" && t !== null && Object.keys(t).length === 0) && (f += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
          var R = st(g);
          R ? f += R : f += he();
          var w;
          t === null ? w = "null" : et(t) ? w = "array" : t !== void 0 && t.$$typeof === j ? (w = "<" + (I(t.type) || "Unknown") + " />", f = " Did you accidentally export a JSX literal instead of a component?") : w = typeof t, E("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", w, f);
        }
        var k = me(t, s, o, g, v);
        if (k == null)
          return k;
        if (m) {
          var A = s.children;
          if (A !== void 0)
            if (d)
              if (et(A)) {
                for (var K = 0; K < A.length; K++)
                  ge(A[K], t);
                Object.freeze && Object.freeze(A);
              } else
                E("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
            else
              ge(A, t);
        }
        if (W.call(s, "key")) {
          var V = I(t), S = Object.keys(s).filter(function(_t) {
            return _t !== "key";
          }), it = S.length > 0 ? "{key: someKey, " + S.join(": ..., ") + ": ...}" : "{key: someKey}";
          if (!$[V + it]) {
            var X = S.length > 0 ? "{" + S.join(": ..., ") + ": ...}" : "{}";
            E(`A props object containing a "key" prop is being spread into JSX:
  let props = %s;
  <%s {...props} />
React keys must be passed directly to JSX without using spread:
  let props = %s;
  <%s key={someKey} {...props} />`, it, V, X, V), $[V + it] = !0;
          }
        }
        return t === D ? y(k) : ot(k), k;
      }
    }
    function Rt(t, s, o) {
      return bt(t, s, o, !0);
    }
    function Nt(t, s, o) {
      return bt(t, s, o, !1);
    }
    var Lt = Nt, At = Rt;
    ut.Fragment = D, ut.jsx = Lt, ut.jsxs = At;
  }()), ut;
}
process.env.NODE_ENV === "production" ? Bt.exports = gr() : Bt.exports = br();
var n = Bt.exports;
const zt = async (O, j = {}) => {
  var ee;
  if (!O)
    throw new Error("No file provided for upload.");
  try {
    const {
      uploadApiUrl: D = "~/upload",
      clientId: _ = "00",
      clientSecret: te = "00"
    } = j;
    if (!D)
      throw new Error("Upload API URL is required in configuration");
    const M = new FormData();
    M.append("image", O), _ && M.append("client_id", _), te && M.append("client_secret", te);
    const N = await fetch(D, {
      method: "POST",
      body: M,
      headers: {
        accept: "application/json"
      }
    });
    if (!N.ok)
      throw new Error(
        `Upload failed: ${N.status} ${N.statusText}`
      );
    const B = (ee = (await N.json()).data) == null ? void 0 : ee.authenticatedUrl;
    if (!B)
      throw new Error("No authenticatedUrl received from server");
    return B;
  } catch (D) {
    throw console.error("Upload failed:", D), D;
  }
}, yr = ({
  value: O = "",
  onChange: j,
  toolbarOptions: ee = [
    "bold",
    "italic",
    "underline",
    "strikethrough",
    "highlight",
    "fontColor",
    "headings",
    "fontFamily",
    "lineSpacing",
    "alignLeft",
    "alignCenter",
    "alignRight",
    "alignJustify",
    "unorderedList",
    "orderedList",
    "todoList",
    "increaseIndent",
    "decreaseIndent",
    "link",
    "insertImage",
    "blockquote",
    "codeBlock",
    "pageBreak",
    "caseChange",
    "insertTable"
  ],
  placeholder: D = "Start typing...",
  readOnly: _ = !1,
  height: te = "h-64",
  width: M = "w-full",
  toolbarPosition: N = "top",
  stickyToolbar: x = !1,
  stickyOffset: B = 0,
  debounceTime: L = 300,
  customClasses: P = {},
  uploadConfig: Y = {}
}) => {
  const h = qe(null), Re = qe(null), Ye = qe(null), [wt, de] = b({}), [E, Ve] = b(!1), [Ne, Xe] = b(""), [Je, Le] = b(""), [ft, re] = b(null), [Ct, Ae] = b(!1), [_e, I] = b("#000000"), [ne, ae] = b(!1), [De, Ke] = b("#ffff00"), [mt, Pe] = b(!1), [ve, pt] = b(3), [ye, ht] = b(3), [Ge, Ze] = b({}), [H, Qe] = b(!1), [ze, Be] = b(0), [J, Ie] = b(!1), [kt, He] = b(null), [z, le] = b(null), [W, $e] = b(null), [xe, se] = b({ x: 0, y: 0 }), [oe, Oe] = b(null), [et, ue] = b(!1), gt = qe(null), ie = qe(!1), [tt, fe] = b(null), [It, rt] = b(!1), [St, Me] = b(null), [jt, We] = b(!1), [nt, Et] = b(null), [F, Tt] = b(null), [me, at] = b([]), [lt, pe] = b({ x: 0, y: 0 }), [C, we] = b({
    tableBackground: "#ffffff",
    tableBorderColor: "#cccccc",
    tableBorderWidth: "1",
    tableBorderStyle: "solid",
    tableAlignment: "left",
    cellPadding: "8",
    cellSpacing: "0",
    cellBackground: "#ffffff",
    cellTextAlign: "left",
    cellVerticalAlign: "middle",
    cellBorderColor: "#cccccc",
    cellBorderWidth: "1",
    cellBorderStyle: "solid"
  }), he = qe(null), st = Ue((e) => {
    he.current && clearTimeout(he.current), he.current = setTimeout(() => {
      j == null || j(e);
    }, L);
  }, [j, L]), Ce = {
    wrapper: `editor-wrapper ${M}`,
    toolbar: "editor-toolbar",
    contentArea: `editor-content ${te}`,
    button: "toolbar-btn"
  }, Fe = {
    wrapper: `${Ce.wrapper} ${P.wrapper || ""}`,
    toolbar: `${Ce.toolbar} ${P.toolbar || ""} ${x ? "editor-toolbar-sticky" : ""}`,
    contentArea: `${Ce.contentArea} ${P.contentArea || ""}`,
    button: `${Ce.button} ${P.button || ""}`
  };
  U(() => {
    if (!x || !Re.current || !Ye.current)
      return;
    const e = Re.current, a = Ye.current;
    Be(e.offsetHeight);
    const r = () => {
      const u = a.getBoundingClientRect().top <= B;
      u !== H && Qe(u);
    }, l = () => {
      Be(e.offsetHeight);
    };
    return window.addEventListener("scroll", r), window.addEventListener("resize", l), r(), () => {
      window.removeEventListener("scroll", r), window.removeEventListener("resize", l);
    };
  }, [x, B, H]);
  const ke = () => {
    const e = window.getSelection();
    e.rangeCount > 0 && re(e.getRangeAt(0).cloneRange());
  }, ge = () => {
    if (ft) {
      const e = window.getSelection();
      e.removeAllRanges(), e.addRange(ft);
    }
  }, ot = () => {
    const e = {};
    ee.forEach((a) => {
      switch (a) {
        case "bold":
          e.bold = document.queryCommandState("bold");
          break;
        case "italic":
          e.italic = document.queryCommandState("italic");
          break;
        case "underline":
          e.underline = document.queryCommandState("underline");
          break;
        case "strikethrough":
          e.strikethrough = document.queryCommandState("strikeThrough");
          break;
        case "unorderedList":
          e.unorderedList = document.queryCommandState("insertUnorderedList");
          break;
        case "orderedList":
          e.orderedList = document.queryCommandState("insertOrderedList");
          break;
      }
    }), de(e);
  }, y = (e, a = null) => {
    var r;
    _ || ((r = h.current) == null || r.focus(), document.execCommand(e, !1, a), ot(), X());
  }, $ = (e, a = null) => {
    if (!_)
      switch (e) {
        case "bold":
          y("bold");
          break;
        case "italic":
          y("italic");
          break;
        case "underline":
          y("underline");
          break;
        case "strikethrough":
          y("strikeThrough");
          break;
        case "highlight":
          a ? y("hiliteColor", a) : (ae(!0), ke());
          break;
        case "fontColor":
          a ? y("foreColor", a) : (Ae(!0), ke());
          break;
        case "alignLeft":
          y("justifyLeft");
          break;
        case "alignCenter":
          y("justifyCenter");
          break;
        case "alignRight":
          y("justifyRight");
          break;
        case "alignJustify":
          y("justifyFull");
          break;
        case "unorderedList":
          y("insertUnorderedList");
          break;
        case "orderedList":
          y("insertOrderedList");
          break;
        case "todoList":
          Nt();
          break;
        case "increaseIndent":
          y("indent");
          break;
        case "decreaseIndent":
          y("outdent");
          break;
        case "blockquote":
          y("formatBlock", "<blockquote>");
          break;
        case "codeBlock":
          y("formatBlock", "<pre>");
          break;
        case "pageBreak":
          Lt();
          break;
        case "caseChange":
          At();
          break;
        case "insertTable":
          Pe(!0), ke();
          break;
        case "lineSpacing":
          break;
        case "link":
          bt();
          break;
        case "insertImage":
          sr();
          break;
      }
  }, bt = () => {
    const e = window.getSelection();
    e.toString() ? (Le(e.toString()), ke(), Ve(!0)) : alert("Please select text to create a link");
  }, Rt = () => {
    Ne && Je && (ge(), y("createLink", Ne)), Ve(!1), Xe(""), Le(""), re(null);
  }, Nt = () => {
    y("insertHTML", `
      <ul style="list-style: none; padding-left: 0;">
        <li style="margin: 8px 0;">
          <input type="checkbox" style="margin-right: 8px;" /> Todo item 1
        </li>
        <li style="margin: 8px 0;">
          <input type="checkbox" style="margin-right: 8px;" /> Todo item 2
        </li>
      </ul>
    `);
  }, Lt = () => {
    y("insertHTML", '<div style="page-break-after: always; border-bottom: 2px dashed #ccc; margin: 20px 0; padding-bottom: 20px;"><br></div>');
  }, At = () => {
    const e = window.getSelection();
    if (e.toString()) {
      const a = e.toString();
      let r;
      a === a.toUpperCase() ? r = a.toLowerCase() : a === a.toLowerCase() ? r = a.replace(
        /\w\S*/g,
        (l) => l.charAt(0).toUpperCase() + l.substr(1).toLowerCase()
      ) : r = a.toUpperCase(), y("insertText", r);
    }
  }, t = (e) => {
    e === "p" ? y("formatBlock", "<p>") : y("formatBlock", `<${e}>`);
  }, s = (e) => {
    y("fontName", e);
  }, o = (e) => {
    const a = window.getSelection(), r = a.rangeCount > 0 ? a.getRangeAt(0) : null;
    if (r && !r.collapsed) {
      const l = document.createElement("span");
      l.style.lineHeight = e.lineHeight, l.style.marginBottom = e.paragraphSpacing, l.style.display = "block";
      try {
        r.surroundContents(l);
      } catch {
        const u = r.extractContents();
        l.appendChild(u), r.insertNode(l);
      }
    } else {
      const l = h.current;
      l && (l.style.lineHeight = e.lineHeight, l.querySelectorAll("p, div, h1, h2, h3, h4, h5, h6").forEach((u) => {
        u.style.marginBottom = e.paragraphSpacing;
      }));
    }
    X();
  }, d = (e) => {
    ge(), y("foreColor", e), Ae(!1), I(e), re(null);
  }, g = () => {
    ge(), document.execCommand("removeFormat", !1, "foreColor"), Ae(!1), re(null);
  }, v = (e) => {
    ge(), y("hiliteColor", e), ae(!1), Ke(e), re(null);
  }, m = () => {
    let a = `<table id="${`table_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`}" class="resizable-table" style="border-collapse: collapse; width: 100%; margin: 10px 0; position: relative;"><tbody>`;
    for (let r = 0; r < ve; r++) {
      a += "<tr>";
      for (let l = 0; l < ye; l++)
        a += '<td style="border: 1px solid #ccc; padding: 8px; min-width: 100px; min-height: 30px; position: relative;">&nbsp;</td>';
      a += "</tr>";
    }
    a += "</tbody></table>", ge(), y("insertHTML", a), Pe(!1), re(null), setTimeout(() => {
      f();
    }, 100);
  }, f = () => {
    if (!h.current)
      return;
    h.current.querySelectorAll("table").forEach((r) => {
      r.classList.contains("resizable-table") || (r.classList.add("resizable-table"), r.style.position || (r.style.position = "relative"));
    }), h.current.querySelectorAll("table.resizable-table").forEach((r) => {
      r.querySelectorAll(".resize-handle").forEach((i) => i.remove());
      const l = document.createElement("div");
      l.className = "resize-handle table-resize-handle", l.title = "Drag to resize table", l.addEventListener("mousedown", (i) => R(i, r)), r.appendChild(l);
      const c = r.querySelector("tr");
      if (c) {
        const i = c.querySelectorAll("td, th");
        i.forEach((T, q) => {
          if (q < i.length - 1) {
            const p = document.createElement("div");
            p.className = "resize-handle column-resize-handle", p.title = "Drag to resize column", p.addEventListener("mousedown", (G) => w(G, r, q)), T.appendChild(p);
          }
        });
      }
      const u = r.querySelectorAll("tr");
      u.forEach((i, T) => {
        if (T < u.length - 1) {
          const q = i.querySelector("td, th");
          if (q) {
            const p = document.createElement("div");
            p.className = "resize-handle row-resize-handle", p.title = "Drag to resize row", p.addEventListener("mousedown", (G) => k(G, r, T)), q.appendChild(p);
          }
        }
      });
    });
  }, R = (e, a) => {
    e.preventDefault(), e.stopPropagation();
    const r = a.getBoundingClientRect();
    Ie(!0), He("table"), le(a), se({ x: e.clientX, y: e.clientY }), Oe({
      width: r.width,
      height: r.height
    }), a.classList.add("resizing"), document.body.classList.add("resizing"), document.addEventListener("mousemove", A), document.addEventListener("mouseup", S), document.body.style.cursor = "nw-resize";
  }, w = (e, a, r) => {
    e.preventDefault(), e.stopPropagation();
    const l = Array.from(a.querySelectorAll("tr")).map(
      (c) => c.querySelectorAll("td, th")[r]
    ).filter(Boolean);
    Ie(!0), He("column"), le(a), $e({ columnIndex: r, cells: l }), se({ x: e.clientX, y: e.clientY }), Oe({
      width: l[0] ? l[0].getBoundingClientRect().width : 100
    }), a.classList.add("resizing"), document.body.classList.add("resizing"), document.addEventListener("mousemove", K), document.addEventListener("mouseup", S), document.body.style.cursor = "col-resize";
  }, k = (e, a, r) => {
    e.preventDefault(), e.stopPropagation();
    const l = a.querySelectorAll("tr")[r];
    l && (Ie(!0), He("row"), le(a), $e({ rowIndex: r, row: l }), se({ x: e.clientX, y: e.clientY }), Oe({
      height: l.getBoundingClientRect().height
    }), a.classList.add("resizing"), document.body.classList.add("resizing"), document.addEventListener("mousemove", V), document.addEventListener("mouseup", S), document.body.style.cursor = "row-resize");
  }, A = (e) => {
    if (!J || !z || !oe)
      return;
    const a = e.clientX - xe.x, r = e.clientY - xe.y, l = Math.max(200, oe.width + a), c = Math.max(100, oe.height + r);
    z.style.width = `${l}px`, z.style.height = `${c}px`, z.style.transform = "scale(1.02)", z.style.transition = "none";
  }, K = (e) => {
    if (!J || !W || !oe)
      return;
    const a = e.clientX - xe.x, r = Math.max(50, oe.width + a);
    W.cells.forEach((l) => {
      l && (l.style.width = `${r}px`, l.style.minWidth = `${r}px`, l.style.maxWidth = `${r}px`);
    });
  }, V = (e) => {
    if (!J || !W || !oe)
      return;
    const a = e.clientY - xe.y, r = Math.max(30, oe.height + a);
    W.row && (W.row.style.height = `${r}px`, W.row.querySelectorAll("td, th").forEach((c) => {
      c.style.height = `${r}px`, c.style.minHeight = `${r}px`;
    }));
  }, S = () => {
    z && (z.classList.remove("resizing"), z.classList.add("resize-complete"), z.style.transform = "", z.style.transition = "", setTimeout(() => {
      z && z.classList.remove("resize-complete");
    }, 600)), document.body.classList.remove("resizing"), Ie(!1), He(null), le(null), $e(null), se({ x: 0, y: 0 }), Oe(null), document.removeEventListener("mousemove", A), document.removeEventListener("mousemove", K), document.removeEventListener("mousemove", V), document.removeEventListener("mouseup", S), document.body.style.cursor = "default", X();
  };
  U(() => () => {
    document.removeEventListener("mousemove", A), document.removeEventListener("mousemove", K), document.removeEventListener("mousemove", V), document.removeEventListener("mouseup", S);
  }, []), U(() => {
    h.current && setTimeout(() => {
      f();
    }, 100);
  }, [O]);
  const it = (e) => {
    const a = document.createElement("div");
    return a.innerHTML = e, a.querySelectorAll(".image-resize-wrapper").forEach((u) => {
      const i = u.querySelector("img");
      i && (i.removeAttribute("data-resize-enabled"), i.removeAttribute("data-original-cursor"), i.style.cursor === "pointer" && i.style.removeProperty("cursor"), u.parentNode.insertBefore(i, u)), u.remove();
    }), a.querySelectorAll("img").forEach((u) => {
      u.removeAttribute("data-resize-enabled"), u.removeAttribute("data-original-cursor"), u.style.cursor === "pointer" && u.style.removeProperty("cursor");
    }), a.querySelectorAll(".resize-handle").forEach((u) => u.remove()), a.innerHTML;
  }, X = () => {
    if (h.current) {
      const e = h.current.innerHTML;
      if (ie.current) {
        st(e);
        return;
      }
      if (e.includes("image-resize-wrapper") || e.includes("resize-handle")) {
        const r = it(e);
        st(r);
      } else
        st(e);
    }
  }, _t = () => {
    ie.current = !0, X(), ot(), setTimeout(() => {
      f();
    }, 50), setTimeout(() => {
      ie.current = !1;
    }, 100);
  }, Ft = (e) => {
    if (_) {
      e.preventDefault();
      return;
    }
    if (e.key === "Tab") {
      e.preventDefault(), e.shiftKey ? $("decreaseIndent") : $("increaseIndent");
      return;
    }
    if (e.ctrlKey || e.metaKey)
      switch (e.key) {
        case "b":
          e.preventDefault(), $("bold");
          break;
        case "i":
          e.preventDefault(), $("italic");
          break;
        case "u":
          e.preventDefault(), $("underline");
          break;
        case "l":
          e.preventDefault(), $("alignLeft");
          break;
        case "e":
          e.preventDefault(), $("alignCenter");
          break;
        case "r":
          e.preventDefault(), $("alignRight");
          break;
        case "j":
          e.preventDefault(), $("alignJustify");
          break;
        case "1":
          e.preventDefault(), o(vt[0]);
          break;
        case "2":
          e.preventDefault(), o(vt[3]);
          break;
        case "5":
          e.preventDefault(), o(vt[2]);
          break;
      }
  };
  U(() => {
    if (h.current && O !== h.current.innerHTML) {
      const e = ie.current;
      ie.current = !1, h.current.innerHTML = O, ie.current = e;
    }
  }, [O]), U(() => {
    const e = () => {
      document.activeElement === h.current && ot();
    };
    return document.addEventListener("selectionchange", e), () => document.removeEventListener("selectionchange", e);
  }, []), U(() => () => {
    he.current && clearTimeout(he.current);
  }, []), U(() => {
    const e = (a) => {
      if (!Object.values(Ge).some((u) => u))
        return;
      const l = document.querySelectorAll(".dropdown-container");
      let c = !0;
      l.forEach((u) => {
        u.contains(a.target) && (c = !1);
      }), c && Ze({});
    };
    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
  }, [Ge]), U(() => {
    const e = (r) => {
      J || nr(r);
    }, a = (r) => {
      const l = document.querySelector(".table-style-menu"), c = l && l.contains(r.target), u = r.target.closest("table.resizable-table");
      !c && !u && We(!1);
    };
    return h.current && h.current.addEventListener("click", e), document.addEventListener("click", a), () => {
      h.current && h.current.removeEventListener("click", e), document.removeEventListener("click", a);
    };
  }, [J]);
  const qt = {
    bold: { label: "B", title: "Bold (Ctrl+B)", className: "font-bold" },
    italic: { label: "I", title: "Italic (Ctrl+I)", className: "italic" },
    underline: { label: "U", title: "Underline (Ctrl+U)", className: "underline" },
    strikethrough: { label: "S", title: "Strikethrough", className: "line-through" },
    highlight: { label: "🖍️", title: "Highlight Text", className: "" },
    fontColor: { label: "🎨", title: "Font Color", className: "" },
    headings: { label: "H", title: "Headings", className: "font-bold", isDropdown: !0 },
    fontFamily: { label: "Font", title: "Font Family", className: "", isDropdown: !0 },
    lineSpacing: { label: "⫽", title: "Line & Paragraph Spacing (Ctrl+1/2/5)", className: "", isDropdown: !0 },
    alignLeft: { label: "⬅️", title: "Align Left", className: "" },
    alignCenter: { label: "⬆️", title: "Align Center", className: "" },
    alignRight: { label: "➡️", title: "Align Right", className: "" },
    alignJustify: { label: "↔️", title: "Justify", className: "" },
    unorderedList: { label: "•", title: "Bullet List", className: "", isDropdown: !0 },
    orderedList: { label: "1.", title: "Numbered List", className: "" },
    todoList: { label: "☑️", title: "Todo List", className: "" },
    increaseIndent: { label: "→", title: "Increase Indent", className: "" },
    decreaseIndent: { label: "←", title: "Decrease Indent", className: "" },
    link: { label: "🔗", title: "Insert Link", className: "" },
    insertImage: { label: "🖼️", title: "Insert Image", className: "" },
    blockquote: { label: "❝", title: "Quote", className: "" },
    codeBlock: { label: "<>", title: "Code Block", className: "font-mono" },
    pageBreak: { label: "📄", title: "Page Break", className: "" },
    caseChange: { label: "Aa", title: "Change Case", className: "" },
    insertTable: { label: "⊞", title: "Insert Table", className: "" }
  }, Ut = [
    { value: "p", label: "Normal" },
    { value: "h1", label: "Heading 1" },
    { value: "h2", label: "Heading 2" },
    { value: "h3", label: "Heading 3" },
    { value: "h4", label: "Heading 4" },
    { value: "h5", label: "Heading 5" },
    { value: "h6", label: "Heading 6" }
  ], Yt = [
    { value: "Arial", label: "Arial" },
    { value: "Georgia", label: "Georgia" },
    { value: "Times New Roman", label: "Times New Roman" },
    { value: "Courier New", label: "Courier New" },
    { value: "Verdana", label: "Verdana" },
    { value: "Helvetica", label: "Helvetica" }
  ], vt = [
    { value: "1.0", label: "Single (1.0)", lineHeight: "1.0", paragraphSpacing: "0" },
    { value: "1.15", label: "1.15", lineHeight: "1.15", paragraphSpacing: "0.2em" },
    { value: "1.5", label: "1.5", lineHeight: "1.5", paragraphSpacing: "0.5em" },
    { value: "2.0", label: "Double (2.0)", lineHeight: "2.0", paragraphSpacing: "1em" },
    { value: "2.5", label: "2.5", lineHeight: "2.5", paragraphSpacing: "1.2em" },
    { value: "3.0", label: "Triple (3.0)", lineHeight: "3.0", paragraphSpacing: "1.5em" }
  ], Vt = [
    "#000000",
    "#333333",
    "#666666",
    "#999999",
    "#cccccc",
    "#ffffff",
    "#ff0000",
    "#ff9900",
    "#ffff00",
    "#00ff00",
    "#0099ff",
    "#6600ff",
    "#ff00ff",
    "#ff3366",
    "#33ff99",
    "#3366ff",
    "#9933ff",
    "#ff6633"
  ], Xt = [
    "#ffff00",
    "#ffcc00",
    "#ff9900",
    "#ff6600",
    "#ff3300",
    "#ff0066",
    "#ff00cc",
    "#cc00ff",
    "#6600ff",
    "#0066ff",
    "#00ccff",
    "#00ffcc",
    "#00ff66",
    "#66ff00",
    "#ccff00",
    "#ffff66",
    "#ffcccc",
    "#ccffcc"
  ], Jt = [
    { value: "disc", label: "● Disc" },
    { value: "circle", label: "○ Circle" },
    { value: "square", label: "■ Square" }
  ], Kt = (e) => {
    const a = qt[e];
    if (!a)
      return null;
    if (a.isDropdown)
      return Zt(e, a);
    const r = wt[e], l = `${Fe.button} ${a.className} ${r ? "toolbar-btn-active" : ""}`;
    return /* @__PURE__ */ n.jsx(
      "button",
      {
        type: "button",
        className: l,
        title: a.title,
        onClick: () => $(e),
        disabled: _,
        children: a.label
      },
      e
    );
  }, [Gt, yt] = b({
    headings: "Normal",
    fontFamily: "Arial",
    lineSpacing: "Single (1.0)",
    unorderedList: "● Disc"
  }), Zt = (e, a) => {
    const r = Ge[e] || !1, l = () => {
      Ze((i) => ({
        ...i,
        [e]: !r
      }));
    }, c = () => {
      Ze((i) => ({
        ...i,
        [e]: !1
      }));
    }, u = () => Gt[e] || a.label;
    return /* @__PURE__ */ n.jsxs("div", { className: "dropdown-container wide-dropdown", children: [
      /* @__PURE__ */ n.jsxs(
        "button",
        {
          type: "button",
          className: `dropdown-trigger ${r ? "active" : ""}`,
          title: a.title,
          onClick: l,
          disabled: _,
          style: { minWidth: "120px", justifyContent: "space-between" },
          children: [
            /* @__PURE__ */ n.jsx("span", { children: u() }),
            /* @__PURE__ */ n.jsx("span", { className: "dropdown-arrow", children: "▼" })
          ]
        }
      ),
      r && /* @__PURE__ */ n.jsxs("div", { className: "dropdown-menu", style: { minWidth: "120px" }, children: [
        e === "headings" && Ut.map((i) => /* @__PURE__ */ n.jsx(
          "button",
          {
            type: "button",
            className: "dropdown-item",
            onClick: () => {
              t(i.value), yt((T) => ({ ...T, headings: i.label })), c();
            },
            style: {
              fontFamily: (i.value === "h1", "inherit"),
              fontSize: i.value === "h1" ? "1.1rem" : i.value === "h2" ? "1.05rem" : i.value === "h3" ? "1rem" : "0.875rem",
              fontWeight: i.value.startsWith("h") ? "600" : "400"
            },
            children: i.label
          },
          i.value
        )),
        e === "fontFamily" && Yt.map((i) => /* @__PURE__ */ n.jsx(
          "button",
          {
            type: "button",
            className: "dropdown-item font-preview",
            style: { "--font-family": i.value, fontFamily: i.value },
            onClick: () => {
              s(i.value), yt((T) => ({ ...T, fontFamily: i.label })), c();
            },
            children: i.label
          },
          i.value
        )),
        e === "lineSpacing" && vt.map((i) => /* @__PURE__ */ n.jsx(
          "button",
          {
            type: "button",
            className: "dropdown-item",
            onClick: () => {
              o(i), yt((T) => ({ ...T, lineSpacing: i.label })), c();
            },
            children: /* @__PURE__ */ n.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
              /* @__PURE__ */ n.jsx("span", { children: i.label }),
              /* @__PURE__ */ n.jsx("span", { style: { fontSize: "0.75rem", opacity: 0.6 }, children: i.lineHeight })
            ] })
          },
          i.value
        )),
        e === "unorderedList" && Jt.map((i) => /* @__PURE__ */ n.jsx(
          "button",
          {
            type: "button",
            className: "dropdown-item",
            onClick: () => {
              hr(i.value), yt((T) => ({ ...T, unorderedList: i.label })), c();
            },
            children: i.label
          },
          i.value
        ))
      ] })
    ] }, e);
  }, Ht = () => /* @__PURE__ */ n.jsx(
    "div",
    {
      ref: Re,
      className: Fe.toolbar,
      style: {
        position: x && H ? "fixed" : "relative",
        top: x && H ? `${B}px` : "auto",
        left: x && H ? "0" : "auto",
        right: x && H ? "0" : "auto",
        zIndex: x && H ? "1000" : "auto",
        width: x && H ? "100%" : "auto",
        transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)"
      },
      children: ee.map((e) => Kt(e))
    }
  ), Qt = () => E ? /* @__PURE__ */ n.jsx("div", { className: "modal-backdrop", children: /* @__PURE__ */ n.jsxs("div", { className: "compact-modal", children: [
    /* @__PURE__ */ n.jsx("h3", { children: "🔗 Insert Link" }),
    /* @__PURE__ */ n.jsxs("div", { className: "compact-form", children: [
      /* @__PURE__ */ n.jsx(
        "input",
        {
          type: "text",
          value: Je,
          onChange: (e) => Le(e.target.value),
          className: "compact-input",
          placeholder: "Link text",
          autoFocus: !0
        }
      ),
      /* @__PURE__ */ n.jsx(
        "input",
        {
          type: "url",
          value: Ne,
          onChange: (e) => Xe(e.target.value),
          className: "compact-input",
          placeholder: "https://example.com"
        }
      )
    ] }),
    /* @__PURE__ */ n.jsxs("div", { className: "compact-actions", children: [
      /* @__PURE__ */ n.jsx(
        "button",
        {
          type: "button",
          onClick: () => {
            Ve(!1), Xe(""), Le("");
          },
          className: "btn-compact-secondary",
          children: "Cancel"
        }
      ),
      /* @__PURE__ */ n.jsx(
        "button",
        {
          type: "button",
          onClick: Rt,
          className: "btn-compact-primary",
          disabled: !Ne || !Je,
          children: "Insert"
        }
      )
    ] })
  ] }) }) : null, er = () => Ct ? /* @__PURE__ */ n.jsx("div", { className: "modal-backdrop", children: /* @__PURE__ */ n.jsxs("div", { className: "compact-modal color-modal", children: [
    /* @__PURE__ */ n.jsx("h3", { children: "🎨 Text Color" }),
    /* @__PURE__ */ n.jsxs("div", { className: "compact-color-section", children: [
      /* @__PURE__ */ n.jsx("div", { className: "compact-color-grid", children: Vt.slice(0, 12).map((e) => /* @__PURE__ */ n.jsx(
        "button",
        {
          type: "button",
          className: `compact-color-btn ${_e === e ? "selected" : ""}`,
          style: { backgroundColor: e },
          onClick: () => d(e),
          title: e
        },
        e
      )) }),
      /* @__PURE__ */ n.jsxs("div", { className: "compact-custom-color", children: [
        /* @__PURE__ */ n.jsx(
          "input",
          {
            type: "color",
            value: _e,
            onChange: (e) => I(e.target.value),
            className: "compact-color-input"
          }
        ),
        /* @__PURE__ */ n.jsx(
          "button",
          {
            type: "button",
            onClick: () => d(_e),
            className: "btn-compact-accent",
            children: "Apply"
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ n.jsxs("div", { className: "compact-actions", children: [
      /* @__PURE__ */ n.jsx(
        "button",
        {
          type: "button",
          onClick: g,
          className: "btn-compact-danger",
          children: "Remove Text Color"
        }
      ),
      /* @__PURE__ */ n.jsx(
        "button",
        {
          type: "button",
          onClick: () => Ae(!1),
          className: "btn-compact-secondary",
          children: "Cancel"
        }
      )
    ] })
  ] }) }) : null, tr = () => ne ? /* @__PURE__ */ n.jsx("div", { className: "modal-backdrop", children: /* @__PURE__ */ n.jsxs("div", { className: "compact-modal color-modal", children: [
    /* @__PURE__ */ n.jsx("h3", { children: "🖍️ Highlight" }),
    /* @__PURE__ */ n.jsxs("div", { className: "compact-color-section", children: [
      /* @__PURE__ */ n.jsx("div", { className: "compact-color-grid", children: Xt.slice(0, 12).map((e) => /* @__PURE__ */ n.jsx(
        "button",
        {
          type: "button",
          className: `compact-color-btn ${De === e ? "selected" : ""}`,
          style: { backgroundColor: e },
          onClick: () => v(e),
          title: e
        },
        e
      )) }),
      /* @__PURE__ */ n.jsxs("div", { className: "compact-custom-color", children: [
        /* @__PURE__ */ n.jsx(
          "input",
          {
            type: "color",
            value: De,
            onChange: (e) => Ke(e.target.value),
            className: "compact-color-input"
          }
        ),
        /* @__PURE__ */ n.jsx(
          "button",
          {
            type: "button",
            onClick: () => v(De),
            className: "btn-compact-accent",
            children: "Apply"
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ n.jsxs("div", { className: "compact-actions", children: [
      /* @__PURE__ */ n.jsx(
        "button",
        {
          type: "button",
          onClick: () => v("transparent"),
          className: "btn-compact-danger",
          children: "Remove Highlight"
        }
      ),
      /* @__PURE__ */ n.jsx(
        "button",
        {
          type: "button",
          onClick: () => ae(!1),
          className: "btn-compact-secondary",
          children: "Cancel"
        }
      )
    ] })
  ] }) }) : null, rr = () => mt ? /* @__PURE__ */ n.jsx("div", { className: "modal-backdrop", children: /* @__PURE__ */ n.jsxs("div", { className: "compact-modal table-modal", children: [
    /* @__PURE__ */ n.jsx("h3", { children: "⊞ Insert Table" }),
    /* @__PURE__ */ n.jsxs("div", { className: "compact-table-controls", children: [
      /* @__PURE__ */ n.jsxs("div", { className: "table-dimension-control", children: [
        /* @__PURE__ */ n.jsx("label", { children: "Rows" }),
        /* @__PURE__ */ n.jsx(
          "input",
          {
            type: "number",
            min: "1",
            max: "10",
            value: ve,
            onChange: (e) => pt(parseInt(e.target.value) || 1),
            className: "compact-number-input"
          }
        )
      ] }),
      /* @__PURE__ */ n.jsxs("div", { className: "table-dimension-control", children: [
        /* @__PURE__ */ n.jsx("label", { children: "Columns" }),
        /* @__PURE__ */ n.jsx(
          "input",
          {
            type: "number",
            min: "1",
            max: "10",
            value: ye,
            onChange: (e) => ht(parseInt(e.target.value) || 1),
            className: "compact-number-input"
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ n.jsxs("div", { className: "table-preview", children: [
      ve,
      " × ",
      ye,
      " table"
    ] }),
    /* @__PURE__ */ n.jsxs("div", { className: "compact-actions", children: [
      /* @__PURE__ */ n.jsx(
        "button",
        {
          type: "button",
          onClick: () => Pe(!1),
          className: "btn-compact-secondary",
          children: "Cancel"
        }
      ),
      /* @__PURE__ */ n.jsx(
        "button",
        {
          type: "button",
          onClick: m,
          className: "btn-compact-primary",
          disabled: ve < 1 || ye < 1,
          children: "Insert"
        }
      )
    ] })
  ] }) }) : null, nr = (e) => {
    const a = e.target, r = a.closest("table"), l = a.closest("td, th");
    if (r && r.classList.contains("resizable-table")) {
      let c = "table", u = r, i = [];
      if (l) {
        c = "cell", u = l, i = [l];
        const ct = window.getSelection();
        if (ct.rangeCount > 0) {
          const Te = ct.getRangeAt(0), Z = [];
          if (Te.startContainer !== Te.endContainer) {
            const ce = Te.commonAncestorContainer;
            ce.nodeType === Node.ELEMENT_NODE && (ce.querySelectorAll("td, th").forEach((Q) => {
              Te.intersectsNode(Q) && Z.push(Q);
            }), Z.length > 1 && (i = Z));
          }
        }
      }
      Et(u), Tt(c), at(i);
      const T = ar(u, c);
      we(T);
      const q = u.getBoundingClientRect(), p = {
        x: q.right + 10,
        y: q.top
      }, G = {
        width: window.innerWidth,
        height: window.innerHeight
      };
      p.x + 320 > G.width && (p.x = q.left - 330), p.y + 400 > G.height && (p.y = Math.max(10, G.height - 410)), pe(p), We(!0);
    } else
      We(!1);
  }, ar = (e, a) => {
    const r = { ...C };
    if (a === "table") {
      const l = window.getComputedStyle(e);
      r.tableBackground = xt(l.backgroundColor) || "#ffffff", r.tableBorderColor = xt(l.borderColor) || "#cccccc", r.tableBorderWidth = l.borderWidth.replace("px", "") || "1", r.tableBorderStyle = l.borderStyle || "solid", r.tableAlignment = l.marginLeft === "auto" && l.marginRight === "auto" ? "center" : l.marginRight === "auto" ? "left" : "right";
    } else if (a === "cell") {
      const l = window.getComputedStyle(e);
      r.cellBackground = xt(l.backgroundColor) || "#ffffff", r.cellTextAlign = l.textAlign || "left", r.cellVerticalAlign = l.verticalAlign || "middle", r.cellBorderColor = xt(l.borderColor) || "#cccccc", r.cellBorderWidth = l.borderWidth.replace("px", "") || "1", r.cellBorderStyle = l.borderStyle || "solid", r.cellPadding = l.padding.replace("px", "") || "8";
    }
    return r;
  }, xt = (e) => {
    if (!e || e === "rgba(0, 0, 0, 0)" || e === "transparent")
      return "#ffffff";
    const a = e.match(/\d+/g);
    if (!a)
      return "#ffffff";
    const r = parseInt(a[0]), l = parseInt(a[1]), c = parseInt(a[2]);
    return "#" + ((1 << 24) + (r << 16) + (l << 8) + c).toString(16).slice(1);
  }, Se = (e, a) => {
    if (!nt || F !== "table")
      return;
    const r = nt;
    switch (e) {
      case "tableBackground":
        r.style.backgroundColor = a;
        break;
      case "tableBorderColor":
        r.style.borderColor = a;
        break;
      case "tableBorderWidth":
        r.style.borderWidth = `${a}px`;
        break;
      case "tableBorderStyle":
        r.style.borderStyle = a;
        break;
      case "tableAlignment":
        a === "center" ? (r.style.marginLeft = "auto", r.style.marginRight = "auto") : a === "right" ? (r.style.marginLeft = "auto", r.style.marginRight = "0") : (r.style.marginLeft = "0", r.style.marginRight = "auto");
        break;
      case "cellPadding":
        r.querySelectorAll("td, th").forEach((c) => {
          c.style.padding = `${a}px`;
        });
        break;
      case "cellSpacing":
        r.style.borderSpacing = `${a}px`;
        break;
    }
    we((l) => ({
      ...l,
      [e]: a
    })), X();
  }, je = (e, a) => {
    me.length !== 0 && (me.forEach((r) => {
      switch (e) {
        case "cellBackground":
          r.style.backgroundColor = a;
          break;
        case "cellTextAlign":
          r.style.textAlign = a;
          break;
        case "cellVerticalAlign":
          r.style.verticalAlign = a;
          break;
        case "cellBorderColor":
          r.style.borderColor = a;
          break;
        case "cellBorderWidth":
          r.style.borderWidth = `${a}px`;
          break;
        case "cellBorderStyle":
          r.style.borderStyle = a;
          break;
        case "cellPadding":
          r.style.padding = `${a}px`;
          break;
      }
    }), we((r) => ({
      ...r,
      [e]: a
    })), X());
  }, lr = () => {
    if (!jt || !nt)
      return null;
    const e = F === "table", a = F === "cell" || F === "row" || F === "column";
    return /* @__PURE__ */ n.jsx(
      "div",
      {
        className: "table-style-menu",
        style: {
          position: "fixed",
          left: `${lt.x}px`,
          top: `${lt.y}px`,
          zIndex: 1e3
        },
        children: /* @__PURE__ */ n.jsxs("div", { className: "table-style-panel", children: [
          /* @__PURE__ */ n.jsxs("div", { className: "table-style-header", children: [
            /* @__PURE__ */ n.jsx("h3", { children: e ? "📊 Table Styles" : F === "row" ? "📏 Row Styles" : F === "column" ? "📋 Column Styles" : "🔲 Cell Styles" }),
            /* @__PURE__ */ n.jsx(
              "button",
              {
                className: "table-style-close",
                onClick: () => We(!1),
                title: "Close",
                children: "✕"
              }
            )
          ] }),
          /* @__PURE__ */ n.jsxs("div", { className: "table-style-content", children: [
            e && /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
              /* @__PURE__ */ n.jsxs("div", { className: "style-section", children: [
                /* @__PURE__ */ n.jsx("h4", { children: "🎨 Table Appearance" }),
                /* @__PURE__ */ n.jsxs("div", { className: "style-row", children: [
                  /* @__PURE__ */ n.jsx("label", { children: "Background:" }),
                  /* @__PURE__ */ n.jsx(
                    "input",
                    {
                      type: "color",
                      value: C.tableBackground,
                      onChange: (r) => Se("tableBackground", r.target.value),
                      className: "color-input"
                    }
                  )
                ] }),
                /* @__PURE__ */ n.jsxs("div", { className: "style-row", children: [
                  /* @__PURE__ */ n.jsx("label", { children: "Alignment:" }),
                  /* @__PURE__ */ n.jsxs(
                    "select",
                    {
                      value: C.tableAlignment,
                      onChange: (r) => Se("tableAlignment", r.target.value),
                      className: "style-select",
                      children: [
                        /* @__PURE__ */ n.jsx("option", { value: "left", children: "Left" }),
                        /* @__PURE__ */ n.jsx("option", { value: "center", children: "Center" }),
                        /* @__PURE__ */ n.jsx("option", { value: "right", children: "Right" })
                      ]
                    }
                  )
                ] })
              ] }),
              /* @__PURE__ */ n.jsxs("div", { className: "style-section", children: [
                /* @__PURE__ */ n.jsx("h4", { children: "🔲 Border & Spacing" }),
                /* @__PURE__ */ n.jsxs("div", { className: "style-row", children: [
                  /* @__PURE__ */ n.jsx("label", { children: "Border Color:" }),
                  /* @__PURE__ */ n.jsx(
                    "input",
                    {
                      type: "color",
                      value: C.tableBorderColor,
                      onChange: (r) => Se("tableBorderColor", r.target.value),
                      className: "color-input"
                    }
                  )
                ] }),
                /* @__PURE__ */ n.jsxs("div", { className: "style-row", children: [
                  /* @__PURE__ */ n.jsx("label", { children: "Border Width:" }),
                  /* @__PURE__ */ n.jsxs(
                    "select",
                    {
                      value: C.tableBorderWidth,
                      onChange: (r) => Se("tableBorderWidth", r.target.value),
                      className: "style-select",
                      children: [
                        /* @__PURE__ */ n.jsx("option", { value: "0", children: "None" }),
                        /* @__PURE__ */ n.jsx("option", { value: "1", children: "Thin (1px)" }),
                        /* @__PURE__ */ n.jsx("option", { value: "2", children: "Medium (2px)" }),
                        /* @__PURE__ */ n.jsx("option", { value: "3", children: "Thick (3px)" }),
                        /* @__PURE__ */ n.jsx("option", { value: "4", children: "Extra Thick (4px)" })
                      ]
                    }
                  )
                ] }),
                /* @__PURE__ */ n.jsxs("div", { className: "style-row", children: [
                  /* @__PURE__ */ n.jsx("label", { children: "Border Style:" }),
                  /* @__PURE__ */ n.jsxs(
                    "select",
                    {
                      value: C.tableBorderStyle,
                      onChange: (r) => Se("tableBorderStyle", r.target.value),
                      className: "style-select",
                      children: [
                        /* @__PURE__ */ n.jsx("option", { value: "solid", children: "Solid" }),
                        /* @__PURE__ */ n.jsx("option", { value: "dashed", children: "Dashed" }),
                        /* @__PURE__ */ n.jsx("option", { value: "dotted", children: "Dotted" }),
                        /* @__PURE__ */ n.jsx("option", { value: "double", children: "Double" })
                      ]
                    }
                  )
                ] }),
                /* @__PURE__ */ n.jsxs("div", { className: "style-row", children: [
                  /* @__PURE__ */ n.jsx("label", { children: "Cell Padding:" }),
                  /* @__PURE__ */ n.jsx(
                    "input",
                    {
                      type: "range",
                      min: "0",
                      max: "20",
                      value: C.cellPadding,
                      onChange: (r) => Se("cellPadding", r.target.value),
                      className: "style-range"
                    }
                  ),
                  /* @__PURE__ */ n.jsxs("span", { className: "range-value", children: [
                    C.cellPadding,
                    "px"
                  ] })
                ] }),
                /* @__PURE__ */ n.jsxs("div", { className: "style-row", children: [
                  /* @__PURE__ */ n.jsx("label", { children: "Cell Spacing:" }),
                  /* @__PURE__ */ n.jsx(
                    "input",
                    {
                      type: "range",
                      min: "0",
                      max: "10",
                      value: C.cellSpacing,
                      onChange: (r) => Se("cellSpacing", r.target.value),
                      className: "style-range"
                    }
                  ),
                  /* @__PURE__ */ n.jsxs("span", { className: "range-value", children: [
                    C.cellSpacing,
                    "px"
                  ] })
                ] })
              ] })
            ] }),
            a && /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
              /* @__PURE__ */ n.jsxs("div", { className: "style-section", children: [
                /* @__PURE__ */ n.jsx("h4", { children: "🎨 Cell Appearance" }),
                /* @__PURE__ */ n.jsxs("div", { className: "style-row", children: [
                  /* @__PURE__ */ n.jsx("label", { children: "Background:" }),
                  /* @__PURE__ */ n.jsx(
                    "input",
                    {
                      type: "color",
                      value: C.cellBackground,
                      onChange: (r) => je("cellBackground", r.target.value),
                      className: "color-input"
                    }
                  )
                ] })
              ] }),
              /* @__PURE__ */ n.jsxs("div", { className: "style-section", children: [
                /* @__PURE__ */ n.jsx("h4", { children: "📝 Text Alignment" }),
                /* @__PURE__ */ n.jsxs("div", { className: "style-row", children: [
                  /* @__PURE__ */ n.jsx("label", { children: "Horizontal:" }),
                  /* @__PURE__ */ n.jsx("div", { className: "alignment-buttons", children: ["left", "center", "right", "justify"].map((r) => /* @__PURE__ */ n.jsx(
                    "button",
                    {
                      className: `alignment-btn ${C.cellTextAlign === r ? "active" : ""}`,
                      onClick: () => je("cellTextAlign", r),
                      title: `Align ${r}`,
                      children: r === "left" ? "⬅️" : r === "center" ? "⬆️" : r === "right" ? "➡️" : "↔️"
                    },
                    r
                  )) })
                ] }),
                /* @__PURE__ */ n.jsxs("div", { className: "style-row", children: [
                  /* @__PURE__ */ n.jsx("label", { children: "Vertical:" }),
                  /* @__PURE__ */ n.jsx("div", { className: "alignment-buttons", children: [
                    { value: "top", icon: "⬆️", label: "Top" },
                    { value: "middle", icon: "◾", label: "Middle" },
                    { value: "bottom", icon: "⬇️", label: "Bottom" }
                  ].map((r) => /* @__PURE__ */ n.jsx(
                    "button",
                    {
                      className: `alignment-btn ${C.cellVerticalAlign === r.value ? "active" : ""}`,
                      onClick: () => je("cellVerticalAlign", r.value),
                      title: r.label,
                      children: r.icon
                    },
                    r.value
                  )) })
                ] })
              ] }),
              /* @__PURE__ */ n.jsxs("div", { className: "style-section", children: [
                /* @__PURE__ */ n.jsx("h4", { children: "🔲 Cell Border" }),
                /* @__PURE__ */ n.jsxs("div", { className: "style-row", children: [
                  /* @__PURE__ */ n.jsx("label", { children: "Border Color:" }),
                  /* @__PURE__ */ n.jsx(
                    "input",
                    {
                      type: "color",
                      value: C.cellBorderColor,
                      onChange: (r) => je("cellBorderColor", r.target.value),
                      className: "color-input"
                    }
                  )
                ] }),
                /* @__PURE__ */ n.jsxs("div", { className: "style-row", children: [
                  /* @__PURE__ */ n.jsx("label", { children: "Border Width:" }),
                  /* @__PURE__ */ n.jsxs(
                    "select",
                    {
                      value: C.cellBorderWidth,
                      onChange: (r) => je("cellBorderWidth", r.target.value),
                      className: "style-select",
                      children: [
                        /* @__PURE__ */ n.jsx("option", { value: "0", children: "None" }),
                        /* @__PURE__ */ n.jsx("option", { value: "1", children: "Thin (1px)" }),
                        /* @__PURE__ */ n.jsx("option", { value: "2", children: "Medium (2px)" }),
                        /* @__PURE__ */ n.jsx("option", { value: "3", children: "Thick (3px)" })
                      ]
                    }
                  )
                ] }),
                /* @__PURE__ */ n.jsxs("div", { className: "style-row", children: [
                  /* @__PURE__ */ n.jsx("label", { children: "Border Style:" }),
                  /* @__PURE__ */ n.jsxs(
                    "select",
                    {
                      value: C.cellBorderStyle,
                      onChange: (r) => je("cellBorderStyle", r.target.value),
                      className: "style-select",
                      children: [
                        /* @__PURE__ */ n.jsx("option", { value: "solid", children: "Solid" }),
                        /* @__PURE__ */ n.jsx("option", { value: "dashed", children: "Dashed" }),
                        /* @__PURE__ */ n.jsx("option", { value: "dotted", children: "Dotted" }),
                        /* @__PURE__ */ n.jsx("option", { value: "double", children: "Double" })
                      ]
                    }
                  )
                ] }),
                /* @__PURE__ */ n.jsxs("div", { className: "style-row", children: [
                  /* @__PURE__ */ n.jsx("label", { children: "Padding:" }),
                  /* @__PURE__ */ n.jsx(
                    "input",
                    {
                      type: "range",
                      min: "0",
                      max: "20",
                      value: C.cellPadding,
                      onChange: (r) => je("cellPadding", r.target.value),
                      className: "style-range"
                    }
                  ),
                  /* @__PURE__ */ n.jsxs("span", { className: "range-value", children: [
                    C.cellPadding,
                    "px"
                  ] })
                ] })
              ] })
            ] }),
            /* @__PURE__ */ n.jsx("div", { className: "style-section", children: /* @__PURE__ */ n.jsx("div", { className: "selection-info", children: /* @__PURE__ */ n.jsx("small", { children: F === "table" ? "Entire table selected" : F === "row" ? `Row selected (${me.length} cells)` : F === "column" ? `Column selected (${me.length} cells)` : `${me.length} cell${me.length > 1 ? "s" : ""} selected` }) }) })
          ] })
        ] })
      }
    );
  }, sr = () => {
    var e;
    _ || (e = gt.current) == null || e.click();
  }, or = async (e) => {
    var r;
    const a = e.target.files;
    if (a && a.length > 0) {
      const l = a[0];
      if (!l.type.startsWith("image/")) {
        alert("Please select an image file.");
        return;
      }
      const c = 10 * 1024 * 1024;
      if (l.size > c) {
        alert("Image file is too large. Please select an image smaller than 10MB.");
        return;
      }
      try {
        ue(!0);
        const u = await zt(l, Y);
        (r = h.current) == null || r.focus(), document.execCommand("insertHTML", !1, `<img src="${u}" alt="${l.name}" style="max-width: 100%; height: auto; margin: 5px 0;" />`), setTimeout(() => {
          Ee();
        }, 100), X();
      } catch (u) {
        console.error("Image upload failed:", u), alert("Failed to upload image. Please try again.");
      } finally {
        ue(!1), e.target.value = "";
      }
    }
  }, ir = async (e) => {
    const r = (e.clipboardData || window.clipboardData).items;
    let l = null;
    for (let c = 0; c < r.length; c++)
      if (r[c].type.indexOf("image") !== -1) {
        l = r[c].getAsFile();
        break;
      }
    if (l) {
      e.preventDefault(), ue(!0);
      try {
        const c = await zt(l, Y);
        document.execCommand("insertHTML", !1, `<img src="${c}" alt="${l.name}" />`), setTimeout(() => {
          Ee();
        }, 100);
      } catch (c) {
        console.error("Image upload failed:", c);
      } finally {
        ue(!1);
      }
    }
  }, cr = (e) => {
    e.preventDefault(), e.stopPropagation(), e.currentTarget.style.backgroundColor = "#f0f8ff", e.currentTarget.style.border = "2px dashed #007acc";
  }, dr = (e) => {
    e.preventDefault(), e.stopPropagation(), e.currentTarget.style.backgroundColor = "", e.currentTarget.style.border = "";
  }, ur = async (e) => {
    e.preventDefault(), e.stopPropagation(), e.currentTarget.style.backgroundColor = "", e.currentTarget.style.border = "";
    const r = Array.from(e.dataTransfer.files).filter((l) => l.type.startsWith("image/"));
    if (r.length > 0) {
      ue(!0);
      try {
        for (const l of r) {
          const c = await zt(l, Y);
          document.execCommand("insertHTML", !1, `<img src="${c}" alt="${l.name}" style="max-width: 100%; height: auto; margin: 5px 0;" />`);
        }
        setTimeout(() => {
          Ee();
        }, 100);
      } catch (l) {
        console.error("Image upload failed:", l);
      } finally {
        ue(!1);
      }
    }
  }, Ee = Ue(() => {
    if (!h.current)
      return;
    h.current.querySelectorAll("img").forEach((a) => {
      var r;
      if (!a.dataset.resizeEnabled) {
        if ((r = a.parentElement) != null && r.classList.contains("image-resize-wrapper")) {
          const l = a.parentElement;
          l.parentNode.insertBefore(a, l), l.remove();
        }
        a.dataset.resizeEnabled = "true", a.dataset.originalCursor || (a.dataset.originalCursor = a.style.cursor || ""), a.style.cursor = "pointer", a.addEventListener("click", (l) => {
          l.preventDefault(), l.stopPropagation(), fr(a);
        });
      }
    });
  }, []), fr = Ue((e) => {
    Dt();
    const a = e.style.cursor;
    e.dataset.originalCursor = a;
    const r = document.createElement("div");
    r.className = "image-resize-wrapper", r.style.cssText = `
      position: relative;
      display: inline-block;
      border: 2px solid #007acc;
      box-sizing: border-box;
      margin: 5px;
      z-index: 1000000;
      isolation: isolate;
    `, e.parentNode.insertBefore(r, e), r.appendChild(e), ["nw", "ne", "sw", "se", "n", "s", "e", "w"].forEach((c) => {
      const u = document.createElement("div");
      u.className = `resize-handle resize-${c}`, u.style.cssText = `
        position: absolute;
        width: 8px;
        height: 8px;
        background: #007acc;
        border: 1px solid white;
        cursor: ${$t(c)};
        z-index: 1000000;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      `, mr(u, c), u.addEventListener("mousedown", (i) => pr(i, e, c)), r.appendChild(u);
    }), fe(e);
  }, []), $t = (e) => ({
    nw: "nw-resize",
    ne: "ne-resize",
    sw: "sw-resize",
    se: "se-resize",
    n: "n-resize",
    s: "s-resize",
    e: "e-resize",
    w: "w-resize"
  })[e], mr = (e, a) => {
    switch (a) {
      case "nw":
        e.style.top = "-4px", e.style.left = "-4px";
        break;
      case "ne":
        e.style.top = "-4px", e.style.right = "-4px";
        break;
      case "sw":
        e.style.bottom = "-4px", e.style.left = "-4px";
        break;
      case "se":
        e.style.bottom = "-4px", e.style.right = "-4px";
        break;
      case "n":
        e.style.top = "-4px", e.style.left = "50%", e.style.transform = "translateX(-50%)";
        break;
      case "s":
        e.style.bottom = "-4px", e.style.left = "50%", e.style.transform = "translateX(-50%)";
        break;
      case "e":
        e.style.right = "-4px", e.style.top = "50%", e.style.transform = "translateY(-50%)";
        break;
      case "w":
        e.style.left = "-4px", e.style.top = "50%", e.style.transform = "translateY(-50%)";
        break;
    }
  }, pr = Ue((e, a, r) => {
    e.preventDefault(), e.stopPropagation();
    const l = a.getBoundingClientRect(), c = e.clientX, u = e.clientY, i = l.width, T = l.height, q = i / T;
    rt(!0), Me({
      img: a,
      position: r,
      startX: c,
      startY: u,
      startWidth: i,
      startHeight: T,
      aspectRatio: q
    });
    const p = {
      img: a,
      position: r,
      startX: c,
      startY: u,
      startWidth: i,
      startHeight: T,
      aspectRatio: q
    }, G = (Te) => {
      const Z = Te.clientX - p.startX, ce = Te.clientY - p.startY;
      let be = p.startWidth, Q = p.startHeight;
      switch (p.position) {
        case "se":
          be = Math.max(50, p.startWidth + Z), Q = Math.max(30, p.startHeight + ce);
          break;
        case "sw":
          be = Math.max(50, p.startWidth - Z), Q = Math.max(30, p.startHeight + ce);
          break;
        case "ne":
          be = Math.max(50, p.startWidth + Z), Q = Math.max(30, p.startHeight - ce);
          break;
        case "nw":
          be = Math.max(50, p.startWidth - Z), Q = Math.max(30, p.startHeight - ce);
          break;
        case "e":
          be = Math.max(50, p.startWidth + Z);
          break;
        case "w":
          be = Math.max(50, p.startWidth - Z);
          break;
        case "s":
          Q = Math.max(30, p.startHeight + ce);
          break;
        case "n":
          Q = Math.max(30, p.startHeight - ce);
          break;
      }
      p.img.style.width = `${be}px`, p.img.style.height = `${Q}px`;
    }, ct = () => {
      rt(!1), Me(null), document.removeEventListener("mousemove", G), document.removeEventListener("mouseup", ct), document.body.style.cursor = "default", document.body.style.userSelect = "auto", j && h.current && j(h.current.innerHTML);
    };
    document.addEventListener("mousemove", G), document.addEventListener("mouseup", ct), document.body.style.cursor = $t(r), document.body.style.userSelect = "none";
  }, [j]), Dt = Ue(() => {
    if (!h.current)
      return;
    h.current.querySelectorAll(".image-resize-wrapper").forEach((a) => {
      const r = a.querySelector("img");
      r && (r.dataset.originalCursor !== void 0 && (r.dataset.originalCursor ? r.style.cursor = r.dataset.originalCursor : r.style.removeProperty("cursor"), delete r.dataset.originalCursor), delete r.dataset.resizeEnabled, a.parentNode.insertBefore(r, a)), a.remove();
    }), fe(null), setTimeout(() => {
      if (h.current && j) {
        const a = h.current.innerHTML;
        j(a);
      }
    }, 0);
  }, [j]), Pt = Ue((e) => {
    tt && !e.target.closest(".image-resize-wrapper") && !e.target.closest("img") && Dt();
  }, [tt, Dt]);
  U(() => {
    if (h.current) {
      const e = setTimeout(() => {
        Ee();
      }, 200);
      return () => clearTimeout(e);
    }
  }, [O, Ee]), U(() => {
    if (h.current) {
      const e = setTimeout(() => {
        Ee();
      }, 500);
      return () => clearTimeout(e);
    }
  }, [Ee]), U(() => (document.addEventListener("click", Pt), () => document.removeEventListener("click", Pt)), [Pt]), U(() => () => {
    document.body.style.cursor = "default", document.body.style.userSelect = "auto";
  }, []);
  const hr = (e) => {
    y("insertUnorderedList"), setTimeout(() => {
      const a = window.getSelection();
      if (a.rangeCount > 0) {
        const l = a.getRangeAt(0).startContainer.parentElement.closest("ul");
        l && (l.style.listStyleType = e);
      }
      X();
    }, 50);
  };
  return /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
    /* @__PURE__ */ n.jsxs("div", { ref: Ye, className: Fe.wrapper, children: [
      N === "top" && Ht(),
      /* @__PURE__ */ n.jsx(
        "div",
        {
          ref: h,
          contentEditable: !_,
          className: Fe.contentArea,
          onInput: _t,
          onKeyDown: Ft,
          onPaste: ir,
          onDragOver: cr,
          onDragLeave: dr,
          onDrop: ur,
          onBlur: X,
          "data-placeholder": D,
          style: {
            minHeight: "100px",
            paddingTop: x && H && N === "top" ? `${ze}px` : void 0
          },
          suppressContentEditableWarning: !0
        }
      ),
      N === "bottom" && Ht()
    ] }),
    /* @__PURE__ */ n.jsx(
      "input",
      {
        ref: gt,
        type: "file",
        accept: "image/*",
        style: { display: "none" },
        onChange: or
      }
    ),
    et && /* @__PURE__ */ n.jsx("div", { className: "upload-indicator", children: /* @__PURE__ */ n.jsx("p", { children: "Uploading image..." }) }),
    Qt(),
    er(),
    tr(),
    rr(),
    lr()
  ] });
};
export {
  yr as default
};