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

Sign up to get free protection for your applications and to get access to all the features.
package/dist/index.es.js CHANGED
@@ -30,479 +30,10 @@ function styleInject(css, ref) {
30
30
  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";
31
31
  styleInject(css_248z);
32
32
 
33
- function _iterableToArrayLimit(r, l) {
34
- var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
35
- if (null != t) {
36
- var e,
37
- n,
38
- i,
39
- u,
40
- a = [],
41
- f = !0,
42
- o = !1;
43
- try {
44
- if (i = (t = t.call(r)).next, 0 === l) {
45
- if (Object(t) !== t) return;
46
- f = !1;
47
- } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
48
- } catch (r) {
49
- o = !0, n = r;
50
- } finally {
51
- try {
52
- if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
53
- } finally {
54
- if (o) throw n;
55
- }
56
- }
57
- return a;
58
- }
59
- }
60
- function ownKeys(e, r) {
61
- var t = Object.keys(e);
62
- if (Object.getOwnPropertySymbols) {
63
- var o = Object.getOwnPropertySymbols(e);
64
- r && (o = o.filter(function (r) {
65
- return Object.getOwnPropertyDescriptor(e, r).enumerable;
66
- })), t.push.apply(t, o);
67
- }
68
- return t;
69
- }
70
- function _objectSpread2(e) {
71
- for (var r = 1; r < arguments.length; r++) {
72
- var t = null != arguments[r] ? arguments[r] : {};
73
- r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
74
- _defineProperty(e, r, t[r]);
75
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
76
- Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
77
- });
78
- }
79
- return e;
80
- }
81
- function _regeneratorRuntime() {
82
- _regeneratorRuntime = function () {
83
- return e;
84
- };
85
- var t,
86
- e = {},
87
- r = Object.prototype,
88
- n = r.hasOwnProperty,
89
- o = Object.defineProperty || function (t, e, r) {
90
- t[e] = r.value;
91
- },
92
- i = "function" == typeof Symbol ? Symbol : {},
93
- a = i.iterator || "@@iterator",
94
- c = i.asyncIterator || "@@asyncIterator",
95
- u = i.toStringTag || "@@toStringTag";
96
- function define(t, e, r) {
97
- return Object.defineProperty(t, e, {
98
- value: r,
99
- enumerable: !0,
100
- configurable: !0,
101
- writable: !0
102
- }), t[e];
103
- }
104
- try {
105
- define({}, "");
106
- } catch (t) {
107
- define = function (t, e, r) {
108
- return t[e] = r;
109
- };
110
- }
111
- function wrap(t, e, r, n) {
112
- var i = e && e.prototype instanceof Generator ? e : Generator,
113
- a = Object.create(i.prototype),
114
- c = new Context(n || []);
115
- return o(a, "_invoke", {
116
- value: makeInvokeMethod(t, r, c)
117
- }), a;
118
- }
119
- function tryCatch(t, e, r) {
120
- try {
121
- return {
122
- type: "normal",
123
- arg: t.call(e, r)
124
- };
125
- } catch (t) {
126
- return {
127
- type: "throw",
128
- arg: t
129
- };
130
- }
131
- }
132
- e.wrap = wrap;
133
- var h = "suspendedStart",
134
- l = "suspendedYield",
135
- f = "executing",
136
- s = "completed",
137
- y = {};
138
- function Generator() {}
139
- function GeneratorFunction() {}
140
- function GeneratorFunctionPrototype() {}
141
- var p = {};
142
- define(p, a, function () {
143
- return this;
144
- });
145
- var d = Object.getPrototypeOf,
146
- v = d && d(d(values([])));
147
- v && v !== r && n.call(v, a) && (p = v);
148
- var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
149
- function defineIteratorMethods(t) {
150
- ["next", "throw", "return"].forEach(function (e) {
151
- define(t, e, function (t) {
152
- return this._invoke(e, t);
153
- });
154
- });
155
- }
156
- function AsyncIterator(t, e) {
157
- function invoke(r, o, i, a) {
158
- var c = tryCatch(t[r], t, o);
159
- if ("throw" !== c.type) {
160
- var u = c.arg,
161
- h = u.value;
162
- return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
163
- invoke("next", t, i, a);
164
- }, function (t) {
165
- invoke("throw", t, i, a);
166
- }) : e.resolve(h).then(function (t) {
167
- u.value = t, i(u);
168
- }, function (t) {
169
- return invoke("throw", t, i, a);
170
- });
171
- }
172
- a(c.arg);
173
- }
174
- var r;
175
- o(this, "_invoke", {
176
- value: function (t, n) {
177
- function callInvokeWithMethodAndArg() {
178
- return new e(function (e, r) {
179
- invoke(t, n, e, r);
180
- });
181
- }
182
- return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
183
- }
184
- });
185
- }
186
- function makeInvokeMethod(e, r, n) {
187
- var o = h;
188
- return function (i, a) {
189
- if (o === f) throw new Error("Generator is already running");
190
- if (o === s) {
191
- if ("throw" === i) throw a;
192
- return {
193
- value: t,
194
- done: !0
195
- };
196
- }
197
- for (n.method = i, n.arg = a;;) {
198
- var c = n.delegate;
199
- if (c) {
200
- var u = maybeInvokeDelegate(c, n);
201
- if (u) {
202
- if (u === y) continue;
203
- return u;
204
- }
205
- }
206
- if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
207
- if (o === h) throw o = s, n.arg;
208
- n.dispatchException(n.arg);
209
- } else "return" === n.method && n.abrupt("return", n.arg);
210
- o = f;
211
- var p = tryCatch(e, r, n);
212
- if ("normal" === p.type) {
213
- if (o = n.done ? s : l, p.arg === y) continue;
214
- return {
215
- value: p.arg,
216
- done: n.done
217
- };
218
- }
219
- "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
220
- }
221
- };
222
- }
223
- function maybeInvokeDelegate(e, r) {
224
- var n = r.method,
225
- o = e.iterator[n];
226
- 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;
227
- var i = tryCatch(o, e.iterator, r.arg);
228
- if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
229
- var a = i.arg;
230
- 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);
231
- }
232
- function pushTryEntry(t) {
233
- var e = {
234
- tryLoc: t[0]
235
- };
236
- 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
237
- }
238
- function resetTryEntry(t) {
239
- var e = t.completion || {};
240
- e.type = "normal", delete e.arg, t.completion = e;
241
- }
242
- function Context(t) {
243
- this.tryEntries = [{
244
- tryLoc: "root"
245
- }], t.forEach(pushTryEntry, this), this.reset(!0);
246
- }
247
- function values(e) {
248
- if (e || "" === e) {
249
- var r = e[a];
250
- if (r) return r.call(e);
251
- if ("function" == typeof e.next) return e;
252
- if (!isNaN(e.length)) {
253
- var o = -1,
254
- i = function next() {
255
- for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
256
- return next.value = t, next.done = !0, next;
257
- };
258
- return i.next = i;
259
- }
260
- }
261
- throw new TypeError(typeof e + " is not iterable");
262
- }
263
- return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
264
- value: GeneratorFunctionPrototype,
265
- configurable: !0
266
- }), o(GeneratorFunctionPrototype, "constructor", {
267
- value: GeneratorFunction,
268
- configurable: !0
269
- }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
270
- var e = "function" == typeof t && t.constructor;
271
- return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
272
- }, e.mark = function (t) {
273
- return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
274
- }, e.awrap = function (t) {
275
- return {
276
- __await: t
277
- };
278
- }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
279
- return this;
280
- }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
281
- void 0 === i && (i = Promise);
282
- var a = new AsyncIterator(wrap(t, r, n, o), i);
283
- return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
284
- return t.done ? t.value : a.next();
285
- });
286
- }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
287
- return this;
288
- }), define(g, "toString", function () {
289
- return "[object Generator]";
290
- }), e.keys = function (t) {
291
- var e = Object(t),
292
- r = [];
293
- for (var n in e) r.push(n);
294
- return r.reverse(), function next() {
295
- for (; r.length;) {
296
- var t = r.pop();
297
- if (t in e) return next.value = t, next.done = !1, next;
298
- }
299
- return next.done = !0, next;
300
- };
301
- }, e.values = values, Context.prototype = {
302
- constructor: Context,
303
- reset: function (e) {
304
- 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);
305
- },
306
- stop: function () {
307
- this.done = !0;
308
- var t = this.tryEntries[0].completion;
309
- if ("throw" === t.type) throw t.arg;
310
- return this.rval;
311
- },
312
- dispatchException: function (e) {
313
- if (this.done) throw e;
314
- var r = this;
315
- function handle(n, o) {
316
- return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
317
- }
318
- for (var o = this.tryEntries.length - 1; o >= 0; --o) {
319
- var i = this.tryEntries[o],
320
- a = i.completion;
321
- if ("root" === i.tryLoc) return handle("end");
322
- if (i.tryLoc <= this.prev) {
323
- var c = n.call(i, "catchLoc"),
324
- u = n.call(i, "finallyLoc");
325
- if (c && u) {
326
- if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
327
- if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
328
- } else if (c) {
329
- if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
330
- } else {
331
- if (!u) throw new Error("try statement without catch or finally");
332
- if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
333
- }
334
- }
335
- }
336
- },
337
- abrupt: function (t, e) {
338
- for (var r = this.tryEntries.length - 1; r >= 0; --r) {
339
- var o = this.tryEntries[r];
340
- if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
341
- var i = o;
342
- break;
343
- }
344
- }
345
- i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
346
- var a = i ? i.completion : {};
347
- return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
348
- },
349
- complete: function (t, e) {
350
- if ("throw" === t.type) throw t.arg;
351
- 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;
352
- },
353
- finish: function (t) {
354
- for (var e = this.tryEntries.length - 1; e >= 0; --e) {
355
- var r = this.tryEntries[e];
356
- if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
357
- }
358
- },
359
- catch: function (t) {
360
- for (var e = this.tryEntries.length - 1; e >= 0; --e) {
361
- var r = this.tryEntries[e];
362
- if (r.tryLoc === t) {
363
- var n = r.completion;
364
- if ("throw" === n.type) {
365
- var o = n.arg;
366
- resetTryEntry(r);
367
- }
368
- return o;
369
- }
370
- }
371
- throw new Error("illegal catch attempt");
372
- },
373
- delegateYield: function (e, r, n) {
374
- return this.delegate = {
375
- iterator: values(e),
376
- resultName: r,
377
- nextLoc: n
378
- }, "next" === this.method && (this.arg = t), y;
379
- }
380
- }, e;
381
- }
382
- function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
383
- try {
384
- var info = gen[key](arg);
385
- var value = info.value;
386
- } catch (error) {
387
- reject(error);
388
- return;
389
- }
390
- if (info.done) {
391
- resolve(value);
392
- } else {
393
- Promise.resolve(value).then(_next, _throw);
394
- }
395
- }
396
- function _asyncToGenerator(fn) {
397
- return function () {
398
- var self = this,
399
- args = arguments;
400
- return new Promise(function (resolve, reject) {
401
- var gen = fn.apply(self, args);
402
- function _next(value) {
403
- asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
404
- }
405
- function _throw(err) {
406
- asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
407
- }
408
- _next(undefined);
409
- });
410
- };
411
- }
412
- function _defineProperty(obj, key, value) {
413
- key = _toPropertyKey(key);
414
- if (key in obj) {
415
- Object.defineProperty(obj, key, {
416
- value: value,
417
- enumerable: true,
418
- configurable: true,
419
- writable: true
420
- });
421
- } else {
422
- obj[key] = value;
423
- }
424
- return obj;
425
- }
426
- function _objectWithoutPropertiesLoose(source, excluded) {
427
- if (source == null) return {};
428
- var target = {};
429
- var sourceKeys = Object.keys(source);
430
- var key, i;
431
- for (i = 0; i < sourceKeys.length; i++) {
432
- key = sourceKeys[i];
433
- if (excluded.indexOf(key) >= 0) continue;
434
- target[key] = source[key];
435
- }
436
- return target;
437
- }
438
- function _objectWithoutProperties(source, excluded) {
439
- if (source == null) return {};
440
- var target = _objectWithoutPropertiesLoose(source, excluded);
441
- var key, i;
442
- if (Object.getOwnPropertySymbols) {
443
- var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
444
- for (i = 0; i < sourceSymbolKeys.length; i++) {
445
- key = sourceSymbolKeys[i];
446
- if (excluded.indexOf(key) >= 0) continue;
447
- if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
448
- target[key] = source[key];
449
- }
450
- }
451
- return target;
452
- }
453
- function _slicedToArray(arr, i) {
454
- return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
455
- }
456
- function _toConsumableArray(arr) {
457
- return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
458
- }
459
- function _arrayWithoutHoles(arr) {
460
- if (Array.isArray(arr)) return _arrayLikeToArray(arr);
461
- }
462
- function _arrayWithHoles(arr) {
463
- if (Array.isArray(arr)) return arr;
464
- }
465
- function _iterableToArray(iter) {
466
- if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
467
- }
468
- function _unsupportedIterableToArray(o, minLen) {
469
- if (!o) return;
470
- if (typeof o === "string") return _arrayLikeToArray(o, minLen);
471
- var n = Object.prototype.toString.call(o).slice(8, -1);
472
- if (n === "Object" && o.constructor) n = o.constructor.name;
473
- if (n === "Map" || n === "Set") return Array.from(o);
474
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
475
- }
476
- function _arrayLikeToArray(arr, len) {
477
- if (len == null || len > arr.length) len = arr.length;
478
- for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
479
- return arr2;
480
- }
481
- function _nonIterableSpread() {
482
- throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
483
- }
484
- function _nonIterableRest() {
485
- throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
486
- }
487
- function _toPrimitive(input, hint) {
488
- if (typeof input !== "object" || input === null) return input;
489
- var prim = input[Symbol.toPrimitive];
490
- if (prim !== undefined) {
491
- var res = prim.call(input, hint || "default");
492
- if (typeof res !== "object") return res;
493
- throw new TypeError("@@toPrimitive must return a primitive value.");
494
- }
495
- return (hint === "string" ? String : Number)(input);
496
- }
497
- function _toPropertyKey(arg) {
498
- var key = _toPrimitive(arg, "string");
499
- return typeof key === "symbol" ? key : String(key);
500
- }
501
-
502
33
  /* eslint-disable valid-jsdoc */
