react-input-emoji 5.0.0 → 5.0.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.es.js +1061 -435
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +1061 -435
- package/dist/index.js.map +1 -1
- package/package.json +2 -1
package/dist/index.js
CHANGED
@@ -42,7 +42,539 @@ function styleInject(css, ref) {
|
|
42
42
|
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";
|
43
43
|
styleInject(css_248z);
|
44
44
|
|
45
|
-
|
45
|
+
function ownKeys(object, enumerableOnly) {
|
46
|
+
var keys = Object.keys(object);
|
47
|
+
|
48
|
+
if (Object.getOwnPropertySymbols) {
|
49
|
+
var symbols = Object.getOwnPropertySymbols(object);
|
50
|
+
enumerableOnly && (symbols = symbols.filter(function (sym) {
|
51
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
52
|
+
})), keys.push.apply(keys, symbols);
|
53
|
+
}
|
54
|
+
|
55
|
+
return keys;
|
56
|
+
}
|
57
|
+
|
58
|
+
function _objectSpread2(target) {
|
59
|
+
for (var i = 1; i < arguments.length; i++) {
|
60
|
+
var source = null != arguments[i] ? arguments[i] : {};
|
61
|
+
i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
|
62
|
+
_defineProperty(target, key, source[key]);
|
63
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
|
64
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
65
|
+
});
|
66
|
+
}
|
67
|
+
|
68
|
+
return target;
|
69
|
+
}
|
70
|
+
|
71
|
+
function _regeneratorRuntime() {
|
72
|
+
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
|
73
|
+
|
74
|
+
_regeneratorRuntime = function () {
|
75
|
+
return exports;
|
76
|
+
};
|
77
|
+
|
78
|
+
var exports = {},
|
79
|
+
Op = Object.prototype,
|
80
|
+
hasOwn = Op.hasOwnProperty,
|
81
|
+
$Symbol = "function" == typeof Symbol ? Symbol : {},
|
82
|
+
iteratorSymbol = $Symbol.iterator || "@@iterator",
|
83
|
+
asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator",
|
84
|
+
toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
|
85
|
+
|
86
|
+
function define(obj, key, value) {
|
87
|
+
return Object.defineProperty(obj, key, {
|
88
|
+
value: value,
|
89
|
+
enumerable: !0,
|
90
|
+
configurable: !0,
|
91
|
+
writable: !0
|
92
|
+
}), obj[key];
|
93
|
+
}
|
94
|
+
|
95
|
+
try {
|
96
|
+
define({}, "");
|
97
|
+
} catch (err) {
|
98
|
+
define = function (obj, key, value) {
|
99
|
+
return obj[key] = value;
|
100
|
+
};
|
101
|
+
}
|
102
|
+
|
103
|
+
function wrap(innerFn, outerFn, self, tryLocsList) {
|
104
|
+
var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator,
|
105
|
+
generator = Object.create(protoGenerator.prototype),
|
106
|
+
context = new Context(tryLocsList || []);
|
107
|
+
return generator._invoke = function (innerFn, self, context) {
|
108
|
+
var state = "suspendedStart";
|
109
|
+
return function (method, arg) {
|
110
|
+
if ("executing" === state) throw new Error("Generator is already running");
|
111
|
+
|
112
|
+
if ("completed" === state) {
|
113
|
+
if ("throw" === method) throw arg;
|
114
|
+
return doneResult();
|
115
|
+
}
|
116
|
+
|
117
|
+
for (context.method = method, context.arg = arg;;) {
|
118
|
+
var delegate = context.delegate;
|
119
|
+
|
120
|
+
if (delegate) {
|
121
|
+
var delegateResult = maybeInvokeDelegate(delegate, context);
|
122
|
+
|
123
|
+
if (delegateResult) {
|
124
|
+
if (delegateResult === ContinueSentinel) continue;
|
125
|
+
return delegateResult;
|
126
|
+
}
|
127
|
+
}
|
128
|
+
|
129
|
+
if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) {
|
130
|
+
if ("suspendedStart" === state) throw state = "completed", context.arg;
|
131
|
+
context.dispatchException(context.arg);
|
132
|
+
} else "return" === context.method && context.abrupt("return", context.arg);
|
133
|
+
state = "executing";
|
134
|
+
var record = tryCatch(innerFn, self, context);
|
135
|
+
|
136
|
+
if ("normal" === record.type) {
|
137
|
+
if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue;
|
138
|
+
return {
|
139
|
+
value: record.arg,
|
140
|
+
done: context.done
|
141
|
+
};
|
142
|
+
}
|
143
|
+
|
144
|
+
"throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg);
|
145
|
+
}
|
146
|
+
};
|
147
|
+
}(innerFn, self, context), generator;
|
148
|
+
}
|
149
|
+
|
150
|
+
function tryCatch(fn, obj, arg) {
|
151
|
+
try {
|
152
|
+
return {
|
153
|
+
type: "normal",
|
154
|
+
arg: fn.call(obj, arg)
|
155
|
+
};
|
156
|
+
} catch (err) {
|
157
|
+
return {
|
158
|
+
type: "throw",
|
159
|
+
arg: err
|
160
|
+
};
|
161
|
+
}
|
162
|
+
}
|
163
|
+
|
164
|
+
exports.wrap = wrap;
|
165
|
+
var ContinueSentinel = {};
|
166
|
+
|
167
|
+
function Generator() {}
|
168
|
+
|
169
|
+
function GeneratorFunction() {}
|
170
|
+
|
171
|
+
function GeneratorFunctionPrototype() {}
|
172
|
+
|
173
|
+
var IteratorPrototype = {};
|
174
|
+
define(IteratorPrototype, iteratorSymbol, function () {
|
175
|
+
return this;
|
176
|
+
});
|
177
|
+
var getProto = Object.getPrototypeOf,
|
178
|
+
NativeIteratorPrototype = getProto && getProto(getProto(values([])));
|
179
|
+
NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype);
|
180
|
+
var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
|
181
|
+
|
182
|
+
function defineIteratorMethods(prototype) {
|
183
|
+
["next", "throw", "return"].forEach(function (method) {
|
184
|
+
define(prototype, method, function (arg) {
|
185
|
+
return this._invoke(method, arg);
|
186
|
+
});
|
187
|
+
});
|
188
|
+
}
|
189
|
+
|
190
|
+
function AsyncIterator(generator, PromiseImpl) {
|
191
|
+
function invoke(method, arg, resolve, reject) {
|
192
|
+
var record = tryCatch(generator[method], generator, arg);
|
193
|
+
|
194
|
+
if ("throw" !== record.type) {
|
195
|
+
var result = record.arg,
|
196
|
+
value = result.value;
|
197
|
+
return value && "object" == typeof value && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) {
|
198
|
+
invoke("next", value, resolve, reject);
|
199
|
+
}, function (err) {
|
200
|
+
invoke("throw", err, resolve, reject);
|
201
|
+
}) : PromiseImpl.resolve(value).then(function (unwrapped) {
|
202
|
+
result.value = unwrapped, resolve(result);
|
203
|
+
}, function (error) {
|
204
|
+
return invoke("throw", error, resolve, reject);
|
205
|
+
});
|
206
|
+
}
|
207
|
+
|
208
|
+
reject(record.arg);
|
209
|
+
}
|
210
|
+
|
211
|
+
var previousPromise;
|
212
|
+
|
213
|
+
this._invoke = function (method, arg) {
|
214
|
+
function callInvokeWithMethodAndArg() {
|
215
|
+
return new PromiseImpl(function (resolve, reject) {
|
216
|
+
invoke(method, arg, resolve, reject);
|
217
|
+
});
|
218
|
+
}
|
219
|
+
|
220
|
+
return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
|
221
|
+
};
|
222
|
+
}
|
223
|
+
|
224
|
+
function maybeInvokeDelegate(delegate, context) {
|
225
|
+
var method = delegate.iterator[context.method];
|
226
|
+
|
227
|
+
if (undefined === method) {
|
228
|
+
if (context.delegate = null, "throw" === context.method) {
|
229
|
+
if (delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel;
|
230
|
+
context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method");
|
231
|
+
}
|
232
|
+
|
233
|
+
return ContinueSentinel;
|
234
|
+
}
|
235
|
+
|
236
|
+
var record = tryCatch(method, delegate.iterator, context.arg);
|
237
|
+
if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel;
|
238
|
+
var info = record.arg;
|
239
|
+
return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel);
|
240
|
+
}
|
241
|
+
|
242
|
+
function pushTryEntry(locs) {
|
243
|
+
var entry = {
|
244
|
+
tryLoc: locs[0]
|
245
|
+
};
|
246
|
+
1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry);
|
247
|
+
}
|
248
|
+
|
249
|
+
function resetTryEntry(entry) {
|
250
|
+
var record = entry.completion || {};
|
251
|
+
record.type = "normal", delete record.arg, entry.completion = record;
|
252
|
+
}
|
253
|
+
|
254
|
+
function Context(tryLocsList) {
|
255
|
+
this.tryEntries = [{
|
256
|
+
tryLoc: "root"
|
257
|
+
}], tryLocsList.forEach(pushTryEntry, this), this.reset(!0);
|
258
|
+
}
|
259
|
+
|
260
|
+
function values(iterable) {
|
261
|
+
if (iterable) {
|
262
|
+
var iteratorMethod = iterable[iteratorSymbol];
|
263
|
+
if (iteratorMethod) return iteratorMethod.call(iterable);
|
264
|
+
if ("function" == typeof iterable.next) return iterable;
|
265
|
+
|
266
|
+
if (!isNaN(iterable.length)) {
|
267
|
+
var i = -1,
|
268
|
+
next = function next() {
|
269
|
+
for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next;
|
270
|
+
|
271
|
+
return next.value = undefined, next.done = !0, next;
|
272
|
+
};
|
273
|
+
|
274
|
+
return next.next = next;
|
275
|
+
}
|
276
|
+
}
|
277
|
+
|
278
|
+
return {
|
279
|
+
next: doneResult
|
280
|
+
};
|
281
|
+
}
|
282
|
+
|
283
|
+
function doneResult() {
|
284
|
+
return {
|
285
|
+
value: undefined,
|
286
|
+
done: !0
|
287
|
+
};
|
288
|
+
}
|
289
|
+
|
290
|
+
return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) {
|
291
|
+
var ctor = "function" == typeof genFun && genFun.constructor;
|
292
|
+
return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name));
|
293
|
+
}, exports.mark = function (genFun) {
|
294
|
+
return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun;
|
295
|
+
}, exports.awrap = function (arg) {
|
296
|
+
return {
|
297
|
+
__await: arg
|
298
|
+
};
|
299
|
+
}, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
|
300
|
+
return this;
|
301
|
+
}), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) {
|
302
|
+
void 0 === PromiseImpl && (PromiseImpl = Promise);
|
303
|
+
var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl);
|
304
|
+
return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) {
|
305
|
+
return result.done ? result.value : iter.next();
|
306
|
+
});
|
307
|
+
}, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () {
|
308
|
+
return this;
|
309
|
+
}), define(Gp, "toString", function () {
|
310
|
+
return "[object Generator]";
|
311
|
+
}), exports.keys = function (object) {
|
312
|
+
var keys = [];
|
313
|
+
|
314
|
+
for (var key in object) keys.push(key);
|
315
|
+
|
316
|
+
return keys.reverse(), function next() {
|
317
|
+
for (; keys.length;) {
|
318
|
+
var key = keys.pop();
|
319
|
+
if (key in object) return next.value = key, next.done = !1, next;
|
320
|
+
}
|
321
|
+
|
322
|
+
return next.done = !0, next;
|
323
|
+
};
|
324
|
+
}, exports.values = values, Context.prototype = {
|
325
|
+
constructor: Context,
|
326
|
+
reset: function (skipTempReset) {
|
327
|
+
if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined);
|
328
|
+
},
|
329
|
+
stop: function () {
|
330
|
+
this.done = !0;
|
331
|
+
var rootRecord = this.tryEntries[0].completion;
|
332
|
+
if ("throw" === rootRecord.type) throw rootRecord.arg;
|
333
|
+
return this.rval;
|
334
|
+
},
|
335
|
+
dispatchException: function (exception) {
|
336
|
+
if (this.done) throw exception;
|
337
|
+
var context = this;
|
338
|
+
|
339
|
+
function handle(loc, caught) {
|
340
|
+
return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught;
|
341
|
+
}
|
342
|
+
|
343
|
+
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
|
344
|
+
var entry = this.tryEntries[i],
|
345
|
+
record = entry.completion;
|
346
|
+
if ("root" === entry.tryLoc) return handle("end");
|
347
|
+
|
348
|
+
if (entry.tryLoc <= this.prev) {
|
349
|
+
var hasCatch = hasOwn.call(entry, "catchLoc"),
|
350
|
+
hasFinally = hasOwn.call(entry, "finallyLoc");
|
351
|
+
|
352
|
+
if (hasCatch && hasFinally) {
|
353
|
+
if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
|
354
|
+
if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
|
355
|
+
} else if (hasCatch) {
|
356
|
+
if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
|
357
|
+
} else {
|
358
|
+
if (!hasFinally) throw new Error("try statement without catch or finally");
|
359
|
+
if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
|
360
|
+
}
|
361
|
+
}
|
362
|
+
}
|
363
|
+
},
|
364
|
+
abrupt: function (type, arg) {
|
365
|
+
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
|
366
|
+
var entry = this.tryEntries[i];
|
367
|
+
|
368
|
+
if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) {
|
369
|
+
var finallyEntry = entry;
|
370
|
+
break;
|
371
|
+
}
|
372
|
+
}
|
373
|
+
|
374
|
+
finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null);
|
375
|
+
var record = finallyEntry ? finallyEntry.completion : {};
|
376
|
+
return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record);
|
377
|
+
},
|
378
|
+
complete: function (record, afterLoc) {
|
379
|
+
if ("throw" === record.type) throw record.arg;
|
380
|
+
return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel;
|
381
|
+
},
|
382
|
+
finish: function (finallyLoc) {
|
383
|
+
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
|
384
|
+
var entry = this.tryEntries[i];
|
385
|
+
if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel;
|
386
|
+
}
|
387
|
+
},
|
388
|
+
catch: function (tryLoc) {
|
389
|
+
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
|
390
|
+
var entry = this.tryEntries[i];
|
391
|
+
|
392
|
+
if (entry.tryLoc === tryLoc) {
|
393
|
+
var record = entry.completion;
|
394
|
+
|
395
|
+
if ("throw" === record.type) {
|
396
|
+
var thrown = record.arg;
|
397
|
+
resetTryEntry(entry);
|
398
|
+
}
|
399
|
+
|
400
|
+
return thrown;
|
401
|
+
}
|
402
|
+
}
|
403
|
+
|
404
|
+
throw new Error("illegal catch attempt");
|
405
|
+
},
|
406
|
+
delegateYield: function (iterable, resultName, nextLoc) {
|
407
|
+
return this.delegate = {
|
408
|
+
iterator: values(iterable),
|
409
|
+
resultName: resultName,
|
410
|
+
nextLoc: nextLoc
|
411
|
+
}, "next" === this.method && (this.arg = undefined), ContinueSentinel;
|
412
|
+
}
|
413
|
+
}, exports;
|
414
|
+
}
|
415
|
+
|
416
|
+
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
417
|
+
try {
|
418
|
+
var info = gen[key](arg);
|
419
|
+
var value = info.value;
|
420
|
+
} catch (error) {
|
421
|
+
reject(error);
|
422
|
+
return;
|
423
|
+
}
|
424
|
+
|
425
|
+
if (info.done) {
|
426
|
+
resolve(value);
|
427
|
+
} else {
|
428
|
+
Promise.resolve(value).then(_next, _throw);
|
429
|
+
}
|
430
|
+
}
|
431
|
+
|
432
|
+
function _asyncToGenerator(fn) {
|
433
|
+
return function () {
|
434
|
+
var self = this,
|
435
|
+
args = arguments;
|
436
|
+
return new Promise(function (resolve, reject) {
|
437
|
+
var gen = fn.apply(self, args);
|
438
|
+
|
439
|
+
function _next(value) {
|
440
|
+
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
441
|
+
}
|
442
|
+
|
443
|
+
function _throw(err) {
|
444
|
+
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
445
|
+
}
|
446
|
+
|
447
|
+
_next(undefined);
|
448
|
+
});
|
449
|
+
};
|
450
|
+
}
|
451
|
+
|
452
|
+
function _defineProperty(obj, key, value) {
|
453
|
+
if (key in obj) {
|
454
|
+
Object.defineProperty(obj, key, {
|
455
|
+
value: value,
|
456
|
+
enumerable: true,
|
457
|
+
configurable: true,
|
458
|
+
writable: true
|
459
|
+
});
|
460
|
+
} else {
|
461
|
+
obj[key] = value;
|
462
|
+
}
|
463
|
+
|
464
|
+
return obj;
|
465
|
+
}
|
466
|
+
|
467
|
+
function _objectWithoutPropertiesLoose(source, excluded) {
|
468
|
+
if (source == null) return {};
|
469
|
+
var target = {};
|
470
|
+
var sourceKeys = Object.keys(source);
|
471
|
+
var key, i;
|
472
|
+
|
473
|
+
for (i = 0; i < sourceKeys.length; i++) {
|
474
|
+
key = sourceKeys[i];
|
475
|
+
if (excluded.indexOf(key) >= 0) continue;
|
476
|
+
target[key] = source[key];
|
477
|
+
}
|
478
|
+
|
479
|
+
return target;
|
480
|
+
}
|
481
|
+
|
482
|
+
function _objectWithoutProperties(source, excluded) {
|
483
|
+
if (source == null) return {};
|
484
|
+
|
485
|
+
var target = _objectWithoutPropertiesLoose(source, excluded);
|
486
|
+
|
487
|
+
var key, i;
|
488
|
+
|
489
|
+
if (Object.getOwnPropertySymbols) {
|
490
|
+
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
491
|
+
|
492
|
+
for (i = 0; i < sourceSymbolKeys.length; i++) {
|
493
|
+
key = sourceSymbolKeys[i];
|
494
|
+
if (excluded.indexOf(key) >= 0) continue;
|
495
|
+
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
496
|
+
target[key] = source[key];
|
497
|
+
}
|
498
|
+
}
|
499
|
+
|
500
|
+
return target;
|
501
|
+
}
|
502
|
+
|
503
|
+
function _slicedToArray(arr, i) {
|
504
|
+
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
505
|
+
}
|
506
|
+
|
507
|
+
function _toConsumableArray(arr) {
|
508
|
+
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
|
509
|
+
}
|
510
|
+
|
511
|
+
function _arrayWithoutHoles(arr) {
|
512
|
+
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
|
513
|
+
}
|
514
|
+
|
515
|
+
function _arrayWithHoles(arr) {
|
516
|
+
if (Array.isArray(arr)) return arr;
|
517
|
+
}
|
518
|
+
|
519
|
+
function _iterableToArray(iter) {
|
520
|
+
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
|
521
|
+
}
|
522
|
+
|
523
|
+
function _iterableToArrayLimit(arr, i) {
|
524
|
+
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
525
|
+
|
526
|
+
if (_i == null) return;
|
527
|
+
var _arr = [];
|
528
|
+
var _n = true;
|
529
|
+
var _d = false;
|
530
|
+
|
531
|
+
var _s, _e;
|
532
|
+
|
533
|
+
try {
|
534
|
+
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
|
535
|
+
_arr.push(_s.value);
|
536
|
+
|
537
|
+
if (i && _arr.length === i) break;
|
538
|
+
}
|
539
|
+
} catch (err) {
|
540
|
+
_d = true;
|
541
|
+
_e = err;
|
542
|
+
} finally {
|
543
|
+
try {
|
544
|
+
if (!_n && _i["return"] != null) _i["return"]();
|
545
|
+
} finally {
|
546
|
+
if (_d) throw _e;
|
547
|
+
}
|
548
|
+
}
|
549
|
+
|
550
|
+
return _arr;
|
551
|
+
}
|
552
|
+
|
553
|
+
function _unsupportedIterableToArray(o, minLen) {
|
554
|
+
if (!o) return;
|
555
|
+
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
556
|
+
var n = Object.prototype.toString.call(o).slice(8, -1);
|
557
|
+
if (n === "Object" && o.constructor) n = o.constructor.name;
|
558
|
+
if (n === "Map" || n === "Set") return Array.from(o);
|
559
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
560
|
+
}
|
561
|
+
|
562
|
+
function _arrayLikeToArray(arr, len) {
|
563
|
+
if (len == null || len > arr.length) len = arr.length;
|
564
|
+
|
565
|
+
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
566
|
+
|
567
|
+
return arr2;
|
568
|
+
}
|
569
|
+
|
570
|
+
function _nonIterableSpread() {
|
571
|
+
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
572
|
+
}
|
573
|
+
|
574
|
+
function _nonIterableRest() {
|
575
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
576
|
+
}
|
577
|
+
|
46
578
|
/**
|
47
579
|
* Replace all text with emoji with an image html tag
|
48
580
|
* @param {string} text
|
@@ -50,12 +582,12 @@ styleInject(css_248z);
|
|
50
582
|
*/
|
51
583
|
|
52
584
|
function replaceAllTextEmojis(text) {
|
53
|
-
|
585
|
+
var allEmojis = getAllEmojisFromText(text);
|
54
586
|
|
55
587
|
if (allEmojis) {
|
56
|
-
allEmojis =
|
588
|
+
allEmojis = _toConsumableArray(new Set(allEmojis)); // remove duplicates
|
57
589
|
|
58
|
-
allEmojis.forEach(emoji
|
590
|
+
allEmojis.forEach(function (emoji) {
|
59
591
|
text = replaceAll(text, emoji, getInputEmojiHTML(emoji));
|
60
592
|
});
|
61
593
|
}
|
@@ -92,7 +624,7 @@ function getAllEmojisFromText(text) {
|
|
92
624
|
|
93
625
|
|
94
626
|
function getImageEmoji(emoji) {
|
95
|
-
return getInputEmojiHTML(emoji
|
627
|
+
return getInputEmojiHTML(emoji["native"]);
|
96
628
|
} // eslint-disable-next-line valid-jsdoc
|
97
629
|
|
98
630
|
/**
|
@@ -102,7 +634,7 @@ function getImageEmoji(emoji) {
|
|
102
634
|
*/
|
103
635
|
|
104
636
|
function getInputEmojiHTML(emoji) {
|
105
|
-
return
|
637
|
+
return "<span class=\"width: 18px; height: 18px; display: inline-block; margin: 0 1px;\">".concat(emoji, "</span>");
|
106
638
|
}
|
107
639
|
/**
|
108
640
|
*
|
@@ -112,10 +644,10 @@ function getInputEmojiHTML(emoji) {
|
|
112
644
|
|
113
645
|
|
114
646
|
function replaceAllTextEmojiToString(html) {
|
115
|
-
|
647
|
+
var container = document.createElement("div");
|
116
648
|
container.innerHTML = html;
|
117
|
-
|
118
|
-
images.forEach(image
|
649
|
+
var images = Array.prototype.slice.call(container.querySelectorAll("img"));
|
650
|
+
images.forEach(function (image) {
|
119
651
|
container.innerHTML = container.innerHTML.replace(image.outerHTML, image.dataset.emoji);
|
120
652
|
});
|
121
653
|
return container.innerHTML;
|
@@ -128,8 +660,8 @@ function replaceAllTextEmojiToString(html) {
|
|
128
660
|
*/
|
129
661
|
|
130
662
|
function handlePasteHtmlAtCaret(html) {
|
131
|
-
|
132
|
-
|
663
|
+
var sel;
|
664
|
+
var range;
|
133
665
|
|
134
666
|
if (window.getSelection) {
|
135
667
|
// IE9 and non-IE
|
@@ -141,11 +673,11 @@ function handlePasteHtmlAtCaret(html) {
|
|
141
673
|
range.deleteContents(); // Range.createContextualFragment() would be useful here but is
|
142
674
|
// non-standard and not supported in all browsers (IE9, for one)
|
143
675
|
|
144
|
-
|
676
|
+
var el = document.createElement("div");
|
145
677
|
el.innerHTML = html;
|
146
|
-
|
147
|
-
|
148
|
-
|
678
|
+
var frag = document.createDocumentFragment();
|
679
|
+
var node;
|
680
|
+
var lastNode;
|
149
681
|
|
150
682
|
while (node = el.firstChild) {
|
151
683
|
lastNode = frag.appendChild(node);
|
@@ -169,12 +701,11 @@ function handlePasteHtmlAtCaret(html) {
|
|
169
701
|
* @return {number}
|
170
702
|
*/
|
171
703
|
|
172
|
-
function totalCharacters({
|
173
|
-
text,
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
const emojisCount = (html.match(/<img/g) || []).length;
|
704
|
+
function totalCharacters(_ref2) {
|
705
|
+
var text = _ref2.text,
|
706
|
+
html = _ref2.html;
|
707
|
+
var textCount = text.length;
|
708
|
+
var emojisCount = (html.match(/<img/g) || []).length;
|
178
709
|
return textCount + emojisCount;
|
179
710
|
} // eslint-disable-next-line valid-jsdoc
|
180
711
|
|
@@ -188,17 +719,17 @@ function totalCharacters({
|
|
188
719
|
|
189
720
|
function useSanitize() {
|
190
721
|
/** @type {React.MutableRefObject<SanitizeFn[]>} */
|
191
|
-
|
192
|
-
|
722
|
+
var sanitizeFnsRef = React.useRef([]);
|
723
|
+
var sanitizedTextRef = React.useRef("");
|
193
724
|
/** @type {(fn: SanitizeFn) => void} */
|
194
725
|
|
195
|
-
|
726
|
+
var addSanitizeFn = React.useCallback(function (fn) {
|
196
727
|
sanitizeFnsRef.current.push(fn);
|
197
728
|
}, []);
|
198
729
|
/** @type {(html: string) => string} */
|
199
730
|
|
200
|
-
|
201
|
-
|
731
|
+
var sanitize = React.useCallback(function (html) {
|
732
|
+
var result = sanitizeFnsRef.current.reduce(function (acc, fn) {
|
202
733
|
return fn(acc);
|
203
734
|
}, html);
|
204
735
|
result = replaceAllHtmlToString(result);
|
@@ -206,9 +737,9 @@ function useSanitize() {
|
|
206
737
|
return result;
|
207
738
|
}, []);
|
208
739
|
return {
|
209
|
-
addSanitizeFn,
|
210
|
-
sanitize,
|
211
|
-
sanitizedTextRef
|
740
|
+
addSanitizeFn: addSanitizeFn,
|
741
|
+
sanitize: sanitize,
|
742
|
+
sanitizedTextRef: sanitizedTextRef
|
212
743
|
};
|
213
744
|
}
|
214
745
|
/**
|
@@ -218,9 +749,9 @@ function useSanitize() {
|
|
218
749
|
*/
|
219
750
|
|
220
751
|
function replaceAllHtmlToString(html) {
|
221
|
-
|
752
|
+
var container = document.createElement("div");
|
222
753
|
container.innerHTML = html;
|
223
|
-
|
754
|
+
var text = container.innerText || ""; // remove all ↵ for safari
|
224
755
|
|
225
756
|
text = text.replace(/\n/gi, "");
|
226
757
|
return text;
|
@@ -240,37 +771,39 @@ function replaceAllHtmlToString(html) {
|
|
240
771
|
* @param {Props} props
|
241
772
|
*/
|
242
773
|
|
243
|
-
function useExpose({
|
244
|
-
ref,
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
}) {
|
249
|
-
const {
|
250
|
-
sanitize,
|
251
|
-
sanitizedTextRef
|
252
|
-
} = useSanitize();
|
253
|
-
React.useImperativeHandle(ref, () => ({
|
254
|
-
get value() {
|
255
|
-
return sanitizedTextRef.current;
|
256
|
-
},
|
774
|
+
function useExpose(_ref) {
|
775
|
+
var ref = _ref.ref,
|
776
|
+
textInputRef = _ref.textInputRef,
|
777
|
+
setValue = _ref.setValue,
|
778
|
+
emitChange = _ref.emitChange;
|
257
779
|
|
258
|
-
|
259
|
-
|
260
|
-
|
780
|
+
var _useSanitize = useSanitize(),
|
781
|
+
sanitize = _useSanitize.sanitize,
|
782
|
+
sanitizedTextRef = _useSanitize.sanitizedTextRef;
|
261
783
|
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
if (textInputRef.current !== null) {
|
268
|
-
sanitize(textInputRef.current.html);
|
269
|
-
}
|
784
|
+
React.useImperativeHandle(ref, function () {
|
785
|
+
return {
|
786
|
+
get value() {
|
787
|
+
return sanitizedTextRef.current;
|
788
|
+
},
|
270
789
|
|
271
|
-
|
272
|
-
|
273
|
-
|
790
|
+
set value(value) {
|
791
|
+
setValue(value);
|
792
|
+
},
|
793
|
+
|
794
|
+
focus: function focus() {
|
795
|
+
if (textInputRef.current === null) return;
|
796
|
+
textInputRef.current.focus();
|
797
|
+
},
|
798
|
+
blur: function blur() {
|
799
|
+
if (textInputRef.current !== null) {
|
800
|
+
sanitize(textInputRef.current.html);
|
801
|
+
}
|
802
|
+
|
803
|
+
emitChange();
|
804
|
+
}
|
805
|
+
};
|
806
|
+
});
|
274
807
|
}
|
275
808
|
|
276
809
|
// @ts-check
|
@@ -284,12 +817,12 @@ function useExpose({
|
|
284
817
|
|
285
818
|
function useEmit(textInputRef, onResize, onChange) {
|
286
819
|
/** @type {React.MutableRefObject<{width: number; height: number} | null>} */
|
287
|
-
|
288
|
-
|
289
|
-
|
820
|
+
var currentSizeRef = React.useRef(null);
|
821
|
+
var onChangeFn = React.useRef(onChange);
|
822
|
+
var checkAndEmitResize = React.useCallback(function () {
|
290
823
|
if (textInputRef.current !== null) {
|
291
|
-
|
292
|
-
|
824
|
+
var currentSize = currentSizeRef.current;
|
825
|
+
var nextSize = textInputRef.current.size;
|
293
826
|
|
294
827
|
if ((!currentSize || currentSize.width !== nextSize.width || currentSize.height !== nextSize.height) && typeof onResize === "function") {
|
295
828
|
onResize(nextSize);
|
@@ -298,7 +831,7 @@ function useEmit(textInputRef, onResize, onChange) {
|
|
298
831
|
currentSizeRef.current = nextSize;
|
299
832
|
}
|
300
833
|
}, [onResize, textInputRef]);
|
301
|
-
|
834
|
+
var emitChange = React.useCallback(function (sanitizedText) {
|
302
835
|
if (typeof onChangeFn.current === "function") {
|
303
836
|
onChangeFn.current(sanitizedText);
|
304
837
|
}
|
@@ -307,7 +840,7 @@ function useEmit(textInputRef, onResize, onChange) {
|
|
307
840
|
checkAndEmitResize();
|
308
841
|
}
|
309
842
|
}, [checkAndEmitResize, onResize]);
|
310
|
-
React.useEffect(()
|
843
|
+
React.useEffect(function () {
|
311
844
|
if (textInputRef.current) {
|
312
845
|
checkAndEmitResize();
|
313
846
|
}
|
@@ -315,7 +848,7 @@ function useEmit(textInputRef, onResize, onChange) {
|
|
315
848
|
return emitChange;
|
316
849
|
}
|
317
850
|
|
318
|
-
|
851
|
+
var _excluded = ["placeholder", "style", "tabIndex", "className", "onChange"];
|
319
852
|
/**
|
320
853
|
* @typedef {Object} Props
|
321
854
|
* @property {(event: React.KeyboardEvent) => void} onKeyDown
|
@@ -348,91 +881,92 @@ function useEmit(textInputRef, onResize, onChange) {
|
|
348
881
|
|
349
882
|
/** @type {React.ForwardRefRenderFunction<Ref, Props>} */
|
350
883
|
|
351
|
-
|
352
|
-
placeholder,
|
353
|
-
|
354
|
-
|
355
|
-
|
356
|
-
|
357
|
-
|
358
|
-
}, ref) => {
|
359
|
-
React.useImperativeHandle(ref, () => ({
|
360
|
-
appendContent: html => {
|
361
|
-
if (textInputRef.current) {
|
362
|
-
textInputRef.current.focus();
|
363
|
-
}
|
364
|
-
|
365
|
-
handlePasteHtmlAtCaret(html);
|
884
|
+
var TextInput = function TextInput(_ref, ref) {
|
885
|
+
var placeholder = _ref.placeholder,
|
886
|
+
style = _ref.style,
|
887
|
+
tabIndex = _ref.tabIndex,
|
888
|
+
className = _ref.className,
|
889
|
+
onChange = _ref.onChange,
|
890
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
366
891
|
|
367
|
-
|
368
|
-
|
369
|
-
|
370
|
-
|
371
|
-
|
372
|
-
|
373
|
-
} else if (placeholderRef.current) {
|
374
|
-
placeholderRef.current.style.visibility = "hidden";
|
375
|
-
}
|
892
|
+
React.useImperativeHandle(ref, function () {
|
893
|
+
return {
|
894
|
+
appendContent: function appendContent(html) {
|
895
|
+
if (textInputRef.current) {
|
896
|
+
textInputRef.current.focus();
|
897
|
+
}
|
376
898
|
|
377
|
-
|
378
|
-
onChange(textInputRef.current.innerHTML);
|
379
|
-
}
|
380
|
-
},
|
899
|
+
handlePasteHtmlAtCaret(html);
|
381
900
|
|
382
|
-
|
383
|
-
|
384
|
-
|
385
|
-
}
|
901
|
+
if (textInputRef.current) {
|
902
|
+
textInputRef.current.focus();
|
903
|
+
}
|
386
904
|
|
387
|
-
|
388
|
-
if (value.trim() === "") {
|
905
|
+
if (textInputRef.current && placeholderRef.current && textInputRef.current.innerHTML.trim() === "") {
|
389
906
|
placeholderRef.current.style.visibility = "visible";
|
390
|
-
} else {
|
907
|
+
} else if (placeholderRef.current) {
|
391
908
|
placeholderRef.current.style.visibility = "hidden";
|
392
909
|
}
|
393
|
-
}
|
394
910
|
|
395
|
-
|
396
|
-
|
397
|
-
|
398
|
-
|
911
|
+
if (textInputRef.current && typeof onChange === 'function') {
|
912
|
+
onChange(textInputRef.current.innerHTML);
|
913
|
+
}
|
914
|
+
},
|
399
915
|
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
|
916
|
+
set html(value) {
|
917
|
+
if (textInputRef.current) {
|
918
|
+
textInputRef.current.innerHTML = value;
|
919
|
+
}
|
404
920
|
|
405
|
-
|
406
|
-
|
407
|
-
|
408
|
-
|
921
|
+
if (placeholderRef.current) {
|
922
|
+
if (value.trim() === "") {
|
923
|
+
placeholderRef.current.style.visibility = "visible";
|
924
|
+
} else {
|
925
|
+
placeholderRef.current.style.visibility = "hidden";
|
926
|
+
}
|
927
|
+
}
|
409
928
|
|
410
|
-
|
411
|
-
|
412
|
-
|
413
|
-
|
414
|
-
height: 0
|
415
|
-
};
|
416
|
-
}
|
929
|
+
if (typeof onChange === 'function' && textInputRef.current) {
|
930
|
+
onChange(textInputRef.current.innerHTML);
|
931
|
+
}
|
932
|
+
},
|
417
933
|
|
418
|
-
|
419
|
-
|
420
|
-
|
421
|
-
}
|
422
|
-
},
|
934
|
+
get html() {
|
935
|
+
if (!textInputRef.current) return '';
|
936
|
+
return textInputRef.current.innerHTML;
|
937
|
+
},
|
423
938
|
|
424
|
-
|
425
|
-
|
426
|
-
|
427
|
-
|
939
|
+
get text() {
|
940
|
+
if (!textInputRef.current) return '';
|
941
|
+
return textInputRef.current.innerText;
|
942
|
+
},
|
428
943
|
|
429
|
-
|
944
|
+
get size() {
|
945
|
+
if (!textInputRef.current) {
|
946
|
+
return {
|
947
|
+
width: 0,
|
948
|
+
height: 0
|
949
|
+
};
|
950
|
+
}
|
951
|
+
|
952
|
+
return {
|
953
|
+
width: textInputRef.current.offsetWidth,
|
954
|
+
height: textInputRef.current.offsetHeight
|
955
|
+
};
|
956
|
+
},
|
957
|
+
|
958
|
+
focus: function focus() {
|
959
|
+
if (!textInputRef.current) return;
|
960
|
+
textInputRef.current.focus();
|
961
|
+
}
|
962
|
+
};
|
963
|
+
});
|
430
964
|
/** @type {React.MutableRefObject<HTMLDivElement | null>} */
|
431
965
|
|
432
|
-
|
966
|
+
var placeholderRef = React.useRef(null);
|
433
967
|
/** @type {React.MutableRefObject<HTMLDivElement | null>} */
|
434
968
|
|
435
|
-
|
969
|
+
var textInputRef = React.useRef(null);
|
436
970
|
/**
|
437
971
|
*
|
438
972
|
* @param {React.KeyboardEvent} event
|
@@ -467,10 +1001,12 @@ const TextInput = ({
|
|
467
1001
|
|
468
1002
|
function handleKeyUp(event) {
|
469
1003
|
props.onKeyUp(event);
|
470
|
-
|
1004
|
+
var input = textInputRef.current;
|
471
1005
|
|
472
1006
|
if (placeholderRef.current) {
|
473
|
-
|
1007
|
+
var _input$innerText;
|
1008
|
+
|
1009
|
+
if ((input === null || input === void 0 ? void 0 : (_input$innerText = input.innerText) === null || _input$innerText === void 0 ? void 0 : _input$innerText.trim()) === "") {
|
474
1010
|
placeholderRef.current.style.visibility = "visible";
|
475
1011
|
} else {
|
476
1012
|
placeholderRef.current.style.visibility = "hidden";
|
@@ -497,7 +1033,7 @@ const TextInput = ({
|
|
497
1033
|
onKeyUp: handleKeyUp,
|
498
1034
|
tabIndex: tabIndex,
|
499
1035
|
contentEditable: true,
|
500
|
-
className:
|
1036
|
+
className: "react-input-emoji--input".concat(className ? " ".concat(className) : ""),
|
501
1037
|
onBlur: props.onBlur,
|
502
1038
|
onCopy: props.onCopy,
|
503
1039
|
onPaste: props.onPaste,
|
@@ -505,9 +1041,8 @@ const TextInput = ({
|
|
505
1041
|
})));
|
506
1042
|
};
|
507
1043
|
|
508
|
-
|
1044
|
+
var TextInputWithRef = /*#__PURE__*/React.forwardRef(TextInput);
|
509
1045
|
|
510
|
-
/* eslint-disable react/prop-types */
|
511
1046
|
/**
|
512
1047
|
* @typedef {object} Props
|
513
1048
|
* @property {boolean} showPicker
|
@@ -521,23 +1056,29 @@ const TextInputWithRef = /*#__PURE__*/React.forwardRef(TextInput);
|
|
521
1056
|
* @return {JSX.Element}
|
522
1057
|
*/
|
523
1058
|
|
524
|
-
function EmojiPickerButton({
|
525
|
-
showPicker,
|
526
|
-
|
527
|
-
|
528
|
-
|
529
|
-
|
530
|
-
|
531
|
-
|
532
|
-
|
533
|
-
|
1059
|
+
function EmojiPickerButton(_ref) {
|
1060
|
+
var showPicker = _ref.showPicker,
|
1061
|
+
toggleShowPicker = _ref.toggleShowPicker,
|
1062
|
+
buttonElement = _ref.buttonElement;
|
1063
|
+
var buttonRef = React.useRef(null);
|
1064
|
+
|
1065
|
+
var _useState = React.useState(false),
|
1066
|
+
_useState2 = _slicedToArray(_useState, 2),
|
1067
|
+
showCustomButtonContent = _useState2[0],
|
1068
|
+
setShowCustomButtonContent = _useState2[1];
|
1069
|
+
|
1070
|
+
React.useEffect(function () {
|
1071
|
+
var _buttonElement$childN, _buttonElement$childN2;
|
1072
|
+
|
1073
|
+
if (((_buttonElement$childN = buttonElement === null || buttonElement === void 0 ? 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) {
|
1074
|
+
buttonRef.current.appendChild(buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.childNodes[0]);
|
534
1075
|
setShowCustomButtonContent(true);
|
535
1076
|
}
|
536
|
-
}, [buttonElement
|
1077
|
+
}, [buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.childNodes]);
|
537
1078
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
538
1079
|
ref: buttonRef,
|
539
1080
|
type: "button",
|
540
|
-
className:
|
1081
|
+
className: "react-input-emoji--button".concat(showPicker ? " react-input-emoji--button__show" : ""),
|
541
1082
|
onClick: toggleShowPicker
|
542
1083
|
}, !showCustomButtonContent && /*#__PURE__*/React__default["default"].createElement("svg", {
|
543
1084
|
xmlns: "http://www.w3.org/2000/svg",
|
@@ -42879,7 +43420,6 @@ function $e5534fc185f7111e$export$2e2bcd8739ae039(props) {
|
|
42879
43420
|
});
|
42880
43421
|
}
|
42881
43422
|
|
42882
|
-
// vendors
|
42883
43423
|
/**
|
42884
43424
|
* @typedef {object} Props
|
42885
43425
|
* @property {'light' | 'dark' | 'auto'} theme
|
@@ -42895,23 +43435,21 @@ function $e5534fc185f7111e$export$2e2bcd8739ae039(props) {
|
|
42895
43435
|
*/
|
42896
43436
|
|
42897
43437
|
function EmojiPicker(props) {
|
42898
|
-
|
42899
|
-
|
42900
|
-
|
42901
|
-
|
42902
|
-
customEmojis
|
42903
|
-
} = props;
|
43438
|
+
var theme = props.theme,
|
43439
|
+
onSelectEmoji = props.onSelectEmoji,
|
43440
|
+
disableRecent = props.disableRecent,
|
43441
|
+
customEmojis = props.customEmojis;
|
42904
43442
|
/** @type {string[]} */
|
42905
43443
|
|
42906
|
-
|
43444
|
+
var categories = React.useMemo(function () {
|
42907
43445
|
/** @type {string[]} */
|
42908
|
-
|
43446
|
+
var categoryies = [];
|
42909
43447
|
|
42910
43448
|
if (!disableRecent) {
|
42911
43449
|
categoryies.push("frequent");
|
42912
43450
|
}
|
42913
43451
|
|
42914
|
-
categoryies = [
|
43452
|
+
categoryies = [].concat(_toConsumableArray(categoryies), ["people", "nature", "foods", "activity", "places", "objects", "symbols", "flags"]);
|
42915
43453
|
return categoryies;
|
42916
43454
|
}, [disableRecent]);
|
42917
43455
|
return /*#__PURE__*/React__default["default"].createElement($e5534fc185f7111e$export$2e2bcd8739ae039, {
|
@@ -42947,18 +43485,19 @@ var EmojiPicker$1 = /*#__PURE__*/React.memo(EmojiPicker);
|
|
42947
43485
|
* @return {JSX.Element}
|
42948
43486
|
*/
|
42949
43487
|
|
42950
|
-
function EmojiPickerContainer({
|
42951
|
-
showPicker,
|
42952
|
-
|
42953
|
-
|
42954
|
-
|
42955
|
-
|
42956
|
-
}) {
|
43488
|
+
function EmojiPickerContainer(_ref) {
|
43489
|
+
var showPicker = _ref.showPicker,
|
43490
|
+
theme = _ref.theme,
|
43491
|
+
handleSelectEmoji = _ref.handleSelectEmoji,
|
43492
|
+
disableRecent = _ref.disableRecent,
|
43493
|
+
customEmojis = _ref.customEmojis;
|
42957
43494
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
42958
43495
|
className: "react-emoji-picker--container"
|
42959
43496
|
}, showPicker && /*#__PURE__*/React__default["default"].createElement("div", {
|
42960
43497
|
className: "react-emoji-picker--wrapper",
|
42961
|
-
onClick:
|
43498
|
+
onClick: function onClick(evt) {
|
43499
|
+
return evt.stopPropagation();
|
43500
|
+
}
|
42962
43501
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
42963
43502
|
className: "react-emoji-picker"
|
42964
43503
|
}, /*#__PURE__*/React__default["default"].createElement(EmojiPicker$1, {
|
@@ -42969,7 +43508,6 @@ function EmojiPickerContainer({
|
|
42969
43508
|
}))));
|
42970
43509
|
}
|
42971
43510
|
|
42972
|
-
// @ts-check
|
42973
43511
|
/**
|
42974
43512
|
* @typedef {import('../types/types').SanitizeFn} SanitizeFn
|
42975
43513
|
*/
|
@@ -42993,28 +43531,35 @@ function EmojiPickerContainer({
|
|
42993
43531
|
|
42994
43532
|
/** @type {React.FC<Props>} */
|
42995
43533
|
|
42996
|
-
|
42997
|
-
|
42998
|
-
|
42999
|
-
|
43000
|
-
|
43001
|
-
|
43002
|
-
|
43003
|
-
|
43004
|
-
|
43005
|
-
|
43006
|
-
|
43007
|
-
|
43534
|
+
var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
|
43535
|
+
var theme = props.theme,
|
43536
|
+
keepOpened = props.keepOpened,
|
43537
|
+
disableRecent = props.disableRecent,
|
43538
|
+
customEmojis = props.customEmojis,
|
43539
|
+
addSanitizeFn = props.addSanitizeFn,
|
43540
|
+
addPolluteFn = props.addPolluteFn,
|
43541
|
+
appendContent = props.appendContent,
|
43542
|
+
buttonElement = props.buttonElement;
|
43543
|
+
|
43544
|
+
var _useState = React.useState(false),
|
43545
|
+
_useState2 = _slicedToArray(_useState, 2),
|
43546
|
+
showPicker = _useState2[0],
|
43547
|
+
setShowPicker = _useState2[1];
|
43008
43548
|
/** @type {[HTMLDivElement | undefined, React.Dispatch<React.SetStateAction<HTMLDivElement | undefined>>]} */
|
43009
43549
|
|
43010
|
-
|
43011
|
-
React.
|
43550
|
+
|
43551
|
+
var _useState3 = React.useState(),
|
43552
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
43553
|
+
customButton = _useState4[0],
|
43554
|
+
setCustomButton = _useState4[1];
|
43555
|
+
|
43556
|
+
React.useEffect(function () {
|
43012
43557
|
addSanitizeFn(replaceAllTextEmojiToString);
|
43013
43558
|
}, [addSanitizeFn]);
|
43014
|
-
React.useEffect(()
|
43559
|
+
React.useEffect(function () {
|
43015
43560
|
addPolluteFn(replaceAllTextEmojis);
|
43016
43561
|
}, [addPolluteFn]);
|
43017
|
-
React.useEffect(()
|
43562
|
+
React.useEffect(function () {
|
43018
43563
|
/**
|
43019
43564
|
*
|
43020
43565
|
* @param {MouseEvent} event
|
@@ -43022,7 +43567,7 @@ const EmojiPickerWrapper = props => {
|
|
43022
43567
|
function checkClickOutside(event) {
|
43023
43568
|
/** @type {HTMLElement} */
|
43024
43569
|
// @ts-ignore
|
43025
|
-
|
43570
|
+
var element = event.target;
|
43026
43571
|
|
43027
43572
|
if (element.classList.contains("react-input-emoji--button") || element.classList.contains("react-input-emoji--button--icon")) {
|
43028
43573
|
return;
|
@@ -43032,7 +43577,7 @@ const EmojiPickerWrapper = props => {
|
|
43032
43577
|
}
|
43033
43578
|
|
43034
43579
|
document.addEventListener("click", checkClickOutside);
|
43035
|
-
return ()
|
43580
|
+
return function () {
|
43036
43581
|
document.removeEventListener("click", checkClickOutside);
|
43037
43582
|
};
|
43038
43583
|
}, []);
|
@@ -43044,7 +43589,9 @@ const EmojiPickerWrapper = props => {
|
|
43044
43589
|
function toggleShowPicker(event) {
|
43045
43590
|
event.stopPropagation();
|
43046
43591
|
event.preventDefault();
|
43047
|
-
setShowPicker(
|
43592
|
+
setShowPicker(function (currentShowPicker) {
|
43593
|
+
return !currentShowPicker;
|
43594
|
+
});
|
43048
43595
|
} // eslint-disable-next-line valid-jsdoc
|
43049
43596
|
|
43050
43597
|
/**
|
@@ -43057,12 +43604,14 @@ const EmojiPickerWrapper = props => {
|
|
43057
43604
|
appendContent(getImageEmoji(emoji));
|
43058
43605
|
|
43059
43606
|
if (!keepOpened) {
|
43060
|
-
setShowPicker(
|
43607
|
+
setShowPicker(function (currentShowPicker) {
|
43608
|
+
return !currentShowPicker;
|
43609
|
+
});
|
43061
43610
|
}
|
43062
43611
|
}
|
43063
43612
|
|
43064
|
-
React.useEffect(()
|
43065
|
-
if (buttonElement
|
43613
|
+
React.useEffect(function () {
|
43614
|
+
if (buttonElement !== null && buttonElement !== void 0 && buttonElement.style) {
|
43066
43615
|
buttonElement.style.position = "relative";
|
43067
43616
|
setCustomButton(buttonElement);
|
43068
43617
|
}
|
@@ -43096,16 +43645,16 @@ const EmojiPickerWrapper = props => {
|
|
43096
43645
|
* @return {string | null}
|
43097
43646
|
*/
|
43098
43647
|
function getTextFromAtToCaret() {
|
43099
|
-
|
43648
|
+
var range = getRangeFromAtToCaret();
|
43100
43649
|
if (!range) return null;
|
43101
|
-
|
43650
|
+
var text = range.text.substring(range.begin, range.end);
|
43102
43651
|
return text || null;
|
43103
43652
|
} // eslint-disable-next-line valid-jsdoc
|
43104
43653
|
|
43105
43654
|
/** */
|
43106
43655
|
|
43107
43656
|
function deleteTextFromAtToCaret() {
|
43108
|
-
|
43657
|
+
var range = getRangeFromAtToCaret();
|
43109
43658
|
if (!range) return; // @ts-ignore
|
43110
43659
|
|
43111
43660
|
range.element.deleteData(range.begin, range.end - range.begin);
|
@@ -43116,18 +43665,16 @@ function deleteTextFromAtToCaret() {
|
|
43116
43665
|
*/
|
43117
43666
|
|
43118
43667
|
function getRangeFromAtToCaret() {
|
43119
|
-
|
43668
|
+
var elementWithFocus = getElementWithFocus();
|
43120
43669
|
|
43121
43670
|
if (!elementWithFocus) {
|
43122
43671
|
return null;
|
43123
43672
|
}
|
43124
43673
|
|
43125
|
-
|
43126
|
-
|
43127
|
-
|
43128
|
-
|
43129
|
-
const text = element.textContent;
|
43130
|
-
const lastAt = text.lastIndexOf("@");
|
43674
|
+
var element = elementWithFocus.element,
|
43675
|
+
caretOffset = elementWithFocus.caretOffset;
|
43676
|
+
var text = element.textContent;
|
43677
|
+
var lastAt = text.lastIndexOf("@");
|
43131
43678
|
|
43132
43679
|
if (lastAt === -1 || lastAt >= caretOffset || lastAt !== 0 && text[lastAt - 1] !== " ") {
|
43133
43680
|
return null;
|
@@ -43136,8 +43683,8 @@ function getRangeFromAtToCaret() {
|
|
43136
43683
|
return {
|
43137
43684
|
begin: lastAt,
|
43138
43685
|
end: caretOffset,
|
43139
|
-
text,
|
43140
|
-
element
|
43686
|
+
text: text,
|
43687
|
+
element: element
|
43141
43688
|
};
|
43142
43689
|
}
|
43143
43690
|
/**
|
@@ -43147,17 +43694,17 @@ function getRangeFromAtToCaret() {
|
|
43147
43694
|
|
43148
43695
|
|
43149
43696
|
function getElementWithFocus() {
|
43150
|
-
|
43697
|
+
var element = getSelectionStart();
|
43151
43698
|
|
43152
43699
|
if (element === null) {
|
43153
43700
|
return null;
|
43154
43701
|
}
|
43155
43702
|
|
43156
|
-
|
43703
|
+
var caretOffset = 0;
|
43157
43704
|
|
43158
43705
|
if (typeof window.getSelection != "undefined") {
|
43159
|
-
|
43160
|
-
|
43706
|
+
var range = window.getSelection().getRangeAt(0);
|
43707
|
+
var preCaretRange = range.cloneRange();
|
43161
43708
|
preCaretRange.selectNodeContents(element);
|
43162
43709
|
preCaretRange.setEnd(range.endContainer, range.endOffset);
|
43163
43710
|
caretOffset = preCaretRange.toString().length;
|
@@ -43165,17 +43712,17 @@ function getElementWithFocus() {
|
|
43165
43712
|
typeof document.selection != "undefined" && // @ts-ignore
|
43166
43713
|
document.selection.type != "Control") {
|
43167
43714
|
// @ts-ignore
|
43168
|
-
|
43715
|
+
var textRange = document.selection.createRange(); // @ts-ignore
|
43169
43716
|
|
43170
|
-
|
43717
|
+
var preCaretTextRange = document.body.createTextRange();
|
43171
43718
|
preCaretTextRange.moveToElementText(element);
|
43172
43719
|
preCaretTextRange.setEndPoint("EndToEnd", textRange);
|
43173
43720
|
caretOffset = preCaretTextRange.text.length;
|
43174
43721
|
}
|
43175
43722
|
|
43176
43723
|
return {
|
43177
|
-
element,
|
43178
|
-
caretOffset
|
43724
|
+
element: element,
|
43725
|
+
caretOffset: caretOffset
|
43179
43726
|
};
|
43180
43727
|
}
|
43181
43728
|
/**
|
@@ -43184,11 +43731,10 @@ function getElementWithFocus() {
|
|
43184
43731
|
*/
|
43185
43732
|
|
43186
43733
|
function getSelectionStart() {
|
43187
|
-
|
43188
|
-
return node
|
43734
|
+
var node = document.getSelection().anchorNode;
|
43735
|
+
return (node === null || node === void 0 ? void 0 : node.nodeType) == 3 ? node : null;
|
43189
43736
|
}
|
43190
43737
|
|
43191
|
-
// @ts-check
|
43192
43738
|
/**
|
43193
43739
|
* @typedef {import('../types/types').MentionUser} MentionUser
|
43194
43740
|
*/
|
@@ -43201,58 +43747,117 @@ function getSelectionStart() {
|
|
43201
43747
|
*/
|
43202
43748
|
|
43203
43749
|
function useMention(searchMention) {
|
43204
|
-
|
43750
|
+
var _useState = React.useState(false),
|
43751
|
+
_useState2 = _slicedToArray(_useState, 2),
|
43752
|
+
loading = _useState2[0],
|
43753
|
+
setLoading = _useState2[1];
|
43205
43754
|
/** @type {[MentionUser[], React.Dispatch<React.SetStateAction<MentionUser[]>>]} */
|
43206
43755
|
|
43207
|
-
|
43756
|
+
|
43757
|
+
var _useState3 = React.useState([]),
|
43758
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
43759
|
+
mentionUsers = _useState4[0],
|
43760
|
+
setMentionUsers = _useState4[1];
|
43208
43761
|
/** @type {[string | null, React.Dispatch<React.SetStateAction<string | null>>]} */
|
43209
43762
|
|
43210
|
-
|
43211
|
-
|
43763
|
+
|
43764
|
+
var _useState5 = React.useState(null),
|
43765
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
43766
|
+
mentionSearchText = _useState6[0],
|
43767
|
+
setMentionSearchText = _useState6[1];
|
43768
|
+
|
43769
|
+
var onSelectUser = React.useCallback(function () {
|
43212
43770
|
deleteTextFromAtToCaret();
|
43213
43771
|
setMentionUsers([]);
|
43214
43772
|
}, []);
|
43215
43773
|
/** */
|
43216
43774
|
|
43217
|
-
|
43218
|
-
|
43219
|
-
|
43775
|
+
var checkMentionText = React.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
43776
|
+
var metionText, users;
|
43777
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
43778
|
+
while (1) {
|
43779
|
+
switch (_context.prev = _context.next) {
|
43780
|
+
case 0:
|
43781
|
+
metionText = getTextFromAtToCaret();
|
43782
|
+
setMentionSearchText(metionText);
|
43783
|
+
|
43784
|
+
if (!(metionText === null)) {
|
43785
|
+
_context.next = 6;
|
43786
|
+
break;
|
43787
|
+
}
|
43220
43788
|
|
43221
|
-
|
43222
|
-
|
43223
|
-
|
43224
|
-
|
43225
|
-
|
43226
|
-
|
43227
|
-
|
43228
|
-
|
43229
|
-
|
43789
|
+
setMentionUsers([]);
|
43790
|
+
_context.next = 12;
|
43791
|
+
break;
|
43792
|
+
|
43793
|
+
case 6:
|
43794
|
+
setLoading(true);
|
43795
|
+
_context.next = 9;
|
43796
|
+
return searchMention(metionText);
|
43797
|
+
|
43798
|
+
case 9:
|
43799
|
+
users = _context.sent;
|
43800
|
+
setLoading(false);
|
43801
|
+
setMentionUsers(users);
|
43802
|
+
|
43803
|
+
case 12:
|
43804
|
+
case "end":
|
43805
|
+
return _context.stop();
|
43806
|
+
}
|
43807
|
+
}
|
43808
|
+
}, _callee);
|
43809
|
+
})), [searchMention]);
|
43230
43810
|
/** @type {(event: React.KeyboardEvent) => void} */
|
43231
43811
|
|
43232
|
-
|
43233
|
-
|
43812
|
+
var onKeyUp = React.useCallback( /*#__PURE__*/function () {
|
43813
|
+
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(event) {
|
43814
|
+
var _getElementWithFocus;
|
43815
|
+
|
43816
|
+
var elementWithFocus;
|
43817
|
+
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
43818
|
+
while (1) {
|
43819
|
+
switch (_context2.prev = _context2.next) {
|
43820
|
+
case 0:
|
43821
|
+
if (!(typeof searchMention !== "function")) {
|
43822
|
+
_context2.next = 2;
|
43823
|
+
break;
|
43824
|
+
}
|
43234
43825
|
|
43235
|
-
|
43236
|
-
|
43237
|
-
|
43238
|
-
|
43239
|
-
|
43240
|
-
|
43241
|
-
|
43242
|
-
|
43826
|
+
return _context2.abrupt("return");
|
43827
|
+
|
43828
|
+
case 2:
|
43829
|
+
if (event.key === "Backspace" && (_getElementWithFocus = getElementWithFocus()) !== null && _getElementWithFocus !== void 0 && _getElementWithFocus.element.parentElement.hasAttribute("data-mention-id")) {
|
43830
|
+
elementWithFocus = getElementWithFocus();
|
43831
|
+
elementWithFocus.element.parentElement.remove();
|
43832
|
+
} else if (!["ArrowUp", "ArrowDown", "Esc", "Escape"].includes(event.key)) {
|
43833
|
+
checkMentionText();
|
43834
|
+
}
|
43835
|
+
|
43836
|
+
case 3:
|
43837
|
+
case "end":
|
43838
|
+
return _context2.stop();
|
43839
|
+
}
|
43840
|
+
}
|
43841
|
+
}, _callee2);
|
43842
|
+
}));
|
43843
|
+
|
43844
|
+
return function (_x) {
|
43845
|
+
return _ref2.apply(this, arguments);
|
43846
|
+
};
|
43847
|
+
}(), [checkMentionText, searchMention]);
|
43848
|
+
var onFocus = React.useCallback(function () {
|
43243
43849
|
checkMentionText();
|
43244
43850
|
}, [checkMentionText]);
|
43245
43851
|
return {
|
43246
|
-
mentionSearchText,
|
43247
|
-
mentionUsers,
|
43248
|
-
onKeyUp,
|
43249
|
-
onFocus,
|
43250
|
-
onSelectUser,
|
43251
|
-
loading
|
43852
|
+
mentionSearchText: mentionSearchText,
|
43853
|
+
mentionUsers: mentionUsers,
|
43854
|
+
onKeyUp: onKeyUp,
|
43855
|
+
onFocus: onFocus,
|
43856
|
+
onSelectUser: onSelectUser,
|
43857
|
+
loading: loading
|
43252
43858
|
};
|
43253
43859
|
}
|
43254
43860
|
|
43255
|
-
// @ts-check
|
43256
43861
|
/**
|
43257
43862
|
* @typedef {import('../types/types').MentionUser} MentionUser
|
43258
43863
|
*/
|
@@ -43276,34 +43881,40 @@ function useMention(searchMention) {
|
|
43276
43881
|
|
43277
43882
|
/** @type {React.ForwardRefRenderFunction<Ref, Props>} */
|
43278
43883
|
|
43279
|
-
|
43280
|
-
users,
|
43281
|
-
|
43282
|
-
|
43283
|
-
|
43284
|
-
}, ref) => {
|
43285
|
-
const [selectedUser, setSelectedUser] = React.useState(0);
|
43286
|
-
React.useImperativeHandle(ref, () => ({
|
43287
|
-
prevUser: () => {
|
43288
|
-
setSelectedUser(currentSelectedUser => {
|
43289
|
-
if (currentSelectedUser === 0) {
|
43290
|
-
return 0;
|
43291
|
-
}
|
43884
|
+
var MentionUserList = function MentionUserList(_ref, ref) {
|
43885
|
+
var users = _ref.users,
|
43886
|
+
mentionSearchText = _ref.mentionSearchText,
|
43887
|
+
onSelect = _ref.onSelect,
|
43888
|
+
addEventListener = _ref.addEventListener;
|
43292
43889
|
|
43293
|
-
|
43294
|
-
|
43295
|
-
|
43296
|
-
|
43297
|
-
setSelectedUser(currentSelectedUser => {
|
43298
|
-
if (currentSelectedUser === users.length - 1) {
|
43299
|
-
return users.length - 1;
|
43300
|
-
}
|
43890
|
+
var _useState = React.useState(0),
|
43891
|
+
_useState2 = _slicedToArray(_useState, 2),
|
43892
|
+
selectedUser = _useState2[0],
|
43893
|
+
setSelectedUser = _useState2[1];
|
43301
43894
|
|
43302
|
-
|
43303
|
-
|
43304
|
-
|
43305
|
-
|
43306
|
-
|
43895
|
+
React.useImperativeHandle(ref, function () {
|
43896
|
+
return {
|
43897
|
+
prevUser: function prevUser() {
|
43898
|
+
setSelectedUser(function (currentSelectedUser) {
|
43899
|
+
if (currentSelectedUser === 0) {
|
43900
|
+
return 0;
|
43901
|
+
}
|
43902
|
+
|
43903
|
+
return currentSelectedUser - 1;
|
43904
|
+
});
|
43905
|
+
},
|
43906
|
+
nextUser: function nextUser() {
|
43907
|
+
setSelectedUser(function (currentSelectedUser) {
|
43908
|
+
if (currentSelectedUser === users.length - 1) {
|
43909
|
+
return users.length - 1;
|
43910
|
+
}
|
43911
|
+
|
43912
|
+
return currentSelectedUser + 1;
|
43913
|
+
});
|
43914
|
+
}
|
43915
|
+
};
|
43916
|
+
});
|
43917
|
+
React.useEffect(function () {
|
43307
43918
|
setSelectedUser(0);
|
43308
43919
|
}, [users]);
|
43309
43920
|
/**
|
@@ -43314,22 +43925,22 @@ const MentionUserList = ({
|
|
43314
43925
|
*/
|
43315
43926
|
|
43316
43927
|
function getMentionSelectedNameEl(selectedText, rest) {
|
43317
|
-
return
|
43928
|
+
return "<span class=\"react-input-emoji--mention--item--name__selected\" data-testid=\"metion-selected-word\">".concat(selectedText, "</span>").concat(rest);
|
43318
43929
|
}
|
43319
43930
|
/** @type {(MentionUser & {nameHtml: string})[]} */
|
43320
43931
|
|
43321
43932
|
|
43322
|
-
|
43323
|
-
|
43324
|
-
return users.map(user
|
43325
|
-
|
43933
|
+
var usersFiltered = React.useMemo(function () {
|
43934
|
+
var searchText = mentionSearchText ? mentionSearchText.substring(1).toLocaleLowerCase() : "";
|
43935
|
+
return users.map(function (user) {
|
43936
|
+
var nameHtml = user.name;
|
43326
43937
|
|
43327
43938
|
if (mentionSearchText && mentionSearchText.length > 1) {
|
43328
43939
|
if (user.name.toLowerCase().startsWith(searchText)) {
|
43329
43940
|
nameHtml = getMentionSelectedNameEl(user.name.substring(0, searchText.length), user.name.substring(searchText.length));
|
43330
43941
|
} else {
|
43331
|
-
|
43332
|
-
nameHtml = names.map(name
|
43942
|
+
var names = user.name.split(" ");
|
43943
|
+
nameHtml = names.map(function (name) {
|
43333
43944
|
if (name.toLocaleLowerCase().startsWith(searchText)) {
|
43334
43945
|
return getMentionSelectedNameEl(name.substring(0, searchText.length), name.substring(searchText.length));
|
43335
43946
|
}
|
@@ -43339,9 +43950,9 @@ const MentionUserList = ({
|
|
43339
43950
|
}
|
43340
43951
|
}
|
43341
43952
|
|
43342
|
-
return {
|
43343
|
-
nameHtml
|
43344
|
-
};
|
43953
|
+
return _objectSpread2(_objectSpread2({}, user), {}, {
|
43954
|
+
nameHtml: nameHtml
|
43955
|
+
});
|
43345
43956
|
});
|
43346
43957
|
}, [mentionSearchText, users]); // eslint-disable-next-line valid-jsdoc
|
43347
43958
|
|
@@ -43352,50 +43963,53 @@ const MentionUserList = ({
|
|
43352
43963
|
*/
|
43353
43964
|
|
43354
43965
|
function handleClick(user) {
|
43355
|
-
return event
|
43966
|
+
return function (event) {
|
43356
43967
|
event.stopPropagation();
|
43357
43968
|
event.preventDefault();
|
43358
43969
|
onSelect(user);
|
43359
43970
|
};
|
43360
43971
|
}
|
43361
43972
|
|
43362
|
-
React.useEffect(()
|
43363
|
-
|
43973
|
+
React.useEffect(function () {
|
43974
|
+
var unsubscribe = addEventListener("enter", function (event) {
|
43364
43975
|
event.stopPropagation();
|
43365
43976
|
event.preventDefault();
|
43366
43977
|
onSelect(usersFiltered[selectedUser]);
|
43367
43978
|
});
|
43368
|
-
return ()
|
43979
|
+
return function () {
|
43369
43980
|
unsubscribe();
|
43370
43981
|
};
|
43371
43982
|
}, [addEventListener, onSelect, selectedUser, usersFiltered]);
|
43372
43983
|
return /*#__PURE__*/React__default["default"].createElement("ul", {
|
43373
43984
|
className: "react-input-emoji--mention--list",
|
43374
43985
|
"data-testid": "mention-user-list"
|
43375
|
-
}, usersFiltered.map((user, index)
|
43376
|
-
|
43377
|
-
|
43378
|
-
|
43379
|
-
|
43380
|
-
|
43381
|
-
|
43382
|
-
|
43383
|
-
|
43384
|
-
|
43385
|
-
|
43386
|
-
|
43387
|
-
|
43388
|
-
|
43389
|
-
|
43390
|
-
|
43986
|
+
}, usersFiltered.map(function (user, index) {
|
43987
|
+
return /*#__PURE__*/React__default["default"].createElement("li", {
|
43988
|
+
key: user.id
|
43989
|
+
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
43990
|
+
type: "button",
|
43991
|
+
onClick: handleClick(user),
|
43992
|
+
className: "react-input-emoji--mention--item".concat(selectedUser === index ? " react-input-emoji--mention--item__selected" : ""),
|
43993
|
+
onMouseOver: function onMouseOver() {
|
43994
|
+
return setSelectedUser(index);
|
43995
|
+
}
|
43996
|
+
}, /*#__PURE__*/React__default["default"].createElement("img", {
|
43997
|
+
className: "react-input-emoji--mention--item--img",
|
43998
|
+
src: user.image
|
43999
|
+
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
44000
|
+
className: "react-input-emoji--mention--item--name",
|
44001
|
+
dangerouslySetInnerHTML: {
|
44002
|
+
__html: user.nameHtml
|
44003
|
+
}
|
44004
|
+
})));
|
44005
|
+
}));
|
43391
44006
|
};
|
43392
44007
|
|
43393
|
-
|
44008
|
+
var MentionUserListWithRef = /*#__PURE__*/React.forwardRef(MentionUserList);
|
43394
44009
|
MentionUserListWithRef.propTypes = {
|
43395
44010
|
users: t__default["default"].array.isRequired
|
43396
44011
|
};
|
43397
44012
|
|
43398
|
-
// @ts-check
|
43399
44013
|
/**
|
43400
44014
|
* @typedef {import('../types/types').MentionUser} MetionUser
|
43401
44015
|
*/
|
@@ -43419,55 +44033,60 @@ MentionUserListWithRef.propTypes = {
|
|
43419
44033
|
|
43420
44034
|
/** @type {React.FC<Props>} */
|
43421
44035
|
|
43422
|
-
|
43423
|
-
searchMention,
|
43424
|
-
|
43425
|
-
|
43426
|
-
|
43427
|
-
|
44036
|
+
var MentionWrapper = function MentionWrapper(_ref) {
|
44037
|
+
var searchMention = _ref.searchMention,
|
44038
|
+
addEventListener = _ref.addEventListener,
|
44039
|
+
appendContent = _ref.appendContent,
|
44040
|
+
addSanitizeFn = _ref.addSanitizeFn;
|
44041
|
+
|
43428
44042
|
/** @type {React.MutableRefObject<import('./mention-user-list').Ref | null>} */
|
43429
|
-
|
43430
|
-
|
43431
|
-
|
43432
|
-
|
43433
|
-
|
43434
|
-
|
43435
|
-
|
43436
|
-
|
43437
|
-
|
43438
|
-
|
43439
|
-
|
43440
|
-
|
43441
|
-
|
44043
|
+
var metionUserListRef = React.useRef(null);
|
44044
|
+
|
44045
|
+
var _useState = React.useState(false),
|
44046
|
+
_useState2 = _slicedToArray(_useState, 2),
|
44047
|
+
showUserList = _useState2[0],
|
44048
|
+
setShowUserList = _useState2[1];
|
44049
|
+
|
44050
|
+
var _useMention = useMention(searchMention),
|
44051
|
+
mentionSearchText = _useMention.mentionSearchText,
|
44052
|
+
mentionUsers = _useMention.mentionUsers,
|
44053
|
+
loading = _useMention.loading,
|
44054
|
+
onKeyUp = _useMention.onKeyUp,
|
44055
|
+
onFocus = _useMention.onFocus,
|
44056
|
+
onSelectUser = _useMention.onSelectUser;
|
44057
|
+
|
44058
|
+
React.useEffect(function () {
|
44059
|
+
addSanitizeFn(function (html) {
|
44060
|
+
var container = document.createElement("div");
|
43442
44061
|
container.innerHTML = html;
|
43443
|
-
|
43444
|
-
mentionsEl.forEach(mentionEl
|
43445
|
-
container.innerHTML = container.innerHTML.replace(mentionEl.outerHTML,
|
44062
|
+
var mentionsEl = Array.prototype.slice.call(container.querySelectorAll(".react-input-emoji--mention--text"));
|
44063
|
+
mentionsEl.forEach(function (mentionEl) {
|
44064
|
+
container.innerHTML = container.innerHTML.replace(mentionEl.outerHTML, "@[".concat(mentionEl.dataset.mentionName, "](userId:").concat(mentionEl.dataset.mentionId, ")"));
|
43446
44065
|
});
|
43447
44066
|
return container.innerHTML;
|
43448
44067
|
});
|
43449
44068
|
}, [addSanitizeFn]);
|
43450
|
-
React.useEffect(()
|
44069
|
+
React.useEffect(function () {
|
43451
44070
|
setShowUserList(mentionUsers.length > 0);
|
43452
44071
|
}, [mentionUsers]);
|
43453
|
-
React.useEffect(()
|
44072
|
+
React.useEffect(function () {
|
43454
44073
|
/** */
|
43455
44074
|
function checkClickOutside() {
|
43456
44075
|
setShowUserList(false);
|
43457
44076
|
}
|
43458
44077
|
|
43459
44078
|
document.addEventListener("click", checkClickOutside);
|
43460
|
-
return ()
|
44079
|
+
return function () {
|
43461
44080
|
document.removeEventListener("click", checkClickOutside);
|
43462
44081
|
};
|
43463
44082
|
}, []);
|
43464
|
-
React.useEffect(()
|
43465
|
-
|
43466
|
-
return ()
|
44083
|
+
React.useEffect(function () {
|
44084
|
+
var unsubscribe = addEventListener("keyUp", onKeyUp);
|
44085
|
+
return function () {
|
43467
44086
|
unsubscribe();
|
43468
44087
|
};
|
43469
44088
|
}, [addEventListener, onKeyUp]);
|
43470
|
-
React.useEffect(()
|
44089
|
+
React.useEffect(function () {
|
43471
44090
|
/**
|
43472
44091
|
*
|
43473
44092
|
* @param {React.KeyboardEvent} event
|
@@ -43482,30 +44101,30 @@ const MentionWrapper = ({
|
|
43482
44101
|
}
|
43483
44102
|
}
|
43484
44103
|
|
43485
|
-
|
43486
|
-
return ()
|
44104
|
+
var unsubscribe = addEventListener("keyDown", handleKeyDown);
|
44105
|
+
return function () {
|
43487
44106
|
unsubscribe();
|
43488
44107
|
};
|
43489
44108
|
}, [addEventListener]);
|
43490
|
-
React.useEffect(()
|
43491
|
-
|
43492
|
-
return ()
|
44109
|
+
React.useEffect(function () {
|
44110
|
+
var unsubscribe = addEventListener("focus", onFocus);
|
44111
|
+
return function () {
|
43493
44112
|
unsubscribe();
|
43494
44113
|
};
|
43495
44114
|
}, [addEventListener, onFocus]);
|
43496
|
-
React.useEffect(()
|
44115
|
+
React.useEffect(function () {
|
43497
44116
|
if (showUserList) {
|
43498
|
-
|
44117
|
+
var unsubscribeArrowUp = addEventListener("arrowUp", function (event) {
|
43499
44118
|
event.stopPropagation();
|
43500
44119
|
event.preventDefault();
|
43501
44120
|
metionUserListRef.current.prevUser();
|
43502
44121
|
});
|
43503
|
-
|
44122
|
+
var unsubscribeArrowDown = addEventListener("arrowDown", function (event) {
|
43504
44123
|
event.stopPropagation();
|
43505
44124
|
event.preventDefault();
|
43506
44125
|
metionUserListRef.current.nextUser();
|
43507
44126
|
});
|
43508
|
-
return ()
|
44127
|
+
return function () {
|
43509
44128
|
unsubscribeArrowUp();
|
43510
44129
|
unsubscribeArrowDown();
|
43511
44130
|
};
|
@@ -43518,7 +44137,7 @@ const MentionWrapper = ({
|
|
43518
44137
|
|
43519
44138
|
function handleSelect(user) {
|
43520
44139
|
onSelectUser();
|
43521
|
-
appendContent(
|
44140
|
+
appendContent("<span class=\"react-input-emoji--mention--text\" data-mention-id=\"".concat(user.id, "\" data-mention-name=\"").concat(user.name, "\">@").concat(user.name, "</span> "));
|
43522
44141
|
}
|
43523
44142
|
|
43524
44143
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, loading ? /*#__PURE__*/React__default["default"].createElement("div", {
|
@@ -43529,7 +44148,9 @@ const MentionWrapper = ({
|
|
43529
44148
|
className: "react-input-emoji--mention--loading--spinner"
|
43530
44149
|
}, "Loading..."))) : showUserList && /*#__PURE__*/React__default["default"].createElement("div", {
|
43531
44150
|
className: "react-input-emoji--mention--container",
|
43532
|
-
onClick:
|
44151
|
+
onClick: function onClick(evt) {
|
44152
|
+
return evt.stopPropagation();
|
44153
|
+
}
|
43533
44154
|
}, /*#__PURE__*/React__default["default"].createElement(MentionUserListWithRef, {
|
43534
44155
|
ref: metionUserListRef,
|
43535
44156
|
mentionSearchText: mentionSearchText,
|
@@ -43548,16 +44169,20 @@ const MentionWrapper = ({
|
|
43548
44169
|
*/
|
43549
44170
|
function createObserver() {
|
43550
44171
|
/** @type {import('../types/types').Listerner<T>[]} */
|
43551
|
-
|
44172
|
+
var listeners = [];
|
43552
44173
|
return {
|
43553
|
-
subscribe: listener
|
44174
|
+
subscribe: function subscribe(listener) {
|
43554
44175
|
listeners.push(listener);
|
43555
|
-
return ()
|
43556
|
-
listeners = listeners.filter(
|
44176
|
+
return function () {
|
44177
|
+
listeners = listeners.filter(function (l) {
|
44178
|
+
return l !== listener;
|
44179
|
+
});
|
43557
44180
|
};
|
43558
44181
|
},
|
43559
|
-
publish: event
|
43560
|
-
listeners.forEach(
|
44182
|
+
publish: function publish(event) {
|
44183
|
+
listeners.forEach(function (listener) {
|
44184
|
+
return listener(event);
|
44185
|
+
});
|
43561
44186
|
},
|
43562
44187
|
|
43563
44188
|
get currentListerners() {
|
@@ -43577,26 +44202,28 @@ function createObserver() {
|
|
43577
44202
|
|
43578
44203
|
function useEventListeners() {
|
43579
44204
|
/** @type {TextInputListeners} */
|
43580
|
-
|
43581
|
-
|
43582
|
-
|
43583
|
-
|
43584
|
-
|
43585
|
-
|
43586
|
-
|
43587
|
-
|
43588
|
-
|
44205
|
+
var listeners = React.useMemo(function () {
|
44206
|
+
return {
|
44207
|
+
keyDown: createObserver(),
|
44208
|
+
keyUp: createObserver(),
|
44209
|
+
arrowUp: createObserver(),
|
44210
|
+
arrowDown: createObserver(),
|
44211
|
+
enter: createObserver(),
|
44212
|
+
focus: createObserver(),
|
44213
|
+
blur: createObserver()
|
44214
|
+
};
|
44215
|
+
}, []);
|
43589
44216
|
/**
|
43590
44217
|
* @template {keyof TextInputListeners} T, K
|
43591
44218
|
* @type {(event: keyof TextInputListeners, fn: import('../types/types').Listerner<any>) => () => void}
|
43592
44219
|
*/
|
43593
44220
|
|
43594
|
-
|
44221
|
+
var addEventListener = React.useCallback(function (event, fn) {
|
43595
44222
|
return listeners[event].subscribe(fn);
|
43596
44223
|
}, [listeners]);
|
43597
44224
|
return {
|
43598
|
-
addEventListener,
|
43599
|
-
listeners
|
44225
|
+
addEventListener: addEventListener,
|
44226
|
+
listeners: listeners
|
43600
44227
|
};
|
43601
44228
|
}
|
43602
44229
|
|
@@ -43610,23 +44237,23 @@ function useEventListeners() {
|
|
43610
44237
|
|
43611
44238
|
function usePollute() {
|
43612
44239
|
/** @type {React.MutableRefObject<PolluteFn[]>} */
|
43613
|
-
|
44240
|
+
var polluteFnsRef = React.useRef([]);
|
43614
44241
|
/** @type {(fn: PolluteFn) => void} */
|
43615
44242
|
|
43616
|
-
|
44243
|
+
var addPolluteFn = React.useCallback(function (fn) {
|
43617
44244
|
polluteFnsRef.current.push(fn);
|
43618
44245
|
}, []);
|
43619
44246
|
/** @type {(html: string) => string} */
|
43620
44247
|
|
43621
|
-
|
43622
|
-
|
44248
|
+
var pollute = React.useCallback(function (text) {
|
44249
|
+
var result = polluteFnsRef.current.reduce(function (acc, fn) {
|
43623
44250
|
return fn(acc);
|
43624
44251
|
}, text);
|
43625
44252
|
return result;
|
43626
44253
|
}, []);
|
43627
44254
|
return {
|
43628
|
-
addPolluteFn,
|
43629
|
-
pollute
|
44255
|
+
addPolluteFn: addPolluteFn,
|
44256
|
+
pollute: pollute
|
43630
44257
|
};
|
43631
44258
|
}
|
43632
44259
|
|
@@ -43675,72 +44302,71 @@ function usePollute() {
|
|
43675
44302
|
*/
|
43676
44303
|
|
43677
44304
|
function InputEmoji(props, ref) {
|
43678
|
-
|
43679
|
-
|
43680
|
-
|
43681
|
-
|
43682
|
-
|
43683
|
-
|
43684
|
-
|
43685
|
-
|
43686
|
-
|
43687
|
-
|
43688
|
-
|
43689
|
-
|
43690
|
-
|
43691
|
-
|
43692
|
-
|
43693
|
-
|
43694
|
-
|
43695
|
-
|
43696
|
-
|
43697
|
-
|
43698
|
-
|
43699
|
-
|
43700
|
-
|
43701
|
-
fontSize,
|
43702
|
-
fontFamily
|
43703
|
-
} = props;
|
44305
|
+
var onChange = props.onChange,
|
44306
|
+
onEnter = props.onEnter,
|
44307
|
+
onResize = props.onResize,
|
44308
|
+
onClick = props.onClick,
|
44309
|
+
onFocus = props.onFocus,
|
44310
|
+
onBlur = props.onBlur,
|
44311
|
+
onKeyDown = props.onKeyDown,
|
44312
|
+
theme = props.theme,
|
44313
|
+
cleanOnEnter = props.cleanOnEnter,
|
44314
|
+
placeholder = props.placeholder,
|
44315
|
+
maxLength = props.maxLength,
|
44316
|
+
keepOpened = props.keepOpened,
|
44317
|
+
inputClass = props.inputClass,
|
44318
|
+
disableRecent = props.disableRecent,
|
44319
|
+
tabIndex = props.tabIndex,
|
44320
|
+
value = props.value,
|
44321
|
+
customEmojis = props.customEmojis,
|
44322
|
+
searchMention = props.searchMention,
|
44323
|
+
buttonElement = props.buttonElement,
|
44324
|
+
borderRadius = props.borderRadius,
|
44325
|
+
borderColor = props.borderColor,
|
44326
|
+
fontSize = props.fontSize,
|
44327
|
+
fontFamily = props.fontFamily;
|
43704
44328
|
/** @type {React.MutableRefObject<import('./text-input').Ref | null>} */
|
43705
44329
|
|
43706
|
-
|
43707
|
-
|
43708
|
-
|
43709
|
-
|
43710
|
-
|
43711
|
-
|
43712
|
-
|
43713
|
-
|
43714
|
-
|
43715
|
-
|
43716
|
-
|
43717
|
-
|
43718
|
-
|
43719
|
-
|
43720
|
-
|
44330
|
+
var textInputRef = React.useRef(null);
|
44331
|
+
|
44332
|
+
var _useEventListeners = useEventListeners(),
|
44333
|
+
addEventListener = _useEventListeners.addEventListener,
|
44334
|
+
listeners = _useEventListeners.listeners;
|
44335
|
+
|
44336
|
+
var _useSanitize = useSanitize(),
|
44337
|
+
addSanitizeFn = _useSanitize.addSanitizeFn,
|
44338
|
+
sanitize = _useSanitize.sanitize,
|
44339
|
+
sanitizedTextRef = _useSanitize.sanitizedTextRef;
|
44340
|
+
|
44341
|
+
var _usePollute = usePollute(),
|
44342
|
+
addPolluteFn = _usePollute.addPolluteFn,
|
44343
|
+
pollute = _usePollute.pollute;
|
44344
|
+
|
44345
|
+
var updateHTML = React.useCallback(function () {
|
44346
|
+
var nextValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
|
43721
44347
|
if (textInputRef.current === null) return;
|
43722
44348
|
textInputRef.current.html = replaceAllTextEmojis(nextValue);
|
43723
44349
|
sanitizedTextRef.current = nextValue;
|
43724
44350
|
}, [sanitizedTextRef]);
|
43725
|
-
|
44351
|
+
var setValue = React.useCallback(function (value) {
|
43726
44352
|
updateHTML(value);
|
43727
44353
|
}, [updateHTML]);
|
43728
|
-
|
44354
|
+
var emitChange = useEmit(textInputRef, onResize, onChange);
|
43729
44355
|
useExpose({
|
43730
|
-
ref,
|
43731
|
-
setValue,
|
43732
|
-
textInputRef,
|
43733
|
-
emitChange
|
44356
|
+
ref: ref,
|
44357
|
+
setValue: setValue,
|
44358
|
+
textInputRef: textInputRef,
|
44359
|
+
emitChange: emitChange
|
43734
44360
|
});
|
43735
|
-
React.useEffect(()
|
44361
|
+
React.useEffect(function () {
|
43736
44362
|
if (sanitizedTextRef.current !== value) {
|
43737
44363
|
setValue(value);
|
43738
44364
|
}
|
43739
44365
|
}, [sanitizedTextRef, setValue, value]);
|
43740
|
-
React.useEffect(()
|
44366
|
+
React.useEffect(function () {
|
43741
44367
|
updateHTML();
|
43742
44368
|
}, [updateHTML]);
|
43743
|
-
React.useEffect(()
|
44369
|
+
React.useEffect(function () {
|
43744
44370
|
/**
|
43745
44371
|
* Handle keydown event
|
43746
44372
|
* @param {React.KeyboardEvent} event
|
@@ -43753,7 +44379,7 @@ function InputEmoji(props, ref) {
|
|
43753
44379
|
|
43754
44380
|
if (event.key === "Enter" && textInputRef.current) {
|
43755
44381
|
event.preventDefault();
|
43756
|
-
|
44382
|
+
var text = sanitize(textInputRef.current.html);
|
43757
44383
|
emitChange(sanitizedTextRef.current);
|
43758
44384
|
|
43759
44385
|
if (typeof onEnter === "function" && listeners.enter.currentListerners.length === 0) {
|
@@ -43778,12 +44404,12 @@ function InputEmoji(props, ref) {
|
|
43778
44404
|
return true;
|
43779
44405
|
}
|
43780
44406
|
|
43781
|
-
|
43782
|
-
return ()
|
44407
|
+
var unsubscribe = addEventListener("keyDown", handleKeydown);
|
44408
|
+
return function () {
|
43783
44409
|
unsubscribe();
|
43784
44410
|
};
|
43785
44411
|
}, [addEventListener, cleanOnEnter, emitChange, listeners.enter.currentListerners.length, maxLength, onEnter, onKeyDown, sanitize, sanitizedTextRef, updateHTML]);
|
43786
|
-
React.useEffect(()
|
44412
|
+
React.useEffect(function () {
|
43787
44413
|
/** */
|
43788
44414
|
function handleFocus() {
|
43789
44415
|
if (typeof onClick === "function") {
|
@@ -43795,12 +44421,12 @@ function InputEmoji(props, ref) {
|
|
43795
44421
|
}
|
43796
44422
|
}
|
43797
44423
|
|
43798
|
-
|
43799
|
-
return ()
|
44424
|
+
var unsubscribe = addEventListener("focus", handleFocus);
|
44425
|
+
return function () {
|
43800
44426
|
unsubscribe();
|
43801
44427
|
};
|
43802
44428
|
}, [addEventListener, onClick, onFocus]);
|
43803
|
-
React.useEffect(()
|
44429
|
+
React.useEffect(function () {
|
43804
44430
|
/** */
|
43805
44431
|
function handleBlur() {
|
43806
44432
|
if (typeof onBlur === "function") {
|
@@ -43808,8 +44434,8 @@ function InputEmoji(props, ref) {
|
|
43808
44434
|
}
|
43809
44435
|
}
|
43810
44436
|
|
43811
|
-
|
43812
|
-
return ()
|
44437
|
+
var unsubscribe = addEventListener("blur", handleBlur);
|
44438
|
+
return function () {
|
43813
44439
|
unsubscribe();
|
43814
44440
|
};
|
43815
44441
|
}, [addEventListener, onBlur]);
|
@@ -43855,7 +44481,7 @@ function InputEmoji(props, ref) {
|
|
43855
44481
|
|
43856
44482
|
function handlePaste(event) {
|
43857
44483
|
event.preventDefault();
|
43858
|
-
|
44484
|
+
var content;
|
43859
44485
|
|
43860
44486
|
if (event.clipboardData) {
|
43861
44487
|
content = event.clipboardData.getData("text/plain");
|
@@ -43884,10 +44510,10 @@ function InputEmoji(props, ref) {
|
|
43884
44510
|
onEnter: listeners.enter.publish,
|
43885
44511
|
placeholder: placeholder,
|
43886
44512
|
style: {
|
43887
|
-
borderRadius,
|
43888
|
-
borderColor,
|
43889
|
-
fontSize,
|
43890
|
-
fontFamily
|
44513
|
+
borderRadius: borderRadius,
|
44514
|
+
borderColor: borderColor,
|
44515
|
+
fontSize: fontSize,
|
44516
|
+
fontFamily: fontFamily
|
43891
44517
|
},
|
43892
44518
|
tabIndex: tabIndex,
|
43893
44519
|
className: inputClass,
|
@@ -43904,7 +44530,7 @@ function InputEmoji(props, ref) {
|
|
43904
44530
|
}));
|
43905
44531
|
}
|
43906
44532
|
|
43907
|
-
|
44533
|
+
var InputEmojiWithRef = /*#__PURE__*/React.forwardRef(InputEmoji);
|
43908
44534
|
InputEmojiWithRef.defaultProps = {
|
43909
44535
|
theme:
|
43910
44536
|
/** @type {const} */
|