react-lite-rich-text-editor 1.1.3 → 1.1.5

package/dist/index.esm.js

@@ -1,593 +1,329 @@
 import React, { useRef, useState, useEffect, useCallback } from 'react';
 
-function _arrayLikeToArray(r, a) {
-  (null == a || a > r.length) && (a = r.length);
-  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
-  return n;
-}
-function _arrayWithHoles(r) {
-  if (Array.isArray(r)) return r;
-}
-function asyncGeneratorStep(n, t, e, r, o, a, c) {
-  try {
-    var i = n[a](c),
-      u = i.value;
-  } catch (n) {
-    return void e(n);
-  }
-  i.done ? t(u) : Promise.resolve(u).then(r, o);
-}
-function _asyncToGenerator(n) {
-  return function () {
-    var t = this,
-      e = arguments;
-    return new Promise(function (r, o) {
-      var a = n.apply(t, e);
-      function _next(n) {
-        asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
-      }
-      function _throw(n) {
-        asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
-      }
-      _next(void 0);
-    });
-  };
-}
-function _createForOfIteratorHelper(r, e) {
-  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (!t) {
-    if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
-      t && (r = t);
-      var n = 0,
-        F = function () {};
-      return {
-        s: F,
-        n: function () {
-          return n >= r.length ? {
-            done: true
-          } : {
-            done: false,
-            value: r[n++]
-          };
-        },
-        e: function (r) {
-          throw r;
-        },
-        f: F
-      };
-    }
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-  var o,
-    a = true,
-    u = false;
-  return {
-    s: function () {
-      t = t.call(r);
-    },
-    n: function () {
-      var r = t.next();
-      return a = r.done, r;
-    },
-    e: function (r) {
-      u = true, o = r;
-    },
-    f: function () {
-      try {
-        a || null == t.return || t.return();
-      } finally {
-        if (u) throw o;
-      }
-    }
-  };
-}
-function _defineProperty(e, r, t) {
-  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-    value: t,
-    enumerable: true,
-    configurable: true,
-    writable: true
-  }) : e[r] = t, e;
-}
-function _iterableToArrayLimit(r, l) {
-  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (null != t) {
-    var e,
-      n,
-      i,
-      u,
-      a = [],
-      f = true,
-      o = false;
-    try {
-      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
-    } catch (r) {
-      o = true, n = r;
-    } finally {
-      try {
-        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
-      } finally {
-        if (o) throw n;
-      }
-    }
-    return a;
-  }
-}
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function (r) {
-      return Object.getOwnPropertyDescriptor(e, r).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread2(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
-      _defineProperty(e, r, t[r]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
-      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
-    });
-  }
-  return e;
-}
-function _regenerator() {
-  /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
-  var e,
-    t,
-    r = "function" == typeof Symbol ? Symbol : {},
-    n = r.iterator || "@@iterator",
-    o = r.toStringTag || "@@toStringTag";
-  function i(r, n, o, i) {
-    var c = n && n.prototype instanceof Generator ? n : Generator,
-      u = Object.create(c.prototype);
-    return _regeneratorDefine(u, "_invoke", function (r, n, o) {
-      var i,
-        c,
-        u,
-        f = 0,
-        p = o || [],
-        y = false,
-        G = {
-          p: 0,
-          n: 0,
-          v: e,
-          a: d,
-          f: d.bind(e, 4),
-          d: function (t, r) {
-            return i = t, c = 0, u = e, G.n = r, a;
-          }
-        };
-      function d(r, n) {
-        for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
-          var o,
-            i = p[t],
-            d = G.p,
-            l = i[2];
-          r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
-        }
-        if (o || r > 1) return a;
-        throw y = true, n;
-      }
-      return function (o, p, l) {
-        if (f > 1) throw TypeError("Generator is already running");
-        for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
-          i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
-          try {
-            if (f = 2, i) {
-              if (c || (o = "next"), t = i[o]) {
-                if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
-                if (!t.done) return t;
-                u = t.value, c < 2 && (c = 0);
-              } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
-              i = e;
-            } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
-          } catch (t) {
-            i = e, c = 1, u = t;
-          } finally {
-            f = 1;
-          }
-        }
-        return {
-          value: t,
-          done: y
-        };
-      };
-    }(r, o, i), true), u;
-  }
-  var a = {};
-  function Generator() {}
-  function GeneratorFunction() {}
-  function GeneratorFunctionPrototype() {}
-  t = Object.getPrototypeOf;
-  var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
-      return this;
-    }), t),
-    u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
-  function f(e) {
-    return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
-  }
-  return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
-    return this;
-  }), _regeneratorDefine(u, "toString", function () {
-    return "[object Generator]";
-  }), (_regenerator = function () {
-    return {
-      w: i,
-      m: f
-    };
-  })();
-}
-function _regeneratorDefine(e, r, n, t) {
-  var i = Object.defineProperty;
-  try {
-    i({}, "", {});
-  } catch (e) {
-    i = 0;
-  }
-  _regeneratorDefine = function (e, r, n, t) {
-    function o(r, n) {
-      _regeneratorDefine(e, r, function (e) {
-        return this._invoke(r, n, e);
-      });
-    }
-    r ? i ? i(e, r, {
-      value: n,
-      enumerable: !t,
-      configurable: !t,
-      writable: !t
-    }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
-  }, _regeneratorDefine(e, r, n, t);
-}
-function _regeneratorValues(e) {
-  if (null != e) {
-    var t = e["function" == typeof Symbol && Symbol.iterator || "@@iterator"],
-      r = 0;
-    if (t) return t.call(e);
-    if ("function" == typeof e.next) return e;
-    if (!isNaN(e.length)) return {
-      next: function () {
-        return e && r >= e.length && (e = void 0), {
-          value: e && e[r++],
-          done: !e
-        };
-      }
-    };
-  }
-  throw new TypeError(typeof e + " is not iterable");
-}
-function _slicedToArray(r, e) {
-  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
-}
-function _toPrimitive(t, r) {
-  if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r);
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
-}
-function _toPropertyKey(t) {
-  var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : i + "";
-}
-function _typeof(o) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(o);
-}
-function _unsupportedIterableToArray(r, a) {
-  if (r) {
-    if ("string" == typeof r) return _arrayLikeToArray(r, a);
-    var t = {}.toString.call(r).slice(8, -1);
-    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
-  }
-}
-
-var FaImage = function FaImage(_ref) {
-  var className = _ref.className,
-    size = _ref.size,
-    color = _ref.color,
-    style = _ref.style;
+const FaImage = ({
+  className,
+  size,
+  color,
+  style
+}) => {
   return /*#__PURE__*/React.createElement("span", {
     className: className,
-    style: _objectSpread2({
+    style: {
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
       fontSize: size || '1em',
-      color: color || 'inherit'
-    }, style),
+      color: color || 'inherit',
+      ...style
+    },
     dangerouslySetInnerHTML: {
-      __html: "<svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 512 512\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z\"></path></svg>"
+      __html: `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z"></path></svg>`
     }
   });
 };
-var FaBold = function FaBold(_ref3) {
-  var className = _ref3.className,
-    size = _ref3.size,
-    color = _ref3.color,
-    style = _ref3.style;
+const FaBold = ({
+  className,
+  size,
+  color,
+  style
+}) => {
   return /*#__PURE__*/React.createElement("span", {
     className: className,
-    style: _objectSpread2({
+    style: {
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
       fontSize: size || '1em',
-      color: color || 'inherit'
-    }, style),
+      color: color || 'inherit',
+      ...style
+    },
     dangerouslySetInnerHTML: {
-      __html: "<svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 384 512\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M333.49 238a122 122 0 0 0 27-65.21C367.87 96.49 308 32 233.42 32H34a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h31.87v288H34a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h209.32c70.8 0 134.14-51.75 141-122.4 4.74-48.45-16.39-92.06-50.83-119.6zM145.66 112h87.76a48 48 0 0 1 0 96h-87.76zm87.76 288h-87.76V288h87.76a56 56 0 0 1 0 112z\"></path></svg>"
+      __html: `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 384 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M333.49 238a122 122 0 0 0 27-65.21C367.87 96.49 308 32 233.42 32H34a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h31.87v288H34a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h209.32c70.8 0 134.14-51.75 141-122.4 4.74-48.45-16.39-92.06-50.83-119.6zM145.66 112h87.76a48 48 0 0 1 0 96h-87.76zm87.76 288h-87.76V288h87.76a56 56 0 0 1 0 112z"></path></svg>`
     }
   });
 };
-var FaItalic = function FaItalic(_ref4) {
-  var className = _ref4.className,
-    size = _ref4.size,
-    color = _ref4.color,
-    style = _ref4.style;
+const FaItalic = ({
+  className,
+  size,
+  color,
+  style
+}) => {
   return /*#__PURE__*/React.createElement("span", {
     className: className,
-    style: _objectSpread2({
+    style: {
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
       fontSize: size || '1em',
-      color: color || 'inherit'
-    }, style),
+      color: color || 'inherit',
+      ...style
+    },
     dangerouslySetInnerHTML: {
-      __html: "<svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 320 512\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M320 48v32a16 16 0 0 1-16 16h-62.76l-80 320H208a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H16a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16h62.76l80-320H112a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h192a16 16 0 0 1 16 16z\"></path></svg>"
+      __html: `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 320 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M320 48v32a16 16 0 0 1-16 16h-62.76l-80 320H208a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H16a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16h62.76l80-320H112a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h192a16 16 0 0 1 16 16z"></path></svg>`
     }
   });
 };
-var FaUnderline = function FaUnderline(_ref5) {
-  var className = _ref5.className,
-    size = _ref5.size,
-    color = _ref5.color,
-    style = _ref5.style;
+const FaUnderline = ({
+  className,
+  size,
+  color,
+  style
+}) => {
   return /*#__PURE__*/React.createElement("span", {
     className: className,
-    style: _objectSpread2({
+    style: {
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
       fontSize: size || '1em',
-      color: color || 'inherit'
-    }, style),
+      color: color || 'inherit',
+      ...style
+    },
     dangerouslySetInnerHTML: {
-      __html: "<svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 448 512\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M32 64h32v160c0 88.22 71.78 160 160 160s160-71.78 160-160V64h32a16 16 0 0 0 16-16V16a16 16 0 0 0-16-16H272a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32v160a80 80 0 0 1-160 0V64h32a16 16 0 0 0 16-16V16a16 16 0 0 0-16-16H32a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16zm400 384H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z\"></path></svg>"
+      __html: `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M32 64h32v160c0 88.22 71.78 160 160 160s160-71.78 160-160V64h32a16 16 0 0 0 16-16V16a16 16 0 0 0-16-16H272a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32v160a80 80 0 0 1-160 0V64h32a16 16 0 0 0 16-16V16a16 16 0 0 0-16-16H32a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16zm400 384H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"></path></svg>`
     }
   });
 };
-var FaTextHeight = function FaTextHeight(_ref6) {
-  var className = _ref6.className,
-    size = _ref6.size,
-    color = _ref6.color,
-    style = _ref6.style;
+const FaTextHeight = ({
+  className,
+  size,
+  color,
+  style
+}) => {
   return /*#__PURE__*/React.createElement("span", {
     className: className,
-    style: _objectSpread2({
+    style: {
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
       fontSize: size || '1em',
-      color: color || 'inherit'
-    }, style),
+      color: color || 'inherit',
+      ...style
+    },
     dangerouslySetInnerHTML: {
-      __html: "<svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 576 512\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M304 32H16A16 16 0 0 0 0 48v96a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-32h56v304H80a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-40V112h56v32a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zm256 336h-48V144h48c14.31 0 21.33-17.31 11.31-27.31l-80-80a16 16 0 0 0-22.62 0l-80 80C379.36 126 384.36 144 400 144h48v224h-48c-14.31 0-21.32 17.31-11.31 27.31l80 80a16 16 0 0 0 22.62 0l80-80C580.64 386 575.64 368 560 368z\"></path></svg>"
+      __html: `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M304 32H16A16 16 0 0 0 0 48v96a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-32h56v304H80a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-40V112h56v32a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zm256 336h-48V144h48c14.31 0 21.33-17.31 11.31-27.31l-80-80a16 16 0 0 0-22.62 0l-80 80C379.36 126 384.36 144 400 144h48v224h-48c-14.31 0-21.32 17.31-11.31 27.31l80 80a16 16 0 0 0 22.62 0l80-80C580.64 386 575.64 368 560 368z"></path></svg>`
     }
   });
 };
-var FaAlignCenter = function FaAlignCenter(_ref7) {
-  var className = _ref7.className,
-    size = _ref7.size,
-    color = _ref7.color,
-    style = _ref7.style;
+const FaAlignCenter = ({
+  className,
+  size,
+  color,
+  style
+}) => {
   return /*#__PURE__*/React.createElement("span", {
     className: className,
-    style: _objectSpread2({
+    style: {
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
       fontSize: size || '1em',
-      color: color || 'inherit'
-    }, style),
+      color: color || 'inherit',
+      ...style
+    },
     dangerouslySetInnerHTML: {
-      __html: "<svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 448 512\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M432 160H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0 256H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM108.1 96h231.81A12.09 12.09 0 0 0 352 83.9V44.09A12.09 12.09 0 0 0 339.91 32H108.1A12.09 12.09 0 0 0 96 44.09V83.9A12.1 12.1 0 0 0 108.1 96zm231.81 256A12.09 12.09 0 0 0 352 339.9v-39.81A12.09 12.09 0 0 0 339.91 288H108.1A12.09 12.09 0 0 0 96 300.09v39.81a12.1 12.1 0 0 0 12.1 12.1z\"></path></svg>"
+      __html: `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M432 160H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0 256H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM108.1 96h231.81A12.09 12.09 0 0 0 352 83.9V44.09A12.09 12.09 0 0 0 339.91 32H108.1A12.09 12.09 0 0 0 96 44.09V83.9A12.1 12.1 0 0 0 108.1 96zm231.81 256A12.09 12.09 0 0 0 352 339.9v-39.81A12.09 12.09 0 0 0 339.91 288H108.1A12.09 12.09 0 0 0 96 300.09v39.81a12.1 12.1 0 0 0 12.1 12.1z"></path></svg>`
     }
   });
 };
-var FaAlignRight = function FaAlignRight(_ref8) {
-  var className = _ref8.className,
-    size = _ref8.size,
-    color = _ref8.color,
-    style = _ref8.style;
+const FaAlignRight = ({
+  className,
+  size,
+  color,
+  style
+}) => {
   return /*#__PURE__*/React.createElement("span", {
     className: className,
-    style: _objectSpread2({
+    style: {
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
       fontSize: size || '1em',
-      color: color || 'inherit'
-    }, style),
+      color: color || 'inherit',
+      ...style
+    },
     dangerouslySetInnerHTML: {
-      __html: "<svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 448 512\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M16 224h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16zm416 192H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm3.17-384H172.83A12.82 12.82 0 0 0 160 44.83v38.34A12.82 12.82 0 0 0 172.83 96h262.34A12.82 12.82 0 0 0 448 83.17V44.83A12.82 12.82 0 0 0 435.17 32zm0 256H172.83A12.82 12.82 0 0 0 160 300.83v38.34A12.82 12.82 0 0 0 172.83 352h262.34A12.82 12.82 0 0 0 448 339.17v-38.34A12.82 12.82 0 0 0 435.17 288z\"></path></svg>"
+      __html: `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 224h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16zm416 192H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm3.17-384H172.83A12.82 12.82 0 0 0 160 44.83v38.34A12.82 12.82 0 0 0 172.83 96h262.34A12.82 12.82 0 0 0 448 83.17V44.83A12.82 12.82 0 0 0 435.17 32zm0 256H172.83A12.82 12.82 0 0 0 160 300.83v38.34A12.82 12.82 0 0 0 172.83 352h262.34A12.82 12.82 0 0 0 448 339.17v-38.34A12.82 12.82 0 0 0 435.17 288z"></path></svg>`
     }
   });
 };
-var FaAlignLeft = function FaAlignLeft(_ref0) {
-  var className = _ref0.className,
-    size = _ref0.size,
-    color = _ref0.color,
-    style = _ref0.style;
+const FaAlignLeft = ({
+  className,
+  size,
+  color,
+  style
+}) => {
   return /*#__PURE__*/React.createElement("span", {
     className: className,
-    style: _objectSpread2({
+    style: {
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
       fontSize: size || '1em',
-      color: color || 'inherit'
-    }, style),
+      color: color || 'inherit',
+      ...style
+    },
     dangerouslySetInnerHTML: {
-      __html: "<svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 448 512\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.83 352h262.34A12.82 12.82 0 0 0 288 339.17v-38.34A12.82 12.82 0 0 0 275.17 288H12.83A12.82 12.82 0 0 0 0 300.83v38.34A12.82 12.82 0 0 0 12.83 352zm0-256h262.34A12.82 12.82 0 0 0 288 83.17V44.83A12.82 12.82 0 0 0 275.17 32H12.83A12.82 12.82 0 0 0 0 44.83v38.34A12.82 12.82 0 0 0 12.83 96zM432 160H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0 256H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z\"></path></svg>"
+      __html: `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12.83 352h262.34A12.82 12.82 0 0 0 288 339.17v-38.34A12.82 12.82 0 0 0 275.17 288H12.83A12.82 12.82 0 0 0 0 300.83v38.34A12.82 12.82 0 0 0 12.83 352zm0-256h262.34A12.82 12.82 0 0 0 288 83.17V44.83A12.82 12.82 0 0 0 275.17 32H12.83A12.82 12.82 0 0 0 0 44.83v38.34A12.82 12.82 0 0 0 12.83 96zM432 160H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0 256H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"></path></svg>`
     }
   });
 };
-var FaListOl = function FaListOl(_ref1) {
-  var className = _ref1.className,
-    size = _ref1.size,
-    color = _ref1.color,
-    style = _ref1.style;
+const FaListOl = ({
+  className,
+  size,
+  color,
+  style
+}) => {
   return /*#__PURE__*/React.createElement("span", {
     className: className,
-    style: _objectSpread2({
+    style: {
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
       fontSize: size || '1em',
-      color: color || 'inherit'
-    }, style),
+      color: color || 'inherit',
+      ...style
+    },
     dangerouslySetInnerHTML: {
-      __html: "<svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 512 512\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M61.77 401l17.5-20.15a19.92 19.92 0 0 0 5.07-14.19v-3.31C84.34 356 80.5 352 73 352H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h22.83a157.41 157.41 0 0 0-11 12.31l-5.61 7c-4 5.07-5.25 10.13-2.8 14.88l1.05 1.93c3 5.76 6.29 7.88 12.25 7.88h4.73c10.33 0 15.94 2.44 15.94 9.09 0 4.72-4.2 8.22-14.36 8.22a41.54 41.54 0 0 1-15.47-3.12c-6.49-3.88-11.74-3.5-15.6 3.12l-5.59 9.31c-3.72 6.13-3.19 11.72 2.63 15.94 7.71 4.69 20.38 9.44 37 9.44 34.16 0 48.5-22.75 48.5-44.12-.03-14.38-9.12-29.76-28.73-34.88zM496 224H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM16 160h64a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H64V40a8 8 0 0 0-8-8H32a8 8 0 0 0-7.14 4.42l-8 16A8 8 0 0 0 24 64h8v64H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8zm-3.91 160H80a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H41.32c3.29-10.29 48.34-18.68 48.34-56.44 0-29.06-25-39.56-44.47-39.56-21.36 0-33.8 10-40.46 18.75-4.37 5.59-3 10.84 2.8 15.37l8.58 6.88c5.61 4.56 11 2.47 16.12-2.44a13.44 13.44 0 0 1 9.46-3.84c3.33 0 9.28 1.56 9.28 8.75C51 248.19 0 257.31 0 304.59v4C0 316 5.08 320 12.09 320z\"></path></svg>"
+      __html: `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M61.77 401l17.5-20.15a19.92 19.92 0 0 0 5.07-14.19v-3.31C84.34 356 80.5 352 73 352H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h22.83a157.41 157.41 0 0 0-11 12.31l-5.61 7c-4 5.07-5.25 10.13-2.8 14.88l1.05 1.93c3 5.76 6.29 7.88 12.25 7.88h4.73c10.33 0 15.94 2.44 15.94 9.09 0 4.72-4.2 8.22-14.36 8.22a41.54 41.54 0 0 1-15.47-3.12c-6.49-3.88-11.74-3.5-15.6 3.12l-5.59 9.31c-3.72 6.13-3.19 11.72 2.63 15.94 7.71 4.69 20.38 9.44 37 9.44 34.16 0 48.5-22.75 48.5-44.12-.03-14.38-9.12-29.76-28.73-34.88zM496 224H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM16 160h64a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H64V40a8 8 0 0 0-8-8H32a8 8 0 0 0-7.14 4.42l-8 16A8 8 0 0 0 24 64h8v64H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8zm-3.91 160H80a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H41.32c3.29-10.29 48.34-18.68 48.34-56.44 0-29.06-25-39.56-44.47-39.56-21.36 0-33.8 10-40.46 18.75-4.37 5.59-3 10.84 2.8 15.37l8.58 6.88c5.61 4.56 11 2.47 16.12-2.44a13.44 13.44 0 0 1 9.46-3.84c3.33 0 9.28 1.56 9.28 8.75C51 248.19 0 257.31 0 304.59v4C0 316 5.08 320 12.09 320z"></path></svg>`
     }
   });
 };
-var FaListUl = function FaListUl(_ref10) {
-  var className = _ref10.className,
-    size = _ref10.size,
-    color = _ref10.color,
-    style = _ref10.style;
+const FaListUl = ({
+  className,
+  size,
+  color,
+  style
+}) => {
   return /*#__PURE__*/React.createElement("span", {
     className: className,
-    style: _objectSpread2({
+    style: {
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
       fontSize: size || '1em',
-      color: color || 'inherit'
-    }, style),
+      color: color || 'inherit',
+      ...style
+    },
     dangerouslySetInnerHTML: {
-      __html: "<svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 512 512\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M48 48a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm448 16H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z\"></path></svg>"
+      __html: `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M48 48a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm448 16H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"></path></svg>`
     }
   });
 };
-var FaFont = function FaFont(_ref12) {
-  var className = _ref12.className,
-    size = _ref12.size,
-    color = _ref12.color,
-    style = _ref12.style;
+const FaFont = ({
+  className,
+  size,
+  color,
+  style
+}) => {
   return /*#__PURE__*/React.createElement("span", {
     className: className,
-    style: _objectSpread2({
+    style: {
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
       fontSize: size || '1em',
-      color: color || 'inherit'
-    }, style),
+      color: color || 'inherit',
+      ...style
+    },
     dangerouslySetInnerHTML: {
-      __html: "<svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 448 512\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z\"></path></svg>"
+      __html: `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"></path></svg>`
     }
   });
 };
-var FaTable = function FaTable(_ref14) {
-  var className = _ref14.className,
-    size = _ref14.size,
-    color = _ref14.color,
-    style = _ref14.style;
+const FaTable = ({
+  className,
+  size,
+  color,
+  style
+}) => {
   return /*#__PURE__*/React.createElement("span", {
     className: className,
-    style: _objectSpread2({
+    style: {
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
       fontSize: size || '1em',
-      color: color || 'inherit'
-    }, style),
+      color: color || 'inherit',
+      ...style
+    },
     dangerouslySetInnerHTML: {
-      __html: "<svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 512 512\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M64 448c-35.3 0-64-28.7-64-64V128c0-35.3 28.7-64 64-64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64zm96-288H64v64h96v-64zm0 96H64v64h96v-64zm0 96H64c0 17.7 14.3 32 32 32h64v-32zm128-192h-96v64h96v-64zm0 96h-96v64h96v-64zm0 96h-96v96h96v-96zm160-192h-96v64h96v-64zm0 96h-96v64h96v-64zm0 96h-96v64h64c17.7 0 32-14.3 32-32v-32z\"></path></svg>"
+      __html: `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M64 448c-35.3 0-64-28.7-64-64V128c0-35.3 28.7-64 64-64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64zm96-288H64v64h96v-64zm0 96H64v64h96v-64zm0 96H64c0 17.7 14.3 32 32 32h64v-32zm128-192h-96v64h96v-64zm0 96h-96v64h96v-64zm0 96h-96v96h96v-96zm160-192h-96v64h96v-64zm0 96h-96v64h96v-64zm0 96h-96v64h64c17.7 0 32-14.3 32-32v-32z"></path></svg>`
     }
   });
 };
-var FaObjectGroup = function FaObjectGroup(_ref16) {
-  var className = _ref16.className,
-    size = _ref16.size,
-    color = _ref16.color,
-    style = _ref16.style;
+const FaObjectGroup = ({
+  className,
+  size,
+  color,
+  style
+}) => {
   return /*#__PURE__*/React.createElement("span", {
     className: className,
-    style: _objectSpread2({
+    style: {
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
       fontSize: size || '1em',
-      color: color || 'inherit'
-    }, style),
+      color: color || 'inherit',
+      ...style
+    },
     dangerouslySetInnerHTML: {
-      __html: "<svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 512 512\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M480 320h-48v48c0 17.7-14.3 32-32 32h-48v32c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V160c0-26.5 21.5-48 48-48h32v-48c0-17.7 14.3-32 32-32h48V0h32c26.5 0 48 21.5 48 48v48h48c17.7 0 32 14.3 32 32v48h32c26.5 0 48 21.5 48 48v128c0 26.5-21.5 48-48 48z\"></path></svg>"
+      __html: `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M480 320h-48v48c0 17.7-14.3 32-32 32h-48v32c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V160c0-26.5 21.5-48 48-48h32v-48c0-17.7 14.3-32 32-32h48V0h32c26.5 0 48 21.5 48 48v48h48c17.7 0 32 14.3 32 32v48h32c26.5 0 48 21.5 48 48v128c0 26.5-21.5 48-48 48z"></path></svg>`
     }
   });
 };
-var FaTrash = function FaTrash(_ref17) {
-  var className = _ref17.className,
-    size = _ref17.size,
-    color = _ref17.color,
-    style = _ref17.style;
+const FaTrash = ({
+  className,
+  size,
+  color,
+  style
+}) => {
   return /*#__PURE__*/React.createElement("span", {
     className: className,
-    style: _objectSpread2({
+    style: {
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
       fontSize: size || '1em',
-      color: color || 'inherit'
-    }, style),
+      color: color || 'inherit',
+      ...style
+    },
     dangerouslySetInnerHTML: {
-      __html: "<svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 448 512\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z\"></path></svg>"
+      __html: `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"></path></svg>`
     }
   });
 };
-var FaVideo = function FaVideo(_ref18) {
-  var className = _ref18.className,
-    size = _ref18.size,
-    color = _ref18.color,
-    style = _ref18.style;
+const FaVideo = ({
+  className,
+  size,
+  color,
+  style
+}) => {
   return /*#__PURE__*/React.createElement("span", {
     className: className,
-    style: _objectSpread2({
+    style: {
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
       fontSize: size || '1em',
-      color: color || 'inherit'
-    }, style),
+      color: color || 'inherit',
+      ...style
+    },
     dangerouslySetInnerHTML: {
       __html: '<svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 576 512\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 128C0 92.7 28.7 64 64 64H320c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128zM559.1 99.8c10.4 5.6 16.9 16.3 16.9 28.2V384c0 11.9-6.5 22.6-16.9 28.2s-23 5-32.9-1.6l-96-64L416 337.1V174.9l14.2-9.5 96-64c9.9-6.6 22.6-7.1 32.9-1.6z\"></path></svg>'
     }
   });
 };
 
+// Basic ID generator
+
 // DraftJS helper stubs
 // Since we are removing specific DraftJS dependencies for this package,
 // these serve as placeholders or basic HTML verifiers.
 
-var isValidDraftFormat = function isValidDraftFormat(content) {
-  if (_typeof(content) !== "object" || content === null) return false;
+const isValidDraftFormat = content => {
+  if (typeof content !== "object" || content === null) return false;
   return !!(content.blocks && content.entityMap);
 };
 
@@ -595,18 +331,16 @@ var isValidDraftFormat = function isValidDraftFormat(content) {
 // Dealing with full DraftJS->HTML conversion without the library is complex.
 // We assume for this package that if the legacy DraftJS format is passed,
 // the user might need to handle it or we expect HTML primarily.
-var draftBlocksToHTML = function draftBlocksToHTML(content) {
+const draftBlocksToHTML = content => {
   console.warn("draftBlocksToHTML: DraftJS object detected but full conversion is simplified in this package.");
   // Return empty or try to extract text as a fallback
   if (content && content.blocks) {
-    return content.blocks.map(function (b) {
-      return "<p>".concat(b.text, "</p>");
-    }).join("");
+    return content.blocks.map(b => `<p>${b.text}</p>`).join("");
   }
   return "";
 };
 
-var Spinner = function Spinner() {
+const Spinner = () => {
   return /*#__PURE__*/React.createElement("div", {
     className: "rte-spinner-container"
   }, /*#__PURE__*/React.createElement("div", {
@@ -614,8 +348,9 @@ var Spinner = function Spinner() {
   }));
 };
 
-var LabelComponent = function LabelComponent(_ref) {
-  var children = _ref.children;
+const LabelComponent = ({
+  children
+}) => {
   if (!children) return null;
   return /*#__PURE__*/React.createElement("label", {
     className: "rte-label",
@@ -653,198 +388,131 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".rte-container{background-color:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.05);overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1)}.rte-container:focus-within{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.rte-toolbar{align-items:center;background-color:#f9fafb;border-bottom:1px solid #f3f4f6;display:flex;flex-wrap:wrap;gap:4px;padding:8px}.rte-toolbar-button{align-items:center;background:transparent;border:none;border-radius:6px;color:#4b5563;cursor:pointer;display:flex;height:32px;justify-content:center;padding:0;transition:all .15s ease;width:32px}.rte-toolbar-button:hover{background-color:#f3f4f6;color:#111827}.rte-toolbar-button.active{background-color:#eff6ff;color:#2563eb}.rte-toolbar-button:disabled{cursor:not-allowed;opacity:.5}.rte-toolbar-button-danger:hover{background-color:#fef2f2!important;color:#dc2626!important}.rte-toolbar-select{background-color:#fff;border:1px solid #e5e7eb;border-radius:6px;color:#374151;cursor:pointer;font-size:14px;height:32px;outline:none;padding:0 8px;transition:border-color .15s ease}.rte-toolbar-select:hover{border-color:#d1d5db}.rte-toolbar-select:focus{border-color:#3b82f6}.rte-color-picker-label{align-items:center;border-radius:6px;cursor:pointer;display:flex;height:32px;justify-content:center;position:relative;transition:background-color .15s ease;width:32px}.rte-color-picker-label:hover{background-color:#f3f4f6}.rte-color-input{cursor:pointer;height:100%;inset:0;opacity:0;position:absolute;width:100%}.rte-content{color:#1f2937;font-family:inherit;font-size:16px;line-height:1.6;min-height:150px;outline:none;overflow-y:auto;padding:12px;word-break:break-word}.rte-content ul{list-style-type:disc;margin-left:1.5rem}.rte-content ol{list-style-type:decimal;margin-left:1.5rem}.rte-content img{border-radius:8px;display:block;height:auto;max-width:100%}.rte-content table{border-collapse:collapse;margin:16px 0;width:100%}.rte-content td,.rte-content th{border:1px solid #e5e7eb;min-width:40px;padding:12px;word-break:break-word}.video-container{border-radius:12px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);height:0;margin:16px 0;overflow:hidden;padding-bottom:56.25%;position:relative}.video-container iframe{height:100%;left:0;position:absolute;top:0;width:100%}.rte-modal-overlay{align-items:center;animation:rte-fade-in .2s ease-out;backdrop-filter:blur(4px);background-color:rgba(0,0,0,.5);display:flex;inset:0;justify-content:center;position:fixed;z-index:9999}.rte-modal{animation:rte-zoom-in .2s ease-out;background-color:#fff;border:1px solid #f3f4f6;border-radius:16px;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);display:flex;flex-direction:column;gap:16px;max-width:400px;padding:0;width:100%}.rte-modal-title{color:#111827;flex:1;font-size:18px;font-weight:600;margin:0;text-align:center}.rte-modal-header{align-items:center;border-bottom:1px solid #f3f4f6;display:flex;justify-content:space-between;padding:20px 24px 16px}.rte-form-group{display:flex;flex-direction:column;gap:8px;padding:16px 24px}.rte-label{color:#374151;font-size:14px;font-weight:600}.rte-input{border:1px solid #d1d5db;border-radius:8px;outline:none;padding:8px 12px;transition:all .15s ease;width:93%}.rte-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.rte-modal-actions{border-top:1px solid #f3f4f6;display:flex;gap:12px;justify-content:flex-end;padding:16px 24px 20px}.rte-button{border:none;border-radius:8px;cursor:pointer;font-weight:500;padding:8px 16px;transition:all .15s ease}.rte-button-secondary{background-color:#f3f4f6;color:#4b5563}.rte-button-secondary:hover{background-color:#e5e7eb}.rte-button-primary{background-color:#2563eb;box-shadow:0 1px 2px rgba(0,0,0,.05);color:#fff}.rte-button-primary:hover{background-color:#1d4ed8}.rte-button-primary:disabled{cursor:not-allowed;opacity:.5}.rte-spinner-container{align-items:center;display:flex;justify-content:center;padding:16px}.rte-spinner{animation:rte-spin .8s linear infinite;border:3px solid #eff6ff;border-radius:50%;border-top-color:#3b82f6;height:32px;width:32px}@keyframes rte-spin{to{transform:rotate(1turn)}}@keyframes rte-fade-in{0%{opacity:0}to{opacity:1}}@keyframes rte-zoom-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.image-container{background:#f9fafb;border:1px solid #f3f4f6;border-radius:12px;box-sizing:border-box;margin:15px;max-width:100%;position:relative;transition:all .2s ease}.image-container.image-align-center{display:block;height:300px;margin:24px auto;width:100%}.image-container.image-align-left,.image-container.image-align-right{display:inline-block;height:300px;width:350px}.image-container.image-align-left{float:left;margin-right:24px}.image-container.image-align-right{float:right;margin-left:24px}.image-container img{background:#fff;border-radius:12px;display:block;height:100%;margin:0 auto;object-fit:contain;width:100%}.image-delete-button{align-items:center;background:#ef4444;border:3px solid #fff;border-radius:9999px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);color:#fff;cursor:pointer;display:flex;font-size:18px;font-weight:700;height:26px;justify-content:center;line-height:1;padding:0;position:absolute;right:0;top:0;transform:translate(50%,-50%);transition:all .2s cubic-bezier(.4,0,.2,1);width:26px;z-index:50}.image-delete-button:hover{background:#b91c1c;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);transform:translate(50%,-50%) scale(1.1)}.rte-table-delete-btn,.rte-table-delete-hover{align-items:center;display:flex;justify-content:center}.rte-table-delete-btn{background:#fff;border:1px solid #ef4444;border-radius:6px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);color:#ef4444;cursor:pointer;height:28px;padding:0;transition:all .2s ease;width:28px}.rte-table-delete-btn:hover{background:#ef4444;color:#fff;transform:scale(1.1)}.rte-table-delete-btn:active{transform:scale(.95)}.image-container:after{clear:both;content:\"\";display:table}.rte-footer{background-color:#fcfcfd;border-top:1px solid #f3f4f6;display:flex;justify-content:flex-end;padding:6px 16px;user-select:none}.rte-footer-content{align-items:center;color:#9ca3af;display:flex;font-size:11px;gap:10px;letter-spacing:.025em}.rte-footer-separator{color:#e5e7eb;font-size:14px;line-height:1}.rte-footer-item b{color:#6b7280;font-weight:600}";
+var css_248z = ".rte-container{background-color:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.05);overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1)}.rte-container:focus-within{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.rte-toolbar{align-items:center;background-color:#f9fafb;border-bottom:1px solid #f3f4f6;display:flex;flex-wrap:wrap;gap:4px;padding:8px}.rte-toolbar-button{align-items:center;background:transparent;border:none;border-radius:6px;color:#4b5563;cursor:pointer;display:flex;height:32px;justify-content:center;padding:0;transition:all .15s ease;width:32px}.rte-toolbar-button:hover{background-color:#f3f4f6;color:#111827}.rte-toolbar-button.active{background-color:#eff6ff;color:#2563eb}.rte-toolbar-button:disabled{cursor:not-allowed;opacity:.5}.rte-toolbar-button-danger:hover{background-color:#fef2f2!important;color:#dc2626!important}.rte-toolbar-select{background-color:#fff;border:1px solid #e5e7eb;border-radius:6px;color:#374151;cursor:pointer;font-size:14px;height:32px;outline:none;padding:0 8px;transition:border-color .15s ease}.rte-toolbar-select:hover{border-color:#d1d5db}.rte-toolbar-select:focus{border-color:#3b82f6}.rte-color-picker-label{align-items:center;border-radius:6px;cursor:pointer;display:flex;height:32px;justify-content:center;position:relative;transition:background-color .15s ease;width:32px}.rte-color-picker-label:hover{background-color:#f3f4f6}.rte-color-input{cursor:pointer;height:100%;inset:0;opacity:0;position:absolute;width:100%}.rte-content{color:#1f2937;font-family:inherit;font-size:16px;line-height:1.6;min-height:150px;outline:none;overflow-y:auto;padding:12px;word-break:break-word}.rte-content ul{list-style-type:disc;margin-left:1.5rem}.rte-content ol{list-style-type:decimal;margin-left:1.5rem}.rte-content img{border-radius:8px;display:block;height:auto;max-width:100%}.rte-content table{border-collapse:collapse;margin:16px 0;width:100%}.rte-content td,.rte-content th{border:1px solid #e5e7eb;min-width:40px;padding:12px;word-break:break-word}.video-container{border-radius:12px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);height:0;margin:16px 0;max-width:100%;overflow:hidden;padding-bottom:56.25%;position:relative}.video-container iframe{height:100%;left:0;position:absolute;top:0;width:100%}.rte-modal-overlay{align-items:center;animation:rte-fade-in .2s ease-out;backdrop-filter:blur(4px);background-color:rgba(0,0,0,.5);display:flex;inset:0;justify-content:center;position:fixed;z-index:9999}.rte-modal{animation:rte-zoom-in .2s ease-out;background-color:#fff;border:1px solid #f3f4f6;border-radius:16px;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);display:flex;flex-direction:column;gap:16px;max-width:400px;padding:0;width:100%}.rte-modal-title{color:#111827;flex:1;font-size:18px;font-weight:600;margin:0;text-align:center}.rte-modal-header{align-items:center;border-bottom:1px solid #f3f4f6;display:flex;justify-content:space-between;padding:20px 24px 16px}.rte-form-group{display:flex;flex-direction:column;gap:8px;padding:16px 24px}.rte-label{color:#374151;font-size:14px;font-weight:600}.rte-input{border:1px solid #d1d5db;border-radius:8px;outline:none;padding:8px 12px;transition:all .15s ease;width:93%}.rte-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.rte-modal-actions{border-top:1px solid #f3f4f6;display:flex;gap:12px;justify-content:flex-end;padding:16px 24px 20px}.rte-button{border:none;border-radius:8px;cursor:pointer;font-weight:500;padding:8px 16px;transition:all .15s ease}.rte-button-secondary{background-color:#f3f4f6;color:#4b5563}.rte-button-secondary:hover{background-color:#e5e7eb}.rte-button-primary{background-color:#2563eb;box-shadow:0 1px 2px rgba(0,0,0,.05);color:#fff}.rte-button-primary:hover{background-color:#1d4ed8}.rte-button-primary:disabled{cursor:not-allowed;opacity:.5}.rte-spinner-container{align-items:center;display:flex;justify-content:center;padding:16px}.rte-spinner{animation:rte-spin .8s linear infinite;border:3px solid #eff6ff;border-radius:50%;border-top-color:#3b82f6;height:32px;width:32px}@keyframes rte-spin{to{transform:rotate(1turn)}}@keyframes rte-fade-in{0%{opacity:0}to{opacity:1}}@keyframes rte-zoom-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.image-container{display:block;line-height:0;margin:16px 0;max-width:100%;width:fit-content}.image-container.image-align-center{margin-left:auto;margin-right:auto}.image-container.image-align-left{margin-left:0;margin-right:auto}.image-container.image-align-right{margin-left:auto;margin-right:0}.image-media-frame{display:block;line-height:0;max-width:100%;position:relative;width:fit-content}.image-media-frame img{border-radius:12px;display:block;height:auto;margin:0;max-width:100%;width:auto}.image-media-frame[style*=width] img{width:100%}.image-media-frame[data-explicit-height=true] img,.image-media-frame[style*=height] img{height:100%;object-fit:contain}.image-container.image-small .image-media-frame img{width:50%!important}.image-delete-button{align-items:center;background:#ef4444;border:3px solid #fff;border-radius:9999px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);color:#fff;cursor:pointer;display:none;font-size:18px;font-weight:700;height:26px;justify-content:center;line-height:1;padding:0;pointer-events:none;position:absolute;right:0;top:0;transform:translate(50%,-50%);transition:all .2s cubic-bezier(.4,0,.2,1);width:26px;z-index:50}.rte-content.rte-is-editable.rte-is-focused .image-delete-button,.rte-content.rte-is-editable.rte-is-focused .video-delete-button{display:flex;pointer-events:auto}.image-delete-button:hover{background:#b91c1c;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);transform:translate(50%,-50%) scale(1.1)}.media-resize-handles{inset:0;pointer-events:none;position:absolute;z-index:55}.media-resize-handle{background:#dbeafe;border:2px solid #fff;border-radius:4px;box-shadow:0 1px 3px rgba(15,23,42,.12);pointer-events:auto;position:absolute;z-index:60}.media-resize-handle:hover{background:#bfdbfe}.media-resize-handle-left,.media-resize-handle-right{cursor:ew-resize;height:28px;top:50%;transform:translateY(-50%);width:10px}.media-resize-handle-right{right:-5px}.media-resize-handle-left{left:-5px}.media-resize-handle-bottom,.media-resize-handle-top{cursor:ns-resize;height:10px;left:50%;transform:translateX(-50%);width:28px}.media-resize-handle-top{top:-5px}.media-resize-handle-bottom{bottom:-5px}.video-container .media-resize-handle-right{right:4px}.video-container .media-resize-handle-left{left:4px}.video-container .media-resize-handle-top{top:4px}.video-container .media-resize-handle-bottom{bottom:4px}.video-container .video-delete-button{z-index:70}.rte-table-delete-btn,.rte-table-delete-hover{align-items:center;display:flex;justify-content:center}.rte-table-delete-btn{background:#fff;border:1px solid #ef4444;border-radius:6px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);color:#ef4444;cursor:pointer;height:28px;padding:0;transition:all .2s ease;width:28px}.rte-table-delete-btn:hover{background:#ef4444;color:#fff;transform:scale(1.1)}.rte-table-delete-btn:active{transform:scale(.95)}.rte-image-toolbar{background:#fff!important;border:1px solid #e5e7eb!important;border-radius:8px!important;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)!important;display:flex;gap:4px!important;padding:4px!important;pointer-events:auto!important}.rte-image-toolbar button{align-items:center;background:transparent;border:none;border-radius:4px;color:#4b5563;cursor:pointer;display:flex;font-size:11px;font-weight:600;height:28px;justify-content:center;min-width:32px;padding:0 4px;transition:all .15s ease}.rte-image-toolbar button:hover{background-color:#f3f4f6;color:#111827}.rte-image-toolbar button.danger{color:#ef4444!important}.rte-image-toolbar button.danger:hover{background-color:#fef2f2!important}.image-container:after{clear:both;content:\"\";display:table}.rte-footer{background-color:#fcfcfd;border-top:1px solid #f3f4f6;display:flex;justify-content:flex-end;padding:6px 16px;user-select:none}.rte-footer-content{align-items:center;color:#9ca3af;display:flex;font-size:11px;gap:10px;letter-spacing:.025em}.rte-footer-separator{color:#e5e7eb;font-size:14px;line-height:1}.rte-footer-item b{color:#6b7280;font-weight:600}";
 styleInject(css_248z);
 
 // Helper functions for HTML escaping
-var escapeHtml = function escapeHtml(str) {
+const escapeHtml = str => {
   if (!str) return "";
   return String(str).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\"/g, "&quot;").replace(/'/g, "&#039;");
 };
-var escapeAttr = function escapeAttr(str) {
-  return escapeHtml(str).replace(/"/g, "&quot;");
-};
+const escapeAttr = str => escapeHtml(str).replace(/"/g, "&quot;");
 
 // URL detection regex
-var URL_REGEX = /(https?:\/\/[^\s]+)/g;
-function RichTextEditor(_ref) {
-  var onChange = _ref.onChange,
-    showEditButton = _ref.showEditButton;
-    _ref.onBlur;
-    var _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$editable = _ref.editable,
-    defaultEditable = _ref$editable === void 0 ? false : _ref$editable,
-    value = _ref.value,
-    isLoading = _ref.isLoading,
-    _ref$isList = _ref.isList,
-    isList = _ref$isList === void 0 ? false : _ref$isList,
-    label = _ref.label,
-    _ref$showBorder = _ref.showBorder,
-    showBorder = _ref$showBorder === void 0 ? true : _ref$showBorder,
-    paddingLeft = _ref.paddingLeft,
-    minHeight = _ref.minHeight,
-    maxHeight = _ref.maxHeight,
-    onImageUpload = _ref.onImageUpload;
-  if (isLoading) {
-    return /*#__PURE__*/React.createElement(Spinner, null);
-  }
-  var editorRef = useRef(null);
-  var fileInputRef = useRef(null);
-  var scrollTopRef = useRef(0);
-  var _useState = useState(""),
-    _useState2 = _slicedToArray(_useState, 2),
-    html = _useState2[0],
-    setHtml = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    linkModalOpen = _useState4[0],
-    setLinkModalOpen = _useState4[1];
-  var _useState5 = useState(""),
-    _useState6 = _slicedToArray(_useState5, 2),
-    linkUrl = _useState6[0],
-    setLinkUrl = _useState6[1];
-  var _useState7 = useState(""),
-    _useState8 = _slicedToArray(_useState7, 2),
-    linkText = _useState8[0],
-    setLinkText = _useState8[1];
-  var selectionRangeRef = useRef(null);
-  var _useState9 = useState(defaultEditable),
-    _useState0 = _slicedToArray(_useState9, 2),
-    editable = _useState0[0],
-    setEditable = _useState0[1];
+const URL_REGEX = /(https?:\/\/[^\s]+)/g;
+function RichTextEditor({
+  onChange,
+  showEditButton,
+  onBlur,
+  disabled = false,
+  editable: initialEditable = false,
+  value,
+  isLoading,
+  isList = false,
+  label,
+  showBorder = true,
+  paddingLeft,
+  minHeight,
+  maxHeight,
+  onImageUpload
+}) {
+  const editorRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const scrollTopRef = useRef(0);
+  const [html, setHtml] = useState("");
+  const [linkModalOpen, setLinkModalOpen] = useState(false);
+  const [linkUrl, setLinkUrl] = useState("");
+  const [linkText, setLinkText] = useState("");
+  const selectionRangeRef = useRef(null);
+  const [editable, setEditable] = useState(initialEditable);
+  const [editorFocused, setEditorFocused] = useState(false);
+  const lastSynchronizedHtmlRef = useRef("");
+  useEffect(() => {
+    setEditable(initialEditable);
+  }, [initialEditable]);
 
   // NEW: Track current list type for dropdown
-  var _useState1 = useState(null),
-    _useState10 = _slicedToArray(_useState1, 2),
-    currentListType = _useState10[0],
-    setCurrentListType = _useState10[1];
+  const [currentListType, setCurrentListType] = useState(null);
 
   // NEW: Track active styles for toolbar buttons
-  var _useState11 = useState(false),
-    _useState12 = _slicedToArray(_useState11, 2),
-    isBold = _useState12[0],
-    setIsBold = _useState12[1];
-  var _useState13 = useState(false),
-    _useState14 = _slicedToArray(_useState13, 2),
-    isItalic = _useState14[0],
-    setIsItalic = _useState14[1];
-  var _useState15 = useState(false),
-    _useState16 = _slicedToArray(_useState15, 2),
-    isUnderline = _useState16[0],
-    setIsUnderline = _useState16[1];
+  const [isBold, setIsBold] = useState(false);
+  const [isItalic, setIsItalic] = useState(false);
+  const [isUnderline, setIsUnderline] = useState(false);
 
   // NEW: Track current font size
-  var _useState17 = useState("16"),
-    _useState18 = _slicedToArray(_useState17, 2),
-    currentFontSize = _useState18[0],
-    setCurrentFontSize = _useState18[1];
+  const [currentFontSize, setCurrentFontSize] = useState("16");
 
   // NEW: Track current line height
-  var _useState19 = useState(""),
-    _useState20 = _slicedToArray(_useState19, 2),
-    currentLineHeight = _useState20[0],
-    setCurrentLineHeight = _useState20[1];
-  var _useState21 = useState(null),
-    _useState22 = _slicedToArray(_useState21, 2),
-    activeAlign = _useState22[0],
-    setActiveAlign = _useState22[1];
-  var _useState23 = useState(false),
-    _useState24 = _slicedToArray(_useState23, 2),
-    imageModalOpen = _useState24[0],
-    setImageModalOpen = _useState24[1];
-  var _useState25 = useState(""),
-    _useState26 = _slicedToArray(_useState25, 2),
-    selectedImageUrl = _useState26[0],
-    setSelectedImageUrl = _useState26[1];
-  var _useState27 = useState(1),
-    _useState28 = _slicedToArray(_useState27, 2),
-    zoomLevel = _useState28[0],
-    setZoomLevel = _useState28[1];
-  var _useState29 = useState(false),
-    _useState30 = _slicedToArray(_useState29, 2),
-    isUploading = _useState30[0],
-    setIsUploading = _useState30[1];
-  var _useState31 = useState(false),
-    _useState32 = _slicedToArray(_useState31, 2),
-    videoModalOpen = _useState32[0],
-    setVideoModalOpen = _useState32[1];
-  var _useState33 = useState(""),
-    _useState34 = _slicedToArray(_useState33, 2),
-    videoUrl = _useState34[0],
-    setVideoUrl = _useState34[1];
-  var _useState35 = useState(false),
-    _useState36 = _slicedToArray(_useState35, 2),
-    tableModalOpen = _useState36[0],
-    setTableModalOpen = _useState36[1];
-  var _useState37 = useState(null),
-    _useState38 = _slicedToArray(_useState37, 2);
-    _useState38[0];
-    var setHoveredTable = _useState38[1];
-  var _useState39 = useState(3),
-    _useState40 = _slicedToArray(_useState39, 2),
-    tableRows = _useState40[0],
-    setTableRows = _useState40[1];
-  var _useState41 = useState(3),
-    _useState42 = _slicedToArray(_useState41, 2),
-    tableCols = _useState42[0],
-    setTableCols = _useState42[1];
-  var _useState43 = useState(0),
-    _useState44 = _slicedToArray(_useState43, 2);
-    _useState44[0];
-    var setSelectionVersion = _useState44[1];
-  var _useState45 = useState(null),
-    _useState46 = _slicedToArray(_useState45, 2),
-    selectedImage = _useState46[0],
-    setSelectedImage = _useState46[1];
-  var _useState47 = useState(null),
-    _useState48 = _slicedToArray(_useState47, 2);
-    _useState48[0];
-    var setResizeData = _useState48[1];
-  var openImageModal = function openImageModal(url) {
+  const [currentLineHeight, setCurrentLineHeight] = useState("");
+  const [activeAlign, setActiveAlign] = useState(null);
+  const [imageModalOpen, setImageModalOpen] = useState(false);
+  const [selectedImageUrl, setSelectedImageUrl] = useState("");
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const [isUploading, setIsUploading] = useState(false);
+  const [videoModalOpen, setVideoModalOpen] = useState(false);
+  const [videoUrl, setVideoUrl] = useState("");
+  const [tableModalOpen, setTableModalOpen] = useState(false);
+  const [hoveredTable, setHoveredTable] = useState(null);
+  const [tableRows, setTableRows] = useState(3);
+  const [tableCols, setTableCols] = useState(3);
+  const [selectionVersion, setSelectionVersion] = useState(0);
+  const [selectedImage, setSelectedImage] = useState(null);
+  const [metrics, setMetrics] = useState({
+    words: 0,
+    chars: 0
+  });
+  const updateMetrics = useCallback(() => {
+    if (!editorRef.current) return;
+    // Calculate metrics immediately but outside of render path
+    const text = editorRef.current.innerText || "";
+    const cleanText = text.replace(/[\n\r]/g, ' ').trim();
+    const words = cleanText ? cleanText.split(/\s+/).length : 0;
+    const chars = text.length;
+    setMetrics({
+      words,
+      chars
+    });
+  }, []);
+  const openImageModal = url => {
     if (editorRef.current) {
       scrollTopRef.current = editorRef.current.scrollTop;
     }
     setSelectedImageUrl(url);
     setImageModalOpen(true);
   };
-  var closeImageModal = function closeImageModal() {
+  const closeImageModal = () => {
     setImageModalOpen(false);
     setSelectedImageUrl("");
     setZoomLevel(1);
   };
-  var saveSelection = function saveSelection() {
+  const saveSelection = () => {
     if (typeof window === "undefined") return;
-    var sel = window.getSelection();
+    const sel = window.getSelection();
     if (sel && sel.rangeCount > 0) {
       selectionRangeRef.current = sel.getRangeAt(0).cloneRange();
     }
   };
-  var handleZoomIn = function handleZoomIn() {
-    setZoomLevel(function (prevZoom) {
-      return prevZoom + 0.1;
-    });
+  const handleZoomIn = () => {
+    setZoomLevel(prevZoom => prevZoom + 0.1);
   };
-  var handleZoomOut = function handleZoomOut() {
-    setZoomLevel(function (prevZoom) {
-      return Math.max(0.1, prevZoom - 0.1);
-    });
+  const handleZoomOut = () => {
+    setZoomLevel(prevZoom => Math.max(0.1, prevZoom - 0.1));
   };
 
   // Effect to restore scroll position after modal closes
-  useEffect(function () {
+  useEffect(() => {
     if (!imageModalOpen && editorRef.current) {
       editorRef.current.scrollTop = scrollTopRef.current;
     }
   }, [imageModalOpen]);
-  useEffect(function () {
+  useEffect(() => {
     if (!imageModalOpen) return;
-    var handleKeyDown = function handleKeyDown(e) {
+    const handleKeyDown = e => {
       if (e.key === 'Escape') {
         closeImageModal();
       }
     };
-    var handleWheel = function handleWheel(e) {
+    const handleWheel = e => {
       if (e.ctrlKey) {
         e.preventDefault();
         if (e.deltaY < 0) {
@@ -858,127 +526,96 @@ function RichTextEditor(_ref) {
     window.addEventListener('wheel', handleWheel, {
       passive: false
     });
-    return function () {
+    return () => {
       document.removeEventListener('keydown', handleKeyDown);
       window.removeEventListener('wheel', handleWheel);
     };
   }, [imageModalOpen]);
-  useEffect(function () {
-    var handleClick = function handleClick(e) {
-      // Trigger selection update for toolbar reactivity
-      setSelectionVersion(function (v) {
-        return v + 1;
-      });
-      var deleteBtn = e.target.closest('button[title="Remove image"]');
-      if (deleteBtn && editable) {
-        e.preventDefault();
-        e.stopPropagation();
-        var wrapper = deleteBtn.closest('.image-container');
-        if (wrapper && wrapper.parentNode) {
-          wrapper.parentNode.removeChild(wrapper);
-          triggerChange();
-        }
-      }
-    };
-    var editor = editorRef.current;
-    if (editor) {
-      editor.addEventListener('click', handleClick);
-      return function () {
-        editor.removeEventListener('click', handleClick);
-      };
-    }
-  }, [editable]);
-  useEffect(function () {
-    if (editorRef.current && value) {
-      requestAnimationFrame(function () {
-        return processExistingImages(editorRef.current);
-      });
+  useEffect(() => {
+    if (editorRef.current && value && value !== lastSynchronizedHtmlRef.current) {
+      requestAnimationFrame(() => processExistingMedia(editorRef.current));
     }
   }, [value]);
 
   // Runs whenever editable changes (toggles delete icon visibility)
-  useEffect(function () {
-    processExistingImages(editorRef.current);
-  }, [html, editable]);
-  useEffect(function () {
-    // Only update if value is a string and different from current html
-    if (value) {
+  useEffect(() => {
+    if (!editable) {
+      setEditorFocused(false);
+    }
+    processExistingMedia(editorRef.current);
+  }, [editable]);
+  useEffect(() => {
+    if (!editorRef.current) return;
+    editorRef.current.querySelectorAll(".image-container, .video-container").forEach(container => {
+      updateMediaControlVisibility(container);
+    });
+  }, [editorFocused, editable]);
+  useEffect(() => {
+    // Only update if value is different from our last known synced state
+    if (value && value !== lastSynchronizedHtmlRef.current) {
       try {
-        // Check if value is a Draft.js content state (either stringified or object)
-        if (value && isValidDraftFormat(value)) {
-          var htmlContent = draftBlocksToHTML(value);
-          setHtml(htmlContent);
-          if (editorRef.current) {
-            editorRef.current.innerHTML = htmlContent;
-          }
+        let newContent = "";
+
+        // Check if value is a Draft.js content state
+        if (isValidDraftFormat(value)) {
+          newContent = draftBlocksToHTML(value);
         } else if (typeof value === 'string') {
-          // Unescape HTML entities before setting the content
-          var unescapedValue = unescapeHtml(value);
-          setHtml(unescapedValue);
-          if (editorRef.current) {
-            editorRef.current.innerHTML = unescapedValue || '';
+          // If value is already what we have in HTML state, skip unescaping
+          if (value === html) {
+            lastSynchronizedHtmlRef.current = value;
+            return;
+          }
+          newContent = unescapeHtml(value);
+        }
+        if (newContent && newContent !== html) {
+          lastSynchronizedHtmlRef.current = value;
+          setHtml(newContent);
+          if (editorRef.current && editorRef.current.innerHTML !== newContent) {
+            editorRef.current.innerHTML = newContent;
           }
+          requestAnimationFrame(() => processExistingMedia(editorRef.current));
+          updateMetrics();
         }
       } catch (e) {
         console.error('Error processing editor content:', e);
-        // Fallback to raw value if parsing fails
-        var _unescapedValue = typeof value === 'string' ? unescapeHtml(value) : value;
-        setHtml(_unescapedValue);
-        if (editorRef.current) {
-          editorRef.current.innerHTML = _unescapedValue || '';
-        }
       }
-    } else {
+    } else if (!value && html) {
       setHtml('');
+      lastSynchronizedHtmlRef.current = "";
       if (editorRef.current) {
         editorRef.current.innerHTML = '';
+        updateMetrics();
       }
     }
-  }, [!isList]);
+  }, [value, initialEditable, updateMetrics]);
+  const processExistingMedia = container => {
+    if (!container) return;
+    processExistingImages(container);
+    processExistingVideos(container);
+  };
+  const getCleanHtml = () => {
+    if (!editorRef.current) return "";
+    const clone = editorRef.current.cloneNode(true);
+    stripEditorChrome(clone);
+    return clone.innerHTML;
+  };
 
-  // Call onChange whenever html state updates
-  useEffect(function () {
-    onChange && onChange(html);
-  }, [html, onChange]);
   // Trigger change manually
-  var triggerChange = useCallback(function () {
-    var next = getCleanHtml();
+  const triggerChange = useCallback(() => {
+    const next = getCleanHtml();
     setHtml(next);
-  }, []);
-
-  // Detect if selection is inside a list (ol or ul)
-  var detectListType = function detectListType() {
-    var sel = window.getSelection();
-    if (!sel || !sel.rangeCount) {
-      setCurrentListType(null);
-      return;
-    }
-    var node = sel.anchorNode;
-    while (node && node !== editorRef.current) {
-      if (node.nodeName === "OL") {
-        setCurrentListType("ordered");
-        return;
-      }
-      if (node.nodeName === "UL") {
-        setCurrentListType("unordered");
-        return;
-      }
-      node = node.parentNode;
-    }
-    setCurrentListType(null);
-  };
+    lastSynchronizedHtmlRef.current = next;
+    onChange && onChange(next);
+  }, [onChange]);
 
   // Helper to walk up DOM to find style tags or CSS style:
-  var isParentStyle = function isParentStyle(node) {
-    for (var _len = arguments.length, tagNames = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      tagNames[_key - 1] = arguments[_key];
-    }
+  const isParentStyle = (node, ...tagNames) => {
     while (node && node !== editorRef.current) {
       if (node.nodeType === 1 && tagNames.includes(node.tagName)) return true;
 
       // Also check inline style for bold and italic:
       if (node.nodeType === 1 && node.style) {
-        var style = node.style;
+        const style = node.style;
         if (tagNames.includes("bold") && (style.fontWeight === "bold" || Number(style.fontWeight) >= 600)) return true;
         if (tagNames.includes("italic") && style.fontStyle === "italic") return true;
         if (tagNames.includes("underline") && style.textDecoration.includes("underline")) return true;
@@ -996,100 +633,299 @@ function RichTextEditor(_ref) {
     return false;
   };
 
-  // Update style states based on selection or cursor position
-  var updateStyleStates = function updateStyleStates() {
-    var sel = window.getSelection();
-    if (!sel || !sel.rangeCount) {
-      setIsBold(false);
-      setIsItalic(false);
-      setIsUnderline(false);
-      setFontColor("#000000"); // default
-      return;
-    }
-    var container = sel.anchorNode.nodeType === 3 ? sel.anchorNode.parentNode : sel.anchorNode;
-    var computedAlign = window.getComputedStyle(container).textAlign;
-    setActiveAlign(computedAlign);
-    var range = sel.getRangeAt(0);
-    if (range.collapsed) {
-      // Cursor only, check parent nodes
-      var _container = sel.anchorNode.nodeType === 3 ? sel.anchorNode.parentNode : sel.anchorNode;
-      window.getComputedStyle(_container);
-      setIsBold(isParentStyle(_container, "B", "STRONG", "bold"));
-      setIsItalic(isParentStyle(_container, "I", "EM", "italic"));
-      setIsUnderline(isParentStyle(_container, "U", "underline"));
-
-      // ✅ Get computed color from container
-      var computedColor = window.getComputedStyle(_container).color;
-      setFontColor(rgbToHex(computedColor));
-    } else {
-      // Text selected, use execCommand state
-      setIsBold(document.queryCommandState("bold"));
-      setIsItalic(document.queryCommandState("italic"));
-      setIsUnderline(document.queryCommandState("underline"));
-
-      // ✅ For selection, get color from selection's start container
-      var _container2 = sel.anchorNode.nodeType === 3 ? sel.anchorNode.parentNode : sel.anchorNode;
-      var _computedColor = window.getComputedStyle(_container2).color;
-      setFontColor(rgbToHex(_computedColor));
-    }
-  };
-
   // Helper to convert rgb() to hex
   function rgbToHex(rgb) {
-    var result = rgb.match(/\d+/g);
+    const result = rgb.match(/\d+/g);
     if (!result) return "#000000";
-    return "#" + result.slice(0, 3).map(function (x) {
-      var hex = parseInt(x, 10).toString(16);
+    return "#" + result.slice(0, 3).map(x => {
+      const hex = parseInt(x, 10).toString(16);
       return hex.length === 1 ? "0" + hex : hex;
     }).join("");
   }
+  const getColorAtCursor = () => {
+    const sel = window.getSelection();
+    if (!sel || !sel.rangeCount || !editorRef.current) return null;
+    let node = sel.anchorNode;
+    if (node.nodeType === 3) node = node.parentNode;
+    while (node && node !== editorRef.current) {
+      if (node.nodeType === 1) {
+        if (node.style && node.style.color) {
+          return rgbToHex(node.style.color);
+        }
+        if (node.tagName === "FONT" && node.getAttribute("color")) {
+          return node.getAttribute("color");
+        }
+      }
+      node = node.parentNode;
+    }
+    const computedColor = window.getComputedStyle(sel.anchorNode.nodeType === 3 ? sel.anchorNode.parentNode : sel.anchorNode).color;
+    return rgbToHex(computedColor);
+  };
+  const stripEditorChrome = root => {
+    root.querySelectorAll(".image-delete-button, .video-delete-button, .video-edit-overlay, .media-resize-handles, .media-resize-handle").forEach(element => element.remove());
+    return root;
+  };
+  const getMediaSizeLimits = () => {
+    const maxWidth = editorRef.current ? editorRef.current.getBoundingClientRect().width - 24 : 800;
+    return {
+      minWidth: 120,
+      minHeight: 80,
+      maxWidth,
+      maxHeight: 720
+    };
+  };
+  const ensureImageMediaFrame = imageContainer => {
+    if (!imageContainer) return null;
+    let frame = imageContainer.querySelector(":scope > .image-media-frame");
+    if (frame) return frame;
+    frame = document.createElement("div");
+    frame.className = "image-media-frame";
+    ["width", "height", "marginLeft", "marginTop", "maxWidth"].forEach(prop => {
+      if (imageContainer.style[prop]) {
+        frame.style[prop] = imageContainer.style[prop];
+        imageContainer.style[prop] = "";
+      }
+    });
+    if (imageContainer.dataset.explicitHeight) {
+      frame.dataset.explicitHeight = imageContainer.dataset.explicitHeight;
+      delete imageContainer.dataset.explicitHeight;
+    }
+    const children = Array.from(imageContainer.children);
+    imageContainer.appendChild(frame);
+    children.forEach(child => frame.appendChild(child));
+    return frame;
+  };
+  const getImageMediaTarget = imageContainer => ensureImageMediaFrame(imageContainer) || imageContainer;
+  const applyImageMediaSize = (frame, width, height, edge) => {
+    const img = frame.querySelector("img");
+    const isVertical = edge === "top" || edge === "bottom";
+    frame.style.width = `${Math.round(width)}px`;
+    frame.style.maxWidth = "100%";
+    if (isVertical) {
+      frame.style.height = `${Math.round(height)}px`;
+      frame.dataset.explicitHeight = "true";
+      if (img) {
+        img.style.width = "100%";
+        img.style.height = "100%";
+        img.style.objectFit = "contain";
+      }
+      return;
+    }
+    if (!frame.dataset.explicitHeight) {
+      frame.style.height = "";
+    }
+    if (img) {
+      img.style.width = "100%";
+      if (frame.dataset.explicitHeight) {
+        img.style.height = "100%";
+        img.style.objectFit = "contain";
+      } else {
+        img.style.height = "auto";
+        img.style.objectFit = "";
+      }
+    }
+  };
+  const applyVideoMediaSize = (container, width, height) => {
+    container.style.paddingBottom = "0";
+    container.style.width = `${Math.round(width)}px`;
+    container.style.maxWidth = "100%";
+    container.style.height = `${Math.round(height)}px`;
+  };
+  const attachMediaResizeHandle = container => {
+    if (!container || container.querySelector(".media-resize-handles")) return;
+    const isVideo = container.classList.contains("video-container");
+    const resizeTarget = isVideo ? container : getImageMediaTarget(container);
+    if (!resizeTarget) return;
+    const handlesWrapper = document.createElement("div");
+    handlesWrapper.className = "media-resize-handles";
+    handlesWrapper.setAttribute("contenteditable", "false");
+    const edges = [{
+      edge: "left",
+      title: "Drag to resize width"
+    }, {
+      edge: "right",
+      title: "Drag to resize width"
+    }, {
+      edge: "top",
+      title: "Drag to resize height"
+    }, {
+      edge: "bottom",
+      title: "Drag to resize height"
+    }];
+    edges.forEach(({
+      edge,
+      title
+    }) => {
+      const handle = document.createElement("div");
+      handle.className = `media-resize-handle media-resize-handle-${edge}`;
+      handle.title = title;
+      handle.setAttribute("contenteditable", "false");
+      handle.dataset.edge = edge;
+      handle.addEventListener("mousedown", event => {
+        if (!editable) return;
+        event.preventDefault();
+        event.stopPropagation();
+        const limits = getMediaSizeLimits();
+        const rect = resizeTarget.getBoundingClientRect();
+        const startX = event.clientX;
+        const startY = event.clientY;
+        const startWidth = rect.width;
+        const startHeight = rect.height;
+        const startMarginLeft = Number.parseFloat(resizeTarget.style.marginLeft) || 0;
+        const startMarginTop = Number.parseFloat(resizeTarget.style.marginTop) || 0;
+        if (isVideo) {
+          resizeTarget.style.paddingBottom = "0";
+        }
+        const onMouseMove = moveEvent => {
+          const deltaX = moveEvent.clientX - startX;
+          const deltaY = moveEvent.clientY - startY;
+          let nextWidth = startWidth;
+          let nextHeight = startHeight;
+          if (edge === "right") {
+            nextWidth = startWidth + deltaX;
+          } else if (edge === "left") {
+            nextWidth = startWidth - deltaX;
+          } else if (edge === "bottom") {
+            nextHeight = startHeight + deltaY;
+          } else if (edge === "top") {
+            nextHeight = startHeight - deltaY;
+          }
+          nextWidth = Math.max(limits.minWidth, Math.min(nextWidth, limits.maxWidth));
+          nextHeight = Math.max(limits.minHeight, Math.min(nextHeight, limits.maxHeight));
+          if (edge === "left") {
+            resizeTarget.style.marginLeft = `${Math.round(startMarginLeft + (startWidth - nextWidth))}px`;
+          }
+          if (edge === "top") {
+            resizeTarget.style.marginTop = `${Math.round(startMarginTop + (startHeight - nextHeight))}px`;
+          }
+          if (isVideo) {
+            applyVideoMediaSize(resizeTarget, nextWidth, nextHeight);
+          } else {
+            applyImageMediaSize(resizeTarget, nextWidth, nextHeight, edge);
+          }
+        };
+        const onMouseUp = () => {
+          document.removeEventListener("mousemove", onMouseMove);
+          document.removeEventListener("mouseup", onMouseUp);
+          triggerChange();
+        };
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+      });
+      handlesWrapper.appendChild(handle);
+    });
+    resizeTarget.appendChild(handlesWrapper);
+  };
+  const handleEditorFocus = () => {
+    setEditorFocused(true);
+  };
+  const handleEditorBlur = () => {
+    requestAnimationFrame(() => {
+      var _editorRef$current;
+      if (!((_editorRef$current = editorRef.current) !== null && _editorRef$current !== void 0 && _editorRef$current.contains(document.activeElement))) {
+        setEditorFocused(false);
+      }
+    });
+  };
+  const updateMediaControlVisibility = container => {
+    const handles = container.querySelector(".media-resize-handles");
+    if (handles instanceof HTMLElement) {
+      handles.style.display = editable ? "block" : "none";
+      handles.style.pointerEvents = editable ? "auto" : "none";
+    }
+  };
+  const createMediaDeleteButton = (title, className, onRemove) => {
+    const deleteBtn = document.createElement("button");
+    deleteBtn.type = "button";
+    deleteBtn.innerHTML = "×";
+    deleteBtn.className = className;
+    deleteBtn.title = title;
+    deleteBtn.setAttribute("contenteditable", "false");
+    deleteBtn.onclick = event => {
+      event.preventDefault();
+      event.stopPropagation();
+      onRemove();
+    };
+    return deleteBtn;
+  };
 
-  // Listen for selection changes globally to update styles and list type
-  useEffect(function () {
-    document.addEventListener("selectionchange", detectListType);
-    document.addEventListener("selectionchange", updateStyleStates);
-    var handleSelectionChange = function handleSelectionChange() {
-      var selection = window.getSelection();
-      if (!selection.rangeCount) return;
-      var range = selection.getRangeAt(0);
-      var element = range.startContainer.parentElement.closest('[style*="font-size"]');
+  // Listen for selection changes globally to update styles and list type in one pass
+  useEffect(() => {
+    const handleGlobalSelectionSync = () => {
+      var _editorRef$current2;
+      // Only sync if the editor has focus
+      const sel = window.getSelection();
+      if (!sel || !sel.rangeCount || !((_editorRef$current2 = editorRef.current) !== null && _editorRef$current2 !== void 0 && _editorRef$current2.contains(sel.anchorNode))) {
+        return;
+      }
+
+      // 1. Detect List Type
+      let node = sel.anchorNode;
+      let listFound = null;
+      while (node && node !== editorRef.current) {
+        if (node.nodeName === "OL") {
+          listFound = "ordered";
+          break;
+        }
+        if (node.nodeName === "UL") {
+          listFound = "unordered";
+          break;
+        }
+        node = node.parentNode;
+      }
+      setCurrentListType(listFound);
+
+      // 2. Update Style States
+      const container = sel.anchorNode.nodeType === 3 ? sel.anchorNode.parentNode : sel.anchorNode;
+      const computedAlign = window.getComputedStyle(container).textAlign;
+      setActiveAlign(computedAlign);
+      const range = sel.getRangeAt(0);
+      if (range.collapsed) {
+        setIsBold(isParentStyle(container, "B", "STRONG", "bold"));
+        setIsItalic(isParentStyle(container, "I", "EM", "italic"));
+        setIsUnderline(isParentStyle(container, "U", "underline"));
+        const computedColor = window.getComputedStyle(container).color;
+        setFontColor(rgbToHex(computedColor));
+      } else {
+        setIsBold(document.queryCommandState("bold"));
+        setIsItalic(document.queryCommandState("italic"));
+        setIsUnderline(document.queryCommandState("underline"));
+        const computedColor = window.getComputedStyle(container).color;
+        setFontColor(rgbToHex(computedColor));
+      }
+
+      // 3. Current Font Size
+      const element = range.startContainer.parentElement.closest('[style*="font-size"]');
       if (element) {
-        var fontSize = window.getComputedStyle(element).fontSize;
-        var sizeValue = fontSize ? parseInt(fontSize) : 16;
+        const fontSize = window.getComputedStyle(element).fontSize;
+        const sizeValue = fontSize ? parseInt(fontSize) : 16;
         setCurrentFontSize(sizeValue.toString());
       } else {
-        setCurrentFontSize("16"); // Default size
+        setCurrentFontSize("16");
       }
     };
-    document.addEventListener('selectionchange', handleSelectionChange);
-    return function () {
-      document.removeEventListener("selectionchange", detectListType);
-      document.removeEventListener("selectionchange", updateStyleStates);
-      document.removeEventListener('selectionchange', handleSelectionChange);
+    document.addEventListener("selectionchange", handleGlobalSelectionSync);
+    return () => {
+      document.removeEventListener("selectionchange", handleGlobalSelectionSync);
     };
   }, []);
-  var focus = function focus() {
-    return editorRef.current && editorRef.current.focus();
-  };
-  var exec = function exec(command) {
-    var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  const focus = () => editorRef.current && editorRef.current.focus();
+  const exec = (command, value = null) => {
     document.execCommand(command, false, value);
     triggerChange();
     focus();
   };
-  var _useState49 = useState("#000000"),
-    _useState50 = _slicedToArray(_useState49, 2),
-    fontColor = _useState50[0],
-    setFontColor = _useState50[1];
-  var handleColorChange = function handleColorChange(color) {
+  const [fontColor, setFontColor] = useState("#000000");
+  const getActiveTextColor = () => getColorAtCursor() || fontColor;
+  const handleColorChange = color => {
     setFontColor(color);
     exec("foreColor", color);
   };
-  var addLink = function addLink() {
-    var sel = window.getSelection();
+  const addLink = () => {
+    const sel = window.getSelection();
     if (!sel || sel.rangeCount === 0) return;
     selectionRangeRef.current = sel.getRangeAt(0).cloneRange();
-    var selectedText = sel.toString();
+    const selectedText = sel.toString();
     if (selectedText.length > 0) {
       setLinkText(selectedText);
       setLinkUrl("");
@@ -1100,112 +936,108 @@ function RichTextEditor(_ref) {
       setLinkModalOpen(true);
     }
   };
-  var findParentTag = function findParentTag(node, tagName) {
+  const findParentTag = (node, tagName) => {
     if (!node) return null;
-    var curr = node;
+    let curr = node;
     while (curr && curr !== editorRef.current) {
       if (curr.tagName === tagName) return curr;
       curr = curr.parentNode;
     }
     return null;
   };
-  var tableAction = function tableAction(action) {
-    var sel = window.getSelection();
+  const tableAction = action => {
+    const sel = window.getSelection();
     if (!sel || !sel.rangeCount) return;
-    var cell = findParentTag(sel.anchorNode, 'TD') || findParentTag(sel.anchorNode, 'TH');
+    const cell = findParentTag(sel.anchorNode, 'TD') || findParentTag(sel.anchorNode, 'TH');
     if (!cell) return;
-    var row = cell.parentNode;
-    var table = row.parentNode.closest('table');
+    const row = cell.parentNode;
+    const table = row.parentNode.closest('table');
     switch (action) {
       case 'addRowAbove':
-        var newRowAbove = table.insertRow(row.rowIndex);
-        for (var i = 0; i < row.cells.length; i++) {
-          var newCell = newRowAbove.insertCell(i);
+        const newRowAbove = table.insertRow(row.rowIndex);
+        for (let i = 0; i < row.cells.length; i++) {
+          const newCell = newRowAbove.insertCell(i);
           newCell.style.border = "1px solid #e5e7eb";
           newCell.style.padding = "12px";
           newCell.innerHTML = "&nbsp;";
         }
         break;
       case 'addRowBelow':
-        var newRowBelow = table.insertRow(row.rowIndex + 1);
-        for (var _i = 0; _i < row.cells.length; _i++) {
-          var _newCell = newRowBelow.insertCell(_i);
-          _newCell.style.border = "1px solid #e5e7eb";
-          _newCell.style.padding = "12px";
-          _newCell.innerHTML = "&nbsp;";
+        const newRowBelow = table.insertRow(row.rowIndex + 1);
+        for (let i = 0; i < row.cells.length; i++) {
+          const newCell = newRowBelow.insertCell(i);
+          newCell.style.border = "1px solid #e5e7eb";
+          newCell.style.padding = "12px";
+          newCell.innerHTML = "&nbsp;";
         }
         break;
       case 'addColBefore':
-        var cellIndex = cell.cellIndex;
-        for (var _i2 = 0; _i2 < table.rows.length; _i2++) {
-          var _newCell2 = table.rows[_i2].insertCell(cellIndex);
-          _newCell2.style.border = "1px solid #e5e7eb";
-          _newCell2.style.padding = "12px";
-          _newCell2.innerHTML = "&nbsp;";
+        const cellIndex = cell.cellIndex;
+        for (let i = 0; i < table.rows.length; i++) {
+          const newCell = table.rows[i].insertCell(cellIndex);
+          newCell.style.border = "1px solid #e5e7eb";
+          newCell.style.padding = "12px";
+          newCell.innerHTML = "&nbsp;";
         }
         break;
       case 'addColAfter':
-        var cellIndexAfter = cell.cellIndex + 1;
-        for (var _i3 = 0; _i3 < table.rows.length; _i3++) {
-          var _newCell3 = table.rows[_i3].insertCell(cellIndexAfter);
-          _newCell3.style.border = "1px solid #e5e7eb";
-          _newCell3.style.padding = "12px";
-          _newCell3.innerHTML = "&nbsp;";
+        const cellIndexAfter = cell.cellIndex + 1;
+        for (let i = 0; i < table.rows.length; i++) {
+          const newCell = table.rows[i].insertCell(cellIndexAfter);
+          newCell.style.border = "1px solid #e5e7eb";
+          newCell.style.padding = "12px";
+          newCell.innerHTML = "&nbsp;";
         }
         break;
       case 'deleteRow':
         {
-          var rowIndex = row.rowIndex;
-          var _cellIndex = cell.cellIndex;
+          const rowIndex = row.rowIndex;
+          const cellIndex = cell.cellIndex;
           table.deleteRow(rowIndex);
           if (table.rows.length === 0) {
             table.remove();
           } else {
-            var targetRowIndex = Math.min(rowIndex, table.rows.length - 1);
-            var targetRow = table.rows[targetRowIndex];
-            var targetCell = targetRow.cells[Math.min(_cellIndex, targetRow.cells.length - 1)];
+            const targetRowIndex = Math.min(rowIndex, table.rows.length - 1);
+            const targetRow = table.rows[targetRowIndex];
+            const targetCell = targetRow.cells[Math.min(cellIndex, targetRow.cells.length - 1)];
             if (targetCell) {
-              var range = document.createRange();
+              const range = document.createRange();
               range.selectNodeContents(targetCell);
               range.collapse(true);
               sel.removeAllRanges();
               sel.addRange(range);
-              setSelectionVersion(function (v) {
-                return v + 1;
-              });
+              setSelectionVersion(v => v + 1);
             }
           }
           break;
         }
       case 'deleteCol':
         {
-          var idx = cell.cellIndex;
-          var _rowIndex = row.rowIndex;
-          for (var _i4 = 0; _i4 < table.rows.length; _i4++) {
-            table.rows[_i4].deleteCell(idx);
+          const idx = cell.cellIndex;
+          const rowIndex = row.rowIndex;
+          for (let i = 0; i < table.rows.length; i++) {
+            table.rows[i].deleteCell(idx);
           }
           if (table.rows[0].cells.length === 0) {
             table.remove();
           } else {
-            var _table$rows$_rowIndex;
-            var targetColIndex = Math.min(idx, table.rows[0].cells.length - 1);
-            var _targetCell = ((_table$rows$_rowIndex = table.rows[_rowIndex]) === null || _table$rows$_rowIndex === void 0 ? void 0 : _table$rows$_rowIndex.cells[targetColIndex]) || table.rows[0].cells[targetColIndex];
-            if (_targetCell) {
-              var _range = document.createRange();
-              _range.selectNodeContents(_targetCell);
-              _range.collapse(true);
+            var _table$rows$rowIndex;
+            const targetColIndex = Math.min(idx, table.rows[0].cells.length - 1);
+            const targetCell = ((_table$rows$rowIndex = table.rows[rowIndex]) === null || _table$rows$rowIndex === void 0 ? void 0 : _table$rows$rowIndex.cells[targetColIndex]) || table.rows[0].cells[targetColIndex];
+            if (targetCell) {
+              const range = document.createRange();
+              range.selectNodeContents(targetCell);
+              range.collapse(true);
               sel.removeAllRanges();
-              sel.addRange(_range);
-              setSelectionVersion(function (v) {
-                return v + 1;
-              });
+              sel.addRange(range);
+              setSelectionVersion(v => v + 1);
             }
           }
           break;
         }
       case 'mergeRight':
         if (cell.nextElementSibling) {
-          var nextCell = cell.nextElementSibling;
+          const nextCell = cell.nextElementSibling;
           cell.colSpan = (cell.colSpan || 1) + (nextCell.colSpan || 1);
           nextCell.remove();
         }
@@ -1216,20 +1048,20 @@ function RichTextEditor(_ref) {
     }
     triggerChange && triggerChange();
   };
-  var insertTable = function insertTable() {
-    var rows = parseInt(tableRows) || 3;
-    var cols = parseInt(tableCols) || 3;
-    var tableHtml = '<table style="width: 100%; border-collapse: collapse; border: 1px solid #e5e7eb; margin: 16px 0;"><tbody>';
-    for (var i = 0; i < rows; i++) {
+  const insertTable = () => {
+    const rows = parseInt(tableRows) || 3;
+    const cols = parseInt(tableCols) || 3;
+    let tableHtml = '<table style="width: 100%; border-collapse: collapse; border: 1px solid #e5e7eb; margin: 16px 0;"><tbody>';
+    for (let i = 0; i < rows; i++) {
       tableHtml += '<tr>';
-      for (var j = 0; j < cols; j++) {
+      for (let j = 0; j < cols; j++) {
         tableHtml += '<td style="border: 1px solid #e5e7eb; padding: 12px; min-height: 20px;">&nbsp;</td>';
       }
       tableHtml += '</tr>';
     }
     tableHtml += '</tbody></table><p>&nbsp;</p>';
     if (selectionRangeRef.current) {
-      var sel = window.getSelection();
+      const sel = window.getSelection();
       sel.removeAllRanges();
       sel.addRange(selectionRangeRef.current);
     }
@@ -1237,50 +1069,57 @@ function RichTextEditor(_ref) {
     setTableModalOpen(false);
     triggerChange && triggerChange();
   };
-  var parseVideoUrl = function parseVideoUrl(url) {
+  const parseVideoUrl = url => {
     url = url.trim();
     if (!url) return null;
 
     // YouTube
-    var ytRegExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|watch\?vi=|\&vi=)([^#\&\?]*).*/;
-    var ytMatch = url.match(ytRegExp);
+    const ytRegExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|watch\?vi=|\&vi=)([^#\&\?]*).*/;
+    const ytMatch = url.match(ytRegExp);
     if (ytMatch && ytMatch[2].length === 11) {
-      return "https://www.youtube.com/embed/".concat(ytMatch[2]);
+      return `https://www.youtube.com/embed/${ytMatch[2]}`;
     }
 
     // Vimeo
-    var vimeoRegExp = /vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|video\/|)(\d+)(?:$|\/|\?)/;
-    var vimeoMatch = url.match(vimeoRegExp);
+    const vimeoRegExp = /vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|video\/|)(\d+)(?:$|\/|\?)/;
+    const vimeoMatch = url.match(vimeoRegExp);
     if (vimeoMatch && vimeoMatch[3]) {
-      return "https://player.vimeo.com/video/".concat(vimeoMatch[3]);
+      return `https://player.vimeo.com/video/${vimeoMatch[3]}`;
     }
 
     // DailyMotion
-    var dmRegExp = /dailymotion\.com\/video\/([a-zA-Z0-9]+)/;
-    var dmMatch = url.match(dmRegExp);
+    const dmRegExp = /dailymotion\.com\/video\/([a-zA-Z0-9]+)/;
+    const dmMatch = url.match(dmRegExp);
     if (dmMatch && dmMatch[1]) {
-      return "https://www.dailymotion.com/embed/video/".concat(dmMatch[1]);
+      return `https://www.dailymotion.com/embed/video/${dmMatch[1]}`;
     }
     return null;
   };
-  var insertVideo = function insertVideo() {
-    var embedUrl = parseVideoUrl(videoUrl);
+  const insertVideo = () => {
+    const embedUrl = parseVideoUrl(videoUrl);
     if (embedUrl) {
       if (editorRef.current) {
         editorRef.current.focus();
       }
       if (selectionRangeRef.current) {
-        var sel = window.getSelection();
+        const sel = window.getSelection();
         sel.removeAllRanges();
         sel.addRange(selectionRangeRef.current);
       }
-      var embedHtml = "<div class=\"video-container\">\n        <iframe \n          src=\"".concat(embedUrl, "\" \n          frameborder=\"0\" \n          allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" \n          allowfullscreen\n        ></iframe>\n      </div><p>&nbsp;</p>");
+      const embedHtml = `<div class="video-container">
+        <iframe 
+          src="${embedUrl}" 
+          frameborder="0" 
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+          allowfullscreen
+        ></iframe>
+      </div><p>&nbsp;</p>`;
       try {
         document.execCommand("insertHTML", false, embedHtml);
       } catch (err) {
         console.error("Failed to insert Video HTML:", err);
         if (editorRef.current) {
-          var div = document.createElement('div');
+          const div = document.createElement('div');
           div.innerHTML = embedHtml;
           editorRef.current.appendChild(div);
         }
@@ -1288,52 +1127,82 @@ function RichTextEditor(_ref) {
       setVideoModalOpen(false);
       setVideoUrl("");
       triggerChange && triggerChange();
+      requestAnimationFrame(() => processExistingMedia(editorRef.current));
     } else {
       console.warn("Invalid Video URL or Platform not supported");
     }
   };
-  var processExistingImages = function processExistingImages(container) {
+  const processExistingVideos = container => {
     if (!container) return;
-    container.querySelectorAll("img").forEach(function (img) {
-      // REMOVE the old wrapper if it exists so we can re-add
-      var oldWrapper = img.closest(".image-container");
-      if (oldWrapper) {
-        oldWrapper.replaceWith(img); // unwrap
-      }
-      var wrapper = document.createElement("div");
-      var align = img.getAttribute('data-align') || 'center';
-      wrapper.className = "image-container image-align-".concat(align);
-      wrapper.style.cursor = editable ? 'pointer' : 'default';
-      img.className = "rte-image";
-      img.style.cssText = ""; // Reset inline styles
-      img.setAttribute('data-align', align);
-      img.dataset.hasDeleteButton = "true";
-
-      // Add click listener to open modal
-      img.addEventListener("click", function () {
-        return openImageModal(img.src);
-      });
-      var deleteBtn = document.createElement("button");
-      deleteBtn.innerHTML = "×";
-      deleteBtn.className = "image-delete-button";
-      deleteBtn.style.display = editable ? 'flex' : 'none';
-      deleteBtn.style.pointerEvents = editable ? 'auto' : 'none';
-      deleteBtn.title = "Remove image";
-      deleteBtn.onclick = function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        var wrapper = e.currentTarget.closest(".image-container");
-        if (wrapper && wrapper.parentNode) {
-          wrapper.parentNode.removeChild(wrapper);
+    container.querySelectorAll(".video-container").forEach(videoContainer => {
+      if (!videoContainer.querySelector(".video-delete-button")) {
+        const deleteBtn = createMediaDeleteButton("Remove video", "video-delete-button image-delete-button", () => {
+          videoContainer.remove();
           triggerChange && triggerChange();
+        });
+        videoContainer.appendChild(deleteBtn);
+      }
+      attachMediaResizeHandle(videoContainer);
+      updateMediaControlVisibility(videoContainer);
+    });
+  };
+  const processExistingImages = container => {
+    if (!container) return;
+    container.querySelectorAll("img").forEach(img => {
+      var _img$closest;
+      if (img.closest(".rte-modal")) return;
+      const existingWrapper = img.closest(".image-container");
+      if (existingWrapper) {
+        existingWrapper.style.cursor = editable ? "pointer" : "default";
+        const frame = ensureImageMediaFrame(existingWrapper);
+        if (frame && !frame.querySelector(".image-delete-button")) {
+          frame.appendChild(createMediaDeleteButton("Remove image", "image-delete-button", () => {
+            existingWrapper.remove();
+            triggerChange && triggerChange();
+          }));
         }
-      };
-      var parentNode = img.parentNode,
-        nextSibling = img.nextSibling;
+        attachMediaResizeHandle(existingWrapper);
+        updateMediaControlVisibility(existingWrapper);
+        return;
+      }
+      const wrapper = document.createElement("div");
+      const align = img.getAttribute("data-align") || ((_img$closest = img.closest("[data-align]")) === null || _img$closest === void 0 ? void 0 : _img$closest.getAttribute("data-align")) || "left";
+      wrapper.className = `image-container image-align-${align}`;
+      wrapper.style.cursor = editable ? "pointer" : "default";
+      const frame = document.createElement("div");
+      frame.className = "image-media-frame";
+      if (img.getAttribute("width") && !frame.style.width) {
+        frame.style.width = `${img.getAttribute("width")}px`;
+      } else if (img.style.width && img.style.width.endsWith("px")) {
+        frame.style.width = img.style.width;
+      }
+      img.classList.add("rte-image");
+      img.setAttribute("data-align", align);
+      if (frame.style.width) {
+        img.style.width = "100%";
+        img.style.height = frame.dataset.explicitHeight ? "100%" : "auto";
+      } else {
+        img.style.width = "";
+        img.style.height = "auto";
+      }
+      img.addEventListener("click", event => {
+        if (event.target.closest(".image-delete-button, .media-resize-handle")) return;
+        openImageModal(img.src);
+      });
+      const deleteBtn = createMediaDeleteButton("Remove image", "image-delete-button", () => {
+        wrapper.remove();
+        triggerChange && triggerChange();
+      });
+      const {
+        parentNode,
+        nextSibling
+      } = img;
       if (parentNode) {
         parentNode.removeChild(img);
-        wrapper.appendChild(img);
-        wrapper.appendChild(deleteBtn);
+        frame.appendChild(img);
+        frame.appendChild(deleteBtn);
+        wrapper.appendChild(frame);
+        attachMediaResizeHandle(wrapper);
         if (nextSibling) {
           parentNode.insertBefore(wrapper, nextSibling);
         } else {
@@ -1342,111 +1211,80 @@ function RichTextEditor(_ref) {
       }
     });
   };
-  useEffect(function () {
-    if (editorRef.current && value) {
-      requestAnimationFrame(function () {
-        return processExistingImages(editorRef.current);
-      });
-    }
-  }, [value]);
-  var insertImage = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(dataUrl, fileName) {
-      var container, img;
-      return _regenerator().w(function (_context) {
-        while (1) switch (_context.n) {
-          case 0:
-            try {
-              if (editable) {
-                // Create container for the image
-                container = document.createElement('div');
-                container.className = 'image-container';
-
-                // Create image element
-                img = document.createElement('img');
-                img.src = dataUrl;
-                img.alt = fileName || "image";
-                img.addEventListener("click", function () {
-                  return openImageModal(dataUrl);
-                });
 
-                // Add elements to container
-                container.appendChild(img);
+  /* 
+     Advanced Tip: Use the 'onImageUpload' prop to handle file uploads to a server 
+     instead of using base64. If 'onImageUpload' is provided, it should return a URL string.
+  */
+  const insertImage = async (dataUrl, fileName) => {
+    try {
+      if (editable) {
+        // Create container for the image
+        const container = document.createElement('div');
+        container.className = 'image-container image-align-left';
+        const frame = document.createElement('div');
+        frame.className = 'image-media-frame';
 
-                // Insert at cursor position
-                insertNodeAtCursor(container);
-                triggerChange();
+        // Create image element
+        const img = document.createElement('img');
+        img.src = dataUrl;
+        img.alt = fileName || "image";
+        img.addEventListener("click", () => openImageModal(dataUrl));
+        frame.appendChild(img);
+        container.appendChild(frame);
 
-                // Immediately process newly inserted image so delete button appears
-                requestAnimationFrame(function () {
-                  processExistingImages(editorRef.current);
-                });
-              }
-            } catch (err) {
-              console.error('Error inserting image:', err);
-            }
-          case 1:
-            return _context.a(2);
-        }
-      }, _callee);
-    }));
-    return function insertImage(_x, _x2) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-  var readFileAsDataURL = function readFileAsDataURL(file) {
-    return new Promise(function (res, rej) {
-      var reader = new FileReader();
-      reader.onload = function (ev) {
-        return res(ev.target.result);
-      };
-      reader.onerror = rej;
-      reader.readAsDataURL(file);
-    });
+        // Insert at cursor position
+        insertNodeAtCursor(container);
+        requestAnimationFrame(() => {
+          processExistingMedia(editorRef.current);
+          triggerChange();
+        });
+      }
+    } catch (err) {
+      console.error('Error inserting image:', err);
+    }
   };
-  var handlePaste = useCallback(function (e) {
-    var clipboardData = e.clipboardData || window.clipboardData;
+  const readFileAsDataURL = file => new Promise((res, rej) => {
+    const reader = new FileReader();
+    reader.onload = ev => res(ev.target.result);
+    reader.onerror = rej;
+    reader.readAsDataURL(file);
+  });
+  const handlePaste = useCallback(e => {
+    const clipboardData = e.clipboardData || window.clipboardData;
     if (!clipboardData) return;
 
     // Check for image in clipboard
-    var items = clipboardData.items || [];
-    var _loop = function _loop() {
-        var item = items[i];
-        if (item.kind === 'file' && item.type.indexOf('image/') !== -1) {
-          e.preventDefault();
-          var file = item.getAsFile();
-          if (file) {
-            setIsUploading(true);
-            var uploadPromise = onImageUpload ? onImageUpload(file) : readFileAsDataURL(file);
-            uploadPromise.then(function (url) {
-              if (url) {
-                // if the user's onImageUpload resolves to `{ mediaUrl: '...' }` like the previous MediaUpload, handle it
-                var finalUrl = _typeof(url) === 'object' && url !== null && url.mediaUrl ? url.mediaUrl : url;
-                insertImage(finalUrl, file.name || 'pasted-image');
-              }
-              setIsUploading(false);
-            })["catch"](function (error) {
-              console.error('Error uploading pasted image:', error);
-              setIsUploading(false);
-            });
-          }
-          return {
-            v: void 0
-          };
+    const items = clipboardData.items || [];
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (item.kind === 'file' && item.type.indexOf('image/') !== -1) {
+        e.preventDefault();
+        const file = item.getAsFile();
+        if (file) {
+          setIsUploading(true);
+          const uploadPromise = onImageUpload ? onImageUpload(file) : readFileAsDataURL(file);
+          uploadPromise.then(url => {
+            if (url) {
+              // if the user's onImageUpload resolves to `{ mediaUrl: '...' }` like the previous MediaUpload, handle it
+              const finalUrl = typeof url === 'object' && url !== null && url.mediaUrl ? url.mediaUrl : url;
+              insertImage(finalUrl, file.name || 'pasted-image');
+            }
+            setIsUploading(false);
+          }).catch(error => {
+            console.error('Error uploading pasted image:', error);
+            setIsUploading(false);
+          });
         }
-      },
-      _ret;
-    for (var i = 0; i < items.length; i++) {
-      _ret = _loop();
-      if (_ret) return _ret.v;
+        return;
+      }
     }
-    var htmlData = clipboardData.getData('text/html');
+    const htmlData = clipboardData.getData('text/html');
     if (htmlData && htmlData.trim()) {
       e.preventDefault();
-      var tempDiv = document.createElement('div');
+      const tempDiv = document.createElement('div');
       tempDiv.innerHTML = htmlData;
-      tempDiv.querySelectorAll('script, meta, link').forEach(function (el) {
-        return el.remove();
-      });
+      tempDiv.querySelectorAll('script, meta, link').forEach(el => el.remove());
       document.execCommand('styleWithCSS', false, true);
       document.execCommand('insertHTML', false, tempDiv.innerHTML);
       document.execCommand('styleWithCSS', false, false);
@@ -1454,13 +1292,13 @@ function RichTextEditor(_ref) {
       focus();
       return;
     }
-    var plainText = clipboardData.getData('text/plain');
+    const plainText = clipboardData.getData('text/plain');
     if (plainText) {
       e.preventDefault();
-      var htmlToInsert = escapeHtml(plainText);
-      htmlToInsert = htmlToInsert.replace(URL_REGEX, function (url) {
-        var safeUrl = escapeAttr(url.trim());
-        return "<a href=\"".concat(safeUrl, "\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"color: blue; text-decoration: underline;\">").concat(escapeHtml(url), "</a>");
+      let htmlToInsert = escapeHtml(plainText);
+      htmlToInsert = htmlToInsert.replace(URL_REGEX, url => {
+        const safeUrl = escapeAttr(url.trim());
+        return `<a href="${safeUrl}" target="_blank" rel="noopener noreferrer" style="color: blue; text-decoration: underline;">${escapeHtml(url)}</a>`;
       });
       htmlToInsert = htmlToInsert.replace(/\n/g, '<br>');
       document.execCommand('insertHTML', false, htmlToInsert);
@@ -1468,94 +1306,37 @@ function RichTextEditor(_ref) {
       focus();
     }
   }, [insertImage, triggerChange]);
-  var handleDrop = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(e) {
-      var files, imageFiles, _iterator, _step, _loop2, _t;
-      return _regenerator().w(function (_context3) {
-        while (1) switch (_context3.p = _context3.n) {
-          case 0:
-            if (editable) {
-              _context3.n = 1;
-              break;
-            }
-            return _context3.a(2);
-          case 1:
-            e.preventDefault();
-            e.stopPropagation();
-            files = e.dataTransfer.files;
-            if (!(!files || files.length === 0)) {
-              _context3.n = 2;
-              break;
-            }
-            return _context3.a(2);
-          case 2:
-            imageFiles = Array.from(files).filter(function (file) {
-              return file.type.startsWith("image/");
-            });
-            _iterator = _createForOfIteratorHelper(imageFiles);
-            _context3.p = 3;
-            _loop2 = /*#__PURE__*/_regenerator().m(function _loop2() {
-              var file, uploadPromise;
-              return _regenerator().w(function (_context2) {
-                while (1) switch (_context2.n) {
-                  case 0:
-                    file = _step.value;
-                    try {
-                      setIsUploading(true);
-                      uploadPromise = onImageUpload ? onImageUpload(file) : readFileAsDataURL(file);
-                      uploadPromise.then(function (url) {
-                        if (url) {
-                          var finalUrl = _typeof(url) === 'object' && url !== null && url.mediaUrl ? url.mediaUrl : url;
-                          insertImage(finalUrl, file.name);
-                        }
-                        setIsUploading(false);
-                      })["catch"](function (error) {
-                        console.error('Error processing image:', error);
-                        setIsUploading(false);
-                      });
-                    } catch (error) {
-                      console.error('Error processing image:', error);
-                      setIsUploading(false);
-                    }
-                  case 1:
-                    return _context2.a(2);
-                }
-              }, _loop2);
-            });
-            _iterator.s();
-          case 4:
-            if ((_step = _iterator.n()).done) {
-              _context3.n = 6;
-              break;
-            }
-            return _context3.d(_regeneratorValues(_loop2()), 5);
-          case 5:
-            _context3.n = 4;
-            break;
-          case 6:
-            _context3.n = 8;
-            break;
-          case 7:
-            _context3.p = 7;
-            _t = _context3.v;
-            _iterator.e(_t);
-          case 8:
-            _context3.p = 8;
-            _iterator.f();
-            return _context3.f(8);
-          case 9:
-            return _context3.a(2);
-        }
-      }, _callee2, null, [[3, 7, 8, 9]]);
-    }));
-    return function handleDrop(_x3) {
-      return _ref3.apply(this, arguments);
-    };
-  }();
-  var insertNodeAtCursor = function insertNodeAtCursor(node) {
+  const handleDrop = async e => {
+    if (!editable) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const files = e.dataTransfer.files;
+    if (!files || files.length === 0) return;
+    const imageFiles = Array.from(files).filter(file => file.type.startsWith("image/"));
+    for (const file of imageFiles) {
+      try {
+        setIsUploading(true);
+        const uploadPromise = onImageUpload ? onImageUpload(file) : readFileAsDataURL(file);
+        uploadPromise.then(url => {
+          if (url) {
+            const finalUrl = typeof url === 'object' && url !== null && url.mediaUrl ? url.mediaUrl : url;
+            insertImage(finalUrl, file.name);
+          }
+          setIsUploading(false);
+        }).catch(error => {
+          console.error('Error processing image:', error);
+          setIsUploading(false);
+        });
+      } catch (error) {
+        console.error('Error processing image:', error);
+        setIsUploading(false);
+      }
+    }
+  };
+  const insertNodeAtCursor = node => {
     try {
-      var sel = window.getSelection();
-      var range;
+      const sel = window.getSelection();
+      let range;
       if (!sel || sel.rangeCount === 0 || !editorRef.current.contains(sel.anchorNode)) {
         editorRef.current.focus();
 
@@ -1570,7 +1351,7 @@ function RichTextEditor(_ref) {
       }
       range.deleteContents();
       range.insertNode(node);
-      var space = document.createTextNode("\xA0");
+      const space = document.createTextNode("\u00A0");
       if (node.parentNode) {
         node.parentNode.insertBefore(space, node.nextSibling);
       }
@@ -1585,49 +1366,68 @@ function RichTextEditor(_ref) {
       }
     }
   };
-  var getCleanHtml = function getCleanHtml() {
-    if (!editorRef.current) return "";
-    return editorRef.current.innerHTML;
-  };
 
   // Helper function to unescape HTML entities
-  var unescapeHtml = function unescapeHtml(html) {
+  const unescapeHtml = html => {
     if (!html) return '';
-    var txt = document.createElement("textarea");
+    const txt = document.createElement("textarea");
     txt.innerHTML = html;
     return txt.value;
   };
-  var handleKeyDown = useCallback(function (e) {
+  const isCursorAtEndOfListItem = (range, listItem) => {
+    const suffixRange = document.createRange();
+    suffixRange.setStart(range.startContainer, range.startOffset);
+    suffixRange.setEnd(listItem, listItem.childNodes.length);
+    return suffixRange.toString().replace(/\u200B/g, "").length === 0;
+  };
+  const prepareListItemForTyping = (listItem, selection) => {
+    const activeColor = getActiveTextColor();
+    const newRange = document.createRange();
+    if (activeColor && activeColor.toLowerCase() !== "#000000") {
+      const span = document.createElement("span");
+      span.style.color = activeColor;
+      span.appendChild(document.createTextNode("\u200B"));
+      listItem.appendChild(span);
+      newRange.setStart(span.firstChild, 1);
+    } else {
+      listItem.appendChild(document.createTextNode("\u200B"));
+      newRange.setStart(listItem.firstChild, 1);
+    }
+    newRange.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(newRange);
+  };
+  const handleKeyDown = useCallback(e => {
     // Handle Enter key
     if (e.key === 'Enter') {
       e.preventDefault();
-      var selection = window.getSelection();
+      const selection = window.getSelection();
       if (!selection.rangeCount) return;
-      var range = selection.getRangeAt(0);
-      var node = range.startContainer;
-      var parent = node.nodeType === 3 ? node.parentNode : node;
+      const range = selection.getRangeAt(0);
+      const node = range.startContainer;
+      const parent = node.nodeType === 3 ? node.parentNode : node;
 
       // Check if we're in a list item
-      var listItem = parent.closest('li');
+      const listItem = parent.closest('li');
       if (listItem) {
-        var list = listItem.parentNode;
-        list.tagName === 'OL';
+        const list = listItem.parentNode;
 
         // Create a new list item
-        var newItem = document.createElement('li');
+        const newItem = document.createElement('li');
 
         // If we're at the end of a list item, add a new one
-        if (range.collapsed && range.endOffset === node.length) {
+        if (range.collapsed && isCursorAtEndOfListItem(range, listItem)) {
           // If it's empty, create a regular paragraph instead
-          if (listItem.textContent.trim() === '') {
+          if (listItem.textContent.replace(/\u200B/g, '').trim() === '') {
             document.execCommand('insertHTML', false, '<div><br></div>');
             // Move the cursor to the new line
-            var _newRange = document.createRange();
-            var newDiv = editorRef.current.lastElementChild;
-            _newRange.setStart(newDiv, 0);
-            _newRange.collapse(true);
+            const newRange = document.createRange();
+            const newDiv = editorRef.current.lastElementChild;
+            newRange.setStart(newDiv, 0);
+            newRange.collapse(true);
             selection.removeAllRanges();
-            selection.addRange(_newRange);
+            selection.addRange(newRange);
+            triggerChange();
             return;
           }
 
@@ -1637,35 +1437,29 @@ function RichTextEditor(_ref) {
           } else {
             list.appendChild(newItem);
           }
-
-          // Move cursor to the new list item
-          var newRange = document.createRange();
-          newRange.setStart(newItem, 0);
-          newRange.collapse(true);
-          selection.removeAllRanges();
-          selection.addRange(newRange);
+          prepareListItemForTyping(newItem, selection);
         } else {
-          // If we're in the middle of text, split the list item
-          var textBefore = node.textContent.substring(0, range.startOffset);
-          var textAfter = node.textContent.substring(range.startOffset);
-
-          // Update current item
-          node.textContent = textBefore;
-
-          // Insert new item after current one
-          newItem.textContent = textAfter;
+          // If we're in the middle of text, split the list item while preserving formatting
+          const afterRange = document.createRange();
+          afterRange.setStart(range.startContainer, range.startOffset);
+          afterRange.setEnd(listItem, listItem.childNodes.length);
+          const movedFragment = afterRange.extractContents();
+          newItem.appendChild(movedFragment);
           if (listItem.nextSibling) {
             list.insertBefore(newItem, listItem.nextSibling);
           } else {
             list.appendChild(newItem);
           }
-
-          // Move cursor to the new list item
-          var _newRange2 = document.createRange();
-          _newRange2.setStart(newItem.firstChild || newItem, 0);
-          _newRange2.collapse(true);
-          selection.removeAllRanges();
-          selection.addRange(_newRange2);
+          if (!newItem.textContent.replace(/\u200B/g, '').trim()) {
+            newItem.textContent = "";
+            prepareListItemForTyping(newItem, selection);
+          } else {
+            const newRange = document.createRange();
+            newRange.setStart(newItem, 0);
+            newRange.collapse(true);
+            selection.removeAllRanges();
+            selection.addRange(newRange);
+          }
         }
       } else {
         // Regular text, insert a new paragraph
@@ -1686,55 +1480,55 @@ function RichTextEditor(_ref) {
       e.preventDefault();
       exec("underline");
     }
-  }, [exec, triggerChange]);
-  var confirmLink = function confirmLink() {
+  }, [exec, triggerChange, fontColor]);
+  const confirmLink = () => {
     // Add protocol if missing
-    var url = linkUrl.trim();
+    let url = linkUrl.trim();
     if (url && !/^(https?:\/\/|mailto:|tel:)/i.test(url)) {
-      url = "https://".concat(url);
+      url = `https://${url}`;
     }
-    var safeUrl = escapeAttr(url);
-    var safeText = escapeHtml(linkText || linkUrl);
-    var sel = window.getSelection();
+    const safeUrl = escapeAttr(url);
+    const safeText = escapeHtml(linkText || linkUrl);
+    const sel = window.getSelection();
     sel.removeAllRanges();
     if (selectionRangeRef.current) {
       sel.addRange(selectionRangeRef.current);
     }
-    var linkHtml = "<a href=\"".concat(safeUrl, "\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"color: blue;\">").concat(safeText, "</a>");
+    const linkHtml = `<a href="${safeUrl}" target="_blank" rel="noopener noreferrer" style="color: blue;">${safeText}</a>`;
     document.execCommand("insertHTML", false, linkHtml);
     setLinkModalOpen(false);
     triggerChange();
     focus();
     selectionRangeRef.current = null;
   };
-  var cancelLink = function cancelLink() {
+  const cancelLink = () => {
     setLinkModalOpen(false);
     selectionRangeRef.current = null;
   };
-  var handleSelect = function handleSelect(type) {
+  const handleSelect = type => {
     exec(type === "unordered" ? "insertUnorderedList" : "insertOrderedList");
   };
-  var onLineHeightChange = function onLineHeightChange(value) {
+  const onLineHeightChange = value => {
     if (!value) return;
-    var sel = window.getSelection();
+    const sel = window.getSelection();
     if (!sel || !sel.rangeCount) return;
-    var range = sel.getRangeAt(0);
-    var editor = editorRef.current;
+    const range = sel.getRangeAt(0);
+    const editor = editorRef.current;
     if (!editor) return;
-    var walker = document.createTreeWalker(editor, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, {
-      acceptNode: function acceptNode(node) {
+    const walker = document.createTreeWalker(editor, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, {
+      acceptNode: node => {
         return range.intersectsNode(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
       }
     }, false);
-    var node;
-    var blocksToStyle = new Set();
-    var blockTags = ['P', 'DIV', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'LI', 'BLOCKQUOTE'];
-    var tempRange = range.cloneRange();
+    let node;
+    const blocksToStyle = new Set();
+    const blockTags = ['P', 'DIV', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'LI', 'BLOCKQUOTE'];
+    const tempRange = range.cloneRange();
     while (node = walker.nextNode()) {
       if (node.nodeType === 1 && blockTags.includes(node.tagName)) {
         blocksToStyle.add(node);
       } else if (node.nodeType === 3) {
-        var parent = node.parentNode;
+        let parent = node.parentNode;
         while (parent && parent !== editor && !blockTags.includes(parent.tagName)) {
           parent = parent.parentNode;
         }
@@ -1744,11 +1538,11 @@ function RichTextEditor(_ref) {
       }
     }
     if (blocksToStyle.size > 0) {
-      blocksToStyle.forEach(function (block) {
+      blocksToStyle.forEach(block => {
         block.style.lineHeight = value;
       });
     } else {
-      var common = range.commonAncestorContainer;
+      let common = range.commonAncestorContainer;
       if (common.nodeType === 3) common = common.parentNode;
       while (common && common !== editor && !blockTags.includes(common.tagName)) {
         common = common.parentNode;
@@ -1757,7 +1551,7 @@ function RichTextEditor(_ref) {
         common.style.lineHeight = value;
       } else if (editor) {
         document.execCommand('formatBlock', false, 'div');
-        var newCommon = window.getSelection().getRangeAt(0).commonAncestorContainer;
+        let newCommon = window.getSelection().getRangeAt(0).commonAncestorContainer;
         if (newCommon.nodeType === 3) newCommon = newCommon.parentNode;
         if (newCommon && newCommon !== editor) {
           newCommon.style.lineHeight = value;
@@ -1772,19 +1566,19 @@ function RichTextEditor(_ref) {
     triggerChange();
     focus();
   };
-  var applyFontSize = function applyFontSize(size) {
-    var sel = window.getSelection();
+  const applyFontSize = size => {
+    const sel = window.getSelection();
     if (!sel || !sel.rangeCount) return;
-    var range = sel.getRangeAt(0);
-    var sizePx = "".concat(size, "px");
+    const range = sel.getRangeAt(0);
+    const sizePx = `${size}px`;
 
     // Collapsed selection (cursor only): insert a styled zero-width span
     if (range.collapsed) {
-      var span = document.createElement("span");
+      const span = document.createElement("span");
       span.style.fontSize = sizePx;
       span.appendChild(document.createTextNode("\u200B"));
       range.insertNode(span);
-      var newRange = document.createRange();
+      const newRange = document.createRange();
       newRange.setStart(span.firstChild, 1);
       newRange.collapse(true);
       sel.removeAllRanges();
@@ -1796,42 +1590,41 @@ function RichTextEditor(_ref) {
 
     // Extended selection (highlighted text)
     try {
-      var editor = editorRef.current;
+      const editor = editorRef.current;
       if (!editor) return;
 
       // We will iterate through all the text nodes in the selection
-      var walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT, {
-        acceptNode: function acceptNode(node) {
+      const walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT, {
+        acceptNode: node => {
           return range.intersectsNode(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
         }
       }, false);
-      var node;
-      var nodesToStyle = [];
+      let node;
+      const nodesToStyle = [];
       while (node = walker.nextNode()) {
         nodesToStyle.push(node);
       }
-      var savedRange = range.cloneRange();
-      var lastInsertedNode = null;
+      const savedRange = range.cloneRange();
+      let lastInsertedNode = null;
 
       // Iterate through the selected text nodes and wrap them in spans
-      for (var _i5 = 0, _nodesToStyle = nodesToStyle; _i5 < _nodesToStyle.length; _i5++) {
-        var textNode = _nodesToStyle[_i5];
-        var parent = textNode.parentNode;
+      for (const textNode of nodesToStyle) {
+        const parent = textNode.parentNode;
 
         // This is important: check if the parent is a block-level element
         // like a list item or paragraph. If so, we want to style the block
         // itself to avoid breaking its structure.
-        var isBlockLevel = ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'LI', 'BLOCKQUOTE'].includes(parent.tagName);
+        const isBlockLevel = ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'LI', 'BLOCKQUOTE'].includes(parent.tagName);
         if (isBlockLevel) {
           parent.style.fontSize = sizePx;
         } else {
           // For inline text, wrap the selected portion in a new span
-          var startOffset = textNode === savedRange.startContainer ? savedRange.startOffset : 0;
-          var endOffset = textNode === savedRange.endContainer ? savedRange.endOffset : textNode.length;
-          var newSpan = document.createElement("span");
+          const startOffset = textNode === savedRange.startContainer ? savedRange.startOffset : 0;
+          const endOffset = textNode === savedRange.endContainer ? savedRange.endOffset : textNode.length;
+          const newSpan = document.createElement("span");
           newSpan.style.fontSize = sizePx;
           newSpan.textContent = textNode.textContent.substring(startOffset, endOffset);
-          var tempRange = document.createRange();
+          const tempRange = document.createRange();
           tempRange.setStart(textNode, startOffset);
           tempRange.setEnd(textNode, endOffset);
           tempRange.deleteContents();
@@ -1842,11 +1635,11 @@ function RichTextEditor(_ref) {
 
       // After styling, we need to correctly position the cursor
       if (lastInsertedNode) {
-        var _newRange3 = document.createRange();
-        _newRange3.setStartAfter(lastInsertedNode);
-        _newRange3.collapse(true);
+        const newRange = document.createRange();
+        newRange.setStartAfter(lastInsertedNode);
+        newRange.collapse(true);
         sel.removeAllRanges();
-        sel.addRange(_newRange3);
+        sel.addRange(newRange);
       } else {
         // If no nodes were wrapped (e.g., we styled a block), restore the original selection
         sel.removeAllRanges();
@@ -1858,65 +1651,59 @@ function RichTextEditor(_ref) {
     triggerChange();
     focus();
   };
-  var handleInput = useCallback(function () {
-    if (onChange && editorRef.current) {
-      var _html = editorRef.current.innerHTML;
-      setHtml(_html);
-      onChange(_html);
-    }
-  }, [onChange]);
-  var handleImageUpload = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(e) {
-      var file, uploadPromise;
-      return _regenerator().w(function (_context4) {
-        while (1) switch (_context4.n) {
-          case 0:
-            file = e.target.files[0];
-            if (file) {
-              _context4.n = 1;
-              break;
-            }
-            return _context4.a(2);
-          case 1:
-            try {
-              setIsUploading(true);
-              uploadPromise = onImageUpload ? onImageUpload(file) : readFileAsDataURL(file);
-              uploadPromise.then(function (url) {
-                if (url) {
-                  var finalUrl = _typeof(url) === 'object' && url !== null && url.mediaUrl ? url.mediaUrl : url;
-                  insertImage(finalUrl, file.name);
-                }
-                setIsUploading(false);
-                e.target.value = null;
-              })["catch"](function (error) {
-                console.error('Error uploading image:', error);
-                setIsUploading(false);
-              });
-            } catch (error) {
-              console.error('Error uploading image:', error);
-              setIsUploading(false);
-            }
-          case 2:
-            return _context4.a(2);
+  const handleInput = useCallback(() => {
+    if (editorRef.current) {
+      const next = getCleanHtml();
+      setHtml(next);
+      lastSynchronizedHtmlRef.current = next;
+      onChange && onChange(next);
+      updateMetrics();
+    }
+  }, [onChange, updateMetrics]);
+  const handleImageUpload = async e => {
+    const file = e.target.files[0];
+    if (!file) return;
+    try {
+      setIsUploading(true);
+      const uploadPromise = onImageUpload ? onImageUpload(file) : readFileAsDataURL(file);
+      uploadPromise.then(url => {
+        if (url) {
+          const finalUrl = typeof url === 'object' && url !== null && url.mediaUrl ? url.mediaUrl : url;
+          insertImage(finalUrl, file.name);
         }
-      }, _callee3);
-    }));
-    return function handleImageUpload(_x4) {
-      return _ref4.apply(this, arguments);
-    };
-  }();
-  useEffect(function () {
+        setIsUploading(false);
+        e.target.value = null;
+      }).catch(error => {
+        console.error('Error uploading image:', error);
+        setIsUploading(false);
+      });
+    } catch (error) {
+      console.error('Error uploading image:', error);
+      setIsUploading(false);
+    }
+  };
+  useEffect(() => {
     // If disabled is explicitly false, make sure the editor is not editable
     if (disabled === true) {
       setEditable(false);
     }
   }, [disabled]);
-  var handleEditorClick = useCallback(function (e) {
-    setSelectionVersion(function (v) {
-      return v + 1;
-    });
+  const handleEditorClick = useCallback(e => {
+    setSelectionVersion(v => v + 1);
+    const deleteBtn = e.target.closest('button[title="Remove image"], button[title="Remove video"]');
+    if (deleteBtn && editable && editorFocused) {
+      e.preventDefault();
+      e.stopPropagation();
+      const wrapper = deleteBtn.closest('.image-container, .video-container');
+      if (wrapper) {
+        wrapper.remove();
+        triggerChange();
+      }
+      return;
+    }
+
     // Check if the click is on a link
-    var clickedLink = e.target.closest('a');
+    const clickedLink = e.target.closest('a');
     if (clickedLink) {
       e.preventDefault();
       e.stopPropagation();
@@ -1925,11 +1712,10 @@ function RichTextEditor(_ref) {
     }
 
     // NEW: Check if click is on an image for resizing
-    var clickedImg = e.target.closest('img');
+    const clickedImg = e.target.closest('img');
     if (clickedImg && !clickedImg.closest('.rte-modal')) {
       setSelectedImage(clickedImg);
-      setResizeData({});
-    } else if (!e.target.closest('.resize-handle')) {
+    } else if (!e.target.closest('.rte-image-toolbar')) {
       setSelectedImage(null);
     }
 
@@ -1942,120 +1728,85 @@ function RichTextEditor(_ref) {
     // Only allow setting editable to true if not disabled
     if (!editable && disabled !== true) {
       setEditable(true);
-      setTimeout(function () {
+      setTimeout(() => {
         if (editorRef.current) {
           editorRef.current.focus();
         }
       }, 0);
     }
-  }, [editable, disabled]);
-  var startResize = function startResize(e, direction) {
-    e.preventDefault();
-    e.stopPropagation();
-    var img = selectedImage;
-    var startX = e.clientX;
-    var startY = e.clientY;
-    var startWidth = img.offsetWidth;
-    var startHeight = img.offsetHeight;
-    var onMouseMove = function onMouseMove(moveEvent) {
-      var newWidth = startWidth;
-      var newHeight = startHeight;
-      if (direction.includes('e')) newWidth = startWidth + (moveEvent.clientX - startX);
-      if (direction.includes('w')) newWidth = startWidth - (moveEvent.clientX - startX);
-      if (direction.includes('s')) newHeight = startHeight + (moveEvent.clientY - startY);
-      if (direction.includes('n')) newHeight = startHeight - (moveEvent.clientY - startY);
-      img.style.width = "".concat(newWidth, "px");
-      img.style.height = "".concat(newHeight, "px");
-      setResizeData({}); // Force re-render of handles
-    };
-    var _onMouseUp = function onMouseUp() {
-      document.removeEventListener('mousemove', onMouseMove);
-      document.removeEventListener('mouseup', _onMouseUp);
-      triggerChange();
-    };
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('mouseup', _onMouseUp);
-  };
-  var renderResizeHandles = function renderResizeHandles() {
-    if (!selectedImage || !editorRef.current) return null;
-    var editorRect = editorRef.current.getBoundingClientRect();
-    var imgRect = selectedImage.getBoundingClientRect();
-
-    // Relative position within editorRef using the more robust BoundingClientRect
-    var top = imgRect.top - editorRect.top + editorRef.current.scrollTop;
-    var left = imgRect.left - editorRect.left + editorRef.current.scrollLeft;
-    var width = imgRect.width;
-    var height = imgRect.height;
-    var handleStyles = {
-      position: 'absolute',
-      width: '10px',
-      height: '10px',
-      background: '#3b82f6',
-      border: '2px solid white',
-      borderRadius: '50%',
-      zIndex: 100
-    };
-    var handles = [{
-      id: 'nw',
-      style: {
-        top: top - 5,
-        left: left - 5,
-        cursor: 'nw-resize'
-      }
-    }, {
-      id: 'ne',
-      style: {
-        top: top - 5,
-        left: left + width - 5,
-        cursor: 'ne-resize'
+  }, [editable, disabled, editorFocused, triggerChange]);
+  const renderImageToolbar = () => {
+    if (!selectedImage || !editorRef.current || !editable) return null;
+    const editorRect = editorRef.current.getBoundingClientRect();
+    const imgRect = selectedImage.getBoundingClientRect();
+    const top = imgRect.top - editorRect.top + editorRef.current.scrollTop;
+    const left = imgRect.left - editorRect.left + editorRef.current.scrollLeft;
+    const width = imgRect.width;
+    const handleAlignment = align => {
+      const wrapper = selectedImage.closest('.image-container');
+      if (wrapper) {
+        // Remove all alignment classes first
+        wrapper.classList.remove('image-align-left', 'image-align-center', 'image-align-right');
+        // Add the new alignment class
+        wrapper.classList.add(`image-align-${align}`);
+        selectedImage.setAttribute('data-align', align);
+        triggerChange();
       }
-    }, {
-      id: 'sw',
-      style: {
-        top: top + height - 5,
-        left: left - 5,
-        cursor: 'sw-resize'
+    };
+    const removeImage = () => {
+      const wrapper = selectedImage.closest('.image-container');
+      if (wrapper) {
+        wrapper.remove();
+        setSelectedImage(null);
+        triggerChange();
       }
-    }, {
-      id: 'se',
-      style: {
-        top: top + height - 5,
-        left: left + width - 5,
-        cursor: 'se-resize'
+    };
+    const toggleSize = () => {
+      const wrapper = selectedImage.closest('.image-container');
+      if (wrapper) {
+        const isSmall = wrapper.classList.contains('image-small');
+        if (isSmall) {
+          wrapper.classList.remove('image-small');
+        } else {
+          wrapper.classList.add('image-small');
+        }
+        triggerChange();
       }
-    }];
+    };
     return /*#__PURE__*/React.createElement("div", {
+      className: "rte-image-toolbar",
       style: {
         position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        pointerEvents: 'none'
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        position: 'absolute',
-        top: top,
-        left: left,
-        width: width,
-        height: height,
-        border: '2px solid #3b82f6',
-        pointerEvents: 'none'
+        top: Math.max(0, top - 45),
+        left: Math.max(0, left + width / 2 - 80),
+        zIndex: 1000
       }
-    }), handles.map(function (h) {
-      return /*#__PURE__*/React.createElement("div", {
-        key: h.id,
-        className: "resize-handle",
-        onMouseDown: function onMouseDown(e) {
-          return startResize(e, h.id);
-        },
-        style: _objectSpread2(_objectSpread2(_objectSpread2({}, handleStyles), h.style), {}, {
-          pointerEvents: 'auto'
-        })
-      });
-    }));
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      onClick: () => handleAlignment('left'),
+      title: "Align Left"
+    }, "L"), /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      onClick: () => handleAlignment('center'),
+      title: "Align Center"
+    }, "C"), /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      onClick: () => handleAlignment('right'),
+      title: "Align Right"
+    }, "R"), /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      onClick: toggleSize,
+      title: "Toggle 50% Width"
+    }, "50%"), /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      onClick: removeImage,
+      className: "danger",
+      title: "Remove Image"
+    }, "\xD7"));
   };
+  if (isLoading) {
+    return /*#__PURE__*/React.createElement(Spinner, null);
+  }
   return /*#__PURE__*/React.createElement("div", {
     className: "rte-main-wrapper",
     style: {
@@ -2068,21 +1819,21 @@ function RichTextEditor(_ref) {
     },
     className: !showBorder ? "" : "rte-container",
     onClick: handleEditorClick,
-    onMouseOver: function onMouseOver(e) {
-      var table = e.target.closest('table');
+    onMouseOver: e => {
+      const table = e.target.closest('table');
       if (table && editorRef.current.contains(table)) {
         setHoveredTable(table);
       }
     },
-    onMouseOut: function onMouseOut(e) {
-      var table = e.target.closest('table');
-      var related = e.relatedTarget;
+    onMouseOut: e => {
+      const table = e.target.closest('table');
+      const related = e.relatedTarget;
       if (table && (!related || !table.contains(related)) && !(related !== null && related !== void 0 && related.closest('.rte-table-delete-hover'))) {
         setHoveredTable(null);
       }
     },
     onDrop: handleDrop,
-    onDragOver: function onDragOver(e) {
+    onDragOver: e => {
       e.preventDefault();
       e.stopPropagation();
     }
@@ -2091,40 +1842,40 @@ function RichTextEditor(_ref) {
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     title: "Bold",
-    onClick: function onClick(e) {
+    onClick: e => {
       e.preventDefault();
       e.stopPropagation();
       document.execCommand("bold");
       handleInput();
       focus();
     },
-    className: "rte-toolbar-button ".concat(isBold ? "active" : "")
+    className: `rte-toolbar-button ${isBold ? "active" : ""}`
   }, /*#__PURE__*/React.createElement(FaBold, {
     size: 14
   })), /*#__PURE__*/React.createElement("button", {
     type: "button",
     title: "Italic",
-    onClick: function onClick(e) {
+    onClick: e => {
       e.preventDefault();
       e.stopPropagation();
       document.execCommand("italic");
       handleInput();
       focus();
     },
-    className: "rte-toolbar-button ".concat(isItalic ? "active" : "")
+    className: `rte-toolbar-button ${isItalic ? "active" : ""}`
   }, /*#__PURE__*/React.createElement(FaItalic, {
     size: 14
   })), /*#__PURE__*/React.createElement("button", {
     type: "button",
     title: "Underline",
-    onClick: function onClick(e) {
+    onClick: e => {
       e.preventDefault();
       e.stopPropagation();
       document.execCommand("underline");
       handleInput();
       focus();
     },
-    className: "rte-toolbar-button ".concat(isUnderline ? "active" : "")
+    className: `rte-toolbar-button ${isUnderline ? "active" : ""}`
   }, /*#__PURE__*/React.createElement(FaUnderline, {
     size: 14
   })), /*#__PURE__*/React.createElement("div", {
@@ -2136,13 +1887,11 @@ function RichTextEditor(_ref) {
     }
   }), /*#__PURE__*/React.createElement("select", {
     value: currentFontSize,
-    onMouseDown: function onMouseDown(e) {
-      return e.stopPropagation();
-    },
-    onChange: function onChange(e) {
+    onMouseDown: e => e.stopPropagation(),
+    onChange: e => {
       e.preventDefault();
       e.stopPropagation();
-      var size = e.target.value;
+      const size = e.target.value;
       if (!size) return;
       applyFontSize(size);
       setCurrentFontSize(size);
@@ -2152,12 +1901,10 @@ function RichTextEditor(_ref) {
     style: {
       width: '70px'
     }
-  }, [8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 48].map(function (s) {
-    return /*#__PURE__*/React.createElement("option", {
-      key: s,
-      value: s
-    }, s, "px");
-  })), /*#__PURE__*/React.createElement("label", {
+  }, [8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 48].map(s => /*#__PURE__*/React.createElement("option", {
+    key: s,
+    value: s
+  }, s, "px"))), /*#__PURE__*/React.createElement("label", {
     title: "Font Color",
     className: "rte-color-picker-label"
   }, /*#__PURE__*/React.createElement(FaFont, {
@@ -2168,11 +1915,11 @@ function RichTextEditor(_ref) {
   }), /*#__PURE__*/React.createElement("input", {
     type: "color",
     value: fontColor,
-    onMouseDown: function onMouseDown(e) {
+    onMouseDown: e => {
       e.preventDefault();
       e.stopPropagation();
     },
-    onChange: function onChange(e) {
+    onChange: e => {
       e.stopPropagation();
       handleColorChange(e.target.value);
     },
@@ -2187,8 +1934,8 @@ function RichTextEditor(_ref) {
   }), /*#__PURE__*/React.createElement("button", {
     type: "button",
     title: "Align Left",
-    className: "rte-toolbar-button ".concat(activeAlign === "left" ? "active" : ""),
-    onMouseDown: function onMouseDown(e) {
+    className: `rte-toolbar-button ${activeAlign === "left" ? "active" : ""}`,
+    onMouseDown: e => {
       e.preventDefault();
       exec("justifyLeft");
       setActiveAlign("left");
@@ -2198,8 +1945,8 @@ function RichTextEditor(_ref) {
   })), /*#__PURE__*/React.createElement("button", {
     type: "button",
     title: "Align Center",
-    className: "rte-toolbar-button ".concat(activeAlign === "center" ? "active" : ""),
-    onMouseDown: function onMouseDown(e) {
+    className: `rte-toolbar-button ${activeAlign === "center" ? "active" : ""}`,
+    onMouseDown: e => {
       e.preventDefault();
       exec("justifyCenter");
       setActiveAlign("center");
@@ -2209,8 +1956,8 @@ function RichTextEditor(_ref) {
   })), /*#__PURE__*/React.createElement("button", {
     type: "button",
     title: "Align Right",
-    className: "rte-toolbar-button ".concat(activeAlign === "right" ? "active" : ""),
-    onMouseDown: function onMouseDown(e) {
+    className: `rte-toolbar-button ${activeAlign === "right" ? "active" : ""}`,
+    onMouseDown: e => {
       e.preventDefault();
       exec("justifyRight");
       setActiveAlign("right");
@@ -2227,21 +1974,21 @@ function RichTextEditor(_ref) {
   }), /*#__PURE__*/React.createElement("button", {
     type: "button",
     title: "Unordered List",
-    onMouseDown: function onMouseDown(e) {
+    onMouseDown: e => {
       e.preventDefault();
       handleSelect("unordered");
     },
-    className: "rte-toolbar-button ".concat(currentListType === "unordered" ? "active" : "")
+    className: `rte-toolbar-button ${currentListType === "unordered" ? "active" : ""}`
   }, /*#__PURE__*/React.createElement(FaListUl, {
     size: 14
   })), /*#__PURE__*/React.createElement("button", {
     type: "button",
     title: "Ordered List",
-    onMouseDown: function onMouseDown(e) {
+    onMouseDown: e => {
       e.preventDefault();
       handleSelect("ordered");
     },
-    className: "rte-toolbar-button ".concat(currentListType === "ordered" ? "active" : "")
+    className: `rte-toolbar-button ${currentListType === "ordered" ? "active" : ""}`
   }, /*#__PURE__*/React.createElement(FaListOl, {
     size: 14
   })), /*#__PURE__*/React.createElement("div", {
@@ -2252,12 +1999,10 @@ function RichTextEditor(_ref) {
     }
   }, /*#__PURE__*/React.createElement("select", {
     value: currentLineHeight,
-    onMouseDown: function onMouseDown(e) {
-      return e.stopPropagation();
-    },
-    onChange: function onChange(e) {
+    onMouseDown: e => e.stopPropagation(),
+    onChange: e => {
       e.preventDefault();
-      var height = e.target.value;
+      const height = e.target.value;
       if (height) {
         onLineHeightChange(height);
         setCurrentLineHeight(height);
@@ -2272,12 +2017,10 @@ function RichTextEditor(_ref) {
   }, /*#__PURE__*/React.createElement("option", {
     value: "",
     disabled: true
-  }, "\u2195"), ['1', '1.15', '1.5', '2'].map(function (h) {
-    return /*#__PURE__*/React.createElement("option", {
-      key: h,
-      value: h
-    }, h);
-  })), /*#__PURE__*/React.createElement("div", {
+  }, "\u2195"), ['1', '1.15', '1.5', '2'].map(h => /*#__PURE__*/React.createElement("option", {
+    key: h,
+    value: h
+  }, h))), /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'absolute',
       left: '6px',
@@ -2304,7 +2047,7 @@ function RichTextEditor(_ref) {
     type: "button",
     title: "Add Link",
     className: "rte-toolbar-button",
-    onMouseDown: function onMouseDown(e) {
+    onMouseDown: e => {
       e.preventDefault();
       addLink();
     }
@@ -2324,7 +2067,7 @@ function RichTextEditor(_ref) {
   }), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "rte-toolbar-button",
-    onMouseDown: function onMouseDown(e) {
+    onMouseDown: e => {
       var _fileInputRef$current;
       e.preventDefault();
       if (!isUploading) (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 || _fileInputRef$current.click();
@@ -2351,9 +2094,9 @@ function RichTextEditor(_ref) {
     type: "button",
     title: "Insert Table",
     className: "rte-toolbar-button",
-    onMouseDown: function onMouseDown(e) {
+    onMouseDown: e => {
       e.preventDefault();
-      var sel = window.getSelection();
+      const sel = window.getSelection();
       if (sel && sel.rangeCount > 0) {
         selectionRangeRef.current = sel.getRangeAt(0).cloneRange();
       }
@@ -2364,20 +2107,20 @@ function RichTextEditor(_ref) {
   })), /*#__PURE__*/React.createElement("button", {
     type: "button",
     title: "Embed Video (YouTube, Vimeo, etc.)",
-    className: "rte-toolbar-button ".concat(videoModalOpen ? 'active' : ''),
-    onMouseDown: function onMouseDown(e) {
+    className: `rte-toolbar-button ${videoModalOpen ? 'active' : ''}`,
+    onMouseDown: e => {
       e.preventDefault();
       saveSelection();
       setVideoModalOpen(true);
     }
   }, /*#__PURE__*/React.createElement(FaVideo, {
     size: 14
-  })), function () {
+  })), (() => {
     if (typeof window === "undefined") return null;
-    var sel = window.getSelection();
+    const sel = window.getSelection();
     // Robust check: inside cell OR the table itself is selected
-    var isCell = sel && sel.rangeCount > 0 && sel.anchorNode && (findParentTag(sel.anchorNode, 'TD') || findParentTag(sel.anchorNode, 'TH'));
-    var isTable = sel && sel.rangeCount > 0 && sel.anchorNode && findParentTag(sel.anchorNode, 'TABLE');
+    const isCell = sel && sel.rangeCount > 0 && sel.anchorNode && (findParentTag(sel.anchorNode, 'TD') || findParentTag(sel.anchorNode, 'TH'));
+    const isTable = sel && sel.rangeCount > 0 && sel.anchorNode && findParentTag(sel.anchorNode, 'TABLE');
     if (isCell || isTable) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
         style: {
@@ -2390,7 +2133,7 @@ function RichTextEditor(_ref) {
         type: "button",
         title: "Add Row Above",
         className: "rte-toolbar-button",
-        onMouseDown: function onMouseDown(e) {
+        onMouseDown: e => {
           e.preventDefault();
           tableAction('addRowAbove');
         }
@@ -2398,7 +2141,7 @@ function RichTextEditor(_ref) {
         type: "button",
         title: "Add Row Below",
         className: "rte-toolbar-button",
-        onMouseDown: function onMouseDown(e) {
+        onMouseDown: e => {
           e.preventDefault();
           tableAction('addRowBelow');
         }
@@ -2406,7 +2149,7 @@ function RichTextEditor(_ref) {
         type: "button",
         title: "Add Col Before",
         className: "rte-toolbar-button",
-        onMouseDown: function onMouseDown(e) {
+        onMouseDown: e => {
           e.preventDefault();
           tableAction('addColBefore');
         }
@@ -2414,7 +2157,7 @@ function RichTextEditor(_ref) {
         type: "button",
         title: "Add Col After",
         className: "rte-toolbar-button",
-        onMouseDown: function onMouseDown(e) {
+        onMouseDown: e => {
           e.preventDefault();
           tableAction('addColAfter');
         }
@@ -2422,7 +2165,7 @@ function RichTextEditor(_ref) {
         type: "button",
         title: "Merge Cells (Right)",
         className: "rte-toolbar-button",
-        onMouseDown: function onMouseDown(e) {
+        onMouseDown: e => {
           e.preventDefault();
           tableAction('mergeRight');
         }
@@ -2437,7 +2180,7 @@ function RichTextEditor(_ref) {
         type: "button",
         title: "Delete Row",
         className: "rte-toolbar-button rte-toolbar-button-danger",
-        onMouseDown: function onMouseDown(e) {
+        onMouseDown: e => {
           e.preventDefault();
           tableAction('deleteRow');
         }
@@ -2451,7 +2194,7 @@ function RichTextEditor(_ref) {
         type: "button",
         title: "Delete Column",
         className: "rte-toolbar-button rte-toolbar-button-danger",
-        onMouseDown: function onMouseDown(e) {
+        onMouseDown: e => {
           e.preventDefault();
           tableAction('deleteCol');
         }
@@ -2465,7 +2208,7 @@ function RichTextEditor(_ref) {
         type: "button",
         title: "Delete Table",
         className: "rte-toolbar-button rte-toolbar-button-danger",
-        onMouseDown: function onMouseDown(e) {
+        onMouseDown: e => {
           e.preventDefault();
           tableAction('deleteTable');
         }
@@ -2478,51 +2221,41 @@ function RichTextEditor(_ref) {
       }, "Table"))));
     }
     return null;
-  }()), /*#__PURE__*/React.createElement("div", {
+  })()), /*#__PURE__*/React.createElement("div", {
     ref: editorRef,
     contentEditable: editable && disabled !== true,
     suppressContentEditableWarning: true,
     onInput: handleInput,
     onPaste: handlePaste,
     onDrop: handleDrop,
-    onDragStart: function onDragStart(e) {
-      return e.preventDefault();
-    },
-    onDragOver: function onDragOver(e) {
-      return e.preventDefault();
-    },
+    onDragStart: e => e.preventDefault(),
+    onDragOver: e => e.preventDefault(),
     onKeyDown: handleKeyDown,
     onClick: handleEditorClick,
+    onFocus: handleEditorFocus,
+    onBlur: handleEditorBlur,
     style: {
       minHeight: minHeight || '150px',
       maxHeight: maxHeight || '500px',
       paddingLeft: paddingLeft || '12px'
     },
-    className: "rte-content"
-  }), renderResizeHandles(), /*#__PURE__*/React.createElement("div", {
+    className: `rte-content${editable ? " rte-is-editable" : ""}${editorFocused ? " rte-is-focused" : ""}`
+  }), renderImageToolbar(), /*#__PURE__*/React.createElement("div", {
     className: "rte-footer"
-  }, function (_editorRef$current) {
-    var text = ((_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.innerText) || "";
-    var cleanText = text.replace(/[\n\r]/g, ' ').trim();
-    var words = cleanText ? cleanText.split(/\s+/).length : 0;
-    var chars = text.length;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "rte-footer-content"
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "rte-footer-item"
-    }, /*#__PURE__*/React.createElement("b", null, words), " words"), /*#__PURE__*/React.createElement("span", {
-      className: "rte-footer-separator"
-    }, "\u2022"), /*#__PURE__*/React.createElement("span", {
-      className: "rte-footer-item"
-    }, /*#__PURE__*/React.createElement("b", null, chars), " characters"));
-  }()), linkModalOpen && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "rte-footer-content"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "rte-footer-item"
+  }, /*#__PURE__*/React.createElement("b", null, metrics.words), " words"), /*#__PURE__*/React.createElement("span", {
+    className: "rte-footer-separator"
+  }, "\u2022"), /*#__PURE__*/React.createElement("span", {
+    className: "rte-footer-item"
+  }, /*#__PURE__*/React.createElement("b", null, metrics.chars), " characters"))), linkModalOpen && /*#__PURE__*/React.createElement("div", {
     className: "rte-modal-overlay",
     onClick: cancelLink
   }, /*#__PURE__*/React.createElement("div", {
     className: "rte-modal",
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    }
+    onClick: e => e.stopPropagation()
   }, /*#__PURE__*/React.createElement("h3", {
     className: "rte-modal-title"
   }, "Insert Link"), /*#__PURE__*/React.createElement("div", {
@@ -2538,9 +2271,7 @@ function RichTextEditor(_ref) {
     className: "rte-input",
     placeholder: "e.g. Google",
     value: linkText,
-    onChange: function onChange(e) {
-      return setLinkText(e.target.value);
-    }
+    onChange: e => setLinkText(e.target.value)
   })), /*#__PURE__*/React.createElement("div", {
     className: "rte-form-group"
   }, /*#__PURE__*/React.createElement("label", {
@@ -2550,12 +2281,8 @@ function RichTextEditor(_ref) {
     className: "rte-input",
     placeholder: "https://example.com",
     value: linkUrl,
-    onChange: function onChange(e) {
-      return setLinkUrl(e.target.value);
-    },
-    onKeyDown: function onKeyDown(e) {
-      return e.key === 'Enter' && confirmLink();
-    },
+    onChange: e => setLinkUrl(e.target.value),
+    onKeyDown: e => e.key === 'Enter' && confirmLink(),
     autoFocus: true
   }))), /*#__PURE__*/React.createElement("div", {
     className: "rte-modal-divider",
@@ -2575,14 +2302,10 @@ function RichTextEditor(_ref) {
     disabled: !linkUrl
   }, "Insert")))), tableModalOpen && /*#__PURE__*/React.createElement("div", {
     className: "rte-modal-overlay",
-    onClick: function onClick() {
-      return setTableModalOpen(false);
-    }
+    onClick: () => setTableModalOpen(false)
   }, /*#__PURE__*/React.createElement("div", {
     className: "rte-modal",
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    }
+    onClick: e => e.stopPropagation()
   }, /*#__PURE__*/React.createElement("h3", {
     className: "rte-modal-title"
   }, "Insert Table"), /*#__PURE__*/React.createElement("div", {
@@ -2593,9 +2316,7 @@ function RichTextEditor(_ref) {
     type: "number",
     className: "rte-input",
     value: tableRows,
-    onChange: function onChange(e) {
-      return setTableRows(e.target.value);
-    },
+    onChange: e => setTableRows(e.target.value),
     min: "1",
     max: "10"
   })), /*#__PURE__*/React.createElement("div", {
@@ -2606,9 +2327,7 @@ function RichTextEditor(_ref) {
     type: "number",
     className: "rte-input",
     value: tableCols,
-    onChange: function onChange(e) {
-      return setTableCols(e.target.value);
-    },
+    onChange: e => setTableCols(e.target.value),
     min: "1",
     max: "10"
   })), /*#__PURE__*/React.createElement("div", {
@@ -2616,23 +2335,17 @@ function RichTextEditor(_ref) {
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "rte-button rte-button-secondary",
-    onClick: function onClick() {
-      return setTableModalOpen(false);
-    }
+    onClick: () => setTableModalOpen(false)
   }, "Cancel"), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "rte-button rte-button-primary",
     onClick: insertTable
   }, "Insert")))), videoModalOpen && /*#__PURE__*/React.createElement("div", {
     className: "rte-modal-overlay",
-    onClick: function onClick() {
-      return setVideoModalOpen(false);
-    }
+    onClick: () => setVideoModalOpen(false)
   }, /*#__PURE__*/React.createElement("div", {
     className: "rte-modal",
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    }
+    onClick: e => e.stopPropagation()
   }, /*#__PURE__*/React.createElement("div", {
     className: "rte-modal-header"
   }, /*#__PURE__*/React.createElement("h3", {
@@ -2649,12 +2362,10 @@ function RichTextEditor(_ref) {
     type: "text",
     className: "rte-input",
     value: videoUrl,
-    onChange: function onChange(e) {
-      return setVideoUrl(e.target.value);
-    },
+    onChange: e => setVideoUrl(e.target.value),
     placeholder: "Paste URL here...",
     autoFocus: true,
-    onKeyDown: function onKeyDown(e) {
+    onKeyDown: e => {
       if (e.key === 'Enter' && videoUrl.trim()) insertVideo();
       if (e.key === 'Escape') setVideoModalOpen(false);
     }
@@ -2663,13 +2374,11 @@ function RichTextEditor(_ref) {
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "rte-button rte-button-secondary",
-    onClick: function onClick() {
-      return setVideoModalOpen(false);
-    }
+    onClick: () => setVideoModalOpen(false)
   }, "Cancel"), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "rte-button rte-button-primary",
-    onClick: function onClick() {
+    onClick: () => {
       if (videoUrl.trim()) {
         insertVideo();
       }
@@ -2684,16 +2393,14 @@ function RichTextEditor(_ref) {
       maxWidth: "90%",
       maxHeight: "90%"
     },
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    }
+    onClick: e => e.stopPropagation()
   }, /*#__PURE__*/React.createElement("img", {
     src: selectedImageUrl,
     style: {
       width: "100%",
       maxHeight: "90vh",
       borderRadius: '12px',
-      transform: "scale(".concat(zoomLevel, ")"),
+      transform: `scale(${zoomLevel})`,
       transition: "transform 0.2s ease",
       boxShadow: '0 25px 50px -12px rgba(0,0,0,0.5)'
     },
@@ -2708,13 +2415,11 @@ function RichTextEditor(_ref) {
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "rte-button rte-button-secondary",
-    onClick: function onClick() {
-      return setEditable(false);
-    }
+    onClick: () => setEditable(false)
   }, "Cancel"), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "rte-button rte-button-primary",
-    onClick: function onClick() {
+    onClick: () => {
       onChange && onChange(html);
       setEditable(false);
     }