503
34
  // @ts-check
504
35
 
505
- var TRANSPARENT_GIF = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
36
+ const TRANSPARENT_GIF = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
506
37
 
507
38
  /**
508
39
  * Replace all text with emoji with an image html tag
@@ -510,11 +41,11 @@ var TRANSPARENT_GIF = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAA
510
41
  * @return {string}
511
42
  */
512
43
  function replaceAllTextEmojis(text) {
513
- var allEmojis = getAllEmojisFromText(text);
44
+ let allEmojis = getAllEmojisFromText(text);
514
45
  if (allEmojis) {
515
- allEmojis = _toConsumableArray(new Set(allEmojis)); // remove duplicates
46
+ allEmojis = [...new Set(allEmojis)]; // remove duplicates
516
47
 
517
- allEmojis.forEach(function (emoji) {
48
+ allEmojis.forEach(emoji => {
518
49
  text = replaceAll(text, emoji, getInputEmojiHTML('', emoji));
519
50
  });
520
51
  }
@@ -548,20 +79,19 @@ function getAllEmojisFromText(text) {
548
79
  * @return {string}
549
80
  */
550
81
  function getImageEmoji(emoji) {
551
- var _emojiPickerEl$shadow;
552
82
  /** @type {HTMLElement | null} */
553
- var emojiPickerEl = document.querySelector('em-emoji-picker');
83
+ const emojiPickerEl = document.querySelector('em-emoji-picker');
554
84
  if (!emojiPickerEl) {
555
- return getInputEmojiNativeHTML(emoji["native"]);
85
+ return getInputEmojiNativeHTML(emoji.native);
556
86
  }
557
87
 
558
88
  /** @type {HTMLSpanElement | null=} */
559
- 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"));
89
+ const emojiSpanEl = emojiPickerEl?.shadowRoot?.querySelector(`[title="${emoji.name}"] > span > span`);
560
90
  if (!emojiSpanEl) {
561
- return getInputEmojiNativeHTML(emoji["native"]);
91
+ return getInputEmojiNativeHTML(emoji.native);
562
92
  }
563
- var style = replaceAll(emojiSpanEl.style.cssText, '"', "'");
564
- return getInputEmojiHTML(style, emoji["native"]);
93
+ const style = replaceAll(emojiSpanEl.style.cssText, '"', "'");
94
+ return getInputEmojiHTML(style, emoji.native);
565
95
  }
566
96
 
567
97
  // eslint-disable-next-line valid-jsdoc
@@ -572,7 +102,7 @@ function getImageEmoji(emoji) {
572
102
  * @returns
573
103
  */
574
104
  function getInputEmojiHTML(style, emoji) {
575
- return "<img style=\"".concat(style, "; display: inline-block\" data-emoji=\"").concat(emoji, "\" src=\"").concat(TRANSPARENT_GIF, "\" />");
105
+ return `<img style="${style}; display: inline-block" data-emoji="${emoji}" src="${TRANSPARENT_GIF}" />`;
576
106
  }
577
107
 
578
108
  /**
@@ -581,7 +111,7 @@ function getInputEmojiHTML(style, emoji) {
581
111
  * @returns
582
112
  */
583
113
  function getInputEmojiNativeHTML(emoji) {
584
- return "<span class=\"width: 18px; height: 18px; display: inline-block; margin: 0 1px;\">".concat(emoji, "</span>");
114
+ return `<span class="width: 18px; height: 18px; display: inline-block; margin: 0 1px;">${emoji}</span>`;
585
115
  }
586
116
 
587
117
  /**
@@ -590,10 +120,10 @@ function getInputEmojiNativeHTML(emoji) {
590
120
  * @return {string}
591
121
  */
592
122
  function replaceAllTextEmojiToString(html) {
593
- var container = document.createElement("div");
123
+ const container = document.createElement("div");
594
124
  container.innerHTML = html;
595
- var images = Array.prototype.slice.call(container.querySelectorAll("img"));
596
- images.forEach(function (image) {
125
+ const images = Array.prototype.slice.call(container.querySelectorAll("img"));
126
+ images.forEach(image => {
597
127
  container.innerHTML = container.innerHTML.replace(image.outerHTML, image.dataset.emoji);
598
128
  });
599
129
  return container.innerHTML;
@@ -606,12 +136,12 @@ function replaceAllTextEmojiToString(html) {
606
136
  * @param {React.ClipboardEvent} event
607
137
  */
608
138
  function handleCopy(event) {
609
- var selectedText = window.getSelection();
139
+ const selectedText = window.getSelection();
610
140
  if (selectedText === null) {
611
141
  return;
612
142
  }
613
- var container = document.createElement("div");
614
- for (var i = 0, len = selectedText.rangeCount; i < len; ++i) {
143
+ let container = document.createElement("div");
144
+ for (let i = 0, len = selectedText.rangeCount; i < len; ++i) {
615
145
  container.appendChild(selectedText.getRangeAt(i).cloneContents());
616
146
  }
617
147
  container = replaceEmojiToString(container);
@@ -619,28 +149,41 @@ function handleCopy(event) {
619
149
  event.preventDefault();
620
150
  }
621
151
 
152
+ /** @type {Range|undefined} */
153
+ /** @type {Range|undefined} */
154
+ let currentRangeCached;
155
+
622
156
  /**
623
- *
624
- * @param {string} html
157
+ * Caches the current text selection range
158
+ */
159
+ function cacheCurrentRange() {
160
+ const selection = window.getSelection();
161
+ if (!selection.rangeCount || selection?.anchorNode['className'] !== 'react-input-emoji--input' && selection.anchorNode.parentNode['className'] !== 'react-input-emoji--input') return;
162
+ const range = selection.getRangeAt(0);
163
+ currentRangeCached = range.cloneRange();
164
+ }
165
+
166
+ /**
167
+ * @param {string} html - HTML string to be pasted at the caret position
625
168
  */
626
169
  function handlePasteHtmlAtCaret(html) {
627
- var sel;
628
- var range;
170
+ let sel;
171
+ let range;
629
172
  if (window.getSelection) {
630
173
  // IE9 and non-IE
631
174
  sel = window.getSelection();
632
175
  if (sel === null) return;
633
176
  if (sel.getRangeAt && sel.rangeCount) {
634
- range = sel.getRangeAt(0);
177
+ range = currentRangeCached ?? sel.getRangeAt(0);
635
178
  range.deleteContents();
636
179
 
637
180
  // Range.createContextualFragment() would be useful here but is
638
181
  // non-standard and not supported in all browsers (IE9, for one)
639
- var el = document.createElement("div");
182
+ const el = document.createElement("div");
640
183
  el.innerHTML = html;
641
- var frag = document.createDocumentFragment();
642
- var node;
643
- var lastNode;
184
+ const frag = document.createDocumentFragment();
185
+ let node;
186
+ let lastNode;
644
187
  while (node = el.firstChild) {
645
188
  lastNode = frag.appendChild(node);
646
189
  }
@@ -649,6 +192,7 @@ function handlePasteHtmlAtCaret(html) {
649
192
  // Preserve the selection
650
193
  if (lastNode) {
651
194
  range = range.cloneRange();
195
+ currentRangeCached = range;
652
196
  range.setStartAfter(lastNode);
653
197
  range.collapse(true);
654
198
  sel.removeAllRanges();
@@ -664,8 +208,8 @@ function handlePasteHtmlAtCaret(html) {
664
208
  * @return {HTMLDivElement}
665
209
  */
666
210
  function replaceEmojiToString(container) {
667
- var images = Array.prototype.slice.call(container.querySelectorAll("img"));
668
- images.forEach(function (image) {
211
+ const images = Array.prototype.slice.call(container.querySelectorAll("img"));
212
+ images.forEach(image => {
669
213
  image.outerHTML = image.dataset.emoji;
670
214
  });
671
215
  return container;
@@ -676,11 +220,12 @@ function replaceEmojiToString(container) {
676
220
  * @param {{text: string, html: string}} props
677
221
  * @return {number}
678
222
  */
679
- function totalCharacters(_ref2) {
680
- var text = _ref2.text,
681
- html = _ref2.html;
682
- var textCount = text.length;
683
- var emojisCount = (html.match(/<img/g) || []).length;
223
+ function totalCharacters({
224
+ text,
225
+ html
226
+ }) {
227
+ const textCount = text.length;
228
+ const emojisCount = (html.match(/<img/g) || []).length;
684
229
  return textCount + emojisCount;
685
230
  }
686
231
  /**
@@ -689,12 +234,12 @@ function totalCharacters(_ref2) {
689
234
  * @return {string}
690
235
  */
691
236
  function removeHtmlExceptBr(inputDiv) {
692
- var temp = inputDiv.innerHTML.replaceAll(/<br\s*\/?>/gi, "[BR]"); // temporarily replace <br> with placeholder
693
- var tempContainer = document.createElement("div");
237
+ const temp = inputDiv.innerHTML.replaceAll(/<br\s*\/?>/gi, "[BR]"); // temporarily replace <br> with placeholder
238
+ const tempContainer = document.createElement("div");
694
239
  tempContainer.innerHTML = temp;
695
- var stripped = tempContainer.innerText; // strip all html tags
696
- var _final = stripped.replaceAll(/\[BR\]/gi, "</br>"); // replace placeholders with <br>
697
- return _final;
240
+ const stripped = tempContainer.innerText; // strip all html tags
241
+ const final = stripped.replaceAll(/\[BR\]/gi, "</br>"); // replace placeholders with <br>
242
+ return final;
698
243
  }
699
244
 
700
245
  /**
@@ -703,8 +248,8 @@ function removeHtmlExceptBr(inputDiv) {
703
248
  * @returns
704
249
  */
705
250
  function getSelectionStart$1(range) {
706
- var node = range.startContainer;
707
- var offset = range.startOffset;
251
+ let node = range.startContainer;
252
+ let offset = range.startOffset;
708
253
 
709
254
  // Handle cases where the selection start node is not a text node
710
255
  if (node.nodeType !== Node.TEXT_NODE) {
@@ -721,8 +266,8 @@ function getSelectionStart$1(range) {
721
266
  offset = 0;
722
267
  }
723
268
  return {
724
- node: node,
725
- offset: offset
269
+ node,
270
+ offset
726
271
  };
727
272
  }
728
273
 
@@ -731,13 +276,13 @@ function getSelectionStart$1(range) {
731
276
  * @return {Object} cursor
732
277
  */
733
278
  function getCursor() {
734
- var selection = window.getSelection();
735
- var range = selection.getRangeAt(0);
736
- var selectionStart = getSelectionStart$1(range);
279
+ const selection = window.getSelection();
280
+ const range = selection.getRangeAt(0);
281
+ const selectionStart = getSelectionStart$1(range);
737
282
  return {
738
- selection: selection,
739
- range: range,
740
- selectionStart: selectionStart
283
+ selection,
284
+ range,
285
+ selectionStart
741
286
  };
742
287
  }
743
288
 
@@ -745,30 +290,31 @@ function getCursor() {
745
290
  *
746
291
  */
747
292
  function addLineBreak() {
748
- var _getCursor = getCursor(),
749
- selection = _getCursor.selection,
750
- range = _getCursor.range,
751
- selectionStart = _getCursor.selectionStart;
293
+ const {
294
+ selection,
295
+ range,
296
+ selectionStart
297
+ } = getCursor();
752
298
 
753
299
  // If cursor is at the end of the text content, add one more line break
754
300
  if (selection.isCollapsed && selectionStart.offset === selectionStart.node.textContent.length) {
755
- var br = document.createElement("br");
301
+ const br = document.createElement("br");
756
302
  range.insertNode(br);
757
303
  range.setStartAfter(br);
758
304
  range.setEndAfter(br);
759
305
  selection.removeAllRanges();
760
306
  selection.addRange(range);
761
- var br2 = document.createElement("br");
307
+ const br2 = document.createElement("br");
762
308
  range.insertNode(br2);
763
309
  range.setStartAfter(br2);
764
310
  range.setEndAfter(br2);
765
311
  selection.removeAllRanges();
766
312
  selection.addRange(range);
767
313
  } else {
768
- var _br = document.createElement("br");
769
- range.insertNode(_br);
770
- range.setStartAfter(_br);
771
- range.setEndAfter(_br);
314
+ const br = document.createElement("br");
315
+ range.insertNode(br);
316
+ range.setStartAfter(br);
317
+ range.setEndAfter(br);
772
318
  selection.removeAllRanges();
773
319
  selection.addRange(range);
774
320
  // Set cursor position right before the first letter after the line break
@@ -987,7 +533,7 @@ var reactEasyEmoji = function reactEasyEmoji(element, optionsOrFn) {
987
533
  var emoji = reactEasyEmoji;
988
534
 
989
535
  // @ts-check
990
- 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);
536
+ 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);
991
537
 
992
538
  /**
993
539
  * @typedef {import('../types/types').SanitizeFn} SanitizeFn
@@ -1000,17 +546,17 @@ var EMOJI_REGEX = new RegExp(/(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\
1000
546
  */
1001
547
  function useSanitize(shouldReturn, shouldConvertEmojiToImage) {
1002
548
  /** @type {React.MutableRefObject<SanitizeFn[]>} */
1003
- var sanitizeFnsRef = useRef([]);
1004
- var sanitizedTextRef = useRef("");
549
+ const sanitizeFnsRef = useRef([]);
550
+ const sanitizedTextRef = useRef("");
1005
551
 
1006
552
  /** @type {(fn: SanitizeFn) => void} */
1007
- var addSanitizeFn = useCallback(function (fn) {
553
+ const addSanitizeFn = useCallback(fn => {
1008
554
  sanitizeFnsRef.current.push(fn);
1009
555
  }, []);
1010
556
 
1011
557
  /** @type {(html: string) => string} */
1012
- var sanitize = useCallback(function (html) {
1013
- var result = sanitizeFnsRef.current.reduce(function (acc, fn) {
558
+ const sanitize = useCallback(html => {
559
+ let result = sanitizeFnsRef.current.reduce((acc, fn) => {
1014
560
  return fn(acc);
1015
561
  }, html);
1016
562
  result = replaceAllHtmlToString(result, shouldReturn);
@@ -1021,9 +567,9 @@ function useSanitize(shouldReturn, shouldConvertEmojiToImage) {
1021
567
  return result;
1022
568
  }, [shouldReturn, shouldConvertEmojiToImage]);
1023
569
  return {
1024
- addSanitizeFn: addSanitizeFn,
1025
- sanitize: sanitize,
1026
- sanitizedTextRef: sanitizedTextRef
570
+ addSanitizeFn,
571
+ sanitize,
572
+ sanitizedTextRef
1027
573
  };
1028
574
  }
1029
575
 
@@ -1034,9 +580,9 @@ function useSanitize(shouldReturn, shouldConvertEmojiToImage) {
1034
580
  * @return {string}
1035
581
  */
1036
582
  function replaceAllHtmlToString(html, shouldReturn) {
1037
- var container = document.createElement("div");
583
+ const container = document.createElement("div");
1038
584
  container.innerHTML = html;
1039
- var text;
585
+ let text;
1040
586
  if (shouldReturn) {
1041
587
  text = removeHtmlExceptBr(container);
1042
588
  } else {
@@ -1085,35 +631,35 @@ function handleEmoji(text) {
1085
631
  *
1086
632
  * @param {Props} props
1087
633
  */
1088
- function useExpose(_ref) {
1089
- var ref = _ref.ref,
1090
- textInputRef = _ref.textInputRef,
1091
- setValue = _ref.setValue,
1092
- emitChange = _ref.emitChange,
1093
- shouldConvertEmojiToImage = _ref.shouldConvertEmojiToImage;
1094
- var _useSanitize = useSanitize(false, shouldConvertEmojiToImage),
1095
- sanitize = _useSanitize.sanitize,
1096
- sanitizedTextRef = _useSanitize.sanitizedTextRef;
1097
- useImperativeHandle(ref, function () {
1098
- return {
1099
- get value() {
1100
- return sanitizedTextRef.current;
1101
- },
1102
- set value(value) {
1103
- setValue(value);
1104
- },
1105
- focus: function focus() {
1106
- if (textInputRef.current === null) return;
1107
- textInputRef.current.focus();
1108
- },
1109
- blur: function blur() {
1110
- if (textInputRef.current !== null) {
1111
- sanitize(textInputRef.current.html);
1112
- }
1113
- emitChange();
634
+ function useExpose({
635
+ ref,
636
+ textInputRef,
637
+ setValue,
638
+ emitChange,
639
+ shouldConvertEmojiToImage
640
+ }) {
641
+ const {
642
+ sanitize,
643
+ sanitizedTextRef
644
+ } = useSanitize(false, shouldConvertEmojiToImage);
645
+ useImperativeHandle(ref, () => ({
646
+ get value() {
647
+ return sanitizedTextRef.current;
648
+ },
649
+ set value(value) {
650
+ setValue(value);
651
+ },
652
+ focus: () => {
653
+ if (textInputRef.current === null) return;
654
+ textInputRef.current.focus();
655
+ },
656
+ blur: () => {
657
+ if (textInputRef.current !== null) {
658
+ sanitize(textInputRef.current.html);
1114
659
  }
1115
- };
1116
- });
660
+ emitChange();
661
+ }
662
+ }));
1117
663
  }
1118
664
 
1119
665
  // @ts-check
@@ -1127,19 +673,19 @@ function useExpose(_ref) {
1127
673
  */
1128
674
  function useEmit(textInputRef, onResize, onChange) {
1129
675
  /** @type {React.MutableRefObject<{width: number; height: number} | null>} */
1130
- var currentSizeRef = useRef(null);
1131
- var onChangeFn = useRef(onChange);
1132
- var checkAndEmitResize = useCallback(function () {
676
+ const currentSizeRef = useRef(null);
677
+ const onChangeFn = useRef(onChange);
678
+ const checkAndEmitResize = useCallback(() => {
1133
679
  if (textInputRef.current !== null) {
1134
- var currentSize = currentSizeRef.current;
1135
- var nextSize = textInputRef.current.size;
680
+ const currentSize = currentSizeRef.current;
681
+ const nextSize = textInputRef.current.size;
1136
682
  if ((!currentSize || currentSize.width !== nextSize.width || currentSize.height !== nextSize.height) && typeof onResize === "function") {
1137
683
  onResize(nextSize);
1138
684
  }
1139
685
  currentSizeRef.current = nextSize;
1140
686
  }
1141
687
  }, [onResize, textInputRef]);
1142
- var emitChange = useCallback(function (sanitizedText) {
688
+ const emitChange = useCallback(sanitizedText => {
1143
689
  if (typeof onChangeFn.current === "function") {
1144
690
  onChangeFn.current(sanitizedText);
1145
691
  }
@@ -1147,7 +693,7 @@ function useEmit(textInputRef, onResize, onChange) {
1147
693
  checkAndEmitResize();
1148
694
  }
1149
695
  }, [checkAndEmitResize, onResize]);
1150
- useEffect(function () {
696
+ useEffect(() => {
1151
697
  if (textInputRef.current) {
1152
698
  checkAndEmitResize();
1153
699
  }
@@ -1155,7 +701,7 @@ function useEmit(textInputRef, onResize, onChange) {
1155
701
  return emitChange;
1156
702
  }
1157
703
 
1158
- var _excluded = ["placeholder", "style", "tabIndex", "className", "onChange"];
704
+ // @ts-check
1159
705
 
1160
706
  /**
1161
707
  * @typedef {Object} Props
@@ -1189,97 +735,96 @@ var _excluded = ["placeholder", "style", "tabIndex", "className", "onChange"];
1189
735
 
1190
736
  // eslint-disable-next-line valid-jsdoc
1191
737
  /** @type {React.ForwardRefRenderFunction<Ref, Props>} */
1192
- var TextInput = function TextInput(_ref, ref) {
1193
- var placeholder = _ref.placeholder,
1194
- style = _ref.style,
1195
- tabIndex = _ref.tabIndex,
1196
- className = _ref.className,
1197
- onChange = _ref.onChange,
1198
- props = _objectWithoutProperties(_ref, _excluded);
1199
- useImperativeHandle(ref, function () {
1200
- return {
1201
- appendContent: function appendContent(html) {
1202
- if (textInputRef.current) {
1203
- textInputRef.current.focus();
1204
- }
1205
- handlePasteHtmlAtCaret(html);
1206
- if (textInputRef.current) {
1207
- textInputRef.current.focus();
1208
- }
1209
- if (textInputRef.current && placeholderRef.current && replaceAllTextEmojiToString(textInputRef.current.innerHTML) === "") {
738
+ const TextInput = ({
739
+ placeholder,
740
+ style,
741
+ tabIndex,
742
+ className,
743
+ onChange,
744
+ ...props
745
+ }, ref) => {
746
+ useImperativeHandle(ref, () => ({
747
+ appendContent: html => {
748
+ if (textInputRef.current) {
749
+ textInputRef.current.focus();
750
+ }
751
+ handlePasteHtmlAtCaret(html);
752
+ if (textInputRef.current) {
753
+ textInputRef.current.focus();
754
+ }
755
+ if (textInputRef.current && placeholderRef.current && replaceAllTextEmojiToString(textInputRef.current.innerHTML) === "") {
756
+ placeholderRef.current.style.visibility = "visible";
757
+ } else if (placeholderRef.current) {
758
+ placeholderRef.current.style.visibility = "hidden";
759
+ }
760
+ if (textInputRef.current && typeof onChange === 'function') {
761
+ onChange(textInputRef.current.innerHTML);
762
+ }
763
+ },
764
+ set html(value) {
765
+ if (textInputRef.current) {
766
+ textInputRef.current.innerHTML = value;
767
+ }
768
+ if (placeholderRef.current) {
769
+ const text = replaceAllTextEmojiToString(value);
770
+ if (text === "") {
1210
771
  placeholderRef.current.style.visibility = "visible";
1211
- } else if (placeholderRef.current) {
772
+ } else {
1212
773
  placeholderRef.current.style.visibility = "hidden";
1213
774
  }
1214
- if (textInputRef.current && typeof onChange === 'function') {
1215
- onChange(textInputRef.current.innerHTML);
1216
- }
1217
- },
1218
- set html(value) {
1219
- if (textInputRef.current) {
1220
- textInputRef.current.innerHTML = value;
1221
- }
1222
- if (placeholderRef.current) {
1223
- var text = replaceAllTextEmojiToString(value);
1224
- if (text === "") {
1225
- placeholderRef.current.style.visibility = "visible";
1226
- } else {
1227
- placeholderRef.current.style.visibility = "hidden";
1228
- }
1229
- }
1230
- if (typeof onChange === 'function' && textInputRef.current) {
1231
- onChange(textInputRef.current.innerHTML);
1232
- }
1233
- },
1234
- get html() {
1235
- if (!textInputRef.current) return '';
1236
- return textInputRef.current.innerHTML;
1237
- },
1238
- get text() {
1239
- if (!textInputRef.current) return '';
1240
- return textInputRef.current.innerText;
1241
- },
1242
- get size() {
1243
- if (!textInputRef.current) {
1244
- return {
1245
- width: 0,
1246
- height: 0
1247
- };
1248
- }
775
+ }
776
+ if (typeof onChange === 'function' && textInputRef.current) {
777
+ onChange(textInputRef.current.innerHTML);
778
+ }
779
+ },
780
+ get html() {
781
+ if (!textInputRef.current) return '';
782
+ return textInputRef.current.innerHTML;
783
+ },
784
+ get text() {
785
+ if (!textInputRef.current) return '';
786
+ return textInputRef.current.innerText;
787
+ },
788
+ get size() {
789
+ if (!textInputRef.current) {
1249
790
  return {
1250
- width: textInputRef.current.offsetWidth,
1251
- height: textInputRef.current.offsetHeight
791
+ width: 0,
792
+ height: 0
1252
793
  };
1253
- },
1254
- focus: function focus() {
1255
- if (!textInputRef.current) return;
1256
- textInputRef.current.focus();
1257
794
  }
1258
- };
1259
- });
795
+ return {
796
+ width: textInputRef.current.offsetWidth,
797
+ height: textInputRef.current.offsetHeight
798
+ };
799
+ },
800
+ focus() {
801
+ if (!textInputRef.current) return;
802
+ textInputRef.current.focus();
803
+ }
804
+ }));
1260
805
 
1261
806
  /** @type {React.CSSProperties} */
1262
- var placeholderStyle = useMemo(function () {
1263
- var placeholderStyle = {};
807
+ const placeholderStyle = useMemo(() => {
808
+ const placeholderStyle = {};
1264
809
  if (style.placeholderColor) {
1265
810
  placeholderStyle.color = style.placeholderColor;
1266
811
  }
1267
812
  return placeholderStyle;
1268
- }, [style === null || style === void 0 ? void 0 : style.placeholderColor]);
813
+ }, [style?.placeholderColor]);
1269
814
 
1270
815
  /** @type {React.CSSProperties} */
1271
- var inputStyle = useMemo(function () {
1272
- var inputStyle = {};
816
+ const inputStyle = useMemo(() => {
817
+ const inputStyle = {};
1273
818
  if (style.color) {
1274
819
  inputStyle.color = style.color;
1275
820
  }
1276
821
  return inputStyle;
1277
- }, [style === null || style === void 0 ? void 0 : style.color]);
822
+ }, [style?.color]);
1278
823
 
1279
824
  /** @type {React.MutableRefObject<HTMLDivElement | null>} */
1280
- var placeholderRef = useRef(null);
825
+ const placeholderRef = useRef(null);
1281
826
  /** @type {React.MutableRefObject<HTMLDivElement | null>} */
1282
- var textInputRef = useRef(null);
827
+ const textInputRef = useRef(null);
1283
828
 
1284
829
  /**
1285
830
  *
@@ -1318,9 +863,9 @@ var TextInput = function TextInput(_ref, ref) {
1318
863
  */
1319
864
  function handleKeyUp(event) {
1320
865
  props.onKeyUp(event);
1321
- var input = textInputRef.current;
866
+ const input = textInputRef.current;
1322
867
  if (placeholderRef.current && input) {
1323
- var text = replaceAllTextEmojiToString(input.innerHTML);
868
+ const text = replaceAllTextEmojiToString(input.innerHTML);
1324
869
  if (text === "") {
1325
870
  placeholderRef.current.style.visibility = "visible";
1326
871
  } else {
@@ -1347,7 +892,7 @@ var TextInput = function TextInput(_ref, ref) {
1347
892
  onKeyUp: handleKeyUp,
1348
893
  tabIndex: tabIndex,
1349
894
  contentEditable: true,
1350
- className: "react-input-emoji--input".concat(className ? " ".concat(className) : ""),
895
+ className: `react-input-emoji--input${className ? ` ${className}` : ""}`,
1351
896
  onBlur: props.onBlur,
1352
897
  onCopy: props.onCopy,
1353
898
  onPaste: props.onPaste,
@@ -1355,7 +900,9 @@ var TextInput = function TextInput(_ref, ref) {
1355
900
  style: inputStyle
1356
901
  })));
1357
902
  };
1358
- var TextInputWithRef = /*#__PURE__*/forwardRef(TextInput);
903
+ const TextInputWithRef = /*#__PURE__*/forwardRef(TextInput);
904
+
905
+ // vendors
1359
906
 
1360
907
  /**
1361
908
  * @typedef {object} Props
@@ -1370,30 +917,27 @@ var TextInputWithRef = /*#__PURE__*/forwardRef(TextInput);
1370
917
  * @param {Props} props
1371
918
  * @return {JSX.Element}
1372
919
  */
1373
- function EmojiPickerButton(_ref) {
1374
- var showPicker = _ref.showPicker,
1375
- toggleShowPicker = _ref.toggleShowPicker,
1376
- buttonElement = _ref.buttonElement,
1377
- buttonRef = _ref.buttonRef;
1378
- var localButtonRef = useRef(null);
1379
- var _useState = useState(false),
1380
- _useState2 = _slicedToArray(_useState, 2),
1381
- showCustomButtonContent = _useState2[0],
1382
- setShowCustomButtonContent = _useState2[1];
1383
- useEffect(function () {
1384
- var _buttonRef$current$ch, _buttonRef$current, _buttonElement$childN, _buttonElement$childN2;
1385
- 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) {
920
+ function EmojiPickerButton({
921
+ showPicker,
922
+ toggleShowPicker,
923
+ buttonElement,
924
+ buttonRef
925
+ }) {
926
+ const localButtonRef = useRef(null);
927
+ const [showCustomButtonContent, setShowCustomButtonContent] = useState(false);
928
+ useEffect(() => {
929
+ if ((buttonRef?.current?.childNodes?.length ?? 0) > 2) {
1386
930
  localButtonRef.current.appendChild(buttonRef.current.childNodes[0]);
1387
931
  setShowCustomButtonContent(true);
1388
- } 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) {
1389
- localButtonRef.current.appendChild(buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.childNodes[0]);
932
+ } else if ((buttonElement?.childNodes?.length ?? 0) > 2) {
933
+ localButtonRef.current.appendChild(buttonElement?.childNodes[0]);
1390
934
  setShowCustomButtonContent(true);
1391
935
  }
1392
- }, [buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.childNodes]);
936
+ }, [buttonElement?.childNodes]);
1393
937
  return /*#__PURE__*/React.createElement("button", {
1394
938
  ref: localButtonRef,
1395
939
  type: "button",
1396
- className: "react-input-emoji--button".concat(showPicker ? " react-input-emoji--button__show" : ""),
940
+ className: `react-input-emoji--button${showPicker ? " react-input-emoji--button__show" : ""}`,
1397
941
  onClick: toggleShowPicker
1398
942
  }, !showCustomButtonContent && /*#__PURE__*/React.createElement("svg", {
1399
943
  xmlns: "http://www.w3.org/2000/svg",
@@ -3845,8 +3389,9 @@ function $e5534fc185f7111e$export$2e2bcd8739ae039(props) {
3845
3389
  });
3846
3390
  }
3847
3391
 
3848
- var EMOJI_MART_DATA_URL = "https://cdn.jsdelivr.net/npm/@emoji-mart/data";
3849
- var cacheI18n = {};
3392
+ // vendors
3393
+ const EMOJI_MART_DATA_URL = "https://cdn.jsdelivr.net/npm/@emoji-mart/data";
3394
+ const cacheI18n = {};
3850
3395
 
3851
3396
  /**
3852
3397
  * @typedef {object} Props
@@ -3862,55 +3407,38 @@ var cacheI18n = {};
3862
3407
  * @param {Props} props
3863
3408
  */
3864
3409
  function EmojiPicker(props) {
3865
- var theme = props.theme,
3866
- onSelectEmoji = props.onSelectEmoji,
3867
- disableRecent = props.disableRecent,
3868
- customEmojis = props.customEmojis,
3869
- language = props.language;
3410
+ const {
3411
+ theme,
3412
+ onSelectEmoji,
3413
+ disableRecent,
3414
+ customEmojis,
3415
+ language
3416
+ } = props;
3870
3417
 
3871
3418
  /** @type {string[]} */
3872
- var categories = useMemo(function () {
3419
+ const categories = useMemo(() => {
3873
3420
  /** @type {string[]} */
3874
- var categoryies = [];
3421
+ let categoryies = [];
3875
3422
  if (!disableRecent) {
3876
3423
  categoryies.push("frequent");
3877
3424
  }
3878
- categoryies = [].concat(_toConsumableArray(categoryies), ["people", "nature", "foods", "activity", "places", "objects", "symbols", "flags"]);
3425
+ categoryies = [...categoryies, "people", "nature", "foods", "activity", "places", "objects", "symbols", "flags"];
3879
3426
  return categoryies;
3880
3427
  }, [disableRecent]);
3881
- var _useState = useState(undefined),
3882
- _useState2 = _slicedToArray(_useState, 2),
3883
- i18n = _useState2[0],
3884
- setI18n = _useState2[1];
3885
- useEffect(function () {
3886
- var _ref2;
3428
+ const [i18n, setI18n] = useState(undefined);
3429
+ useEffect(() => {
3887
3430
  if (!language) {
3888
- var _ref;
3889
3431
  if (cacheI18n.en) {
3890
3432
  setI18n(cacheI18n.en);
3891
3433
  return;
3892
3434
  }
3893
3435
 
3894
3436
  // @ts-ignore
3895
- fetch("".concat(EMOJI_MART_DATA_URL, "/i18n/en.json")).then(function (_x) {
3896
- return (_ref = _ref || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(data) {
3897
- var translations;
3898
- return _regeneratorRuntime().wrap(function _callee$(_context) {
3899
- while (1) switch (_context.prev = _context.next) {
3900
- case 0:
3901
- _context.next = 2;
3902
- return data.json();
3903
- case 2:
3904
- translations = _context.sent;
3905
- setI18n(translations);
3906
- cacheI18n.en = translations;
3907
- case 5:
3908
- case "end":
3909
- return _context.stop();
3910
- }
3911
- }, _callee);
3912
- }))).apply(this, arguments);
3913
- })["catch"](function (error) {
3437
+ fetch(`${EMOJI_MART_DATA_URL}/i18n/en.json`).then(async data => {
3438
+ const translations = await data.json();
3439
+ setI18n(translations);
3440
+ cacheI18n.en = translations;
3441
+ }).catch(error => {
3914
3442
  console.error("Failed to load translations:", error);
3915
3443
  });
3916
3444
  return;
@@ -3921,25 +3449,11 @@ function EmojiPicker(props) {
3921
3449
  }
3922
3450
 
3923
3451
  // @ts-ignore
3924
- fetch("".concat(EMOJI_MART_DATA_URL, "/i18n/").concat(language, ".json")).then(function (_x2) {
3925
- return (_ref2 = _ref2 || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(data) {
3926
- var translations;
3927
- return _regeneratorRuntime().wrap(function _callee2$(_context2) {
3928
- while (1) switch (_context2.prev = _context2.next) {
3929
- case 0:
3930
- _context2.next = 2;
3931
- return data.json();
3932
- case 2:
3933
- translations = _context2.sent;
3934
- setI18n(translations);
3935
- cacheI18n[language] = translations;
3936
- case 5:
3937
- case "end":
3938
- return _context2.stop();
3939
- }
3940
- }, _callee2);
3941
- }))).apply(this, arguments);
3942
- })["catch"](function (error) {
3452
+ fetch(`${EMOJI_MART_DATA_URL}/i18n/${language}.json`).then(async data => {
3453
+ const translations = await data.json();
3454
+ setI18n(translations);
3455
+ cacheI18n[language] = translations;
3456
+ }).catch(error => {
3943
3457
  console.error("Failed to load translations:", error);
3944
3458
  });
3945
3459
  }, [language]);
@@ -3975,21 +3489,20 @@ var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
3975
3489
  * @param {Props} props
3976
3490
  * @return {JSX.Element}
3977
3491
  */
3978
- function EmojiPickerContainer(_ref) {
3979
- var showPicker = _ref.showPicker,
3980
- theme = _ref.theme,
3981
- handleSelectEmoji = _ref.handleSelectEmoji,
3982
- disableRecent = _ref.disableRecent,
3983
- customEmojis = _ref.customEmojis,
3984
- position = _ref.position,
3985
- language = _ref.language;
3492
+ function EmojiPickerContainer({
3493
+ showPicker,
3494
+ theme,
3495
+ handleSelectEmoji,
3496
+ disableRecent,
3497
+ customEmojis,
3498
+ position,
3499
+ language
3500
+ }) {
3986
3501
  return /*#__PURE__*/React.createElement("div", {
3987
3502
  className: "react-emoji-picker--container"
3988
3503
  }, showPicker && /*#__PURE__*/React.createElement("div", {
3989
3504
  className: "react-emoji-picker--wrapper",
3990
- onClick: function onClick(evt) {
3991
- return evt.stopPropagation();
3992
- },
3505
+ onClick: evt => evt.stopPropagation(),
3993
3506
  style: position === 'below' ? {
3994
3507
  top: '40px'
3995
3508
  } : {}
@@ -4004,7 +3517,8 @@ function EmojiPickerContainer(_ref) {
4004
3517
  }))));
4005
3518
  }
4006
3519
 
4007
- var EMOJI_PICKER_CONTAINER_HEIGHT = 435;
3520
+ // @ts-check
3521
+ const EMOJI_PICKER_CONTAINER_HEIGHT = 435;
4008
3522
 
4009
3523
  /**
4010
3524
  * @typedef {import('../types/types').SanitizeFn} SanitizeFn
@@ -4030,38 +3544,36 @@ var EMOJI_PICKER_CONTAINER_HEIGHT = 435;
4030
3544
 
4031
3545
  // eslint-disable-next-line valid-jsdoc
4032
3546
  /** @type {React.FC<Props>} */
4033
- var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4034
- var theme = props.theme,
4035
- keepOpened = props.keepOpened,
4036
- disableRecent = props.disableRecent,
4037
- customEmojis = props.customEmojis,
4038
- addSanitizeFn = props.addSanitizeFn,
4039
- addPolluteFn = props.addPolluteFn,
4040
- appendContent = props.appendContent,
4041
- buttonElement = props.buttonElement,
4042
- buttonRef = props.buttonRef,
4043
- language = props.language;
4044
- var _useState = useState(false),
4045
- _useState2 = _slicedToArray(_useState, 2),
4046
- showPicker = _useState2[0],
4047
- setShowPicker = _useState2[1];
3547
+ const EmojiPickerWrapper = props => {
3548
+ const {
3549
+ theme,
3550
+ keepOpened,
3551
+ disableRecent,
3552
+ customEmojis,
3553
+ addSanitizeFn,
3554
+ addPolluteFn,
3555
+ appendContent,
3556
+ buttonElement,
3557
+ buttonRef,
3558
+ language
3559
+ } = props;
3560
+ const [showPicker, setShowPicker] = useState(false);
4048
3561
  /** @type {[HTMLDivElement | undefined, React.Dispatch<React.SetStateAction<HTMLDivElement | undefined>>]} */
4049
- var _useState3 = useState(),
4050
- _useState4 = _slicedToArray(_useState3, 2),
4051
- customButton = _useState4[0],
4052
- setCustomButton = _useState4[1];
3562
+ const [customButton, setCustomButton] = useState();
4053
3563
  /** @type {['above' | 'below' | undefined, React.Dispatch<React.SetStateAction<'above' | 'below' | undefined>>]} */
4054
- var _useState5 = useState(),
4055
- _useState6 = _slicedToArray(_useState5, 2),
4056
- emojiPickerPosition = _useState6[0],
4057
- setEmojiPickerPosition = _useState6[1];
4058
- useEffect(function () {
3564
+ const [emojiPickerPosition, setEmojiPickerPosition] = useState();
3565
+ useEffect(() => {
3566
+ if (showPicker) {
3567
+ cacheCurrentRange();
3568
+ }
3569
+ }, [showPicker]);
3570
+ useEffect(() => {
4059
3571
  addSanitizeFn(replaceAllTextEmojiToString);
4060
3572
  }, [addSanitizeFn]);
4061
- useEffect(function () {
3573
+ useEffect(() => {
4062
3574
  addPolluteFn(replaceAllTextEmojis);
4063
3575
  }, [addPolluteFn]);
4064
- useEffect(function () {
3576
+ useEffect(() => {
4065
3577
  /**
4066
3578
  *
4067
3579
  * @param {MouseEvent} event
@@ -4069,14 +3581,14 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4069
3581
  function checkClickOutside(event) {
4070
3582
  /** @type {HTMLElement} */
4071
3583
  // @ts-ignore
4072
- var element = event.target;
3584
+ const element = event.target;
4073
3585
  if (element.classList.contains("react-input-emoji--button") || element.classList.contains("react-input-emoji--button--icon")) {
4074
3586
  return;
4075
3587
  }
4076
3588
  setShowPicker(false);
4077
3589
  }
4078
3590
  document.addEventListener("click", checkClickOutside);
4079
- return function () {
3591
+ return () => {
4080
3592
  document.removeEventListener("click", checkClickOutside);
4081
3593
  };
4082
3594
  }, []);
@@ -4089,9 +3601,7 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4089
3601
  event.stopPropagation();
4090
3602
  event.preventDefault();
4091
3603
  setEmojiPickerPosition(calcTopPosition(event));
4092
- setShowPicker(function (currentShowPicker) {
4093
- return !currentShowPicker;
4094
- });
3604
+ setShowPicker(currentShowPicker => !currentShowPicker);
4095
3605
  }
4096
3606
 
4097
3607
  /**
@@ -4100,9 +3610,9 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4100
3610
  * @return {'above' | 'below'}
4101
3611
  */
4102
3612
  function calcTopPosition(event) {
4103
- var btn = event.currentTarget;
4104
- var btnRect = btn.getBoundingClientRect();
4105
- var popoverHeight = EMOJI_PICKER_CONTAINER_HEIGHT;
3613
+ const btn = event.currentTarget;
3614
+ const btnRect = btn.getBoundingClientRect();
3615
+ const popoverHeight = EMOJI_PICKER_CONTAINER_HEIGHT;
4106
3616
 
4107
3617
  // Decide to display above or below based on available space
4108
3618
  if (btnRect.top >= popoverHeight) {
@@ -4122,17 +3632,14 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4122
3632
  function handleSelectEmoji(emoji) {
4123
3633
  appendContent(getImageEmoji(emoji));
4124
3634
  if (!keepOpened) {
4125
- setShowPicker(function (currentShowPicker) {
4126
- return !currentShowPicker;
4127
- });
3635
+ setShowPicker(currentShowPicker => !currentShowPicker);
4128
3636
  }
4129
3637
  }
4130
- useEffect(function () {
4131
- var _buttonRef$current;
4132
- if (buttonRef !== null && buttonRef !== void 0 && (_buttonRef$current = buttonRef.current) !== null && _buttonRef$current !== void 0 && _buttonRef$current.style) {
3638
+ useEffect(() => {
3639
+ if (buttonRef?.current?.style) {
4133
3640
  buttonRef.current.style.position = "relative";
4134
3641
  setCustomButton(buttonRef.current);
4135
- } else if (buttonElement !== null && buttonElement !== void 0 && buttonElement.style) {
3642
+ } else if (buttonElement?.style) {
4136
3643
  buttonElement.style.position = "relative";
4137
3644
  setCustomButton(buttonElement);
4138
3645
  }
@@ -4171,16 +3678,16 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4171
3678
  * @return {string | null}
4172
3679
  */
4173
3680
  function getTextFromAtToCaret() {
4174
- var range = getRangeFromAtToCaret();
3681
+ const range = getRangeFromAtToCaret();
4175
3682
  if (!range) return null;
4176
- var text = range.text.substring(range.begin, range.end);
3683
+ const text = range.text.substring(range.begin, range.end);
4177
3684
  return text || null;
4178
3685
  }
4179
3686
 
4180
3687
  // eslint-disable-next-line valid-jsdoc
4181
3688
  /** */
4182
3689
  function deleteTextFromAtToCaret() {
4183
- var range = getRangeFromAtToCaret();
3690
+ const range = getRangeFromAtToCaret();
4184
3691
  if (!range) return;
4185
3692
 
4186
3693
  // @ts-ignore
@@ -4192,22 +3699,24 @@ function deleteTextFromAtToCaret() {
4192
3699
  * @return {{begin: number, end: number, text: string, element: Node} | null}
4193
3700
  */
4194
3701
  function getRangeFromAtToCaret() {
4195
- var elementWithFocus = getElementWithFocus();
3702
+ const elementWithFocus = getElementWithFocus();
4196
3703
  if (!elementWithFocus) {
4197
3704
  return null;
4198
3705
  }
4199
- var element = elementWithFocus.element,
4200
- caretOffset = elementWithFocus.caretOffset;
4201
- var text = element.textContent;
4202
- var lastAt = text.lastIndexOf("@");
3706
+ const {
3707
+ element,
3708
+ caretOffset
3709
+ } = elementWithFocus;
3710
+ const text = element.textContent;
3711
+ const lastAt = text.lastIndexOf("@");
4203
3712
  if (lastAt === -1 || lastAt >= caretOffset || lastAt !== 0 && text[lastAt - 1] !== " ") {
4204
3713
  return null;
4205
3714
  }
4206
3715
  return {
4207
3716
  begin: lastAt,
4208
3717
  end: caretOffset,
4209
- text: text,
4210
- element: element
3718
+ text,
3719
+ element
4211
3720
  };
4212
3721
  }
4213
3722
 
@@ -4216,14 +3725,14 @@ function getRangeFromAtToCaret() {
4216
3725
  * @return {{element: Node, caretOffset: number}}
4217
3726
  */
4218
3727
  function getElementWithFocus() {
4219
- var element = getSelectionStart();
3728
+ const element = getSelectionStart();
4220
3729
  if (element === null) {
4221
3730
  return null;
4222
3731
  }
4223
- var caretOffset = 0;
3732
+ let caretOffset = 0;
4224
3733
  if (typeof window.getSelection != "undefined") {
4225
- var range = window.getSelection().getRangeAt(0);
4226
- var preCaretRange = range.cloneRange();
3734
+ const range = window.getSelection().getRangeAt(0);
3735
+ const preCaretRange = range.cloneRange();
4227
3736
  preCaretRange.selectNodeContents(element);
4228
3737
  preCaretRange.setEnd(range.endContainer, range.endOffset);
4229
3738
  caretOffset = preCaretRange.toString().length;
@@ -4233,16 +3742,16 @@ function getElementWithFocus() {
4233
3742
  // @ts-ignore
4234
3743
  document.selection.type != "Control") {
4235
3744
  // @ts-ignore
4236
- var textRange = document.selection.createRange();
3745
+ const textRange = document.selection.createRange();
4237
3746
  // @ts-ignore
4238
- var preCaretTextRange = document.body.createTextRange();
3747
+ const preCaretTextRange = document.body.createTextRange();
4239
3748
  preCaretTextRange.moveToElementText(element);
4240
3749
  preCaretTextRange.setEndPoint("EndToEnd", textRange);
4241
3750
  caretOffset = preCaretTextRange.text.length;
4242
3751
  }
4243
3752
  return {
4244
- element: element,
4245
- caretOffset: caretOffset
3753
+ element,
3754
+ caretOffset
4246
3755
  };
4247
3756
  }
4248
3757
 
@@ -4251,10 +3760,12 @@ function getElementWithFocus() {
4251
3760
  * @return {Node | null}
4252
3761
  */
4253
3762
  function getSelectionStart() {
4254
- var node = document.getSelection().anchorNode;
4255
- return (node === null || node === void 0 ? void 0 : node.nodeType) == 3 ? node : null;
3763
+ const node = document.getSelection().anchorNode;
3764
+ return node?.nodeType == 3 ? node : null;
4256
3765
  }
4257
3766
 
3767
+ // @ts-check
3768
+
4258
3769
  /**
4259
3770
  * @typedef {import('../types/types').MentionUser} MentionUser
4260
3771
  */
@@ -4266,98 +3777,57 @@ function getSelectionStart() {
4266
3777
  * @returns {{mentionSearchText: string | null, mentionUsers: MentionUser[], onKeyUp: (event: React.KeyboardEvent) => void, onFocus: () => void, onSelectUser: () => void, loading: boolean}}
4267
3778
  */
4268
3779
  function useMention(searchMention) {
4269
- var _ref2;
4270
- var _useState = useState(false),
4271
- _useState2 = _slicedToArray(_useState, 2),
4272
- loading = _useState2[0],
4273
- setLoading = _useState2[1];
3780
+ const [loading, setLoading] = useState(false);
4274
3781
 
4275
3782
  /** @type {[MentionUser[], React.Dispatch<React.SetStateAction<MentionUser[]>>]} */
4276
- var _useState3 = useState([]),
4277
- _useState4 = _slicedToArray(_useState3, 2),
4278
- mentionUsers = _useState4[0],
4279
- setMentionUsers = _useState4[1];
3783
+ const [mentionUsers, setMentionUsers] = useState([]);
4280
3784
 
4281
3785
  /** @type {[string | null, React.Dispatch<React.SetStateAction<string | null>>]} */
4282
- var _useState5 = useState(null),
4283
- _useState6 = _slicedToArray(_useState5, 2),
4284
- mentionSearchText = _useState6[0],
4285
- setMentionSearchText = _useState6[1];
4286
- var onSelectUser = useCallback(function () {
3786
+ const [mentionSearchText, setMentionSearchText] = useState(null);
3787
+ const onSelectUser = useCallback(() => {
4287
3788
  deleteTextFromAtToCaret();
4288
3789
  setMentionUsers([]);
4289
3790
  }, []);
4290
3791
 
4291
3792
  /** */
4292
- var checkMentionText = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
4293
- var metionText, users;
4294
- return _regeneratorRuntime().wrap(function _callee$(_context) {
4295
- while (1) switch (_context.prev = _context.next) {
4296
- case 0:
4297
- metionText = getTextFromAtToCaret();
4298
- setMentionSearchText(metionText);
4299
- if (!(metionText === null)) {
4300
- _context.next = 6;
4301
- break;
4302
- }
4303
- setMentionUsers([]);
4304
- _context.next = 12;
4305
- break;
4306
- case 6:
4307
- setLoading(true);
4308
- _context.next = 9;
4309
- return searchMention(metionText);
4310
- case 9:
4311
- users = _context.sent;
4312
- setLoading(false);
4313
- setMentionUsers(users);
4314
- case 12:
4315
- case "end":
4316
- return _context.stop();
4317
- }
4318
- }, _callee);
4319
- })), [searchMention]);
3793
+ const checkMentionText = useCallback(async () => {
3794
+ const metionText = getTextFromAtToCaret();
3795
+ setMentionSearchText(metionText);
3796
+ if (metionText === null) {
3797
+ setMentionUsers([]);
3798
+ } else {
3799
+ setLoading(true);
3800
+ const users = await searchMention(metionText);
3801
+ setLoading(false);
3802
+ setMentionUsers(users);
3803
+ }
3804
+ }, [searchMention]);
4320
3805
 
4321
3806
  /** @type {(event: React.KeyboardEvent) => void} */
4322
- var onKeyUp = useCallback(function (_x) {
4323
- return (_ref2 = _ref2 || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(event) {
4324
- var _getElementWithFocus;
4325
- var elementWithFocus;
4326
- return _regeneratorRuntime().wrap(function _callee2$(_context2) {
4327
- while (1) switch (_context2.prev = _context2.next) {
4328
- case 0:
4329
- if (!(typeof searchMention !== "function")) {
4330
- _context2.next = 2;
4331
- break;
4332
- }
4333
- return _context2.abrupt("return");
4334
- case 2:
4335
- if (event.key === "Backspace" && (_getElementWithFocus = getElementWithFocus()) !== null && _getElementWithFocus !== void 0 && _getElementWithFocus.element.parentElement.hasAttribute("data-mention-id")) {
4336
- elementWithFocus = getElementWithFocus();
4337
- elementWithFocus.element.parentElement.remove();
4338
- } else if (!["ArrowUp", "ArrowDown", "Esc", "Escape"].includes(event.key)) {
4339
- checkMentionText();
4340
- }
4341
- case 3:
4342
- case "end":
4343
- return _context2.stop();
4344
- }
4345
- }, _callee2);
4346
- }))).apply(this, arguments);
3807
+ const onKeyUp = useCallback(async event => {
3808
+ if (typeof searchMention !== "function") return;
3809
+ if (event.key === "Backspace" && getElementWithFocus()?.element.parentElement.hasAttribute("data-mention-id")) {
3810
+ const elementWithFocus = getElementWithFocus();
3811
+ elementWithFocus.element.parentElement.remove();
3812
+ } else if (!["ArrowUp", "ArrowDown", "Esc", "Escape"].includes(event.key)) {
3813
+ checkMentionText();
3814
+ }
4347
3815
  }, [checkMentionText, searchMention]);
4348
- var onFocus = useCallback(function () {
3816
+ const onFocus = useCallback(() => {
4349
3817
  checkMentionText();
4350
3818
  }, [checkMentionText]);
4351
3819
  return {
4352
- mentionSearchText: mentionSearchText,
4353
- mentionUsers: mentionUsers,
4354
- onKeyUp: onKeyUp,
4355
- onFocus: onFocus,
4356
- onSelectUser: onSelectUser,
4357
- loading: loading
3820
+ mentionSearchText,
3821
+ mentionUsers,
3822
+ onKeyUp,
3823
+ onFocus,
3824
+ onSelectUser,
3825
+ loading
4358
3826
  };
4359
3827
  }
4360
3828
 
3829
+ // @ts-check
3830
+
4361
3831
  /**
4362
3832
  * @typedef {import('../types/types').MentionUser} MentionUser
4363
3833
  */
@@ -4380,36 +3850,32 @@ function useMention(searchMention) {
4380
3850
 
4381
3851
  // eslint-disable-next-line valid-jsdoc
4382
3852
  /** @type {React.ForwardRefRenderFunction<Ref, Props>} */
4383
- var MentionUserList = function MentionUserList(_ref, ref) {
4384
- var users = _ref.users,
4385
- mentionSearchText = _ref.mentionSearchText,
4386
- onSelect = _ref.onSelect,
4387
- addEventListener = _ref.addEventListener;
4388
- var _useState = useState(0),
4389
- _useState2 = _slicedToArray(_useState, 2),
4390
- selectedUser = _useState2[0],
4391
- setSelectedUser = _useState2[1];
4392
- useImperativeHandle(ref, function () {
4393
- return {
4394
- prevUser: function prevUser() {
4395
- setSelectedUser(function (currentSelectedUser) {
4396
- if (currentSelectedUser === 0) {
4397
- return 0;
4398
- }
4399
- return currentSelectedUser - 1;
4400
- });
4401
- },
4402
- nextUser: function nextUser() {
4403
- setSelectedUser(function (currentSelectedUser) {
4404
- if (currentSelectedUser === users.length - 1) {
4405
- return users.length - 1;
4406
- }
4407
- return currentSelectedUser + 1;
4408
- });
4409
- }
4410
- };
4411
- });
4412
- useEffect(function () {
3853
+ const MentionUserList = ({
3854
+ users,
3855
+ mentionSearchText,
3856
+ onSelect,
3857
+ addEventListener
3858
+ }, ref) => {
3859
+ const [selectedUser, setSelectedUser] = useState(0);
3860
+ useImperativeHandle(ref, () => ({
3861
+ prevUser: () => {
3862
+ setSelectedUser(currentSelectedUser => {
3863
+ if (currentSelectedUser === 0) {
3864
+ return 0;
3865
+ }
3866
+ return currentSelectedUser - 1;
3867
+ });
3868
+ },
3869
+ nextUser: () => {
3870
+ setSelectedUser(currentSelectedUser => {
3871
+ if (currentSelectedUser === users.length - 1) {
3872
+ return users.length - 1;
3873
+ }
3874
+ return currentSelectedUser + 1;
3875
+ });
3876
+ }
3877
+ }));
3878
+ useEffect(() => {
4413
3879
  setSelectedUser(0);
4414
3880
  }, [users]);
4415
3881
 
@@ -4420,20 +3886,20 @@ var MentionUserList = function MentionUserList(_ref, ref) {
4420
3886
  * @return {string}
4421
3887
  */
4422
3888
  function getMentionSelectedNameEl(selectedText, rest) {
4423
- return "<span class=\"react-input-emoji--mention--item--name__selected\" data-testid=\"metion-selected-word\">".concat(selectedText, "</span>").concat(rest);
3889
+ return `<span class="react-input-emoji--mention--item--name__selected" data-testid="metion-selected-word">${selectedText}</span>${rest}`;
4424
3890
  }
4425
3891
 
4426
3892
  /** @type {(MentionUser & {nameHtml: string})[]} */
4427
- var usersFiltered = useMemo(function () {
4428
- var searchText = mentionSearchText ? mentionSearchText.substring(1).toLocaleLowerCase() : "";
4429
- return users.map(function (user) {
4430
- var nameHtml = user.name;
3893
+ const usersFiltered = useMemo(() => {
3894
+ const searchText = mentionSearchText ? mentionSearchText.substring(1).toLocaleLowerCase() : "";
3895
+ return users.map(user => {
3896
+ let nameHtml = user.name;
4431
3897
  if (mentionSearchText && mentionSearchText.length > 1) {
4432
3898
  if (user.name.toLowerCase().startsWith(searchText)) {
4433
3899
  nameHtml = getMentionSelectedNameEl(user.name.substring(0, searchText.length), user.name.substring(searchText.length));
4434
3900
  } else {
4435
- var names = user.name.split(" ");
4436
- nameHtml = names.map(function (name) {
3901
+ const names = user.name.split(" ");
3902
+ nameHtml = names.map(name => {
4437
3903
  if (name.toLocaleLowerCase().startsWith(searchText)) {
4438
3904
  return getMentionSelectedNameEl(name.substring(0, searchText.length), name.substring(searchText.length));
4439
3905
  }
@@ -4441,9 +3907,10 @@ var MentionUserList = function MentionUserList(_ref, ref) {
4441
3907
  }).join(" ");
4442
3908
  }
4443
3909
  }
4444
- return _objectSpread2(_objectSpread2({}, user), {}, {
4445
- nameHtml: nameHtml
4446
- });
3910
+ return {
3911
+ ...user,
3912
+ nameHtml
3913
+ };
4447
3914
  });
4448
3915
  }, [mentionSearchText, users]);
4449
3916
 
@@ -4454,47 +3921,45 @@ var MentionUserList = function MentionUserList(_ref, ref) {
4454
3921
  * @returns {(event: React.MouseEvent) => void} event
4455
3922
  */
4456
3923
  function handleClick(user) {
4457
- return function (event) {
3924
+ return event => {
4458
3925
  event.stopPropagation();
4459
3926
  event.preventDefault();
4460
3927
  onSelect(user);
4461
3928
  };
4462
3929
  }
4463
- useEffect(function () {
4464
- var unsubscribe = addEventListener("enter", function (event) {
3930
+ useEffect(() => {
3931
+ const unsubscribe = addEventListener("enter", event => {
4465
3932
  event.stopPropagation();
4466
3933
  event.preventDefault();
4467
3934
  onSelect(usersFiltered[selectedUser]);
4468
3935
  });
4469
- return function () {
3936
+ return () => {
4470
3937
  unsubscribe();
4471
3938
  };
4472
3939
  }, [addEventListener, onSelect, selectedUser, usersFiltered]);
4473
3940
  return /*#__PURE__*/React.createElement("ul", {
4474
3941
  className: "react-input-emoji--mention--list",
4475
3942
  "data-testid": "mention-user-list"
4476
- }, usersFiltered.map(function (user, index) {
4477
- return /*#__PURE__*/React.createElement("li", {
4478
- key: user.id
4479
- }, /*#__PURE__*/React.createElement("button", {
4480
- type: "button",
4481
- onClick: handleClick(user),
4482
- className: "react-input-emoji--mention--item".concat(selectedUser === index ? " react-input-emoji--mention--item__selected" : ""),
4483
- onMouseOver: function onMouseOver() {
4484
- return setSelectedUser(index);
4485
- }
4486
- }, /*#__PURE__*/React.createElement("img", {
4487
- className: "react-input-emoji--mention--item--img",
4488
- src: user.image
4489
- }), /*#__PURE__*/React.createElement("div", {
4490
- className: "react-input-emoji--mention--item--name",
4491
- dangerouslySetInnerHTML: {
4492
- __html: user.nameHtml
4493
- }
4494
- })));
4495
- }));
3943
+ }, usersFiltered.map((user, index) => /*#__PURE__*/React.createElement("li", {
3944
+ key: user.id
3945
+ }, /*#__PURE__*/React.createElement("button", {
3946
+ type: "button",
3947
+ onClick: handleClick(user),
3948
+ className: `react-input-emoji--mention--item${selectedUser === index ? " react-input-emoji--mention--item__selected" : ""}`,
3949
+ onMouseOver: () => setSelectedUser(index)
3950
+ }, /*#__PURE__*/React.createElement("img", {
3951
+ className: "react-input-emoji--mention--item--img",
3952
+ src: user.image
3953
+ }), /*#__PURE__*/React.createElement("div", {
3954
+ className: "react-input-emoji--mention--item--name",
3955
+ dangerouslySetInnerHTML: {
3956
+ __html: user.nameHtml
3957
+ }
3958
+ })))));
4496
3959
  };
4497
- var MentionUserListWithRef = /*#__PURE__*/forwardRef(MentionUserList);
3960
+ const MentionUserListWithRef = /*#__PURE__*/forwardRef(MentionUserList);
3961
+
3962
+ // @ts-check
4498
3963
 
4499
3964
  /**
4500
3965
  * @typedef {import('../types/types').MentionUser} MetionUser
@@ -4518,55 +3983,54 @@ var MentionUserListWithRef = /*#__PURE__*/forwardRef(MentionUserList);
4518
3983
 
4519
3984
  // eslint-disable-next-line valid-jsdoc
4520
3985
  /** @type {React.FC<Props>} */
4521
- var MentionWrapper = function MentionWrapper(_ref) {
4522
- var searchMention = _ref.searchMention,
4523
- addEventListener = _ref.addEventListener,
4524
- appendContent = _ref.appendContent,
4525
- addSanitizeFn = _ref.addSanitizeFn;
3986
+ const MentionWrapper = ({
3987
+ searchMention,
3988
+ addEventListener,
3989
+ appendContent,
3990
+ addSanitizeFn
3991
+ }) => {
4526
3992
  /** @type {React.MutableRefObject<import('./mention-user-list').Ref | null>} */
4527
- var metionUserListRef = useRef(null);
4528
- var _useState = useState(false),
4529
- _useState2 = _slicedToArray(_useState, 2),
4530
- showUserList = _useState2[0],
4531
- setShowUserList = _useState2[1];
4532
- var _useMention = useMention(searchMention),
4533
- mentionSearchText = _useMention.mentionSearchText,
4534
- mentionUsers = _useMention.mentionUsers,
4535
- loading = _useMention.loading,
4536
- onKeyUp = _useMention.onKeyUp,
4537
- onFocus = _useMention.onFocus,
4538
- onSelectUser = _useMention.onSelectUser;
4539
- useEffect(function () {
4540
- addSanitizeFn(function (html) {
4541
- var container = document.createElement("div");
3993
+ const metionUserListRef = useRef(null);
3994
+ const [showUserList, setShowUserList] = useState(false);
3995
+ const {
3996
+ mentionSearchText,
3997
+ mentionUsers,
3998
+ loading,
3999
+ onKeyUp,
4000
+ onFocus,
4001
+ onSelectUser
4002
+ } = useMention(searchMention);
4003
+ useEffect(() => {
4004
+ addSanitizeFn(html => {
4005
+ const container = document.createElement("div");
4542
4006
  container.innerHTML = html;
4543
- var mentionsEl = Array.prototype.slice.call(container.querySelectorAll(".react-input-emoji--mention--text"));
4544
- mentionsEl.forEach(function (mentionEl) {
4545
- container.innerHTML = container.innerHTML.replace(mentionEl.outerHTML, "@[".concat(mentionEl.dataset.mentionName, "](userId:").concat(mentionEl.dataset.mentionId, ")"));
4007
+ const mentionsEl = Array.prototype.slice.call(container.querySelectorAll(".react-input-emoji--mention--text"));
4008
+ mentionsEl.forEach(mentionEl => {
4009
+ container.innerHTML = container.innerHTML.replace(mentionEl.outerHTML, `@[${mentionEl.dataset.mentionName}](userId:${mentionEl.dataset.mentionId})`);
4546
4010
  });
4547
4011
  return container.innerHTML;
4548
4012
  });
4549
4013
  }, [addSanitizeFn]);
4550
- useEffect(function () {
4014
+ useEffect(() => {
4551
4015
  setShowUserList(mentionUsers.length > 0);
4552
4016
  }, [mentionUsers]);
4553
- useEffect(function () {
4017
+ useEffect(() => {
4554
4018
  /** */
4555
4019
  function checkClickOutside() {
4556
4020
  setShowUserList(false);
4557
4021
  }
4558
4022
  document.addEventListener("click", checkClickOutside);
4559
- return function () {
4023
+ return () => {
4560
4024
  document.removeEventListener("click", checkClickOutside);
4561
4025
  };
4562
4026
  }, []);
4563
- useEffect(function () {
4564
- var unsubscribe = addEventListener("keyUp", onKeyUp);
4565
- return function () {
4027
+ useEffect(() => {
4028
+ const unsubscribe = addEventListener("keyUp", onKeyUp);
4029
+ return () => {
4566
4030
  unsubscribe();
4567
4031
  };
4568
4032
  }, [addEventListener, onKeyUp]);
4569
- useEffect(function () {
4033
+ useEffect(() => {
4570
4034
  /**
4571
4035
  *
4572
4036
  * @param {React.KeyboardEvent} event
@@ -4579,30 +4043,30 @@ var MentionWrapper = function MentionWrapper(_ref) {
4579
4043
  break;
4580
4044
  }
4581
4045
  }
4582
- var unsubscribe = addEventListener("keyDown", handleKeyDown);
4583
- return function () {
4046
+ const unsubscribe = addEventListener("keyDown", handleKeyDown);
4047
+ return () => {
4584
4048
  unsubscribe();
4585
4049
  };
4586
4050
  }, [addEventListener]);
4587
- useEffect(function () {
4588
- var unsubscribe = addEventListener("focus", onFocus);
4589
- return function () {
4051
+ useEffect(() => {
4052
+ const unsubscribe = addEventListener("focus", onFocus);
4053
+ return () => {
4590
4054
  unsubscribe();
4591
4055
  };
4592
4056
  }, [addEventListener, onFocus]);
4593
- useEffect(function () {
4057
+ useEffect(() => {
4594
4058
  if (showUserList) {
4595
- var unsubscribeArrowUp = addEventListener("arrowUp", function (event) {
4059
+ const unsubscribeArrowUp = addEventListener("arrowUp", event => {
4596
4060
  event.stopPropagation();
4597
4061
  event.preventDefault();
4598
4062
  metionUserListRef.current.prevUser();
4599
4063
  });
4600
- var unsubscribeArrowDown = addEventListener("arrowDown", function (event) {
4064
+ const unsubscribeArrowDown = addEventListener("arrowDown", event => {
4601
4065
  event.stopPropagation();
4602
4066
  event.preventDefault();
4603
4067
  metionUserListRef.current.nextUser();
4604
4068
  });
4605
- return function () {
4069
+ return () => {
4606
4070
  unsubscribeArrowUp();
4607
4071
  unsubscribeArrowDown();
4608
4072
  };
@@ -4615,7 +4079,7 @@ var MentionWrapper = function MentionWrapper(_ref) {
4615
4079
  */
4616
4080
  function handleSelect(user) {
4617
4081
  onSelectUser();
4618
- appendContent("<span class=\"react-input-emoji--mention--text\" data-mention-id=\"".concat(user.id, "\" data-mention-name=\"").concat(user.name, "\">@").concat(user.name, "</span> "));
4082
+ appendContent(`<span class="react-input-emoji--mention--text" data-mention-id="${user.id}" data-mention-name="${user.name}">@${user.name}</span> `);
4619
4083
  }
4620
4084
  return /*#__PURE__*/React.createElement(React.Fragment, null, loading ? /*#__PURE__*/React.createElement("div", {
4621
4085
  className: "react-input-emoji--mention--container"
@@ -4625,9 +4089,7 @@ var MentionWrapper = function MentionWrapper(_ref) {
4625
4089
  className: "react-input-emoji--mention--loading--spinner"
4626
4090
  }, "Loading..."))) : showUserList && /*#__PURE__*/React.createElement("div", {
4627
4091
  className: "react-input-emoji--mention--container",
4628
- onClick: function onClick(evt) {
4629
- return evt.stopPropagation();
4630
- }
4092
+ onClick: evt => evt.stopPropagation()
4631
4093
  }, /*#__PURE__*/React.createElement(MentionUserListWithRef, {
4632
4094
  ref: metionUserListRef,
4633
4095
  mentionSearchText: mentionSearchText,
@@ -4646,20 +4108,16 @@ var MentionWrapper = function MentionWrapper(_ref) {
4646
4108
  */
4647
4109
  function createObserver() {
4648
4110
  /** @type {import('../types/types').Listerner<T>[]} */
4649
- var listeners = [];
4111
+ let listeners = [];
4650
4112
  return {
4651
- subscribe: function subscribe(listener) {
4113
+ subscribe: listener => {
4652
4114
  listeners.push(listener);
4653
- return function () {
4654
- listeners = listeners.filter(function (l) {
4655
- return l !== listener;
4656
- });
4115
+ return () => {
4116
+ listeners = listeners.filter(l => l !== listener);
4657
4117
  };
4658
4118
  },
4659
- publish: function publish(event) {
4660
- listeners.forEach(function (listener) {
4661
- return listener(event);
4662
- });
4119
+ publish: event => {
4120
+ listeners.forEach(listener => listener(event));
4663
4121
  },
4664
4122
  get currentListerners() {
4665
4123
  return listeners;
@@ -4677,28 +4135,26 @@ function createObserver() {
4677
4135
  /** */
4678
4136
  function useEventListeners() {
4679
4137
  /** @type {TextInputListeners} */
4680
- var listeners = useMemo(function () {
4681
- return {
4682
- keyDown: createObserver(),
4683
- keyUp: createObserver(),
4684
- arrowUp: createObserver(),
4685
- arrowDown: createObserver(),
4686
- enter: createObserver(),
4687
- focus: createObserver(),
4688
- blur: createObserver()
4689
- };
4690
- }, []);
4138
+ const listeners = useMemo(() => ({
4139
+ keyDown: createObserver(),
4140
+ keyUp: createObserver(),
4141
+ arrowUp: createObserver(),
4142
+ arrowDown: createObserver(),
4143
+ enter: createObserver(),
4144
+ focus: createObserver(),
4145
+ blur: createObserver()
4146
+ }), []);
4691
4147
 
4692
4148
  /**
4693
4149
  * @template {keyof TextInputListeners} T, K
4694
4150
  * @type {(event: keyof TextInputListeners, fn: import('../types/types').Listerner<any>) => () => void}
4695
4151
  */
4696
- var addEventListener = useCallback(function (event, fn) {
4152
+ const addEventListener = useCallback((event, fn) => {
4697
4153
  return listeners[event].subscribe(fn);
4698
4154
  }, [listeners]);
4699
4155
  return {
4700
- addEventListener: addEventListener,
4701
- listeners: listeners
4156
+ addEventListener,
4157
+ listeners
4702
4158
  };
4703
4159
  }
4704
4160
 
@@ -4712,23 +4168,23 @@ function useEventListeners() {
4712
4168
  /** */
4713
4169
  function usePollute() {
4714
4170
  /** @type {React.MutableRefObject<PolluteFn[]>} */
4715
- var polluteFnsRef = useRef([]);
4171
+ const polluteFnsRef = useRef([]);
4716
4172
 
4717
4173
  /** @type {(fn: PolluteFn) => void} */
4718
- var addPolluteFn = useCallback(function (fn) {
4174
+ const addPolluteFn = useCallback(fn => {
4719
4175
  polluteFnsRef.current.push(fn);
4720
4176
  }, []);
4721
4177
 
4722
4178
  /** @type {(html: string) => string} */
4723
- var pollute = useCallback(function (text) {
4724
- var result = polluteFnsRef.current.reduce(function (acc, fn) {
4179
+ const pollute = useCallback(text => {
4180
+ const result = polluteFnsRef.current.reduce((acc, fn) => {
4725
4181
  return fn(acc);
4726
4182
  }, text);
4727
4183
  return result;
4728
4184
  }, []);
4729
4185
  return {
4730
- addPolluteFn: addPolluteFn,
4731
- pollute: pollute
4186
+ addPolluteFn,
4187
+ pollute
4732
4188
  };
4733
4189
  }
4734
4190
 
@@ -4784,72 +4240,77 @@ function usePollute() {
4784
4240
  * @return {JSX.Element}
4785
4241
  */
4786
4242
  function InputEmoji(props, ref) {
4787
- var onChange = props.onChange,
4788
- onEnter = props.onEnter,
4789
- onResize = props.onResize,
4790
- onClick = props.onClick,
4791
- onFocus = props.onFocus,
4792
- onBlur = props.onBlur,
4793
- onKeyDown = props.onKeyDown,
4794
- theme = props.theme,
4795
- cleanOnEnter = props.cleanOnEnter,
4796
- placeholder = props.placeholder,
4797
- maxLength = props.maxLength,
4798
- keepOpened = props.keepOpened,
4799
- inputClass = props.inputClass,
4800
- disableRecent = props.disableRecent,
4801
- tabIndex = props.tabIndex,
4802
- value = props.value,
4803
- customEmojis = props.customEmojis,
4804
- language = props.language,
4805
- searchMention = props.searchMention,
4806
- buttonElement = props.buttonElement,
4807
- buttonRef = props.buttonRef,
4808
- shouldReturn = props.shouldReturn,
4809
- shouldConvertEmojiToImage = props.shouldConvertEmojiToImage,
4810
- borderRadius = props.borderRadius,
4811
- borderColor = props.borderColor,
4812
- fontSize = props.fontSize,
4813
- fontFamily = props.fontFamily,
4814
- background = props.background,
4815
- placeholderColor = props.placeholderColor,
4816
- color = props.color;
4243
+ const {
4244
+ onChange,
4245
+ onEnter,
4246
+ onResize,
4247
+ onClick,
4248
+ onFocus,
4249
+ onBlur,
4250
+ onKeyDown,
4251
+ theme,
4252
+ cleanOnEnter,
4253
+ placeholder,
4254
+ maxLength,
4255
+ keepOpened,
4256
+ inputClass,
4257
+ disableRecent,
4258
+ tabIndex,
4259
+ value,
4260
+ customEmojis,
4261
+ language,
4262
+ searchMention,
4263
+ buttonElement,
4264
+ buttonRef,
4265
+ shouldReturn,
4266
+ shouldConvertEmojiToImage,
4267
+ // style
4268
+ borderRadius,
4269
+ borderColor,
4270
+ fontSize,
4271
+ fontFamily,
4272
+ background,
4273
+ placeholderColor,
4274
+ color
4275
+ } = props;
4817
4276
 
4818
4277
  /** @type {React.MutableRefObject<import('./text-input').Ref | null>} */
4819
- var textInputRef = useRef(null);
4820
- var _useEventListeners = useEventListeners(),
4821
- addEventListener = _useEventListeners.addEventListener,
4822
- listeners = _useEventListeners.listeners;
4823
- var _useSanitize = useSanitize(shouldReturn, shouldConvertEmojiToImage),
4824
- addSanitizeFn = _useSanitize.addSanitizeFn,
4825
- sanitize = _useSanitize.sanitize,
4826
- sanitizedTextRef = _useSanitize.sanitizedTextRef;
4827
- var _usePollute = usePollute(),
4828
- addPolluteFn = _usePollute.addPolluteFn,
4829
- pollute = _usePollute.pollute;
4830
- var updateHTML = useCallback(function () {
4831
- var nextValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
4278
+ const textInputRef = useRef(null);
4279
+ const {
4280
+ addEventListener,
4281
+ listeners
4282
+ } = useEventListeners();
4283
+ const {
4284
+ addSanitizeFn,
4285
+ sanitize,
4286
+ sanitizedTextRef
4287
+ } = useSanitize(shouldReturn, shouldConvertEmojiToImage);
4288
+ const {
4289
+ addPolluteFn,
4290
+ pollute
4291
+ } = usePollute();
4292
+ const updateHTML = useCallback((nextValue = "") => {
4832
4293
  if (textInputRef.current === null) return;
4833
4294
  textInputRef.current.html = replaceAllTextEmojis(nextValue);
4834
4295
  sanitizedTextRef.current = nextValue;
4835
4296
  }, [sanitizedTextRef]);
4836
- var setValue = useCallback(
4297
+ const setValue = useCallback(
4837
4298
  /**
4838
4299
  *
4839
4300
  * @param {string} value
4840
4301
  */
4841
- function (value) {
4302
+ value => {
4842
4303
  updateHTML(value);
4843
4304
  }, [updateHTML]);
4844
- var emitChange = useEmit(textInputRef, onResize, onChange);
4305
+ const emitChange = useEmit(textInputRef, onResize, onChange);
4845
4306
  useExpose({
4846
- ref: ref,
4847
- setValue: setValue,
4848
- textInputRef: textInputRef,
4849
- emitChange: emitChange,
4850
- shouldConvertEmojiToImage: shouldConvertEmojiToImage
4307
+ ref,
4308
+ setValue,
4309
+ textInputRef,
4310
+ emitChange,
4311
+ shouldConvertEmojiToImage
4851
4312
  });
4852
- useEffect(function () {
4313
+ useEffect(() => {
4853
4314
  if (sanitizedTextRef.current !== value) {
4854
4315
  setValue(value);
4855
4316
  }
@@ -4859,7 +4320,7 @@ function InputEmoji(props, ref) {
4859
4320
  // updateHTML();
4860
4321
  // }, [updateHTML]);
4861
4322
 
4862
- useEffect(function () {
4323
+ useEffect(() => {
4863
4324
  /**
4864
4325
  * Handle keydown event
4865
4326
  * @param {React.KeyboardEvent} event
@@ -4871,7 +4332,7 @@ function InputEmoji(props, ref) {
4871
4332
  }
4872
4333
  if (event.key === "Enter" && textInputRef.current) {
4873
4334
  event.preventDefault();
4874
- var text = sanitize(textInputRef.current.html);
4335
+ const text = sanitize(textInputRef.current.html);
4875
4336
  emitChange(sanitizedTextRef.current);
4876
4337
  if (typeof onEnter === "function" && listeners.enter.currentListerners.length === 0) {
4877
4338
  onEnter(text);
@@ -4889,12 +4350,12 @@ function InputEmoji(props, ref) {
4889
4350
  }
4890
4351
  return true;
4891
4352
  }
4892
- var unsubscribe = addEventListener("keyDown", handleKeydown);
4893
- return function () {
4353
+ const unsubscribe = addEventListener("keyDown", handleKeydown);
4354
+ return () => {
4894
4355
  unsubscribe();
4895
4356
  };
4896
4357
  }, [addEventListener, cleanOnEnter, emitChange, listeners.enter.currentListerners.length, maxLength, onEnter, onKeyDown, sanitize, sanitizedTextRef, updateHTML]);
4897
- useEffect(function () {
4358
+ useEffect(() => {
4898
4359
  /** */
4899
4360
  function handleFocus() {
4900
4361
  if (typeof onClick === "function") {
@@ -4904,20 +4365,20 @@ function InputEmoji(props, ref) {
4904
4365
  onFocus();
4905
4366
  }
4906
4367
  }
4907
- var unsubscribe = addEventListener("focus", handleFocus);
4908
- return function () {
4368
+ const unsubscribe = addEventListener("focus", handleFocus);
4369
+ return () => {
4909
4370
  unsubscribe();
4910
4371
  };
4911
4372
  }, [addEventListener, onClick, onFocus]);
4912
- useEffect(function () {
4373
+ useEffect(() => {
4913
4374
  /** */
4914
4375
  function handleBlur() {
4915
4376
  if (typeof onBlur === "function") {
4916
4377
  onBlur();
4917
4378
  }
4918
4379
  }
4919
- var unsubscribe = addEventListener("blur", handleBlur);
4920
- return function () {
4380
+ const unsubscribe = addEventListener("blur", handleBlur);
4381
+ return () => {
4921
4382
  unsubscribe();
4922
4383
  };
4923
4384
  }, [addEventListener, onBlur]);
@@ -4952,7 +4413,7 @@ function InputEmoji(props, ref) {
4952
4413
  */
4953
4414
  function handlePaste(event) {
4954
4415
  event.preventDefault();
4955
- var content;
4416
+ let content;
4956
4417
  if (event.clipboardData) {
4957
4418
  content = event.clipboardData.getData("text/plain");
4958
4419
  content = pollute(content);
@@ -4980,13 +4441,13 @@ function InputEmoji(props, ref) {
4980
4441
  onEnter: listeners.enter.publish,
4981
4442
  placeholder: placeholder,
4982
4443
  style: {
4983
- borderRadius: borderRadius,
4984
- borderColor: borderColor,
4985
- fontSize: fontSize,
4986
- fontFamily: fontFamily,
4987
- background: background,
4988
- placeholderColor: placeholderColor,
4989
- color: color
4444
+ borderRadius,
4445
+ borderColor,
4446
+ fontSize,
4447
+ fontFamily,
4448
+ background,
4449
+ placeholderColor,
4450
+ color
4990
4451
  },
4991
4452
  tabIndex: tabIndex,
4992
4453
  className: inputClass,
@@ -5004,7 +4465,7 @@ function InputEmoji(props, ref) {
5004
4465
  language: language
5005
4466
  }));
5006
4467
  }
5007
- var InputEmojiWithRef = /*#__PURE__*/forwardRef(InputEmoji);
4468
+ const InputEmojiWithRef = /*#__PURE__*/forwardRef(InputEmoji);
5008
4469
  InputEmojiWithRef.defaultProps = {
5009
4470
  theme: /** @type {const} */"auto",
5010
4471
  height: 30,