react-input-emoji 5.8.1 → 5.9.0-beta.1

package/dist/index.es.js

@@ -30,479 +30,10 @@ function styleInject(css, ref) {
 var css_248z = ".react-input-emoji--container {\n  color: #4b4b4b;\n  text-rendering: optimizeLegibility;\n  background-color: #fff;\n  border: 1px solid #fff;\n  border-radius: 21px;\n  margin: 5px 10px;\n  box-sizing: border-box;\n  flex: 1 1 auto;\n  font-size: 15px;\n  font-family: sans-serif;\n  font-weight: 400;\n  line-height: 20px;\n  min-height: 20px;\n  min-width: 0;\n  outline: none;\n  width: inherit;\n  will-change: width;\n  vertical-align: baseline;\n  border: 1px solid #eaeaea;\n  margin-right: 0;\n}\n\n.react-input-emoji--wrapper {\n  display: flex;\n  overflow: hidden;\n  flex: 1;\n  position: relative;\n  padding-right: 0;\n  vertical-align: baseline;\n  outline: none;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\n.react-input-emoji--input {\n  font-weight: 400;\n  max-height: 100px;\n  min-height: 20px;\n  outline: none;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: relative;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  z-index: 1;\n  width: 100%;\n  user-select: text;\n  padding: 9px 12px 11px;\n  text-align: left;\n}\n\n.react-input-emoji--input img {\n  vertical-align: middle;\n  width: 18px !important;\n  height: 18px !important;\n  display: inline !important;\n  margin-left: 1px;\n  margin-right: 1px;\n}\n\n.react-input-emoji--overlay {\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: 9;\n}\n\n.react-input-emoji--placeholder {\n  color: #a0a0a0;\n  pointer-events: none;\n  position: absolute;\n  user-select: none;\n  z-index: 2;\n  left: 16px;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  width: calc(100% - 22px);\n}\n\n.react-input-emoji--button {\n  position: relative;\n  display: block;\n  text-align: center;\n  padding: 0 10px;\n  overflow: hidden;\n  transition: color 0.1s ease-out;\n  margin: 0;\n  box-shadow: none;\n  background: none;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  flex-shrink: 0;\n}\n\n.react-input-emoji--button svg {\n  fill: #858585;\n}\n\n.react-input-emoji--button__show svg {\n  fill: #128b7e;\n}\n\n.react-emoji {\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n}\n\n.react-emoji-picker--container {\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n\n.react-emoji-picker--wrapper {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  height: 435px;\n  width: 352px;\n  overflow: hidden;\n  z-index: 10;\n}\n\n.react-emoji-picker {\n  position: absolute;\n  top: 0;\n  left: 0;\n  animation: slidein 0.1s ease-in-out;\n}\n\n.react-emoji-picker__show {\n  top: 0;\n}\n\n.react-input-emoji--mention--container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: 10;\n}\n\n.react-input-emoji--mention--list {\n  background-color: #fafafa;\n  border: 1px solid #eaeaea;\n  border-radius: 4px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  gap: 5px;\n  flex-direction: column;\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  left: 0;\n}\n\n.react-input-emoji--mention--item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 5px 10px;\n  background-color: transparent;\n  width: 100%;\n  margin: 0;\n  border: 0;\n}\n\n.react-input-emoji--mention--item__selected {\n  background-color: #eeeeee;\n}\n\n.react-input-emoji--mention--item--img {\n  width: 34px;\n  height: 34px;\n  border-radius: 50%;\n}\n\n.react-input-emoji--mention--item--name {\n  font-size: 16px;\n  color: #333;\n}\n\n.react-input-emoji--mention--item--name__selected {\n  color: green;\n}\n\n.react-input-emoji--mention--text {\n  color: #039be5;\n}\n\n.react-input-emoji--mention--loading {\n  background-color: #fafafa;\n  border: 1px solid #eaeaea;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px 0;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n}\n\n.react-input-emoji--mention--loading--spinner,\n.react-input-emoji--mention--loading--spinner::after {\n  border-radius: 50%;\n  width: 10em;\n  height: 10em;\n}\n\n.react-input-emoji--mention--loading--spinner {\n  margin: 1px auto;\n  font-size: 2px;\n  position: relative;\n  text-indent: -9999em;\n  border-top: 1.1em solid rgba(0, 0, 0, 0.1);\n  border-right: 1.1em solid rgba(0, 0, 0, 0.1);\n  border-bottom: 1.1em solid rgba(0, 0, 0, 0.1);\n  border-left: 1.1em solid rgba(0, 0, 0, 0.4);\n  transform: translateZ(0);\n  animation: load8 1.1s infinite linear;\n}\n\n@keyframes load8 {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes slidein {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n";
 styleInject(css_248z);
 
-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 = !0,
-      o = !1;
-    try {
-      if (i = (t = t.call(r)).next, 0 === l) {
-        if (Object(t) !== t) return;
-        f = !1;
-      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
-    } catch (r) {
-      o = !0, n = r;
-    } finally {
-      try {
-        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
-      } finally {
-        if (o) throw n;
-      }
-    }
-    return a;
-  }
-}
-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), !0).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 _regeneratorRuntime() {
-  _regeneratorRuntime = function () {
-    return e;
-  };
-  var t,
-    e = {},
-    r = Object.prototype,
-    n = r.hasOwnProperty,
-    o = Object.defineProperty || function (t, e, r) {
-      t[e] = r.value;
-    },
-    i = "function" == typeof Symbol ? Symbol : {},
-    a = i.iterator || "@@iterator",
-    c = i.asyncIterator || "@@asyncIterator",
-    u = i.toStringTag || "@@toStringTag";
-  function define(t, e, r) {
-    return Object.defineProperty(t, e, {
-      value: r,
-      enumerable: !0,
-      configurable: !0,
-      writable: !0
-    }), t[e];
-  }
-  try {
-    define({}, "");
-  } catch (t) {
-    define = function (t, e, r) {
-      return t[e] = r;
-    };
-  }
-  function wrap(t, e, r, n) {
-    var i = e && e.prototype instanceof Generator ? e : Generator,
-      a = Object.create(i.prototype),
-      c = new Context(n || []);
-    return o(a, "_invoke", {
-      value: makeInvokeMethod(t, r, c)
-    }), a;
-  }
-  function tryCatch(t, e, r) {
-    try {
-      return {
-        type: "normal",
-        arg: t.call(e, r)
-      };
-    } catch (t) {
-      return {
-        type: "throw",
-        arg: t
-      };
-    }
-  }
-  e.wrap = wrap;
-  var h = "suspendedStart",
-    l = "suspendedYield",
-    f = "executing",
-    s = "completed",
-    y = {};
-  function Generator() {}
-  function GeneratorFunction() {}
-  function GeneratorFunctionPrototype() {}
-  var p = {};
-  define(p, a, function () {
-    return this;
-  });
-  var d = Object.getPrototypeOf,
-    v = d && d(d(values([])));
-  v && v !== r && n.call(v, a) && (p = v);
-  var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
-  function defineIteratorMethods(t) {
-    ["next", "throw", "return"].forEach(function (e) {
-      define(t, e, function (t) {
-        return this._invoke(e, t);
-      });
-    });
-  }
-  function AsyncIterator(t, e) {
-    function invoke(r, o, i, a) {
-      var c = tryCatch(t[r], t, o);
-      if ("throw" !== c.type) {
-        var u = c.arg,
-          h = u.value;
-        return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
-          invoke("next", t, i, a);
-        }, function (t) {
-          invoke("throw", t, i, a);
-        }) : e.resolve(h).then(function (t) {
-          u.value = t, i(u);
-        }, function (t) {
-          return invoke("throw", t, i, a);
-        });
-      }
-      a(c.arg);
-    }
-    var r;
-    o(this, "_invoke", {
-      value: function (t, n) {
-        function callInvokeWithMethodAndArg() {
-          return new e(function (e, r) {
-            invoke(t, n, e, r);
-          });
-        }
-        return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
-      }
-    });
-  }
-  function makeInvokeMethod(e, r, n) {
-    var o = h;
-    return function (i, a) {
-      if (o === f) throw new Error("Generator is already running");
-      if (o === s) {
-        if ("throw" === i) throw a;
-        return {
-          value: t,
-          done: !0
-        };
-      }
-      for (n.method = i, n.arg = a;;) {
-        var c = n.delegate;
-        if (c) {
-          var u = maybeInvokeDelegate(c, n);
-          if (u) {
-            if (u === y) continue;
-            return u;
-          }
-        }
-        if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
-          if (o === h) throw o = s, n.arg;
-          n.dispatchException(n.arg);
-        } else "return" === n.method && n.abrupt("return", n.arg);
-        o = f;
-        var p = tryCatch(e, r, n);
-        if ("normal" === p.type) {
-          if (o = n.done ? s : l, p.arg === y) continue;
-          return {
-            value: p.arg,
-            done: n.done
-          };
-        }
-        "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
-      }
-    };
-  }
-  function maybeInvokeDelegate(e, r) {
-    var n = r.method,
-      o = e.iterator[n];
-    if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y;
-    var i = tryCatch(o, e.iterator, r.arg);
-    if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
-    var a = i.arg;
-    return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y);
-  }
-  function pushTryEntry(t) {
-    var e = {
-      tryLoc: t[0]
-    };
-    1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
-  }
-  function resetTryEntry(t) {
-    var e = t.completion || {};
-    e.type = "normal", delete e.arg, t.completion = e;
-  }
-  function Context(t) {
-    this.tryEntries = [{
-      tryLoc: "root"
-    }], t.forEach(pushTryEntry, this), this.reset(!0);
-  }
-  function values(e) {
-    if (e || "" === e) {
-      var r = e[a];
-      if (r) return r.call(e);
-      if ("function" == typeof e.next) return e;
-      if (!isNaN(e.length)) {
-        var o = -1,
-          i = function next() {
-            for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
-            return next.value = t, next.done = !0, next;
-          };
-        return i.next = i;
-      }
-    }
-    throw new TypeError(typeof e + " is not iterable");
-  }
-  return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
-    value: GeneratorFunctionPrototype,
-    configurable: !0
-  }), o(GeneratorFunctionPrototype, "constructor", {
-    value: GeneratorFunction,
-    configurable: !0
-  }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
-    var e = "function" == typeof t && t.constructor;
-    return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
-  }, e.mark = function (t) {
-    return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
-  }, e.awrap = function (t) {
-    return {
-      __await: t
-    };
-  }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
-    return this;
-  }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
-    void 0 === i && (i = Promise);
-    var a = new AsyncIterator(wrap(t, r, n, o), i);
-    return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
-      return t.done ? t.value : a.next();
-    });
-  }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
-    return this;
-  }), define(g, "toString", function () {
-    return "[object Generator]";
-  }), e.keys = function (t) {
-    var e = Object(t),
-      r = [];
-    for (var n in e) r.push(n);
-    return r.reverse(), function next() {
-      for (; r.length;) {
-        var t = r.pop();
-        if (t in e) return next.value = t, next.done = !1, next;
-      }
-      return next.done = !0, next;
-    };
-  }, e.values = values, Context.prototype = {
-    constructor: Context,
-    reset: function (e) {
-      if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
-    },
-    stop: function () {
-      this.done = !0;
-      var t = this.tryEntries[0].completion;
-      if ("throw" === t.type) throw t.arg;
-      return this.rval;
-    },
-    dispatchException: function (e) {
-      if (this.done) throw e;
-      var r = this;
-      function handle(n, o) {
-        return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
-      }
-      for (var o = this.tryEntries.length - 1; o >= 0; --o) {
-        var i = this.tryEntries[o],
-          a = i.completion;
-        if ("root" === i.tryLoc) return handle("end");
-        if (i.tryLoc <= this.prev) {
-          var c = n.call(i, "catchLoc"),
-            u = n.call(i, "finallyLoc");
-          if (c && u) {
-            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
-            if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
-          } else if (c) {
-            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
-          } else {
-            if (!u) throw new Error("try statement without catch or finally");
-            if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
-          }
-        }
-      }
-    },
-    abrupt: function (t, e) {
-      for (var r = this.tryEntries.length - 1; r >= 0; --r) {
-        var o = this.tryEntries[r];
-        if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
-          var i = o;
-          break;
-        }
-      }
-      i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
-      var a = i ? i.completion : {};
-      return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
-    },
-    complete: function (t, e) {
-      if ("throw" === t.type) throw t.arg;
-      return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y;
-    },
-    finish: function (t) {
-      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
-        var r = this.tryEntries[e];
-        if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
-      }
-    },
-    catch: function (t) {
-      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
-        var r = this.tryEntries[e];
-        if (r.tryLoc === t) {
-          var n = r.completion;
-          if ("throw" === n.type) {
-            var o = n.arg;
-            resetTryEntry(r);
-          }
-          return o;
-        }
-      }
-      throw new Error("illegal catch attempt");
-    },
-    delegateYield: function (e, r, n) {
-      return this.delegate = {
-        iterator: values(e),
-        resultName: r,
-        nextLoc: n
-      }, "next" === this.method && (this.arg = t), y;
-    }
-  }, e;
-}
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-  try {
-    var info = gen[key](arg);
-    var value = info.value;
-  } catch (error) {
-    reject(error);
-    return;
-  }
-  if (info.done) {
-    resolve(value);
-  } else {
-    Promise.resolve(value).then(_next, _throw);
-  }
-}
-function _asyncToGenerator(fn) {
-  return function () {
-    var self = this,
-      args = arguments;
-    return new Promise(function (resolve, reject) {
-      var gen = fn.apply(self, args);
-      function _next(value) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-      }
-      function _throw(err) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
-      }
-      _next(undefined);
-    });
-  };
-}
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-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 _toPrimitive(input, hint) {
-  if (typeof input !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (typeof res !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return typeof key === "symbol" ? key : String(key);
-}
-
 /* eslint-disable valid-jsdoc */
 // @ts-check
 
-var TRANSPARENT_GIF = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+const TRANSPARENT_GIF = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
 
 /**
  * Replace all text with emoji with an image html tag
@@ -510,11 +41,11 @@ var TRANSPARENT_GIF = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAA
  * @return {string}
  */
 function replaceAllTextEmojis(text) {
-  var allEmojis = getAllEmojisFromText(text);
+  let allEmojis = getAllEmojisFromText(text);
   if (allEmojis) {
-    allEmojis = _toConsumableArray(new Set(allEmojis)); // remove duplicates
+    allEmojis = [...new Set(allEmojis)]; // remove duplicates
 
-    allEmojis.forEach(function (emoji) {
+    allEmojis.forEach(emoji => {
       text = replaceAll(text, emoji, getInputEmojiHTML('', emoji));
     });
   }
@@ -548,20 +79,19 @@ function getAllEmojisFromText(text) {
  * @return {string}
  */
 function getImageEmoji(emoji) {
-  var _emojiPickerEl$shadow;
   /** @type {HTMLElement | null} */
-  var emojiPickerEl = document.querySelector('em-emoji-picker');
+  const emojiPickerEl = document.querySelector('em-emoji-picker');
   if (!emojiPickerEl) {
-    return getInputEmojiNativeHTML(emoji["native"]);
+    return getInputEmojiNativeHTML(emoji.native);
   }
 
   /** @type {HTMLSpanElement | null=} */
-  var emojiSpanEl = emojiPickerEl === null || emojiPickerEl === void 0 || (_emojiPickerEl$shadow = emojiPickerEl.shadowRoot) === null || _emojiPickerEl$shadow === void 0 ? void 0 : _emojiPickerEl$shadow.querySelector("[title=\"".concat(emoji.name, "\"] > span > span"));
+  const emojiSpanEl = emojiPickerEl?.shadowRoot?.querySelector(`[title="${emoji.name}"] > span > span`);
   if (!emojiSpanEl) {
-    return getInputEmojiNativeHTML(emoji["native"]);
+    return getInputEmojiNativeHTML(emoji.native);
   }
-  var style = replaceAll(emojiSpanEl.style.cssText, '"', "'");
-  return getInputEmojiHTML(style, emoji["native"]);
+  const style = replaceAll(emojiSpanEl.style.cssText, '"', "'");
+  return getInputEmojiHTML(style, emoji.native);
 }
 
 // eslint-disable-next-line valid-jsdoc
@@ -572,7 +102,7 @@ function getImageEmoji(emoji) {
  * @returns
  */
 function getInputEmojiHTML(style, emoji) {
-  return "<img style=\"".concat(style, "; display: inline-block\" data-emoji=\"").concat(emoji, "\" src=\"").concat(TRANSPARENT_GIF, "\" />");
+  return `<img style="${style}; display: inline-block" data-emoji="${emoji}" src="${TRANSPARENT_GIF}" />`;
 }
 
 /**
@@ -581,7 +111,7 @@ function getInputEmojiHTML(style, emoji) {
  * @returns 
  */
 function getInputEmojiNativeHTML(emoji) {
-  return "<span class=\"width: 18px; height: 18px; display: inline-block; margin: 0 1px;\">".concat(emoji, "</span>");
+  return `<span class="width: 18px; height: 18px; display: inline-block; margin: 0 1px;">${emoji}</span>`;
 }
 
 /**
@@ -590,10 +120,10 @@ function getInputEmojiNativeHTML(emoji) {
  * @return {string}
  */
 function replaceAllTextEmojiToString(html) {
-  var container = document.createElement("div");
+  const container = document.createElement("div");
   container.innerHTML = html;
-  var images = Array.prototype.slice.call(container.querySelectorAll("img"));
-  images.forEach(function (image) {
+  const images = Array.prototype.slice.call(container.querySelectorAll("img"));
+  images.forEach(image => {
     container.innerHTML = container.innerHTML.replace(image.outerHTML, image.dataset.emoji);
   });
   return container.innerHTML;
@@ -606,12 +136,12 @@ function replaceAllTextEmojiToString(html) {
  * @param {React.ClipboardEvent} event
  */
 function handleCopy(event) {
-  var selectedText = window.getSelection();
+  const selectedText = window.getSelection();
   if (selectedText === null) {
     return;
   }
-  var container = document.createElement("div");
-  for (var i = 0, len = selectedText.rangeCount; i < len; ++i) {
+  let container = document.createElement("div");
+  for (let i = 0, len = selectedText.rangeCount; i < len; ++i) {
     container.appendChild(selectedText.getRangeAt(i).cloneContents());
   }
   container = replaceEmojiToString(container);
@@ -619,28 +149,41 @@ function handleCopy(event) {
   event.preventDefault();
 }
 
+/** @type {Range|undefined} */
+/** @type {Range|undefined} */
+let currentRangeCached;
+
 /**
- *
- * @param {string} html
+ * Caches the current text selection range
+ */
+function cacheCurrentRange() {
+  const selection = window.getSelection();
+  if (!selection.rangeCount || selection?.anchorNode['className'] !== 'react-input-emoji--input' && selection.anchorNode.parentNode['className'] !== 'react-input-emoji--input') return;
+  const range = selection.getRangeAt(0);
+  currentRangeCached = range.cloneRange();
+}
+
+/**
+ * @param {string} html - HTML string to be pasted at the caret position
  */
 function handlePasteHtmlAtCaret(html) {
-  var sel;
-  var range;
+  let sel;
+  let range;
   if (window.getSelection) {
     // IE9 and non-IE
     sel = window.getSelection();
     if (sel === null) return;
     if (sel.getRangeAt && sel.rangeCount) {
-      range = sel.getRangeAt(0);
+      range = currentRangeCached ?? sel.getRangeAt(0);
       range.deleteContents();
 
       // Range.createContextualFragment() would be useful here but is
       // non-standard and not supported in all browsers (IE9, for one)
-      var el = document.createElement("div");
+      const el = document.createElement("div");
       el.innerHTML = html;
-      var frag = document.createDocumentFragment();
-      var node;
-      var lastNode;
+      const frag = document.createDocumentFragment();
+      let node;
+      let lastNode;
       while (node = el.firstChild) {
         lastNode = frag.appendChild(node);
       }
@@ -649,6 +192,7 @@ function handlePasteHtmlAtCaret(html) {
       // Preserve the selection
       if (lastNode) {
         range = range.cloneRange();
+        currentRangeCached = range;
         range.setStartAfter(lastNode);
         range.collapse(true);
         sel.removeAllRanges();
@@ -664,8 +208,8 @@ function handlePasteHtmlAtCaret(html) {
  * @return {HTMLDivElement}
  */
 function replaceEmojiToString(container) {
-  var images = Array.prototype.slice.call(container.querySelectorAll("img"));
-  images.forEach(function (image) {
+  const images = Array.prototype.slice.call(container.querySelectorAll("img"));
+  images.forEach(image => {
     image.outerHTML = image.dataset.emoji;
   });
   return container;
@@ -676,11 +220,12 @@ function replaceEmojiToString(container) {
  * @param {{text: string, html: string}} props
  * @return {number}
  */
-function totalCharacters(_ref2) {
-  var text = _ref2.text,
-    html = _ref2.html;
-  var textCount = text.length;
-  var emojisCount = (html.match(/<img/g) || []).length;
+function totalCharacters({
+  text,
+  html
+}) {
+  const textCount = text.length;
+  const emojisCount = (html.match(/<img/g) || []).length;
   return textCount + emojisCount;
 }
 /**
@@ -689,12 +234,12 @@ function totalCharacters(_ref2) {
  * @return {string}
  */
 function removeHtmlExceptBr(inputDiv) {
-  var temp = inputDiv.innerHTML.replaceAll(/<br\s*\/?>/gi, "[BR]"); // temporarily replace <br> with placeholder
-  var tempContainer = document.createElement("div");
+  const temp = inputDiv.innerHTML.replaceAll(/<br\s*\/?>/gi, "[BR]"); // temporarily replace <br> with placeholder
+  const tempContainer = document.createElement("div");
   tempContainer.innerHTML = temp;
-  var stripped = tempContainer.innerText; // strip all html tags
-  var _final = stripped.replaceAll(/\[BR\]/gi, "</br>"); // replace placeholders with <br>
-  return _final;
+  const stripped = tempContainer.innerText; // strip all html tags
+  const final = stripped.replaceAll(/\[BR\]/gi, "</br>"); // replace placeholders with <br>
+  return final;
 }
 
 /**
@@ -703,8 +248,8 @@ function removeHtmlExceptBr(inputDiv) {
  * @returns 
  */
 function getSelectionStart$1(range) {
-  var node = range.startContainer;
-  var offset = range.startOffset;
+  let node = range.startContainer;
+  let offset = range.startOffset;
 
   // Handle cases where the selection start node is not a text node
   if (node.nodeType !== Node.TEXT_NODE) {
@@ -721,8 +266,8 @@ function getSelectionStart$1(range) {
     offset = 0;
   }
   return {
-    node: node,
-    offset: offset
+    node,
+    offset
   };
 }
 
@@ -731,13 +276,13 @@ function getSelectionStart$1(range) {
  * @return {Object} cursor
  */
 function getCursor() {
-  var selection = window.getSelection();
-  var range = selection.getRangeAt(0);
-  var selectionStart = getSelectionStart$1(range);
+  const selection = window.getSelection();
+  const range = selection.getRangeAt(0);
+  const selectionStart = getSelectionStart$1(range);
   return {
-    selection: selection,
-    range: range,
-    selectionStart: selectionStart
+    selection,
+    range,
+    selectionStart
   };
 }
 
@@ -745,30 +290,31 @@ function getCursor() {
  *
  */
 function addLineBreak() {
-  var _getCursor = getCursor(),
-    selection = _getCursor.selection,
-    range = _getCursor.range,
-    selectionStart = _getCursor.selectionStart;
+  const {
+    selection,
+    range,
+    selectionStart
+  } = getCursor();
 
   // If cursor is at the end of the text content, add one more line break
   if (selection.isCollapsed && selectionStart.offset === selectionStart.node.textContent.length) {
-    var br = document.createElement("br");
+    const br = document.createElement("br");
     range.insertNode(br);
     range.setStartAfter(br);
     range.setEndAfter(br);
     selection.removeAllRanges();
     selection.addRange(range);
-    var br2 = document.createElement("br");
+    const br2 = document.createElement("br");
     range.insertNode(br2);
     range.setStartAfter(br2);
     range.setEndAfter(br2);
     selection.removeAllRanges();
     selection.addRange(range);
   } else {
-    var _br = document.createElement("br");
-    range.insertNode(_br);
-    range.setStartAfter(_br);
-    range.setEndAfter(_br);
+    const br = document.createElement("br");
+    range.insertNode(br);
+    range.setStartAfter(br);
+    range.setEndAfter(br);
     selection.removeAllRanges();
     selection.addRange(range);
     // Set cursor position right before the first letter after the line break
@@ -987,7 +533,7 @@ var reactEasyEmoji = function reactEasyEmoji(element, optionsOrFn) {
 var emoji = reactEasyEmoji;
 
 // @ts-check
-var EMOJI_REGEX = new RegExp(/(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?(?:\u200d(?:[^\ud800-\udfff]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?)*/g);
+const EMOJI_REGEX = new RegExp(/(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?(?:\u200d(?:[^\ud800-\udfff]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?)*/g);
 
 /**
  * @typedef {import('../types/types').SanitizeFn} SanitizeFn
@@ -1000,17 +546,17 @@ var EMOJI_REGEX = new RegExp(/(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\
  */
 function useSanitize(shouldReturn, shouldConvertEmojiToImage) {
   /** @type {React.MutableRefObject<SanitizeFn[]>} */
-  var sanitizeFnsRef = useRef([]);
-  var sanitizedTextRef = useRef("");
+  const sanitizeFnsRef = useRef([]);
+  const sanitizedTextRef = useRef("");
 
   /** @type {(fn: SanitizeFn) => void} */
-  var addSanitizeFn = useCallback(function (fn) {
+  const addSanitizeFn = useCallback(fn => {
     sanitizeFnsRef.current.push(fn);
   }, []);
 
   /** @type {(html: string) => string} */
-  var sanitize = useCallback(function (html) {
-    var result = sanitizeFnsRef.current.reduce(function (acc, fn) {
+  const sanitize = useCallback(html => {
+    let result = sanitizeFnsRef.current.reduce((acc, fn) => {
       return fn(acc);
     }, html);
     result = replaceAllHtmlToString(result, shouldReturn);
@@ -1021,9 +567,9 @@ function useSanitize(shouldReturn, shouldConvertEmojiToImage) {
     return result;
   }, [shouldReturn, shouldConvertEmojiToImage]);
   return {
-    addSanitizeFn: addSanitizeFn,
-    sanitize: sanitize,
-    sanitizedTextRef: sanitizedTextRef
+    addSanitizeFn,
+    sanitize,
+    sanitizedTextRef
   };
 }
 
@@ -1034,9 +580,9 @@ function useSanitize(shouldReturn, shouldConvertEmojiToImage) {
  * @return {string}
  */
 function replaceAllHtmlToString(html, shouldReturn) {
-  var container = document.createElement("div");
+  const container = document.createElement("div");
   container.innerHTML = html;
-  var text;
+  let text;
   if (shouldReturn) {
     text = removeHtmlExceptBr(container);
   } else {
@@ -1085,35 +631,35 @@ function handleEmoji(text) {
  *
  * @param {Props} props
  */
-function useExpose(_ref) {
-  var ref = _ref.ref,
-    textInputRef = _ref.textInputRef,
-    setValue = _ref.setValue,
-    emitChange = _ref.emitChange,
-    shouldConvertEmojiToImage = _ref.shouldConvertEmojiToImage;
-  var _useSanitize = useSanitize(false, shouldConvertEmojiToImage),
-    sanitize = _useSanitize.sanitize,
-    sanitizedTextRef = _useSanitize.sanitizedTextRef;
-  useImperativeHandle(ref, function () {
-    return {
-      get value() {
-        return sanitizedTextRef.current;
-      },
-      set value(value) {
-        setValue(value);
-      },
-      focus: function focus() {
-        if (textInputRef.current === null) return;
-        textInputRef.current.focus();
-      },
-      blur: function blur() {
-        if (textInputRef.current !== null) {
-          sanitize(textInputRef.current.html);
-        }
-        emitChange();
+function useExpose({
+  ref,
+  textInputRef,
+  setValue,
+  emitChange,
+  shouldConvertEmojiToImage
+}) {
+  const {
+    sanitize,
+    sanitizedTextRef
+  } = useSanitize(false, shouldConvertEmojiToImage);
+  useImperativeHandle(ref, () => ({
+    get value() {
+      return sanitizedTextRef.current;
+    },
+    set value(value) {
+      setValue(value);
+    },
+    focus: () => {
+      if (textInputRef.current === null) return;
+      textInputRef.current.focus();
+    },
+    blur: () => {
+      if (textInputRef.current !== null) {
+        sanitize(textInputRef.current.html);
       }
-    };
-  });
+      emitChange();
+    }
+  }));
 }
 
 // @ts-check
@@ -1127,19 +673,19 @@ function useExpose(_ref) {
  */
 function useEmit(textInputRef, onResize, onChange) {
   /** @type {React.MutableRefObject<{width: number; height: number} | null>} */
-  var currentSizeRef = useRef(null);
-  var onChangeFn = useRef(onChange);
-  var checkAndEmitResize = useCallback(function () {
+  const currentSizeRef = useRef(null);
+  const onChangeFn = useRef(onChange);
+  const checkAndEmitResize = useCallback(() => {
     if (textInputRef.current !== null) {
-      var currentSize = currentSizeRef.current;
-      var nextSize = textInputRef.current.size;
+      const currentSize = currentSizeRef.current;
+      const nextSize = textInputRef.current.size;
       if ((!currentSize || currentSize.width !== nextSize.width || currentSize.height !== nextSize.height) && typeof onResize === "function") {
         onResize(nextSize);
       }
       currentSizeRef.current = nextSize;
     }
   }, [onResize, textInputRef]);
-  var emitChange = useCallback(function (sanitizedText) {
+  const emitChange = useCallback(sanitizedText => {
     if (typeof onChangeFn.current === "function") {
       onChangeFn.current(sanitizedText);
     }
@@ -1147,7 +693,7 @@ function useEmit(textInputRef, onResize, onChange) {
       checkAndEmitResize();
     }
   }, [checkAndEmitResize, onResize]);
-  useEffect(function () {
+  useEffect(() => {
     if (textInputRef.current) {
       checkAndEmitResize();
     }
@@ -1155,7 +701,7 @@ function useEmit(textInputRef, onResize, onChange) {
   return emitChange;
 }
 
-var _excluded = ["placeholder", "style", "tabIndex", "className", "onChange"];
+// @ts-check
 
 /**
  * @typedef {Object} Props
@@ -1189,97 +735,96 @@ var _excluded = ["placeholder", "style", "tabIndex", "className", "onChange"];
 
 // eslint-disable-next-line valid-jsdoc
 /** @type {React.ForwardRefRenderFunction<Ref, Props>} */
-var TextInput = function TextInput(_ref, ref) {
-  var placeholder = _ref.placeholder,
-    style = _ref.style,
-    tabIndex = _ref.tabIndex,
-    className = _ref.className,
-    onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded);
-  useImperativeHandle(ref, function () {
-    return {
-      appendContent: function appendContent(html) {
-        if (textInputRef.current) {
-          textInputRef.current.focus();
-        }
-        handlePasteHtmlAtCaret(html);
-        if (textInputRef.current) {
-          textInputRef.current.focus();
-        }
-        if (textInputRef.current && placeholderRef.current && replaceAllTextEmojiToString(textInputRef.current.innerHTML) === "") {
+const TextInput = ({
+  placeholder,
+  style,
+  tabIndex,
+  className,
+  onChange,
+  ...props
+}, ref) => {
+  useImperativeHandle(ref, () => ({
+    appendContent: html => {
+      if (textInputRef.current) {
+        textInputRef.current.focus();
+      }
+      handlePasteHtmlAtCaret(html);
+      if (textInputRef.current) {
+        textInputRef.current.focus();
+      }
+      if (textInputRef.current && placeholderRef.current && replaceAllTextEmojiToString(textInputRef.current.innerHTML) === "") {
+        placeholderRef.current.style.visibility = "visible";
+      } else if (placeholderRef.current) {
+        placeholderRef.current.style.visibility = "hidden";
+      }
+      if (textInputRef.current && typeof onChange === 'function') {
+        onChange(textInputRef.current.innerHTML);
+      }
+    },
+    set html(value) {
+      if (textInputRef.current) {
+        textInputRef.current.innerHTML = value;
+      }
+      if (placeholderRef.current) {
+        const text = replaceAllTextEmojiToString(value);
+        if (text === "") {
           placeholderRef.current.style.visibility = "visible";
-        } else if (placeholderRef.current) {
+        } else {
           placeholderRef.current.style.visibility = "hidden";
         }
-        if (textInputRef.current && typeof onChange === 'function') {
-          onChange(textInputRef.current.innerHTML);
-        }
-      },
-      set html(value) {
-        if (textInputRef.current) {
-          textInputRef.current.innerHTML = value;
-        }
-        if (placeholderRef.current) {
-          var text = replaceAllTextEmojiToString(value);
-          if (text === "") {
-            placeholderRef.current.style.visibility = "visible";
-          } else {
-            placeholderRef.current.style.visibility = "hidden";
-          }
-        }
-        if (typeof onChange === 'function' && textInputRef.current) {
-          onChange(textInputRef.current.innerHTML);
-        }
-      },
-      get html() {
-        if (!textInputRef.current) return '';
-        return textInputRef.current.innerHTML;
-      },
-      get text() {
-        if (!textInputRef.current) return '';
-        return textInputRef.current.innerText;
-      },
-      get size() {
-        if (!textInputRef.current) {
-          return {
-            width: 0,
-            height: 0
-          };
-        }
+      }
+      if (typeof onChange === 'function' && textInputRef.current) {
+        onChange(textInputRef.current.innerHTML);
+      }
+    },
+    get html() {
+      if (!textInputRef.current) return '';
+      return textInputRef.current.innerHTML;
+    },
+    get text() {
+      if (!textInputRef.current) return '';
+      return textInputRef.current.innerText;
+    },
+    get size() {
+      if (!textInputRef.current) {
         return {
-          width: textInputRef.current.offsetWidth,
-          height: textInputRef.current.offsetHeight
+          width: 0,
+          height: 0
         };
-      },
-      focus: function focus() {
-        if (!textInputRef.current) return;
-        textInputRef.current.focus();
       }
-    };
-  });
+      return {
+        width: textInputRef.current.offsetWidth,
+        height: textInputRef.current.offsetHeight
+      };
+    },
+    focus() {
+      if (!textInputRef.current) return;
+      textInputRef.current.focus();
+    }
+  }));
 
   /** @type {React.CSSProperties} */
-  var placeholderStyle = useMemo(function () {
-    var placeholderStyle = {};
+  const placeholderStyle = useMemo(() => {
+    const placeholderStyle = {};
     if (style.placeholderColor) {
       placeholderStyle.color = style.placeholderColor;
     }
     return placeholderStyle;
-  }, [style === null || style === void 0 ? void 0 : style.placeholderColor]);
+  }, [style?.placeholderColor]);
 
   /** @type {React.CSSProperties} */
-  var inputStyle = useMemo(function () {
-    var inputStyle = {};
+  const inputStyle = useMemo(() => {
+    const inputStyle = {};
     if (style.color) {
       inputStyle.color = style.color;
     }
     return inputStyle;
-  }, [style === null || style === void 0 ? void 0 : style.color]);
+  }, [style?.color]);
 
   /** @type {React.MutableRefObject<HTMLDivElement | null>} */
-  var placeholderRef = useRef(null);
+  const placeholderRef = useRef(null);
   /** @type {React.MutableRefObject<HTMLDivElement | null>} */
-  var textInputRef = useRef(null);
+  const textInputRef = useRef(null);
 
   /**
    *
@@ -1318,9 +863,9 @@ var TextInput = function TextInput(_ref, ref) {
    */
   function handleKeyUp(event) {
     props.onKeyUp(event);
-    var input = textInputRef.current;
+    const input = textInputRef.current;
     if (placeholderRef.current && input) {
-      var text = replaceAllTextEmojiToString(input.innerHTML);
+      const text = replaceAllTextEmojiToString(input.innerHTML);
       if (text === "") {
         placeholderRef.current.style.visibility = "visible";
       } else {
@@ -1347,7 +892,7 @@ var TextInput = function TextInput(_ref, ref) {
     onKeyUp: handleKeyUp,
     tabIndex: tabIndex,
     contentEditable: true,
-    className: "react-input-emoji--input".concat(className ? " ".concat(className) : ""),
+    className: `react-input-emoji--input${className ? ` ${className}` : ""}`,
     onBlur: props.onBlur,
     onCopy: props.onCopy,
     onPaste: props.onPaste,
@@ -1355,7 +900,9 @@ var TextInput = function TextInput(_ref, ref) {
     style: inputStyle
   })));
 };
-var TextInputWithRef = /*#__PURE__*/forwardRef(TextInput);
+const TextInputWithRef = /*#__PURE__*/forwardRef(TextInput);
+
+// vendors
 
 /**
  * @typedef {object} Props
@@ -1370,30 +917,27 @@ var TextInputWithRef = /*#__PURE__*/forwardRef(TextInput);
  * @param {Props} props
  * @return {JSX.Element}
  */
-function EmojiPickerButton(_ref) {
-  var showPicker = _ref.showPicker,
-    toggleShowPicker = _ref.toggleShowPicker,
-    buttonElement = _ref.buttonElement,
-    buttonRef = _ref.buttonRef;
-  var localButtonRef = useRef(null);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showCustomButtonContent = _useState2[0],
-    setShowCustomButtonContent = _useState2[1];
-  useEffect(function () {
-    var _buttonRef$current$ch, _buttonRef$current, _buttonElement$childN, _buttonElement$childN2;
-    if (((_buttonRef$current$ch = buttonRef === null || buttonRef === void 0 || (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 || (_buttonRef$current = _buttonRef$current.childNodes) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.length) !== null && _buttonRef$current$ch !== void 0 ? _buttonRef$current$ch : 0) > 2) {
+function EmojiPickerButton({
+  showPicker,
+  toggleShowPicker,
+  buttonElement,
+  buttonRef
+}) {
+  const localButtonRef = useRef(null);
+  const [showCustomButtonContent, setShowCustomButtonContent] = useState(false);
+  useEffect(() => {
+    if ((buttonRef?.current?.childNodes?.length ?? 0) > 2) {
       localButtonRef.current.appendChild(buttonRef.current.childNodes[0]);
       setShowCustomButtonContent(true);
-    } else if (((_buttonElement$childN = buttonElement === null || buttonElement === void 0 || (_buttonElement$childN2 = buttonElement.childNodes) === null || _buttonElement$childN2 === void 0 ? void 0 : _buttonElement$childN2.length) !== null && _buttonElement$childN !== void 0 ? _buttonElement$childN : 0) > 2) {
-      localButtonRef.current.appendChild(buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.childNodes[0]);
+    } else if ((buttonElement?.childNodes?.length ?? 0) > 2) {
+      localButtonRef.current.appendChild(buttonElement?.childNodes[0]);
       setShowCustomButtonContent(true);
     }
-  }, [buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.childNodes]);
+  }, [buttonElement?.childNodes]);
   return /*#__PURE__*/React.createElement("button", {
     ref: localButtonRef,
     type: "button",
-    className: "react-input-emoji--button".concat(showPicker ? " react-input-emoji--button__show" : ""),
+    className: `react-input-emoji--button${showPicker ? " react-input-emoji--button__show" : ""}`,
     onClick: toggleShowPicker
   }, !showCustomButtonContent && /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3845,8 +3389,9 @@ function $e5534fc185f7111e$export$2e2bcd8739ae039(props) {
   });
 }
 
-var EMOJI_MART_DATA_URL = "https://cdn.jsdelivr.net/npm/@emoji-mart/data";
-var cacheI18n = {};
+// vendors
+const EMOJI_MART_DATA_URL = "https://cdn.jsdelivr.net/npm/@emoji-mart/data";
+const cacheI18n = {};
 
 /**
  * @typedef {object} Props
@@ -3862,55 +3407,38 @@ var cacheI18n = {};
  * @param {Props} props
  */
 function EmojiPicker(props) {
-  var theme = props.theme,
-    onSelectEmoji = props.onSelectEmoji,
-    disableRecent = props.disableRecent,
-    customEmojis = props.customEmojis,
-    language = props.language;
+  const {
+    theme,
+    onSelectEmoji,
+    disableRecent,
+    customEmojis,
+    language
+  } = props;
 
   /** @type {string[]} */
-  var categories = useMemo(function () {
+  const categories = useMemo(() => {
     /** @type {string[]} */
-    var categoryies = [];
+    let categoryies = [];
     if (!disableRecent) {
       categoryies.push("frequent");
     }
-    categoryies = [].concat(_toConsumableArray(categoryies), ["people", "nature", "foods", "activity", "places", "objects", "symbols", "flags"]);
+    categoryies = [...categoryies, "people", "nature", "foods", "activity", "places", "objects", "symbols", "flags"];
     return categoryies;
   }, [disableRecent]);
-  var _useState = useState(undefined),
-    _useState2 = _slicedToArray(_useState, 2),
-    i18n = _useState2[0],
-    setI18n = _useState2[1];
-  useEffect(function () {
-    var _ref2;
+  const [i18n, setI18n] = useState(undefined);
+  useEffect(() => {
     if (!language) {
-      var _ref;
       if (cacheI18n.en) {
         setI18n(cacheI18n.en);
         return;
       }
 
       // @ts-ignore
-      fetch("".concat(EMOJI_MART_DATA_URL, "/i18n/en.json")).then(function (_x) {
-        return (_ref = _ref || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(data) {
-          var translations;
-          return _regeneratorRuntime().wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
-              case 0:
-                _context.next = 2;
-                return data.json();
-              case 2:
-                translations = _context.sent;
-                setI18n(translations);
-                cacheI18n.en = translations;
-              case 5:
-              case "end":
-                return _context.stop();
-            }
-          }, _callee);
-        }))).apply(this, arguments);
-      })["catch"](function (error) {
+      fetch(`${EMOJI_MART_DATA_URL}/i18n/en.json`).then(async data => {
+        const translations = await data.json();
+        setI18n(translations);
+        cacheI18n.en = translations;
+      }).catch(error => {
         console.error("Failed to load translations:", error);
       });
       return;
@@ -3921,25 +3449,11 @@ function EmojiPicker(props) {
     }
 
     // @ts-ignore
-    fetch("".concat(EMOJI_MART_DATA_URL, "/i18n/").concat(language, ".json")).then(function (_x2) {
-      return (_ref2 = _ref2 || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(data) {
-        var translations;
-        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              _context2.next = 2;
-              return data.json();
-            case 2:
-              translations = _context2.sent;
-              setI18n(translations);
-              cacheI18n[language] = translations;
-            case 5:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2);
-      }))).apply(this, arguments);
-    })["catch"](function (error) {
+    fetch(`${EMOJI_MART_DATA_URL}/i18n/${language}.json`).then(async data => {
+      const translations = await data.json();
+      setI18n(translations);
+      cacheI18n[language] = translations;
+    }).catch(error => {
       console.error("Failed to load translations:", error);
     });
   }, [language]);
@@ -3975,21 +3489,20 @@ var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
  * @param {Props} props
  * @return {JSX.Element}
  */
-function EmojiPickerContainer(_ref) {
-  var showPicker = _ref.showPicker,
-    theme = _ref.theme,
-    handleSelectEmoji = _ref.handleSelectEmoji,
-    disableRecent = _ref.disableRecent,
-    customEmojis = _ref.customEmojis,
-    position = _ref.position,
-    language = _ref.language;
+function EmojiPickerContainer({
+  showPicker,
+  theme,
+  handleSelectEmoji,
+  disableRecent,
+  customEmojis,
+  position,
+  language
+}) {
   return /*#__PURE__*/React.createElement("div", {
     className: "react-emoji-picker--container"
   }, showPicker && /*#__PURE__*/React.createElement("div", {
     className: "react-emoji-picker--wrapper",
-    onClick: function onClick(evt) {
-      return evt.stopPropagation();
-    },
+    onClick: evt => evt.stopPropagation(),
     style: position === 'below' ? {
       top: '40px'
     } : {}
@@ -4004,7 +3517,8 @@ function EmojiPickerContainer(_ref) {
   }))));
 }
 
-var EMOJI_PICKER_CONTAINER_HEIGHT = 435;
+// @ts-check
+const EMOJI_PICKER_CONTAINER_HEIGHT = 435;
 
 /**
  * @typedef {import('../types/types').SanitizeFn} SanitizeFn
@@ -4030,38 +3544,36 @@ var EMOJI_PICKER_CONTAINER_HEIGHT = 435;
 
 // eslint-disable-next-line valid-jsdoc
 /** @type {React.FC<Props>} */
-var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
-  var theme = props.theme,
-    keepOpened = props.keepOpened,
-    disableRecent = props.disableRecent,
-    customEmojis = props.customEmojis,
-    addSanitizeFn = props.addSanitizeFn,
-    addPolluteFn = props.addPolluteFn,
-    appendContent = props.appendContent,
-    buttonElement = props.buttonElement,
-    buttonRef = props.buttonRef,
-    language = props.language;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showPicker = _useState2[0],
-    setShowPicker = _useState2[1];
+const EmojiPickerWrapper = props => {
+  const {
+    theme,
+    keepOpened,
+    disableRecent,
+    customEmojis,
+    addSanitizeFn,
+    addPolluteFn,
+    appendContent,
+    buttonElement,
+    buttonRef,
+    language
+  } = props;
+  const [showPicker, setShowPicker] = useState(false);
   /** @type {[HTMLDivElement | undefined, React.Dispatch<React.SetStateAction<HTMLDivElement | undefined>>]} */
-  var _useState3 = useState(),
-    _useState4 = _slicedToArray(_useState3, 2),
-    customButton = _useState4[0],
-    setCustomButton = _useState4[1];
+  const [customButton, setCustomButton] = useState();
   /** @type {['above' | 'below' | undefined, React.Dispatch<React.SetStateAction<'above' | 'below' | undefined>>]} */
-  var _useState5 = useState(),
-    _useState6 = _slicedToArray(_useState5, 2),
-    emojiPickerPosition = _useState6[0],
-    setEmojiPickerPosition = _useState6[1];
-  useEffect(function () {
+  const [emojiPickerPosition, setEmojiPickerPosition] = useState();
+  useEffect(() => {
+    if (showPicker) {
+      cacheCurrentRange();
+    }
+  }, [showPicker]);
+  useEffect(() => {
     addSanitizeFn(replaceAllTextEmojiToString);
   }, [addSanitizeFn]);
-  useEffect(function () {
+  useEffect(() => {
     addPolluteFn(replaceAllTextEmojis);
   }, [addPolluteFn]);
-  useEffect(function () {
+  useEffect(() => {
     /**
      *
      * @param {MouseEvent} event
@@ -4069,14 +3581,14 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
     function checkClickOutside(event) {
       /** @type {HTMLElement} */
       // @ts-ignore
-      var element = event.target;
+      const element = event.target;
       if (element.classList.contains("react-input-emoji--button") || element.classList.contains("react-input-emoji--button--icon")) {
         return;
       }
       setShowPicker(false);
     }
     document.addEventListener("click", checkClickOutside);
-    return function () {
+    return () => {
       document.removeEventListener("click", checkClickOutside);
     };
   }, []);
@@ -4089,9 +3601,7 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
     event.stopPropagation();
     event.preventDefault();
     setEmojiPickerPosition(calcTopPosition(event));
-    setShowPicker(function (currentShowPicker) {
-      return !currentShowPicker;
-    });
+    setShowPicker(currentShowPicker => !currentShowPicker);
   }
 
   /**
@@ -4100,9 +3610,9 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
    * @return {'above' | 'below'}
    */
   function calcTopPosition(event) {
-    var btn = event.currentTarget;
-    var btnRect = btn.getBoundingClientRect();
-    var popoverHeight = EMOJI_PICKER_CONTAINER_HEIGHT;
+    const btn = event.currentTarget;
+    const btnRect = btn.getBoundingClientRect();
+    const popoverHeight = EMOJI_PICKER_CONTAINER_HEIGHT;
 
     // Decide to display above or below based on available space
     if (btnRect.top >= popoverHeight) {
@@ -4122,17 +3632,14 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
   function handleSelectEmoji(emoji) {
     appendContent(getImageEmoji(emoji));
     if (!keepOpened) {
-      setShowPicker(function (currentShowPicker) {
-        return !currentShowPicker;
-      });
+      setShowPicker(currentShowPicker => !currentShowPicker);
     }
   }
-  useEffect(function () {
-    var _buttonRef$current;
-    if (buttonRef !== null && buttonRef !== void 0 && (_buttonRef$current = buttonRef.current) !== null && _buttonRef$current !== void 0 && _buttonRef$current.style) {
+  useEffect(() => {
+    if (buttonRef?.current?.style) {
       buttonRef.current.style.position = "relative";
       setCustomButton(buttonRef.current);
-    } else if (buttonElement !== null && buttonElement !== void 0 && buttonElement.style) {
+    } else if (buttonElement?.style) {
       buttonElement.style.position = "relative";
       setCustomButton(buttonElement);
     }
@@ -4171,16 +3678,16 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
  * @return {string | null}
  */
 function getTextFromAtToCaret() {
-  var range = getRangeFromAtToCaret();
+  const range = getRangeFromAtToCaret();
   if (!range) return null;
-  var text = range.text.substring(range.begin, range.end);
+  const text = range.text.substring(range.begin, range.end);
   return text || null;
 }
 
 // eslint-disable-next-line valid-jsdoc
 /** */
 function deleteTextFromAtToCaret() {
-  var range = getRangeFromAtToCaret();
+  const range = getRangeFromAtToCaret();
   if (!range) return;
 
   // @ts-ignore
@@ -4192,22 +3699,24 @@ function deleteTextFromAtToCaret() {
  * @return {{begin: number, end: number, text: string, element: Node} | null}
  */
 function getRangeFromAtToCaret() {
-  var elementWithFocus = getElementWithFocus();
+  const elementWithFocus = getElementWithFocus();
   if (!elementWithFocus) {
     return null;
   }
-  var element = elementWithFocus.element,
-    caretOffset = elementWithFocus.caretOffset;
-  var text = element.textContent;
-  var lastAt = text.lastIndexOf("@");
+  const {
+    element,
+    caretOffset
+  } = elementWithFocus;
+  const text = element.textContent;
+  const lastAt = text.lastIndexOf("@");
   if (lastAt === -1 || lastAt >= caretOffset || lastAt !== 0 && text[lastAt - 1] !== " ") {
     return null;
   }
   return {
     begin: lastAt,
     end: caretOffset,
-    text: text,
-    element: element
+    text,
+    element
   };
 }
 
@@ -4216,14 +3725,14 @@ function getRangeFromAtToCaret() {
  * @return {{element: Node, caretOffset: number}}
  */
 function getElementWithFocus() {
-  var element = getSelectionStart();
+  const element = getSelectionStart();
   if (element === null) {
     return null;
   }
-  var caretOffset = 0;
+  let caretOffset = 0;
   if (typeof window.getSelection != "undefined") {
-    var range = window.getSelection().getRangeAt(0);
-    var preCaretRange = range.cloneRange();
+    const range = window.getSelection().getRangeAt(0);
+    const preCaretRange = range.cloneRange();
     preCaretRange.selectNodeContents(element);
     preCaretRange.setEnd(range.endContainer, range.endOffset);
     caretOffset = preCaretRange.toString().length;
@@ -4233,16 +3742,16 @@ function getElementWithFocus() {
   // @ts-ignore
   document.selection.type != "Control") {
     // @ts-ignore
-    var textRange = document.selection.createRange();
+    const textRange = document.selection.createRange();
     // @ts-ignore
-    var preCaretTextRange = document.body.createTextRange();
+    const preCaretTextRange = document.body.createTextRange();
     preCaretTextRange.moveToElementText(element);
     preCaretTextRange.setEndPoint("EndToEnd", textRange);
     caretOffset = preCaretTextRange.text.length;
   }
   return {
-    element: element,
-    caretOffset: caretOffset
+    element,
+    caretOffset
   };
 }
 
@@ -4251,10 +3760,12 @@ function getElementWithFocus() {
  * @return {Node | null}
  */
 function getSelectionStart() {
-  var node = document.getSelection().anchorNode;
-  return (node === null || node === void 0 ? void 0 : node.nodeType) == 3 ? node : null;
+  const node = document.getSelection().anchorNode;
+  return node?.nodeType == 3 ? node : null;
 }
 
+// @ts-check
+
 /**
  * @typedef {import('../types/types').MentionUser} MentionUser
  */
@@ -4266,98 +3777,57 @@ function getSelectionStart() {
  * @returns {{mentionSearchText: string | null, mentionUsers: MentionUser[], onKeyUp: (event: React.KeyboardEvent) => void, onFocus: () => void, onSelectUser: () => void, loading: boolean}}
  */
 function useMention(searchMention) {
-  var _ref2;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    loading = _useState2[0],
-    setLoading = _useState2[1];
+  const [loading, setLoading] = useState(false);
 
   /** @type {[MentionUser[], React.Dispatch<React.SetStateAction<MentionUser[]>>]} */
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    mentionUsers = _useState4[0],
-    setMentionUsers = _useState4[1];
+  const [mentionUsers, setMentionUsers] = useState([]);
 
   /** @type {[string | null, React.Dispatch<React.SetStateAction<string | null>>]} */
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    mentionSearchText = _useState6[0],
-    setMentionSearchText = _useState6[1];
-  var onSelectUser = useCallback(function () {
+  const [mentionSearchText, setMentionSearchText] = useState(null);
+  const onSelectUser = useCallback(() => {
     deleteTextFromAtToCaret();
     setMentionUsers([]);
   }, []);
 
   /** */
-  var checkMentionText = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-    var metionText, users;
-    return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          metionText = getTextFromAtToCaret();
-          setMentionSearchText(metionText);
-          if (!(metionText === null)) {
-            _context.next = 6;
-            break;
-          }
-          setMentionUsers([]);
-          _context.next = 12;
-          break;
-        case 6:
-          setLoading(true);
-          _context.next = 9;
-          return searchMention(metionText);
-        case 9:
-          users = _context.sent;
-          setLoading(false);
-          setMentionUsers(users);
-        case 12:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  })), [searchMention]);
+  const checkMentionText = useCallback(async () => {
+    const metionText = getTextFromAtToCaret();
+    setMentionSearchText(metionText);
+    if (metionText === null) {
+      setMentionUsers([]);
+    } else {
+      setLoading(true);
+      const users = await searchMention(metionText);
+      setLoading(false);
+      setMentionUsers(users);
+    }
+  }, [searchMention]);
 
   /** @type {(event: React.KeyboardEvent) => void} */
-  var onKeyUp = useCallback(function (_x) {
-    return (_ref2 = _ref2 || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(event) {
-      var _getElementWithFocus;
-      var elementWithFocus;
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            if (!(typeof searchMention !== "function")) {
-              _context2.next = 2;
-              break;
-            }
-            return _context2.abrupt("return");
-          case 2:
-            if (event.key === "Backspace" && (_getElementWithFocus = getElementWithFocus()) !== null && _getElementWithFocus !== void 0 && _getElementWithFocus.element.parentElement.hasAttribute("data-mention-id")) {
-              elementWithFocus = getElementWithFocus();
-              elementWithFocus.element.parentElement.remove();
-            } else if (!["ArrowUp", "ArrowDown", "Esc", "Escape"].includes(event.key)) {
-              checkMentionText();
-            }
-          case 3:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2);
-    }))).apply(this, arguments);
+  const onKeyUp = useCallback(async event => {
+    if (typeof searchMention !== "function") return;
+    if (event.key === "Backspace" && getElementWithFocus()?.element.parentElement.hasAttribute("data-mention-id")) {
+      const elementWithFocus = getElementWithFocus();
+      elementWithFocus.element.parentElement.remove();
+    } else if (!["ArrowUp", "ArrowDown", "Esc", "Escape"].includes(event.key)) {
+      checkMentionText();
+    }
   }, [checkMentionText, searchMention]);
-  var onFocus = useCallback(function () {
+  const onFocus = useCallback(() => {
     checkMentionText();
   }, [checkMentionText]);
   return {
-    mentionSearchText: mentionSearchText,
-    mentionUsers: mentionUsers,
-    onKeyUp: onKeyUp,
-    onFocus: onFocus,
-    onSelectUser: onSelectUser,
-    loading: loading
+    mentionSearchText,
+    mentionUsers,
+    onKeyUp,
+    onFocus,
+    onSelectUser,
+    loading
   };
 }
 
+// @ts-check
+
 /**
  * @typedef {import('../types/types').MentionUser} MentionUser
  */
@@ -4380,36 +3850,32 @@ function useMention(searchMention) {
 
 // eslint-disable-next-line valid-jsdoc
 /** @type {React.ForwardRefRenderFunction<Ref, Props>} */
-var MentionUserList = function MentionUserList(_ref, ref) {
-  var users = _ref.users,
-    mentionSearchText = _ref.mentionSearchText,
-    onSelect = _ref.onSelect,
-    addEventListener = _ref.addEventListener;
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedUser = _useState2[0],
-    setSelectedUser = _useState2[1];
-  useImperativeHandle(ref, function () {
-    return {
-      prevUser: function prevUser() {
-        setSelectedUser(function (currentSelectedUser) {
-          if (currentSelectedUser === 0) {
-            return 0;
-          }
-          return currentSelectedUser - 1;
-        });
-      },
-      nextUser: function nextUser() {
-        setSelectedUser(function (currentSelectedUser) {
-          if (currentSelectedUser === users.length - 1) {
-            return users.length - 1;
-          }
-          return currentSelectedUser + 1;
-        });
-      }
-    };
-  });
-  useEffect(function () {
+const MentionUserList = ({
+  users,
+  mentionSearchText,
+  onSelect,
+  addEventListener
+}, ref) => {
+  const [selectedUser, setSelectedUser] = useState(0);
+  useImperativeHandle(ref, () => ({
+    prevUser: () => {
+      setSelectedUser(currentSelectedUser => {
+        if (currentSelectedUser === 0) {
+          return 0;
+        }
+        return currentSelectedUser - 1;
+      });
+    },
+    nextUser: () => {
+      setSelectedUser(currentSelectedUser => {
+        if (currentSelectedUser === users.length - 1) {
+          return users.length - 1;
+        }
+        return currentSelectedUser + 1;
+      });
+    }
+  }));
+  useEffect(() => {
     setSelectedUser(0);
   }, [users]);
 
@@ -4420,20 +3886,20 @@ var MentionUserList = function MentionUserList(_ref, ref) {
    * @return {string}
    */
   function getMentionSelectedNameEl(selectedText, rest) {
-    return "<span class=\"react-input-emoji--mention--item--name__selected\" data-testid=\"metion-selected-word\">".concat(selectedText, "</span>").concat(rest);
+    return `<span class="react-input-emoji--mention--item--name__selected" data-testid="metion-selected-word">${selectedText}</span>${rest}`;
   }
 
   /** @type {(MentionUser & {nameHtml: string})[]} */
-  var usersFiltered = useMemo(function () {
-    var searchText = mentionSearchText ? mentionSearchText.substring(1).toLocaleLowerCase() : "";
-    return users.map(function (user) {
-      var nameHtml = user.name;
+  const usersFiltered = useMemo(() => {
+    const searchText = mentionSearchText ? mentionSearchText.substring(1).toLocaleLowerCase() : "";
+    return users.map(user => {
+      let nameHtml = user.name;
       if (mentionSearchText && mentionSearchText.length > 1) {
         if (user.name.toLowerCase().startsWith(searchText)) {
           nameHtml = getMentionSelectedNameEl(user.name.substring(0, searchText.length), user.name.substring(searchText.length));
         } else {
-          var names = user.name.split(" ");
-          nameHtml = names.map(function (name) {
+          const names = user.name.split(" ");
+          nameHtml = names.map(name => {
             if (name.toLocaleLowerCase().startsWith(searchText)) {
               return getMentionSelectedNameEl(name.substring(0, searchText.length), name.substring(searchText.length));
             }
@@ -4441,9 +3907,10 @@ var MentionUserList = function MentionUserList(_ref, ref) {
           }).join(" ");
         }
       }
-      return _objectSpread2(_objectSpread2({}, user), {}, {
-        nameHtml: nameHtml
-      });
+      return {
+        ...user,
+        nameHtml
+      };
     });
   }, [mentionSearchText, users]);
 
@@ -4454,47 +3921,45 @@ var MentionUserList = function MentionUserList(_ref, ref) {
    * @returns {(event: React.MouseEvent) => void} event
    */
   function handleClick(user) {
-    return function (event) {
+    return event => {
       event.stopPropagation();
       event.preventDefault();
       onSelect(user);
     };
   }
-  useEffect(function () {
-    var unsubscribe = addEventListener("enter", function (event) {
+  useEffect(() => {
+    const unsubscribe = addEventListener("enter", event => {
       event.stopPropagation();
       event.preventDefault();
       onSelect(usersFiltered[selectedUser]);
     });
-    return function () {
+    return () => {
       unsubscribe();
     };
   }, [addEventListener, onSelect, selectedUser, usersFiltered]);
   return /*#__PURE__*/React.createElement("ul", {
     className: "react-input-emoji--mention--list",
     "data-testid": "mention-user-list"
-  }, usersFiltered.map(function (user, index) {
-    return /*#__PURE__*/React.createElement("li", {
-      key: user.id
-    }, /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      onClick: handleClick(user),
-      className: "react-input-emoji--mention--item".concat(selectedUser === index ? " react-input-emoji--mention--item__selected" : ""),
-      onMouseOver: function onMouseOver() {
-        return setSelectedUser(index);
-      }
-    }, /*#__PURE__*/React.createElement("img", {
-      className: "react-input-emoji--mention--item--img",
-      src: user.image
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "react-input-emoji--mention--item--name",
-      dangerouslySetInnerHTML: {
-        __html: user.nameHtml
-      }
-    })));
-  }));
+  }, usersFiltered.map((user, index) => /*#__PURE__*/React.createElement("li", {
+    key: user.id
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: handleClick(user),
+    className: `react-input-emoji--mention--item${selectedUser === index ? " react-input-emoji--mention--item__selected" : ""}`,
+    onMouseOver: () => setSelectedUser(index)
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "react-input-emoji--mention--item--img",
+    src: user.image
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "react-input-emoji--mention--item--name",
+    dangerouslySetInnerHTML: {
+      __html: user.nameHtml
+    }
+  })))));
 };
-var MentionUserListWithRef = /*#__PURE__*/forwardRef(MentionUserList);
+const MentionUserListWithRef = /*#__PURE__*/forwardRef(MentionUserList);
+
+// @ts-check
 
 /**
  * @typedef {import('../types/types').MentionUser} MetionUser
@@ -4518,55 +3983,54 @@ var MentionUserListWithRef = /*#__PURE__*/forwardRef(MentionUserList);
 
 // eslint-disable-next-line valid-jsdoc
 /** @type {React.FC<Props>} */
-var MentionWrapper = function MentionWrapper(_ref) {
-  var searchMention = _ref.searchMention,
-    addEventListener = _ref.addEventListener,
-    appendContent = _ref.appendContent,
-    addSanitizeFn = _ref.addSanitizeFn;
+const MentionWrapper = ({
+  searchMention,
+  addEventListener,
+  appendContent,
+  addSanitizeFn
+}) => {
   /** @type {React.MutableRefObject<import('./mention-user-list').Ref | null>} */
-  var metionUserListRef = useRef(null);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showUserList = _useState2[0],
-    setShowUserList = _useState2[1];
-  var _useMention = useMention(searchMention),
-    mentionSearchText = _useMention.mentionSearchText,
-    mentionUsers = _useMention.mentionUsers,
-    loading = _useMention.loading,
-    onKeyUp = _useMention.onKeyUp,
-    onFocus = _useMention.onFocus,
-    onSelectUser = _useMention.onSelectUser;
-  useEffect(function () {
-    addSanitizeFn(function (html) {
-      var container = document.createElement("div");
+  const metionUserListRef = useRef(null);
+  const [showUserList, setShowUserList] = useState(false);
+  const {
+    mentionSearchText,
+    mentionUsers,
+    loading,
+    onKeyUp,
+    onFocus,
+    onSelectUser
+  } = useMention(searchMention);
+  useEffect(() => {
+    addSanitizeFn(html => {
+      const container = document.createElement("div");
       container.innerHTML = html;
-      var mentionsEl = Array.prototype.slice.call(container.querySelectorAll(".react-input-emoji--mention--text"));
-      mentionsEl.forEach(function (mentionEl) {
-        container.innerHTML = container.innerHTML.replace(mentionEl.outerHTML, "@[".concat(mentionEl.dataset.mentionName, "](userId:").concat(mentionEl.dataset.mentionId, ")"));
+      const mentionsEl = Array.prototype.slice.call(container.querySelectorAll(".react-input-emoji--mention--text"));
+      mentionsEl.forEach(mentionEl => {
+        container.innerHTML = container.innerHTML.replace(mentionEl.outerHTML, `@[${mentionEl.dataset.mentionName}](userId:${mentionEl.dataset.mentionId})`);
       });
       return container.innerHTML;
     });
   }, [addSanitizeFn]);
-  useEffect(function () {
+  useEffect(() => {
     setShowUserList(mentionUsers.length > 0);
   }, [mentionUsers]);
-  useEffect(function () {
+  useEffect(() => {
     /** */
     function checkClickOutside() {
       setShowUserList(false);
     }
     document.addEventListener("click", checkClickOutside);
-    return function () {
+    return () => {
       document.removeEventListener("click", checkClickOutside);
     };
   }, []);
-  useEffect(function () {
-    var unsubscribe = addEventListener("keyUp", onKeyUp);
-    return function () {
+  useEffect(() => {
+    const unsubscribe = addEventListener("keyUp", onKeyUp);
+    return () => {
       unsubscribe();
     };
   }, [addEventListener, onKeyUp]);
-  useEffect(function () {
+  useEffect(() => {
     /**
      *
      * @param {React.KeyboardEvent} event
@@ -4579,30 +4043,30 @@ var MentionWrapper = function MentionWrapper(_ref) {
           break;
       }
     }
-    var unsubscribe = addEventListener("keyDown", handleKeyDown);
-    return function () {
+    const unsubscribe = addEventListener("keyDown", handleKeyDown);
+    return () => {
       unsubscribe();
     };
   }, [addEventListener]);
-  useEffect(function () {
-    var unsubscribe = addEventListener("focus", onFocus);
-    return function () {
+  useEffect(() => {
+    const unsubscribe = addEventListener("focus", onFocus);
+    return () => {
       unsubscribe();
     };
   }, [addEventListener, onFocus]);
-  useEffect(function () {
+  useEffect(() => {
     if (showUserList) {
-      var unsubscribeArrowUp = addEventListener("arrowUp", function (event) {
+      const unsubscribeArrowUp = addEventListener("arrowUp", event => {
         event.stopPropagation();
         event.preventDefault();
         metionUserListRef.current.prevUser();
       });
-      var unsubscribeArrowDown = addEventListener("arrowDown", function (event) {
+      const unsubscribeArrowDown = addEventListener("arrowDown", event => {
         event.stopPropagation();
         event.preventDefault();
         metionUserListRef.current.nextUser();
       });
-      return function () {
+      return () => {
         unsubscribeArrowUp();
         unsubscribeArrowDown();
       };
@@ -4615,7 +4079,7 @@ var MentionWrapper = function MentionWrapper(_ref) {
    */
   function handleSelect(user) {
     onSelectUser();
-    appendContent("<span class=\"react-input-emoji--mention--text\" data-mention-id=\"".concat(user.id, "\" data-mention-name=\"").concat(user.name, "\">@").concat(user.name, "</span> "));
+    appendContent(`<span class="react-input-emoji--mention--text" data-mention-id="${user.id}" data-mention-name="${user.name}">@${user.name}</span> `);
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, loading ? /*#__PURE__*/React.createElement("div", {
     className: "react-input-emoji--mention--container"
@@ -4625,9 +4089,7 @@ var MentionWrapper = function MentionWrapper(_ref) {
     className: "react-input-emoji--mention--loading--spinner"
   }, "Loading..."))) : showUserList && /*#__PURE__*/React.createElement("div", {
     className: "react-input-emoji--mention--container",
-    onClick: function onClick(evt) {
-      return evt.stopPropagation();
-    }
+    onClick: evt => evt.stopPropagation()
   }, /*#__PURE__*/React.createElement(MentionUserListWithRef, {
     ref: metionUserListRef,
     mentionSearchText: mentionSearchText,
@@ -4646,20 +4108,16 @@ var MentionWrapper = function MentionWrapper(_ref) {
  */
 function createObserver() {
   /** @type {import('../types/types').Listerner<T>[]} */
-  var listeners = [];
+  let listeners = [];
   return {
-    subscribe: function subscribe(listener) {
+    subscribe: listener => {
       listeners.push(listener);
-      return function () {
-        listeners = listeners.filter(function (l) {
-          return l !== listener;
-        });
+      return () => {
+        listeners = listeners.filter(l => l !== listener);
       };
     },
-    publish: function publish(event) {
-      listeners.forEach(function (listener) {
-        return listener(event);
-      });
+    publish: event => {
+      listeners.forEach(listener => listener(event));
     },
     get currentListerners() {
       return listeners;
@@ -4677,28 +4135,26 @@ function createObserver() {
 /** */
 function useEventListeners() {
   /** @type {TextInputListeners} */
-  var listeners = useMemo(function () {
-    return {
-      keyDown: createObserver(),
-      keyUp: createObserver(),
-      arrowUp: createObserver(),
-      arrowDown: createObserver(),
-      enter: createObserver(),
-      focus: createObserver(),
-      blur: createObserver()
-    };
-  }, []);
+  const listeners = useMemo(() => ({
+    keyDown: createObserver(),
+    keyUp: createObserver(),
+    arrowUp: createObserver(),
+    arrowDown: createObserver(),
+    enter: createObserver(),
+    focus: createObserver(),
+    blur: createObserver()
+  }), []);
 
   /**
    * @template {keyof TextInputListeners} T, K
    * @type {(event: keyof TextInputListeners, fn: import('../types/types').Listerner<any>) => () => void}
    */
-  var addEventListener = useCallback(function (event, fn) {
+  const addEventListener = useCallback((event, fn) => {
     return listeners[event].subscribe(fn);
   }, [listeners]);
   return {
-    addEventListener: addEventListener,
-    listeners: listeners
+    addEventListener,
+    listeners
   };
 }
 
@@ -4712,23 +4168,23 @@ function useEventListeners() {
 /** */
 function usePollute() {
   /** @type {React.MutableRefObject<PolluteFn[]>} */
-  var polluteFnsRef = useRef([]);
+  const polluteFnsRef = useRef([]);
 
   /** @type {(fn: PolluteFn) => void} */
-  var addPolluteFn = useCallback(function (fn) {
+  const addPolluteFn = useCallback(fn => {
     polluteFnsRef.current.push(fn);
   }, []);
 
   /** @type {(html: string) => string} */
-  var pollute = useCallback(function (text) {
-    var result = polluteFnsRef.current.reduce(function (acc, fn) {
+  const pollute = useCallback(text => {
+    const result = polluteFnsRef.current.reduce((acc, fn) => {
       return fn(acc);
     }, text);
     return result;
   }, []);
   return {
-    addPolluteFn: addPolluteFn,
-    pollute: pollute
+    addPolluteFn,
+    pollute
   };
 }
 
@@ -4784,72 +4240,77 @@ function usePollute() {
  * @return {JSX.Element}
  */
 function InputEmoji(props, ref) {
-  var onChange = props.onChange,
-    onEnter = props.onEnter,
-    onResize = props.onResize,
-    onClick = props.onClick,
-    onFocus = props.onFocus,
-    onBlur = props.onBlur,
-    onKeyDown = props.onKeyDown,
-    theme = props.theme,
-    cleanOnEnter = props.cleanOnEnter,
-    placeholder = props.placeholder,
-    maxLength = props.maxLength,
-    keepOpened = props.keepOpened,
-    inputClass = props.inputClass,
-    disableRecent = props.disableRecent,
-    tabIndex = props.tabIndex,
-    value = props.value,
-    customEmojis = props.customEmojis,
-    language = props.language,
-    searchMention = props.searchMention,
-    buttonElement = props.buttonElement,
-    buttonRef = props.buttonRef,
-    shouldReturn = props.shouldReturn,
-    shouldConvertEmojiToImage = props.shouldConvertEmojiToImage,
-    borderRadius = props.borderRadius,
-    borderColor = props.borderColor,
-    fontSize = props.fontSize,
-    fontFamily = props.fontFamily,
-    background = props.background,
-    placeholderColor = props.placeholderColor,
-    color = props.color;
+  const {
+    onChange,
+    onEnter,
+    onResize,
+    onClick,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    theme,
+    cleanOnEnter,
+    placeholder,
+    maxLength,
+    keepOpened,
+    inputClass,
+    disableRecent,
+    tabIndex,
+    value,
+    customEmojis,
+    language,
+    searchMention,
+    buttonElement,
+    buttonRef,
+    shouldReturn,
+    shouldConvertEmojiToImage,
+    // style
+    borderRadius,
+    borderColor,
+    fontSize,
+    fontFamily,
+    background,
+    placeholderColor,
+    color
+  } = props;
 
   /** @type {React.MutableRefObject<import('./text-input').Ref | null>} */
-  var textInputRef = useRef(null);
-  var _useEventListeners = useEventListeners(),
-    addEventListener = _useEventListeners.addEventListener,
-    listeners = _useEventListeners.listeners;
-  var _useSanitize = useSanitize(shouldReturn, shouldConvertEmojiToImage),
-    addSanitizeFn = _useSanitize.addSanitizeFn,
-    sanitize = _useSanitize.sanitize,
-    sanitizedTextRef = _useSanitize.sanitizedTextRef;
-  var _usePollute = usePollute(),
-    addPolluteFn = _usePollute.addPolluteFn,
-    pollute = _usePollute.pollute;
-  var updateHTML = useCallback(function () {
-    var nextValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  const textInputRef = useRef(null);
+  const {
+    addEventListener,
+    listeners
+  } = useEventListeners();
+  const {
+    addSanitizeFn,
+    sanitize,
+    sanitizedTextRef
+  } = useSanitize(shouldReturn, shouldConvertEmojiToImage);
+  const {
+    addPolluteFn,
+    pollute
+  } = usePollute();
+  const updateHTML = useCallback((nextValue = "") => {
     if (textInputRef.current === null) return;
     textInputRef.current.html = replaceAllTextEmojis(nextValue);
     sanitizedTextRef.current = nextValue;
   }, [sanitizedTextRef]);
-  var setValue = useCallback(
+  const setValue = useCallback(
   /**
    * 
    * @param {string} value
    */
-  function (value) {
+  value => {
     updateHTML(value);
   }, [updateHTML]);
-  var emitChange = useEmit(textInputRef, onResize, onChange);
+  const emitChange = useEmit(textInputRef, onResize, onChange);
   useExpose({
-    ref: ref,
-    setValue: setValue,
-    textInputRef: textInputRef,
-    emitChange: emitChange,
-    shouldConvertEmojiToImage: shouldConvertEmojiToImage
+    ref,
+    setValue,
+    textInputRef,
+    emitChange,
+    shouldConvertEmojiToImage
   });
-  useEffect(function () {
+  useEffect(() => {
     if (sanitizedTextRef.current !== value) {
       setValue(value);
     }
@@ -4859,7 +4320,7 @@ function InputEmoji(props, ref) {
   //   updateHTML();
   // }, [updateHTML]);
 
-  useEffect(function () {
+  useEffect(() => {
     /**
      * Handle keydown event
      * @param {React.KeyboardEvent} event
@@ -4871,7 +4332,7 @@ function InputEmoji(props, ref) {
       }
       if (event.key === "Enter" && textInputRef.current) {
         event.preventDefault();
-        var text = sanitize(textInputRef.current.html);
+        const text = sanitize(textInputRef.current.html);
         emitChange(sanitizedTextRef.current);
         if (typeof onEnter === "function" && listeners.enter.currentListerners.length === 0) {
           onEnter(text);
@@ -4889,12 +4350,12 @@ function InputEmoji(props, ref) {
       }
       return true;
     }
-    var unsubscribe = addEventListener("keyDown", handleKeydown);
-    return function () {
+    const unsubscribe = addEventListener("keyDown", handleKeydown);
+    return () => {
       unsubscribe();
     };
   }, [addEventListener, cleanOnEnter, emitChange, listeners.enter.currentListerners.length, maxLength, onEnter, onKeyDown, sanitize, sanitizedTextRef, updateHTML]);
-  useEffect(function () {
+  useEffect(() => {
     /** */
     function handleFocus() {
       if (typeof onClick === "function") {
@@ -4904,20 +4365,20 @@ function InputEmoji(props, ref) {
         onFocus();
       }
     }
-    var unsubscribe = addEventListener("focus", handleFocus);
-    return function () {
+    const unsubscribe = addEventListener("focus", handleFocus);
+    return () => {
       unsubscribe();
     };
   }, [addEventListener, onClick, onFocus]);
-  useEffect(function () {
+  useEffect(() => {
     /** */
     function handleBlur() {
       if (typeof onBlur === "function") {
         onBlur();
       }
     }
-    var unsubscribe = addEventListener("blur", handleBlur);
-    return function () {
+    const unsubscribe = addEventListener("blur", handleBlur);
+    return () => {
       unsubscribe();
     };
   }, [addEventListener, onBlur]);
@@ -4952,7 +4413,7 @@ function InputEmoji(props, ref) {
    */
   function handlePaste(event) {
     event.preventDefault();
-    var content;
+    let content;
     if (event.clipboardData) {
       content = event.clipboardData.getData("text/plain");
       content = pollute(content);
@@ -4980,13 +4441,13 @@ function InputEmoji(props, ref) {
     onEnter: listeners.enter.publish,
     placeholder: placeholder,
     style: {
-      borderRadius: borderRadius,
-      borderColor: borderColor,
-      fontSize: fontSize,
-      fontFamily: fontFamily,
-      background: background,
-      placeholderColor: placeholderColor,
-      color: color
+      borderRadius,
+      borderColor,
+      fontSize,
+      fontFamily,
+      background,
+      placeholderColor,
+      color
     },
     tabIndex: tabIndex,
     className: inputClass,
@@ -5004,7 +4465,7 @@ function InputEmoji(props, ref) {
     language: language
   }));
 }
-var InputEmojiWithRef = /*#__PURE__*/forwardRef(InputEmoji);
+const InputEmojiWithRef = /*#__PURE__*/forwardRef(InputEmoji);
 InputEmojiWithRef.defaultProps = {
   theme: /** @type {const} */"auto",
   height: 30,