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.es.js
CHANGED
@@ -34,7 +34,539 @@ function styleInject(css, ref) {
|
|
34
34
|
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";
|
35
35
|
styleInject(css_248z);
|
36
36
|
|
37
|
-
|
37
|
+
function ownKeys(object, enumerableOnly) {
|
38
|
+
var keys = Object.keys(object);
|
39
|
+
|
40
|
+
if (Object.getOwnPropertySymbols) {
|
41
|
+
var symbols = Object.getOwnPropertySymbols(object);
|
42
|
+
enumerableOnly && (symbols = symbols.filter(function (sym) {
|
43
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
44
|
+
})), keys.push.apply(keys, symbols);
|
45
|
+
}
|
46
|
+
|
47
|
+
return keys;
|
48
|
+
}
|
49
|
+
|
50
|
+
function _objectSpread2(target) {
|
51
|
+
for (var i = 1; i < arguments.length; i++) {
|
52
|
+
var source = null != arguments[i] ? arguments[i] : {};
|
53
|
+
i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
|
54
|
+
_defineProperty(target, key, source[key]);
|
55
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
|
56
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
57
|
+
});
|
58
|
+
}
|
59
|
+
|
60
|
+
return target;
|
61
|
+
}
|
62
|
+
|
63
|
+
function _regeneratorRuntime() {
|
64
|
+
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
|
65
|
+
|
66
|
+
_regeneratorRuntime = function () {
|
67
|
+
return exports;
|
68
|
+
};
|
69
|
+
|
70
|
+
var exports = {},
|
71
|
+
Op = Object.prototype,
|
72
|
+
hasOwn = Op.hasOwnProperty,
|
73
|
+
$Symbol = "function" == typeof Symbol ? Symbol : {},
|
74
|
+
iteratorSymbol = $Symbol.iterator || "@@iterator",
|
75
|
+
asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator",
|
76
|
+
toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
|
77
|
+
|
78
|
+
function define(obj, key, value) {
|
79
|
+
return Object.defineProperty(obj, key, {
|
80
|
+
value: value,
|
81
|
+
enumerable: !0,
|
82
|
+
configurable: !0,
|
83
|
+
writable: !0
|
84
|
+
}), obj[key];
|
85
|
+
}
|
86
|
+
|
87
|
+
try {
|
88
|
+
define({}, "");
|
89
|
+
} catch (err) {
|
90
|
+
define = function (obj, key, value) {
|
91
|
+
return obj[key] = value;
|
92
|
+
};
|
93
|
+
}
|
94
|
+
|
95
|
+
function wrap(innerFn, outerFn, self, tryLocsList) {
|
96
|
+
var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator,
|
97
|
+
generator = Object.create(protoGenerator.prototype),
|
98
|
+
context = new Context(tryLocsList || []);
|
99
|
+
return generator._invoke = function (innerFn, self, context) {
|
100
|
+
var state = "suspendedStart";
|
101
|
+
return function (method, arg) {
|
102
|
+
if ("executing" === state) throw new Error("Generator is already running");
|
103
|
+
|
104
|
+
if ("completed" === state) {
|
105
|
+
if ("throw" === method) throw arg;
|
106
|
+
return doneResult();
|
107
|
+
}
|
108
|
+
|
109
|
+
for (context.method = method, context.arg = arg;;) {
|
110
|
+
var delegate = context.delegate;
|
111
|
+
|
112
|
+
if (delegate) {
|
113
|
+
var delegateResult = maybeInvokeDelegate(delegate, context);
|
114
|
+
|
115
|
+
if (delegateResult) {
|
116
|
+
if (delegateResult === ContinueSentinel) continue;
|
117
|
+
return delegateResult;
|
118
|
+
}
|
119
|
+
}
|
120
|
+
|
121
|
+
if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) {
|
122
|
+
if ("suspendedStart" === state) throw state = "completed", context.arg;
|
123
|
+
context.dispatchException(context.arg);
|
124
|
+
} else "return" === context.method && context.abrupt("return", context.arg);
|
125
|
+
state = "executing";
|
126
|
+
var record = tryCatch(innerFn, self, context);
|
127
|
+
|
128
|
+
if ("normal" === record.type) {
|
129
|
+
if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue;
|
130
|
+
return {
|
131
|
+
value: record.arg,
|
132
|
+
done: context.done
|
133
|
+
};
|
134
|
+
}
|
135
|
+
|
136
|
+
"throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg);
|
137
|
+
}
|
138
|
+
};
|
139
|
+
}(innerFn, self, context), generator;
|
140
|
+
}
|
141
|
+
|
142
|
+
function tryCatch(fn, obj, arg) {
|
143
|
+
try {
|
144
|
+
return {
|
145
|
+
type: "normal",
|
146
|
+
arg: fn.call(obj, arg)
|
147
|
+
};
|
148
|
+
} catch (err) {
|
149
|
+
return {
|
150
|
+
type: "throw",
|
151
|
+
arg: err
|
152
|
+
};
|
153
|
+
}
|
154
|
+
}
|
155
|
+
|
156
|
+
exports.wrap = wrap;
|
157
|
+
var ContinueSentinel = {};
|
158
|
+
|
159
|
+
function Generator() {}
|
160
|
+
|
161
|
+
function GeneratorFunction() {}
|
162
|
+
|
163
|
+
function GeneratorFunctionPrototype() {}
|
164
|
+
|
165
|
+
var IteratorPrototype = {};
|
166
|
+
define(IteratorPrototype, iteratorSymbol, function () {
|
167
|
+
return this;
|
168
|
+
});
|
169
|
+
var getProto = Object.getPrototypeOf,
|
170
|
+
NativeIteratorPrototype = getProto && getProto(getProto(values([])));
|
171
|
+
NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype);
|
172
|
+
var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
|
173
|
+
|
174
|
+
function defineIteratorMethods(prototype) {
|
175
|
+
["next", "throw", "return"].forEach(function (method) {
|
176
|
+
define(prototype, method, function (arg) {
|
177
|
+
return this._invoke(method, arg);
|
178
|
+
});
|
179
|
+
});
|
180
|
+
}
|
181
|
+
|
182
|
+
function AsyncIterator(generator, PromiseImpl) {
|
183
|
+
function invoke(method, arg, resolve, reject) {
|
184
|
+
var record = tryCatch(generator[method], generator, arg);
|
185
|
+
|
186
|
+
if ("throw" !== record.type) {
|
187
|
+
var result = record.arg,
|
188
|
+
value = result.value;
|
189
|
+
return value && "object" == typeof value && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) {
|
190
|
+
invoke("next", value, resolve, reject);
|
191
|
+
}, function (err) {
|
192
|
+
invoke("throw", err, resolve, reject);
|
193
|
+
}) : PromiseImpl.resolve(value).then(function (unwrapped) {
|
194
|
+
result.value = unwrapped, resolve(result);
|
195
|
+
}, function (error) {
|
196
|
+
return invoke("throw", error, resolve, reject);
|
197
|
+
});
|
198
|
+
}
|
199
|
+
|
200
|
+
reject(record.arg);
|
201
|
+
}
|
202
|
+
|
203
|
+
var previousPromise;
|
204
|
+
|
205
|
+
this._invoke = function (method, arg) {
|
206
|
+
function callInvokeWithMethodAndArg() {
|
207
|
+
return new PromiseImpl(function (resolve, reject) {
|
208
|
+
invoke(method, arg, resolve, reject);
|
209
|
+
});
|
210
|
+
}
|
211
|
+
|
212
|
+
return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
|
213
|
+
};
|
214
|
+
}
|
215
|
+
|
216
|
+
function maybeInvokeDelegate(delegate, context) {
|
217
|
+
var method = delegate.iterator[context.method];
|
218
|
+
|
219
|
+
if (undefined === method) {
|
220
|
+
if (context.delegate = null, "throw" === context.method) {
|
221
|
+
if (delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel;
|
222
|
+
context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method");
|
223
|
+
}
|
224
|
+
|
225
|
+
return ContinueSentinel;
|
226
|
+
}
|
227
|
+
|
228
|
+
var record = tryCatch(method, delegate.iterator, context.arg);
|
229
|
+
if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel;
|
230
|
+
var info = record.arg;
|
231
|
+
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);
|
232
|
+
}
|
233
|
+
|
234
|
+
function pushTryEntry(locs) {
|
235
|
+
var entry = {
|
236
|
+
tryLoc: locs[0]
|
237
|
+
};
|
238
|
+
1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry);
|
239
|
+
}
|
240
|
+
|
241
|
+
function resetTryEntry(entry) {
|
242
|
+
var record = entry.completion || {};
|
243
|
+
record.type = "normal", delete record.arg, entry.completion = record;
|
244
|
+
}
|
245
|
+
|
246
|
+
function Context(tryLocsList) {
|
247
|
+
this.tryEntries = [{
|
248
|
+
tryLoc: "root"
|
249
|
+
}], tryLocsList.forEach(pushTryEntry, this), this.reset(!0);
|
250
|
+
}
|
251
|
+
|
252
|
+
function values(iterable) {
|
253
|
+
if (iterable) {
|
254
|
+
var iteratorMethod = iterable[iteratorSymbol];
|
255
|
+
if (iteratorMethod) return iteratorMethod.call(iterable);
|
256
|
+
if ("function" == typeof iterable.next) return iterable;
|
257
|
+
|
258
|
+
if (!isNaN(iterable.length)) {
|
259
|
+
var i = -1,
|
260
|
+
next = function next() {
|
261
|
+
for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next;
|
262
|
+
|
263
|
+
return next.value = undefined, next.done = !0, next;
|
264
|
+
};
|
265
|
+
|
266
|
+
return next.next = next;
|
267
|
+
}
|
268
|
+
}
|
269
|
+
|
270
|
+
return {
|
271
|
+
next: doneResult
|
272
|
+
};
|
273
|
+
}
|
274
|
+
|
275
|
+
function doneResult() {
|
276
|
+
return {
|
277
|
+
value: undefined,
|
278
|
+
done: !0
|
279
|
+
};
|
280
|
+
}
|
281
|
+
|
282
|
+
return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) {
|
283
|
+
var ctor = "function" == typeof genFun && genFun.constructor;
|
284
|
+
return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name));
|
285
|
+
}, exports.mark = function (genFun) {
|
286
|
+
return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun;
|
287
|
+
}, exports.awrap = function (arg) {
|
288
|
+
return {
|
289
|
+
__await: arg
|
290
|
+
};
|
291
|
+
}, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
|
292
|
+
return this;
|
293
|
+
}), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) {
|
294
|
+
void 0 === PromiseImpl && (PromiseImpl = Promise);
|
295
|
+
var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl);
|
296
|
+
return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) {
|
297
|
+
return result.done ? result.value : iter.next();
|
298
|
+
});
|
299
|
+
}, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () {
|
300
|
+
return this;
|
301
|
+
}), define(Gp, "toString", function () {
|
302
|
+
return "[object Generator]";
|
303
|
+
}), exports.keys = function (object) {
|
304
|
+
var keys = [];
|
305
|
+
|
306
|
+
for (var key in object) keys.push(key);
|
307
|
+
|
308
|
+
return keys.reverse(), function next() {
|
309
|
+
for (; keys.length;) {
|
310
|
+
var key = keys.pop();
|
311
|
+
if (key in object) return next.value = key, next.done = !1, next;
|
312
|
+
}
|
313
|
+
|
314
|
+
return next.done = !0, next;
|
315
|
+
};
|
316
|
+
}, exports.values = values, Context.prototype = {
|
317
|
+
constructor: Context,
|
318
|
+
reset: function (skipTempReset) {
|
319
|
+
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);
|
320
|
+
},
|
321
|
+
stop: function () {
|
322
|
+
this.done = !0;
|
323
|
+
var rootRecord = this.tryEntries[0].completion;
|
324
|
+
if ("throw" === rootRecord.type) throw rootRecord.arg;
|
325
|
+
return this.rval;
|
326
|
+
},
|
327
|
+
dispatchException: function (exception) {
|
328
|
+
if (this.done) throw exception;
|
329
|
+
var context = this;
|
330
|
+
|
331
|
+
function handle(loc, caught) {
|
332
|
+
return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught;
|
333
|
+
}
|
334
|
+
|
335
|
+
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
|
336
|
+
var entry = this.tryEntries[i],
|
337
|
+
record = entry.completion;
|
338
|
+
if ("root" === entry.tryLoc) return handle("end");
|
339
|
+
|
340
|
+
if (entry.tryLoc <= this.prev) {
|
341
|
+
var hasCatch = hasOwn.call(entry, "catchLoc"),
|
342
|
+
hasFinally = hasOwn.call(entry, "finallyLoc");
|
343
|
+
|
344
|
+
if (hasCatch && hasFinally) {
|
345
|
+
if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
|
346
|
+
if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
|
347
|
+
} else if (hasCatch) {
|
348
|
+
if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
|
349
|
+
} else {
|
350
|
+
if (!hasFinally) throw new Error("try statement without catch or finally");
|
351
|
+
if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
|
352
|
+
}
|
353
|
+
}
|
354
|
+
}
|
355
|
+
},
|
356
|
+
abrupt: function (type, arg) {
|
357
|
+
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
|
358
|
+
var entry = this.tryEntries[i];
|
359
|
+
|
360
|
+
if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) {
|
361
|
+
var finallyEntry = entry;
|
362
|
+
break;
|
363
|
+
}
|
364
|
+
}
|
365
|
+
|
366
|
+
finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null);
|
367
|
+
var record = finallyEntry ? finallyEntry.completion : {};
|
368
|
+
return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record);
|
369
|
+
},
|
370
|
+
complete: function (record, afterLoc) {
|
371
|
+
if ("throw" === record.type) throw record.arg;
|
372
|
+
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;
|
373
|
+
},
|
374
|
+
finish: function (finallyLoc) {
|
375
|
+
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
|
376
|
+
var entry = this.tryEntries[i];
|
377
|
+
if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel;
|
378
|
+
}
|
379
|
+
},
|
380
|
+
catch: function (tryLoc) {
|
381
|
+
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
|
382
|
+
var entry = this.tryEntries[i];
|
383
|
+
|
384
|
+
if (entry.tryLoc === tryLoc) {
|
385
|
+
var record = entry.completion;
|
386
|
+
|
387
|
+
if ("throw" === record.type) {
|
388
|
+
var thrown = record.arg;
|
389
|
+
resetTryEntry(entry);
|
390
|
+
}
|
391
|
+
|
392
|
+
return thrown;
|
393
|
+
}
|
394
|
+
}
|
395
|
+
|
396
|
+
throw new Error("illegal catch attempt");
|
397
|
+
},
|
398
|
+
delegateYield: function (iterable, resultName, nextLoc) {
|
399
|
+
return this.delegate = {
|
400
|
+
iterator: values(iterable),
|
401
|
+
resultName: resultName,
|
402
|
+
nextLoc: nextLoc
|
403
|
+
}, "next" === this.method && (this.arg = undefined), ContinueSentinel;
|
404
|
+
}
|
405
|
+
}, exports;
|
406
|
+
}
|
407
|
+
|
408
|
+
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
409
|
+
try {
|
410
|
+
var info = gen[key](arg);
|
411
|
+
var value = info.value;
|
412
|
+
} catch (error) {
|
413
|
+
reject(error);
|
414
|
+
return;
|
415
|
+
}
|
416
|
+
|
417
|
+
if (info.done) {
|
418
|
+
resolve(value);
|
419
|
+
} else {
|
420
|
+
Promise.resolve(value).then(_next, _throw);
|
421
|
+
}
|
422
|
+
}
|
423
|
+
|
424
|
+
function _asyncToGenerator(fn) {
|
425
|
+
return function () {
|
426
|
+
var self = this,
|
427
|
+
args = arguments;
|
428
|
+
return new Promise(function (resolve, reject) {
|
429
|
+
var gen = fn.apply(self, args);
|
430
|
+
|
431
|
+
function _next(value) {
|
432
|
+
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
433
|
+
}
|
434
|
+
|
435
|
+
function _throw(err) {
|
436
|
+
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
437
|
+
}
|
438
|
+
|
439
|
+
_next(undefined);
|
440
|
+
});
|
441
|
+
};
|
442
|
+
}
|
443
|
+
|
444
|
+
function _defineProperty(obj, key, value) {
|
445
|
+
if (key in obj) {
|
446
|
+
Object.defineProperty(obj, key, {
|
447
|
+
value: value,
|
448
|
+
enumerable: true,
|
449
|
+
configurable: true,
|
450
|
+
writable: true
|
451
|
+
});
|
452
|
+
} else {
|
453
|
+
obj[key] = value;
|
454
|
+
}
|
455
|
+
|
456
|
+
return obj;
|
457
|
+
}
|
458
|
+
|
459
|
+
function _objectWithoutPropertiesLoose(source, excluded) {
|
460
|
+
if (source == null) return {};
|
461
|
+
var target = {};
|
462
|
+
var sourceKeys = Object.keys(source);
|
463
|
+
var key, i;
|
464
|
+
|
465
|
+
for (i = 0; i < sourceKeys.length; i++) {
|
466
|
+
key = sourceKeys[i];
|
467
|
+
if (excluded.indexOf(key) >= 0) continue;
|
468
|
+
target[key] = source[key];
|
469
|
+
}
|
470
|
+
|
471
|
+
return target;
|
472
|
+
}
|
473
|
+
|
474
|
+
function _objectWithoutProperties(source, excluded) {
|
475
|
+
if (source == null) return {};
|
476
|
+
|
477
|
+
var target = _objectWithoutPropertiesLoose(source, excluded);
|
478
|
+
|
479
|
+
var key, i;
|
480
|
+
|
481
|
+
if (Object.getOwnPropertySymbols) {
|
482
|
+
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
483
|
+
|
484
|
+
for (i = 0; i < sourceSymbolKeys.length; i++) {
|
485
|
+
key = sourceSymbolKeys[i];
|
486
|
+
if (excluded.indexOf(key) >= 0) continue;
|
487
|
+
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
488
|
+
target[key] = source[key];
|
489
|
+
}
|
490
|
+
}
|
491
|
+
|
492
|
+
return target;
|
493
|
+
}
|
494
|
+
|
495
|
+
function _slicedToArray(arr, i) {
|
496
|
+
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
497
|
+
}
|
498
|
+
|
499
|
+
function _toConsumableArray(arr) {
|
500
|
+
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
|
501
|
+
}
|
502
|
+
|
503
|
+
function _arrayWithoutHoles(arr) {
|
504
|
+
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
|
505
|
+
}
|
506
|
+
|
507
|
+
function _arrayWithHoles(arr) {
|
508
|
+
if (Array.isArray(arr)) return arr;
|
509
|
+
}
|
510
|
+
|
511
|
+
function _iterableToArray(iter) {
|
512
|
+
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
|
513
|
+
}
|
514
|
+
|
515
|
+
function _iterableToArrayLimit(arr, i) {
|
516
|
+
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
517
|
+
|
518
|
+
if (_i == null) return;
|
519
|
+
var _arr = [];
|
520
|
+
var _n = true;
|
521
|
+
var _d = false;
|
522
|
+
|
523
|
+
var _s, _e;
|
524
|
+
|
525
|
+
try {
|
526
|
+
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
|
527
|
+
_arr.push(_s.value);
|
528
|
+
|
529
|
+
if (i && _arr.length === i) break;
|
530
|
+
}
|
531
|
+
} catch (err) {
|
532
|
+
_d = true;
|
533
|
+
_e = err;
|
534
|
+
} finally {
|
535
|
+
try {
|
536
|
+
if (!_n && _i["return"] != null) _i["return"]();
|
537
|
+
} finally {
|
538
|
+
if (_d) throw _e;
|
539
|
+
}
|
540
|
+
}
|
541
|
+
|
542
|
+
return _arr;
|
543
|
+
}
|
544
|
+
|
545
|
+
function _unsupportedIterableToArray(o, minLen) {
|
546
|
+
if (!o) return;
|
547
|
+
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
548
|
+
var n = Object.prototype.toString.call(o).slice(8, -1);
|
549
|
+
if (n === "Object" && o.constructor) n = o.constructor.name;
|
550
|
+
if (n === "Map" || n === "Set") return Array.from(o);
|
551
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
552
|
+
}
|
553
|
+
|
554
|
+
function _arrayLikeToArray(arr, len) {
|
555
|
+
if (len == null || len > arr.length) len = arr.length;
|
556
|
+
|
557
|
+
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
558
|
+
|
559
|
+
return arr2;
|
560
|
+
}
|
561
|
+
|
562
|
+
function _nonIterableSpread() {
|
563
|
+
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
564
|
+
}
|
565
|
+
|
566
|
+
function _nonIterableRest() {
|
567
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
568
|
+
}
|
569
|
+
|
38
570
|
/**
|
39
571
|
* Replace all text with emoji with an image html tag
|
40
572
|
* @param {string} text
|
@@ -42,12 +574,12 @@ styleInject(css_248z);
|
|
42
574
|
*/
|
43
575
|
|
44
576
|
function replaceAllTextEmojis(text) {
|
45
|
-
|
577
|
+
var allEmojis = getAllEmojisFromText(text);
|
46
578
|
|
47
579
|
if (allEmojis) {
|
48
|
-
allEmojis =
|
580
|
+
allEmojis = _toConsumableArray(new Set(allEmojis)); // remove duplicates
|
49
581
|
|
50
|
-
allEmojis.forEach(emoji
|
582
|
+
allEmojis.forEach(function (emoji) {
|
51
583
|
text = replaceAll(text, emoji, getInputEmojiHTML(emoji));
|
52
584
|
});
|
53
585
|
}
|
@@ -84,7 +616,7 @@ function getAllEmojisFromText(text) {
|
|
84
616
|
|
85
617
|
|
86
618
|
function getImageEmoji(emoji) {
|
87
|
-
return getInputEmojiHTML(emoji
|
619
|
+
return getInputEmojiHTML(emoji["native"]);
|
88
620
|
} // eslint-disable-next-line valid-jsdoc
|
89
621
|
|
90
622
|
/**
|
@@ -94,7 +626,7 @@ function getImageEmoji(emoji) {
|
|
94
626
|
*/
|
95
627
|
|
96
628
|
function getInputEmojiHTML(emoji) {
|
97
|
-
return
|
629
|
+
return "<span class=\"width: 18px; height: 18px; display: inline-block; margin: 0 1px;\">".concat(emoji, "</span>");
|
98
630
|
}
|
99
631
|
/**
|
100
632
|
*
|
@@ -104,10 +636,10 @@ function getInputEmojiHTML(emoji) {
|
|
104
636
|
|
105
637
|
|
106
638
|
function replaceAllTextEmojiToString(html) {
|
107
|
-
|
639
|
+
var container = document.createElement("div");
|
108
640
|
container.innerHTML = html;
|
109
|
-
|
110
|
-
images.forEach(image
|
641
|
+
var images = Array.prototype.slice.call(container.querySelectorAll("img"));
|
642
|
+
images.forEach(function (image) {
|
111
643
|
container.innerHTML = container.innerHTML.replace(image.outerHTML, image.dataset.emoji);
|
112
644
|
});
|
113
645
|
return container.innerHTML;
|
@@ -120,8 +652,8 @@ function replaceAllTextEmojiToString(html) {
|
|
120
652
|
*/
|
121
653
|
|
122
654
|
function handlePasteHtmlAtCaret(html) {
|
123
|
-
|
124
|
-
|
655
|
+
var sel;
|
656
|
+
var range;
|
125
657
|
|
126
658
|
if (window.getSelection) {
|
127
659
|
// IE9 and non-IE
|
@@ -133,11 +665,11 @@ function handlePasteHtmlAtCaret(html) {
|
|
133
665
|
range.deleteContents(); // Range.createContextualFragment() would be useful here but is
|
134
666
|
// non-standard and not supported in all browsers (IE9, for one)
|
135
667
|
|
136
|
-
|
668
|
+
var el = document.createElement("div");
|
137
669
|
el.innerHTML = html;
|
138
|
-
|
139
|
-
|
140
|
-
|
670
|
+
var frag = document.createDocumentFragment();
|
671
|
+
var node;
|
672
|
+
var lastNode;
|
141
673
|
|
142
674
|
while (node = el.firstChild) {
|
143
675
|
lastNode = frag.appendChild(node);
|
@@ -161,12 +693,11 @@ function handlePasteHtmlAtCaret(html) {
|
|
161
693
|
* @return {number}
|
162
694
|
*/
|
163
695
|
|
164
|
-
function totalCharacters({
|
165
|
-
text,
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
const emojisCount = (html.match(/<img/g) || []).length;
|
696
|
+
function totalCharacters(_ref2) {
|
697
|
+
var text = _ref2.text,
|
698
|
+
html = _ref2.html;
|
699
|
+
var textCount = text.length;
|
700
|
+
var emojisCount = (html.match(/<img/g) || []).length;
|
170
701
|
return textCount + emojisCount;
|
171
702
|
} // eslint-disable-next-line valid-jsdoc
|
172
703
|
|
@@ -180,17 +711,17 @@ function totalCharacters({
|
|
180
711
|
|
181
712
|
function useSanitize() {
|
182
713
|
/** @type {React.MutableRefObject<SanitizeFn[]>} */
|
183
|
-
|
184
|
-
|
714
|
+
var sanitizeFnsRef = useRef([]);
|
715
|
+
var sanitizedTextRef = useRef("");
|
185
716
|
/** @type {(fn: SanitizeFn) => void} */
|
186
717
|
|
187
|
-
|
718
|
+
var addSanitizeFn = useCallback(function (fn) {
|
188
719
|
sanitizeFnsRef.current.push(fn);
|
189
720
|
}, []);
|
190
721
|
/** @type {(html: string) => string} */
|
191
722
|
|
192
|
-
|
193
|
-
|
723
|
+
var sanitize = useCallback(function (html) {
|
724
|
+
var result = sanitizeFnsRef.current.reduce(function (acc, fn) {
|
194
725
|
return fn(acc);
|
195
726
|
}, html);
|
196
727
|
result = replaceAllHtmlToString(result);
|
@@ -198,9 +729,9 @@ function useSanitize() {
|
|
198
729
|
return result;
|
199
730
|
}, []);
|
200
731
|
return {
|
201
|
-
addSanitizeFn,
|
202
|
-
sanitize,
|
203
|
-
sanitizedTextRef
|
732
|
+
addSanitizeFn: addSanitizeFn,
|
733
|
+
sanitize: sanitize,
|
734
|
+
sanitizedTextRef: sanitizedTextRef
|
204
735
|
};
|
205
736
|
}
|
206
737
|
/**
|
@@ -210,9 +741,9 @@ function useSanitize() {
|
|
210
741
|
*/
|
211
742
|
|
212
743
|
function replaceAllHtmlToString(html) {
|
213
|
-
|
744
|
+
var container = document.createElement("div");
|
214
745
|
container.innerHTML = html;
|
215
|
-
|
746
|
+
var text = container.innerText || ""; // remove all ↵ for safari
|
216
747
|
|
217
748
|
text = text.replace(/\n/gi, "");
|
218
749
|
return text;
|
@@ -232,37 +763,39 @@ function replaceAllHtmlToString(html) {
|
|
232
763
|
* @param {Props} props
|
233
764
|
*/
|
234
765
|
|
235
|
-
function useExpose({
|
236
|
-
ref,
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
}) {
|
241
|
-
const {
|
242
|
-
sanitize,
|
243
|
-
sanitizedTextRef
|
244
|
-
} = useSanitize();
|
245
|
-
useImperativeHandle(ref, () => ({
|
246
|
-
get value() {
|
247
|
-
return sanitizedTextRef.current;
|
248
|
-
},
|
766
|
+
function useExpose(_ref) {
|
767
|
+
var ref = _ref.ref,
|
768
|
+
textInputRef = _ref.textInputRef,
|
769
|
+
setValue = _ref.setValue,
|
770
|
+
emitChange = _ref.emitChange;
|
249
771
|
|
250
|
-
|
251
|
-
|
252
|
-
|
772
|
+
var _useSanitize = useSanitize(),
|
773
|
+
sanitize = _useSanitize.sanitize,
|
774
|
+
sanitizedTextRef = _useSanitize.sanitizedTextRef;
|
253
775
|
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
if (textInputRef.current !== null) {
|
260
|
-
sanitize(textInputRef.current.html);
|
261
|
-
}
|
776
|
+
useImperativeHandle(ref, function () {
|
777
|
+
return {
|
778
|
+
get value() {
|
779
|
+
return sanitizedTextRef.current;
|
780
|
+
},
|
262
781
|
|
263
|
-
|
264
|
-
|
265
|
-
|
782
|
+
set value(value) {
|
783
|
+
setValue(value);
|
784
|
+
},
|
785
|
+
|
786
|
+
focus: function focus() {
|
787
|
+
if (textInputRef.current === null) return;
|
788
|
+
textInputRef.current.focus();
|
789
|
+
},
|
790
|
+
blur: function blur() {
|
791
|
+
if (textInputRef.current !== null) {
|
792
|
+
sanitize(textInputRef.current.html);
|
793
|
+
}
|
794
|
+
|
795
|
+
emitChange();
|
796
|
+
}
|
797
|
+
};
|
798
|
+
});
|
266
799
|
}
|
267
800
|
|
268
801
|
// @ts-check
|
@@ -276,12 +809,12 @@ function useExpose({
|
|
276
809
|
|
277
810
|
function useEmit(textInputRef, onResize, onChange) {
|
278
811
|
/** @type {React.MutableRefObject<{width: number; height: number} | null>} */
|
279
|
-
|
280
|
-
|
281
|
-
|
812
|
+
var currentSizeRef = useRef(null);
|
813
|
+
var onChangeFn = useRef(onChange);
|
814
|
+
var checkAndEmitResize = useCallback(function () {
|
282
815
|
if (textInputRef.current !== null) {
|
283
|
-
|
284
|
-
|
816
|
+
var currentSize = currentSizeRef.current;
|
817
|
+
var nextSize = textInputRef.current.size;
|
285
818
|
|
286
819
|
if ((!currentSize || currentSize.width !== nextSize.width || currentSize.height !== nextSize.height) && typeof onResize === "function") {
|
287
820
|
onResize(nextSize);
|
@@ -290,7 +823,7 @@ function useEmit(textInputRef, onResize, onChange) {
|
|
290
823
|
currentSizeRef.current = nextSize;
|
291
824
|
}
|
292
825
|
}, [onResize, textInputRef]);
|
293
|
-
|
826
|
+
var emitChange = useCallback(function (sanitizedText) {
|
294
827
|
if (typeof onChangeFn.current === "function") {
|
295
828
|
onChangeFn.current(sanitizedText);
|
296
829
|
}
|
@@ -299,7 +832,7 @@ function useEmit(textInputRef, onResize, onChange) {
|
|
299
832
|
checkAndEmitResize();
|
300
833
|
}
|
301
834
|
}, [checkAndEmitResize, onResize]);
|
302
|
-
useEffect(()
|
835
|
+
useEffect(function () {
|
303
836
|
if (textInputRef.current) {
|
304
837
|
checkAndEmitResize();
|
305
838
|
}
|
@@ -307,7 +840,7 @@ function useEmit(textInputRef, onResize, onChange) {
|
|
307
840
|
return emitChange;
|
308
841
|
}
|
309
842
|
|
310
|
-
|
843
|
+
var _excluded = ["placeholder", "style", "tabIndex", "className", "onChange"];
|
311
844
|
/**
|
312
845
|
* @typedef {Object} Props
|
313
846
|
* @property {(event: React.KeyboardEvent) => void} onKeyDown
|
@@ -340,91 +873,92 @@ function useEmit(textInputRef, onResize, onChange) {
|
|
340
873
|
|
341
874
|
/** @type {React.ForwardRefRenderFunction<Ref, Props>} */
|
342
875
|
|
343
|
-
|
344
|
-
placeholder,
|
345
|
-
|
346
|
-
|
347
|
-
|
348
|
-
|
349
|
-
|
350
|
-
}, ref) => {
|
351
|
-
useImperativeHandle(ref, () => ({
|
352
|
-
appendContent: html => {
|
353
|
-
if (textInputRef.current) {
|
354
|
-
textInputRef.current.focus();
|
355
|
-
}
|
356
|
-
|
357
|
-
handlePasteHtmlAtCaret(html);
|
876
|
+
var TextInput = function TextInput(_ref, ref) {
|
877
|
+
var placeholder = _ref.placeholder,
|
878
|
+
style = _ref.style,
|
879
|
+
tabIndex = _ref.tabIndex,
|
880
|
+
className = _ref.className,
|
881
|
+
onChange = _ref.onChange,
|
882
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
358
883
|
|
359
|
-
|
360
|
-
|
361
|
-
|
362
|
-
|
363
|
-
|
364
|
-
|
365
|
-
} else if (placeholderRef.current) {
|
366
|
-
placeholderRef.current.style.visibility = "hidden";
|
367
|
-
}
|
884
|
+
useImperativeHandle(ref, function () {
|
885
|
+
return {
|
886
|
+
appendContent: function appendContent(html) {
|
887
|
+
if (textInputRef.current) {
|
888
|
+
textInputRef.current.focus();
|
889
|
+
}
|
368
890
|
|
369
|
-
|
370
|
-
onChange(textInputRef.current.innerHTML);
|
371
|
-
}
|
372
|
-
},
|
891
|
+
handlePasteHtmlAtCaret(html);
|
373
892
|
|
374
|
-
|
375
|
-
|
376
|
-
|
377
|
-
}
|
893
|
+
if (textInputRef.current) {
|
894
|
+
textInputRef.current.focus();
|
895
|
+
}
|
378
896
|
|
379
|
-
|
380
|
-
if (value.trim() === "") {
|
897
|
+
if (textInputRef.current && placeholderRef.current && textInputRef.current.innerHTML.trim() === "") {
|
381
898
|
placeholderRef.current.style.visibility = "visible";
|
382
|
-
} else {
|
899
|
+
} else if (placeholderRef.current) {
|
383
900
|
placeholderRef.current.style.visibility = "hidden";
|
384
901
|
}
|
385
|
-
}
|
386
902
|
|
387
|
-
|
388
|
-
|
389
|
-
|
390
|
-
|
903
|
+
if (textInputRef.current && typeof onChange === 'function') {
|
904
|
+
onChange(textInputRef.current.innerHTML);
|
905
|
+
}
|
906
|
+
},
|
391
907
|
|
392
|
-
|
393
|
-
|
394
|
-
|
395
|
-
|
908
|
+
set html(value) {
|
909
|
+
if (textInputRef.current) {
|
910
|
+
textInputRef.current.innerHTML = value;
|
911
|
+
}
|
396
912
|
|
397
|
-
|
398
|
-
|
399
|
-
|
400
|
-
|
913
|
+
if (placeholderRef.current) {
|
914
|
+
if (value.trim() === "") {
|
915
|
+
placeholderRef.current.style.visibility = "visible";
|
916
|
+
} else {
|
917
|
+
placeholderRef.current.style.visibility = "hidden";
|
918
|
+
}
|
919
|
+
}
|
401
920
|
|
402
|
-
|
403
|
-
|
404
|
-
|
405
|
-
|
406
|
-
height: 0
|
407
|
-
};
|
408
|
-
}
|
921
|
+
if (typeof onChange === 'function' && textInputRef.current) {
|
922
|
+
onChange(textInputRef.current.innerHTML);
|
923
|
+
}
|
924
|
+
},
|
409
925
|
|
410
|
-
|
411
|
-
|
412
|
-
|
413
|
-
}
|
414
|
-
},
|
926
|
+
get html() {
|
927
|
+
if (!textInputRef.current) return '';
|
928
|
+
return textInputRef.current.innerHTML;
|
929
|
+
},
|
415
930
|
|
416
|
-
|
417
|
-
|
418
|
-
|
419
|
-
|
931
|
+
get text() {
|
932
|
+
if (!textInputRef.current) return '';
|
933
|
+
return textInputRef.current.innerText;
|
934
|
+
},
|
420
935
|
|
421
|
-
|
936
|
+
get size() {
|
937
|
+
if (!textInputRef.current) {
|
938
|
+
return {
|
939
|
+
width: 0,
|
940
|
+
height: 0
|
941
|
+
};
|
942
|
+
}
|
943
|
+
|
944
|
+
return {
|
945
|
+
width: textInputRef.current.offsetWidth,
|
946
|
+
height: textInputRef.current.offsetHeight
|
947
|
+
};
|
948
|
+
},
|
949
|
+
|
950
|
+
focus: function focus() {
|
951
|
+
if (!textInputRef.current) return;
|
952
|
+
textInputRef.current.focus();
|
953
|
+
}
|
954
|
+
};
|
955
|
+
});
|
422
956
|
/** @type {React.MutableRefObject<HTMLDivElement | null>} */
|
423
957
|
|
424
|
-
|
958
|
+
var placeholderRef = useRef(null);
|
425
959
|
/** @type {React.MutableRefObject<HTMLDivElement | null>} */
|
426
960
|
|
427
|
-
|
961
|
+
var textInputRef = useRef(null);
|
428
962
|
/**
|
429
963
|
*
|
430
964
|
* @param {React.KeyboardEvent} event
|
@@ -459,10 +993,12 @@ const TextInput = ({
|
|
459
993
|
|
460
994
|
function handleKeyUp(event) {
|
461
995
|
props.onKeyUp(event);
|
462
|
-
|
996
|
+
var input = textInputRef.current;
|
463
997
|
|
464
998
|
if (placeholderRef.current) {
|
465
|
-
|
999
|
+
var _input$innerText;
|
1000
|
+
|
1001
|
+
if ((input === null || input === void 0 ? void 0 : (_input$innerText = input.innerText) === null || _input$innerText === void 0 ? void 0 : _input$innerText.trim()) === "") {
|
466
1002
|
placeholderRef.current.style.visibility = "visible";
|
467
1003
|
} else {
|
468
1004
|
placeholderRef.current.style.visibility = "hidden";
|
@@ -489,7 +1025,7 @@ const TextInput = ({
|
|
489
1025
|
onKeyUp: handleKeyUp,
|
490
1026
|
tabIndex: tabIndex,
|
491
1027
|
contentEditable: true,
|
492
|
-
className:
|
1028
|
+
className: "react-input-emoji--input".concat(className ? " ".concat(className) : ""),
|
493
1029
|
onBlur: props.onBlur,
|
494
1030
|
onCopy: props.onCopy,
|
495
1031
|
onPaste: props.onPaste,
|
@@ -497,9 +1033,8 @@ const TextInput = ({
|
|
497
1033
|
})));
|
498
1034
|
};
|
499
1035
|
|
500
|
-
|
1036
|
+
var TextInputWithRef = /*#__PURE__*/forwardRef(TextInput);
|
501
1037
|
|
502
|
-
/* eslint-disable react/prop-types */
|
503
1038
|
/**
|
504
1039
|
* @typedef {object} Props
|
505
1040
|
* @property {boolean} showPicker
|
@@ -513,23 +1048,29 @@ const TextInputWithRef = /*#__PURE__*/forwardRef(TextInput);
|
|
513
1048
|
* @return {JSX.Element}
|
514
1049
|
*/
|
515
1050
|
|
516
|
-
function EmojiPickerButton({
|
517
|
-
showPicker,
|
518
|
-
|
519
|
-
|
520
|
-
|
521
|
-
|
522
|
-
|
523
|
-
|
524
|
-
|
525
|
-
|
1051
|
+
function EmojiPickerButton(_ref) {
|
1052
|
+
var showPicker = _ref.showPicker,
|
1053
|
+
toggleShowPicker = _ref.toggleShowPicker,
|
1054
|
+
buttonElement = _ref.buttonElement;
|
1055
|
+
var buttonRef = useRef(null);
|
1056
|
+
|
1057
|
+
var _useState = useState(false),
|
1058
|
+
_useState2 = _slicedToArray(_useState, 2),
|
1059
|
+
showCustomButtonContent = _useState2[0],
|
1060
|
+
setShowCustomButtonContent = _useState2[1];
|
1061
|
+
|
1062
|
+
useEffect(function () {
|
1063
|
+
var _buttonElement$childN, _buttonElement$childN2;
|
1064
|
+
|
1065
|
+
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) {
|
1066
|
+
buttonRef.current.appendChild(buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.childNodes[0]);
|
526
1067
|
setShowCustomButtonContent(true);
|
527
1068
|
}
|
528
|
-
}, [buttonElement
|
1069
|
+
}, [buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.childNodes]);
|
529
1070
|
return /*#__PURE__*/React.createElement("button", {
|
530
1071
|
ref: buttonRef,
|
531
1072
|
type: "button",
|
532
|
-
className:
|
1073
|
+
className: "react-input-emoji--button".concat(showPicker ? " react-input-emoji--button__show" : ""),
|
533
1074
|
onClick: toggleShowPicker
|
534
1075
|
}, !showCustomButtonContent && /*#__PURE__*/React.createElement("svg", {
|
535
1076
|
xmlns: "http://www.w3.org/2000/svg",
|
@@ -42871,7 +43412,6 @@ function $e5534fc185f7111e$export$2e2bcd8739ae039(props) {
|
|
42871
43412
|
});
|
42872
43413
|
}
|
42873
43414
|
|
42874
|
-
// vendors
|
42875
43415
|
/**
|
42876
43416
|
* @typedef {object} Props
|
42877
43417
|
* @property {'light' | 'dark' | 'auto'} theme
|
@@ -42887,23 +43427,21 @@ function $e5534fc185f7111e$export$2e2bcd8739ae039(props) {
|
|
42887
43427
|
*/
|
42888
43428
|
|
42889
43429
|
function EmojiPicker(props) {
|
42890
|
-
|
42891
|
-
|
42892
|
-
|
42893
|
-
|
42894
|
-
customEmojis
|
42895
|
-
} = props;
|
43430
|
+
var theme = props.theme,
|
43431
|
+
onSelectEmoji = props.onSelectEmoji,
|
43432
|
+
disableRecent = props.disableRecent,
|
43433
|
+
customEmojis = props.customEmojis;
|
42896
43434
|
/** @type {string[]} */
|
42897
43435
|
|
42898
|
-
|
43436
|
+
var categories = useMemo(function () {
|
42899
43437
|
/** @type {string[]} */
|
42900
|
-
|
43438
|
+
var categoryies = [];
|
42901
43439
|
|
42902
43440
|
if (!disableRecent) {
|
42903
43441
|
categoryies.push("frequent");
|
42904
43442
|
}
|
42905
43443
|
|
42906
|
-
categoryies = [
|
43444
|
+
categoryies = [].concat(_toConsumableArray(categoryies), ["people", "nature", "foods", "activity", "places", "objects", "symbols", "flags"]);
|
42907
43445
|
return categoryies;
|
42908
43446
|
}, [disableRecent]);
|
42909
43447
|
return /*#__PURE__*/React.createElement($e5534fc185f7111e$export$2e2bcd8739ae039, {
|
@@ -42939,18 +43477,19 @@ var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
|
|
42939
43477
|
* @return {JSX.Element}
|
42940
43478
|
*/
|
42941
43479
|
|
42942
|
-
function EmojiPickerContainer({
|
42943
|
-
showPicker,
|
42944
|
-
|
42945
|
-
|
42946
|
-
|
42947
|
-
|
42948
|
-
}) {
|
43480
|
+
function EmojiPickerContainer(_ref) {
|
43481
|
+
var showPicker = _ref.showPicker,
|
43482
|
+
theme = _ref.theme,
|
43483
|
+
handleSelectEmoji = _ref.handleSelectEmoji,
|
43484
|
+
disableRecent = _ref.disableRecent,
|
43485
|
+
customEmojis = _ref.customEmojis;
|
42949
43486
|
return /*#__PURE__*/React.createElement("div", {
|
42950
43487
|
className: "react-emoji-picker--container"
|
42951
43488
|
}, showPicker && /*#__PURE__*/React.createElement("div", {
|
42952
43489
|
className: "react-emoji-picker--wrapper",
|
42953
|
-
onClick:
|
43490
|
+
onClick: function onClick(evt) {
|
43491
|
+
return evt.stopPropagation();
|
43492
|
+
}
|
42954
43493
|
}, /*#__PURE__*/React.createElement("div", {
|
42955
43494
|
className: "react-emoji-picker"
|
42956
43495
|
}, /*#__PURE__*/React.createElement(EmojiPicker$1, {
|
@@ -42961,7 +43500,6 @@ function EmojiPickerContainer({
|
|
42961
43500
|
}))));
|
42962
43501
|
}
|
42963
43502
|
|
42964
|
-
// @ts-check
|
42965
43503
|
/**
|
42966
43504
|
* @typedef {import('../types/types').SanitizeFn} SanitizeFn
|
42967
43505
|
*/
|
@@ -42985,28 +43523,35 @@ function EmojiPickerContainer({
|
|
42985
43523
|
|
42986
43524
|
/** @type {React.FC<Props>} */
|
42987
43525
|
|
42988
|
-
|
42989
|
-
|
42990
|
-
|
42991
|
-
|
42992
|
-
|
42993
|
-
|
42994
|
-
|
42995
|
-
|
42996
|
-
|
42997
|
-
|
42998
|
-
|
42999
|
-
|
43526
|
+
var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
|
43527
|
+
var theme = props.theme,
|
43528
|
+
keepOpened = props.keepOpened,
|
43529
|
+
disableRecent = props.disableRecent,
|
43530
|
+
customEmojis = props.customEmojis,
|
43531
|
+
addSanitizeFn = props.addSanitizeFn,
|
43532
|
+
addPolluteFn = props.addPolluteFn,
|
43533
|
+
appendContent = props.appendContent,
|
43534
|
+
buttonElement = props.buttonElement;
|
43535
|
+
|
43536
|
+
var _useState = useState(false),
|
43537
|
+
_useState2 = _slicedToArray(_useState, 2),
|
43538
|
+
showPicker = _useState2[0],
|
43539
|
+
setShowPicker = _useState2[1];
|
43000
43540
|
/** @type {[HTMLDivElement | undefined, React.Dispatch<React.SetStateAction<HTMLDivElement | undefined>>]} */
|
43001
43541
|
|
43002
|
-
|
43003
|
-
|
43542
|
+
|
43543
|
+
var _useState3 = useState(),
|
43544
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
43545
|
+
customButton = _useState4[0],
|
43546
|
+
setCustomButton = _useState4[1];
|
43547
|
+
|
43548
|
+
useEffect(function () {
|
43004
43549
|
addSanitizeFn(replaceAllTextEmojiToString);
|
43005
43550
|
}, [addSanitizeFn]);
|
43006
|
-
useEffect(()
|
43551
|
+
useEffect(function () {
|
43007
43552
|
addPolluteFn(replaceAllTextEmojis);
|
43008
43553
|
}, [addPolluteFn]);
|
43009
|
-
useEffect(()
|
43554
|
+
useEffect(function () {
|
43010
43555
|
/**
|
43011
43556
|
*
|
43012
43557
|
* @param {MouseEvent} event
|
@@ -43014,7 +43559,7 @@ const EmojiPickerWrapper = props => {
|
|
43014
43559
|
function checkClickOutside(event) {
|
43015
43560
|
/** @type {HTMLElement} */
|
43016
43561
|
// @ts-ignore
|
43017
|
-
|
43562
|
+
var element = event.target;
|
43018
43563
|
|
43019
43564
|
if (element.classList.contains("react-input-emoji--button") || element.classList.contains("react-input-emoji--button--icon")) {
|
43020
43565
|
return;
|
@@ -43024,7 +43569,7 @@ const EmojiPickerWrapper = props => {
|
|
43024
43569
|
}
|
43025
43570
|
|
43026
43571
|
document.addEventListener("click", checkClickOutside);
|
43027
|
-
return ()
|
43572
|
+
return function () {
|
43028
43573
|
document.removeEventListener("click", checkClickOutside);
|
43029
43574
|
};
|
43030
43575
|
}, []);
|
@@ -43036,7 +43581,9 @@ const EmojiPickerWrapper = props => {
|
|
43036
43581
|
function toggleShowPicker(event) {
|
43037
43582
|
event.stopPropagation();
|
43038
43583
|
event.preventDefault();
|
43039
|
-
setShowPicker(
|
43584
|
+
setShowPicker(function (currentShowPicker) {
|
43585
|
+
return !currentShowPicker;
|
43586
|
+
});
|
43040
43587
|
} // eslint-disable-next-line valid-jsdoc
|
43041
43588
|
|
43042
43589
|
/**
|
@@ -43049,12 +43596,14 @@ const EmojiPickerWrapper = props => {
|
|
43049
43596
|
appendContent(getImageEmoji(emoji));
|
43050
43597
|
|
43051
43598
|
if (!keepOpened) {
|
43052
|
-
setShowPicker(
|
43599
|
+
setShowPicker(function (currentShowPicker) {
|
43600
|
+
return !currentShowPicker;
|
43601
|
+
});
|
43053
43602
|
}
|
43054
43603
|
}
|
43055
43604
|
|
43056
|
-
useEffect(()
|
43057
|
-
if (buttonElement
|
43605
|
+
useEffect(function () {
|
43606
|
+
if (buttonElement !== null && buttonElement !== void 0 && buttonElement.style) {
|
43058
43607
|
buttonElement.style.position = "relative";
|
43059
43608
|
setCustomButton(buttonElement);
|
43060
43609
|
}
|
@@ -43088,16 +43637,16 @@ const EmojiPickerWrapper = props => {
|
|
43088
43637
|
* @return {string | null}
|
43089
43638
|
*/
|
43090
43639
|
function getTextFromAtToCaret() {
|
43091
|
-
|
43640
|
+
var range = getRangeFromAtToCaret();
|
43092
43641
|
if (!range) return null;
|
43093
|
-
|
43642
|
+
var text = range.text.substring(range.begin, range.end);
|
43094
43643
|
return text || null;
|
43095
43644
|
} // eslint-disable-next-line valid-jsdoc
|
43096
43645
|
|
43097
43646
|
/** */
|
43098
43647
|
|
43099
43648
|
function deleteTextFromAtToCaret() {
|
43100
|
-
|
43649
|
+
var range = getRangeFromAtToCaret();
|
43101
43650
|
if (!range) return; // @ts-ignore
|
43102
43651
|
|
43103
43652
|
range.element.deleteData(range.begin, range.end - range.begin);
|
@@ -43108,18 +43657,16 @@ function deleteTextFromAtToCaret() {
|
|
43108
43657
|
*/
|
43109
43658
|
|
43110
43659
|
function getRangeFromAtToCaret() {
|
43111
|
-
|
43660
|
+
var elementWithFocus = getElementWithFocus();
|
43112
43661
|
|
43113
43662
|
if (!elementWithFocus) {
|
43114
43663
|
return null;
|
43115
43664
|
}
|
43116
43665
|
|
43117
|
-
|
43118
|
-
|
43119
|
-
|
43120
|
-
|
43121
|
-
const text = element.textContent;
|
43122
|
-
const lastAt = text.lastIndexOf("@");
|
43666
|
+
var element = elementWithFocus.element,
|
43667
|
+
caretOffset = elementWithFocus.caretOffset;
|
43668
|
+
var text = element.textContent;
|
43669
|
+
var lastAt = text.lastIndexOf("@");
|
43123
43670
|
|
43124
43671
|
if (lastAt === -1 || lastAt >= caretOffset || lastAt !== 0 && text[lastAt - 1] !== " ") {
|
43125
43672
|
return null;
|
@@ -43128,8 +43675,8 @@ function getRangeFromAtToCaret() {
|
|
43128
43675
|
return {
|
43129
43676
|
begin: lastAt,
|
43130
43677
|
end: caretOffset,
|
43131
|
-
text,
|
43132
|
-
element
|
43678
|
+
text: text,
|
43679
|
+
element: element
|
43133
43680
|
};
|
43134
43681
|
}
|
43135
43682
|
/**
|
@@ -43139,17 +43686,17 @@ function getRangeFromAtToCaret() {
|
|
43139
43686
|
|
43140
43687
|
|
43141
43688
|
function getElementWithFocus() {
|
43142
|
-
|
43689
|
+
var element = getSelectionStart();
|
43143
43690
|
|
43144
43691
|
if (element === null) {
|
43145
43692
|
return null;
|
43146
43693
|
}
|
43147
43694
|
|
43148
|
-
|
43695
|
+
var caretOffset = 0;
|
43149
43696
|
|
43150
43697
|
if (typeof window.getSelection != "undefined") {
|
43151
|
-
|
43152
|
-
|
43698
|
+
var range = window.getSelection().getRangeAt(0);
|
43699
|
+
var preCaretRange = range.cloneRange();
|
43153
43700
|
preCaretRange.selectNodeContents(element);
|
43154
43701
|
preCaretRange.setEnd(range.endContainer, range.endOffset);
|
43155
43702
|
caretOffset = preCaretRange.toString().length;
|
@@ -43157,17 +43704,17 @@ function getElementWithFocus() {
|
|
43157
43704
|
typeof document.selection != "undefined" && // @ts-ignore
|
43158
43705
|
document.selection.type != "Control") {
|
43159
43706
|
// @ts-ignore
|
43160
|
-
|
43707
|
+
var textRange = document.selection.createRange(); // @ts-ignore
|
43161
43708
|
|
43162
|
-
|
43709
|
+
var preCaretTextRange = document.body.createTextRange();
|
43163
43710
|
preCaretTextRange.moveToElementText(element);
|
43164
43711
|
preCaretTextRange.setEndPoint("EndToEnd", textRange);
|
43165
43712
|
caretOffset = preCaretTextRange.text.length;
|
43166
43713
|
}
|
43167
43714
|
|
43168
43715
|
return {
|
43169
|
-
element,
|
43170
|
-
caretOffset
|
43716
|
+
element: element,
|
43717
|
+
caretOffset: caretOffset
|
43171
43718
|
};
|
43172
43719
|
}
|
43173
43720
|
/**
|
@@ -43176,11 +43723,10 @@ function getElementWithFocus() {
|
|
43176
43723
|
*/
|
43177
43724
|
|
43178
43725
|
function getSelectionStart() {
|
43179
|
-
|
43180
|
-
return node
|
43726
|
+
var node = document.getSelection().anchorNode;
|
43727
|
+
return (node === null || node === void 0 ? void 0 : node.nodeType) == 3 ? node : null;
|
43181
43728
|
}
|
43182
43729
|
|
43183
|
-
// @ts-check
|
43184
43730
|
/**
|
43185
43731
|
* @typedef {import('../types/types').MentionUser} MentionUser
|
43186
43732
|
*/
|
@@ -43193,58 +43739,117 @@ function getSelectionStart() {
|
|
43193
43739
|
*/
|
43194
43740
|
|
43195
43741
|
function useMention(searchMention) {
|
43196
|
-
|
43742
|
+
var _useState = useState(false),
|
43743
|
+
_useState2 = _slicedToArray(_useState, 2),
|
43744
|
+
loading = _useState2[0],
|
43745
|
+
setLoading = _useState2[1];
|
43197
43746
|
/** @type {[MentionUser[], React.Dispatch<React.SetStateAction<MentionUser[]>>]} */
|
43198
43747
|
|
43199
|
-
|
43748
|
+
|
43749
|
+
var _useState3 = useState([]),
|
43750
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
43751
|
+
mentionUsers = _useState4[0],
|
43752
|
+
setMentionUsers = _useState4[1];
|
43200
43753
|
/** @type {[string | null, React.Dispatch<React.SetStateAction<string | null>>]} */
|
43201
43754
|
|
43202
|
-
|
43203
|
-
|
43755
|
+
|
43756
|
+
var _useState5 = useState(null),
|
43757
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
43758
|
+
mentionSearchText = _useState6[0],
|
43759
|
+
setMentionSearchText = _useState6[1];
|
43760
|
+
|
43761
|
+
var onSelectUser = useCallback(function () {
|
43204
43762
|
deleteTextFromAtToCaret();
|
43205
43763
|
setMentionUsers([]);
|
43206
43764
|
}, []);
|
43207
43765
|
/** */
|
43208
43766
|
|
43209
|
-
|
43210
|
-
|
43211
|
-
|
43767
|
+
var checkMentionText = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
43768
|
+
var metionText, users;
|
43769
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
43770
|
+
while (1) {
|
43771
|
+
switch (_context.prev = _context.next) {
|
43772
|
+
case 0:
|
43773
|
+
metionText = getTextFromAtToCaret();
|
43774
|
+
setMentionSearchText(metionText);
|
43775
|
+
|
43776
|
+
if (!(metionText === null)) {
|
43777
|
+
_context.next = 6;
|
43778
|
+
break;
|
43779
|
+
}
|
43212
43780
|
|
43213
|
-
|
43214
|
-
|
43215
|
-
|
43216
|
-
|
43217
|
-
|
43218
|
-
|
43219
|
-
|
43220
|
-
|
43221
|
-
|
43781
|
+
setMentionUsers([]);
|
43782
|
+
_context.next = 12;
|
43783
|
+
break;
|
43784
|
+
|
43785
|
+
case 6:
|
43786
|
+
setLoading(true);
|
43787
|
+
_context.next = 9;
|
43788
|
+
return searchMention(metionText);
|
43789
|
+
|
43790
|
+
case 9:
|
43791
|
+
users = _context.sent;
|
43792
|
+
setLoading(false);
|
43793
|
+
setMentionUsers(users);
|
43794
|
+
|
43795
|
+
case 12:
|
43796
|
+
case "end":
|
43797
|
+
return _context.stop();
|
43798
|
+
}
|
43799
|
+
}
|
43800
|
+
}, _callee);
|
43801
|
+
})), [searchMention]);
|
43222
43802
|
/** @type {(event: React.KeyboardEvent) => void} */
|
43223
43803
|
|
43224
|
-
|
43225
|
-
|
43804
|
+
var onKeyUp = useCallback( /*#__PURE__*/function () {
|
43805
|
+
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(event) {
|
43806
|
+
var _getElementWithFocus;
|
43807
|
+
|
43808
|
+
var elementWithFocus;
|
43809
|
+
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
43810
|
+
while (1) {
|
43811
|
+
switch (_context2.prev = _context2.next) {
|
43812
|
+
case 0:
|
43813
|
+
if (!(typeof searchMention !== "function")) {
|
43814
|
+
_context2.next = 2;
|
43815
|
+
break;
|
43816
|
+
}
|
43226
43817
|
|
43227
|
-
|
43228
|
-
|
43229
|
-
|
43230
|
-
|
43231
|
-
|
43232
|
-
|
43233
|
-
|
43234
|
-
|
43818
|
+
return _context2.abrupt("return");
|
43819
|
+
|
43820
|
+
case 2:
|
43821
|
+
if (event.key === "Backspace" && (_getElementWithFocus = getElementWithFocus()) !== null && _getElementWithFocus !== void 0 && _getElementWithFocus.element.parentElement.hasAttribute("data-mention-id")) {
|
43822
|
+
elementWithFocus = getElementWithFocus();
|
43823
|
+
elementWithFocus.element.parentElement.remove();
|
43824
|
+
} else if (!["ArrowUp", "ArrowDown", "Esc", "Escape"].includes(event.key)) {
|
43825
|
+
checkMentionText();
|
43826
|
+
}
|
43827
|
+
|
43828
|
+
case 3:
|
43829
|
+
case "end":
|
43830
|
+
return _context2.stop();
|
43831
|
+
}
|
43832
|
+
}
|
43833
|
+
}, _callee2);
|
43834
|
+
}));
|
43835
|
+
|
43836
|
+
return function (_x) {
|
43837
|
+
return _ref2.apply(this, arguments);
|
43838
|
+
};
|
43839
|
+
}(), [checkMentionText, searchMention]);
|
43840
|
+
var onFocus = useCallback(function () {
|
43235
43841
|
checkMentionText();
|
43236
43842
|
}, [checkMentionText]);
|
43237
43843
|
return {
|
43238
|
-
mentionSearchText,
|
43239
|
-
mentionUsers,
|
43240
|
-
onKeyUp,
|
43241
|
-
onFocus,
|
43242
|
-
onSelectUser,
|
43243
|
-
loading
|
43844
|
+
mentionSearchText: mentionSearchText,
|
43845
|
+
mentionUsers: mentionUsers,
|
43846
|
+
onKeyUp: onKeyUp,
|
43847
|
+
onFocus: onFocus,
|
43848
|
+
onSelectUser: onSelectUser,
|
43849
|
+
loading: loading
|
43244
43850
|
};
|
43245
43851
|
}
|
43246
43852
|
|
43247
|
-
// @ts-check
|
43248
43853
|
/**
|
43249
43854
|
* @typedef {import('../types/types').MentionUser} MentionUser
|
43250
43855
|
*/
|
@@ -43268,34 +43873,40 @@ function useMention(searchMention) {
|
|
43268
43873
|
|
43269
43874
|
/** @type {React.ForwardRefRenderFunction<Ref, Props>} */
|
43270
43875
|
|
43271
|
-
|
43272
|
-
users,
|
43273
|
-
|
43274
|
-
|
43275
|
-
|
43276
|
-
}, ref) => {
|
43277
|
-
const [selectedUser, setSelectedUser] = useState(0);
|
43278
|
-
useImperativeHandle(ref, () => ({
|
43279
|
-
prevUser: () => {
|
43280
|
-
setSelectedUser(currentSelectedUser => {
|
43281
|
-
if (currentSelectedUser === 0) {
|
43282
|
-
return 0;
|
43283
|
-
}
|
43876
|
+
var MentionUserList = function MentionUserList(_ref, ref) {
|
43877
|
+
var users = _ref.users,
|
43878
|
+
mentionSearchText = _ref.mentionSearchText,
|
43879
|
+
onSelect = _ref.onSelect,
|
43880
|
+
addEventListener = _ref.addEventListener;
|
43284
43881
|
|
43285
|
-
|
43286
|
-
|
43287
|
-
|
43288
|
-
|
43289
|
-
setSelectedUser(currentSelectedUser => {
|
43290
|
-
if (currentSelectedUser === users.length - 1) {
|
43291
|
-
return users.length - 1;
|
43292
|
-
}
|
43882
|
+
var _useState = useState(0),
|
43883
|
+
_useState2 = _slicedToArray(_useState, 2),
|
43884
|
+
selectedUser = _useState2[0],
|
43885
|
+
setSelectedUser = _useState2[1];
|
43293
43886
|
|
43294
|
-
|
43295
|
-
|
43296
|
-
|
43297
|
-
|
43298
|
-
|
43887
|
+
useImperativeHandle(ref, function () {
|
43888
|
+
return {
|
43889
|
+
prevUser: function prevUser() {
|
43890
|
+
setSelectedUser(function (currentSelectedUser) {
|
43891
|
+
if (currentSelectedUser === 0) {
|
43892
|
+
return 0;
|
43893
|
+
}
|
43894
|
+
|
43895
|
+
return currentSelectedUser - 1;
|
43896
|
+
});
|
43897
|
+
},
|
43898
|
+
nextUser: function nextUser() {
|
43899
|
+
setSelectedUser(function (currentSelectedUser) {
|
43900
|
+
if (currentSelectedUser === users.length - 1) {
|
43901
|
+
return users.length - 1;
|
43902
|
+
}
|
43903
|
+
|
43904
|
+
return currentSelectedUser + 1;
|
43905
|
+
});
|
43906
|
+
}
|
43907
|
+
};
|
43908
|
+
});
|
43909
|
+
useEffect(function () {
|
43299
43910
|
setSelectedUser(0);
|
43300
43911
|
}, [users]);
|
43301
43912
|
/**
|
@@ -43306,22 +43917,22 @@ const MentionUserList = ({
|
|
43306
43917
|
*/
|
43307
43918
|
|
43308
43919
|
function getMentionSelectedNameEl(selectedText, rest) {
|
43309
|
-
return
|
43920
|
+
return "<span class=\"react-input-emoji--mention--item--name__selected\" data-testid=\"metion-selected-word\">".concat(selectedText, "</span>").concat(rest);
|
43310
43921
|
}
|
43311
43922
|
/** @type {(MentionUser & {nameHtml: string})[]} */
|
43312
43923
|
|
43313
43924
|
|
43314
|
-
|
43315
|
-
|
43316
|
-
return users.map(user
|
43317
|
-
|
43925
|
+
var usersFiltered = useMemo(function () {
|
43926
|
+
var searchText = mentionSearchText ? mentionSearchText.substring(1).toLocaleLowerCase() : "";
|
43927
|
+
return users.map(function (user) {
|
43928
|
+
var nameHtml = user.name;
|
43318
43929
|
|
43319
43930
|
if (mentionSearchText && mentionSearchText.length > 1) {
|
43320
43931
|
if (user.name.toLowerCase().startsWith(searchText)) {
|
43321
43932
|
nameHtml = getMentionSelectedNameEl(user.name.substring(0, searchText.length), user.name.substring(searchText.length));
|
43322
43933
|
} else {
|
43323
|
-
|
43324
|
-
nameHtml = names.map(name
|
43934
|
+
var names = user.name.split(" ");
|
43935
|
+
nameHtml = names.map(function (name) {
|
43325
43936
|
if (name.toLocaleLowerCase().startsWith(searchText)) {
|
43326
43937
|
return getMentionSelectedNameEl(name.substring(0, searchText.length), name.substring(searchText.length));
|
43327
43938
|
}
|
@@ -43331,9 +43942,9 @@ const MentionUserList = ({
|
|
43331
43942
|
}
|
43332
43943
|
}
|
43333
43944
|
|
43334
|
-
return {
|
43335
|
-
nameHtml
|
43336
|
-
};
|
43945
|
+
return _objectSpread2(_objectSpread2({}, user), {}, {
|
43946
|
+
nameHtml: nameHtml
|
43947
|
+
});
|
43337
43948
|
});
|
43338
43949
|
}, [mentionSearchText, users]); // eslint-disable-next-line valid-jsdoc
|
43339
43950
|
|
@@ -43344,50 +43955,53 @@ const MentionUserList = ({
|
|
43344
43955
|
*/
|
43345
43956
|
|
43346
43957
|
function handleClick(user) {
|
43347
|
-
return event
|
43958
|
+
return function (event) {
|
43348
43959
|
event.stopPropagation();
|
43349
43960
|
event.preventDefault();
|
43350
43961
|
onSelect(user);
|
43351
43962
|
};
|
43352
43963
|
}
|
43353
43964
|
|
43354
|
-
useEffect(()
|
43355
|
-
|
43965
|
+
useEffect(function () {
|
43966
|
+
var unsubscribe = addEventListener("enter", function (event) {
|
43356
43967
|
event.stopPropagation();
|
43357
43968
|
event.preventDefault();
|
43358
43969
|
onSelect(usersFiltered[selectedUser]);
|
43359
43970
|
});
|
43360
|
-
return ()
|
43971
|
+
return function () {
|
43361
43972
|
unsubscribe();
|
43362
43973
|
};
|
43363
43974
|
}, [addEventListener, onSelect, selectedUser, usersFiltered]);
|
43364
43975
|
return /*#__PURE__*/React.createElement("ul", {
|
43365
43976
|
className: "react-input-emoji--mention--list",
|
43366
43977
|
"data-testid": "mention-user-list"
|
43367
|
-
}, usersFiltered.map((user, index)
|
43368
|
-
|
43369
|
-
|
43370
|
-
|
43371
|
-
|
43372
|
-
|
43373
|
-
|
43374
|
-
|
43375
|
-
|
43376
|
-
|
43377
|
-
|
43378
|
-
|
43379
|
-
|
43380
|
-
|
43381
|
-
|
43382
|
-
|
43978
|
+
}, usersFiltered.map(function (user, index) {
|
43979
|
+
return /*#__PURE__*/React.createElement("li", {
|
43980
|
+
key: user.id
|
43981
|
+
}, /*#__PURE__*/React.createElement("button", {
|
43982
|
+
type: "button",
|
43983
|
+
onClick: handleClick(user),
|
43984
|
+
className: "react-input-emoji--mention--item".concat(selectedUser === index ? " react-input-emoji--mention--item__selected" : ""),
|
43985
|
+
onMouseOver: function onMouseOver() {
|
43986
|
+
return setSelectedUser(index);
|
43987
|
+
}
|
43988
|
+
}, /*#__PURE__*/React.createElement("img", {
|
43989
|
+
className: "react-input-emoji--mention--item--img",
|
43990
|
+
src: user.image
|
43991
|
+
}), /*#__PURE__*/React.createElement("div", {
|
43992
|
+
className: "react-input-emoji--mention--item--name",
|
43993
|
+
dangerouslySetInnerHTML: {
|
43994
|
+
__html: user.nameHtml
|
43995
|
+
}
|
43996
|
+
})));
|
43997
|
+
}));
|
43383
43998
|
};
|
43384
43999
|
|
43385
|
-
|
44000
|
+
var MentionUserListWithRef = /*#__PURE__*/forwardRef(MentionUserList);
|
43386
44001
|
MentionUserListWithRef.propTypes = {
|
43387
44002
|
users: t.array.isRequired
|
43388
44003
|
};
|
43389
44004
|
|
43390
|
-
// @ts-check
|
43391
44005
|
/**
|
43392
44006
|
* @typedef {import('../types/types').MentionUser} MetionUser
|
43393
44007
|
*/
|
@@ -43411,55 +44025,60 @@ MentionUserListWithRef.propTypes = {
|
|
43411
44025
|
|
43412
44026
|
/** @type {React.FC<Props>} */
|
43413
44027
|
|
43414
|
-
|
43415
|
-
searchMention,
|
43416
|
-
|
43417
|
-
|
43418
|
-
|
43419
|
-
|
44028
|
+
var MentionWrapper = function MentionWrapper(_ref) {
|
44029
|
+
var searchMention = _ref.searchMention,
|
44030
|
+
addEventListener = _ref.addEventListener,
|
44031
|
+
appendContent = _ref.appendContent,
|
44032
|
+
addSanitizeFn = _ref.addSanitizeFn;
|
44033
|
+
|
43420
44034
|
/** @type {React.MutableRefObject<import('./mention-user-list').Ref | null>} */
|
43421
|
-
|
43422
|
-
|
43423
|
-
|
43424
|
-
|
43425
|
-
|
43426
|
-
|
43427
|
-
|
43428
|
-
|
43429
|
-
|
43430
|
-
|
43431
|
-
|
43432
|
-
|
43433
|
-
|
44035
|
+
var metionUserListRef = useRef(null);
|
44036
|
+
|
44037
|
+
var _useState = useState(false),
|
44038
|
+
_useState2 = _slicedToArray(_useState, 2),
|
44039
|
+
showUserList = _useState2[0],
|
44040
|
+
setShowUserList = _useState2[1];
|
44041
|
+
|
44042
|
+
var _useMention = useMention(searchMention),
|
44043
|
+
mentionSearchText = _useMention.mentionSearchText,
|
44044
|
+
mentionUsers = _useMention.mentionUsers,
|
44045
|
+
loading = _useMention.loading,
|
44046
|
+
onKeyUp = _useMention.onKeyUp,
|
44047
|
+
onFocus = _useMention.onFocus,
|
44048
|
+
onSelectUser = _useMention.onSelectUser;
|
44049
|
+
|
44050
|
+
useEffect(function () {
|
44051
|
+
addSanitizeFn(function (html) {
|
44052
|
+
var container = document.createElement("div");
|
43434
44053
|
container.innerHTML = html;
|
43435
|
-
|
43436
|
-
mentionsEl.forEach(mentionEl
|
43437
|
-
container.innerHTML = container.innerHTML.replace(mentionEl.outerHTML,
|
44054
|
+
var mentionsEl = Array.prototype.slice.call(container.querySelectorAll(".react-input-emoji--mention--text"));
|
44055
|
+
mentionsEl.forEach(function (mentionEl) {
|
44056
|
+
container.innerHTML = container.innerHTML.replace(mentionEl.outerHTML, "@[".concat(mentionEl.dataset.mentionName, "](userId:").concat(mentionEl.dataset.mentionId, ")"));
|
43438
44057
|
});
|
43439
44058
|
return container.innerHTML;
|
43440
44059
|
});
|
43441
44060
|
}, [addSanitizeFn]);
|
43442
|
-
useEffect(()
|
44061
|
+
useEffect(function () {
|
43443
44062
|
setShowUserList(mentionUsers.length > 0);
|
43444
44063
|
}, [mentionUsers]);
|
43445
|
-
useEffect(()
|
44064
|
+
useEffect(function () {
|
43446
44065
|
/** */
|
43447
44066
|
function checkClickOutside() {
|
43448
44067
|
setShowUserList(false);
|
43449
44068
|
}
|
43450
44069
|
|
43451
44070
|
document.addEventListener("click", checkClickOutside);
|
43452
|
-
return ()
|
44071
|
+
return function () {
|
43453
44072
|
document.removeEventListener("click", checkClickOutside);
|
43454
44073
|
};
|
43455
44074
|
}, []);
|
43456
|
-
useEffect(()
|
43457
|
-
|
43458
|
-
return ()
|
44075
|
+
useEffect(function () {
|
44076
|
+
var unsubscribe = addEventListener("keyUp", onKeyUp);
|
44077
|
+
return function () {
|
43459
44078
|
unsubscribe();
|
43460
44079
|
};
|
43461
44080
|
}, [addEventListener, onKeyUp]);
|
43462
|
-
useEffect(()
|
44081
|
+
useEffect(function () {
|
43463
44082
|
/**
|
43464
44083
|
*
|
43465
44084
|
* @param {React.KeyboardEvent} event
|
@@ -43474,30 +44093,30 @@ const MentionWrapper = ({
|
|
43474
44093
|
}
|
43475
44094
|
}
|
43476
44095
|
|
43477
|
-
|
43478
|
-
return ()
|
44096
|
+
var unsubscribe = addEventListener("keyDown", handleKeyDown);
|
44097
|
+
return function () {
|
43479
44098
|
unsubscribe();
|
43480
44099
|
};
|
43481
44100
|
}, [addEventListener]);
|
43482
|
-
useEffect(()
|
43483
|
-
|
43484
|
-
return ()
|
44101
|
+
useEffect(function () {
|
44102
|
+
var unsubscribe = addEventListener("focus", onFocus);
|
44103
|
+
return function () {
|
43485
44104
|
unsubscribe();
|
43486
44105
|
};
|
43487
44106
|
}, [addEventListener, onFocus]);
|
43488
|
-
useEffect(()
|
44107
|
+
useEffect(function () {
|
43489
44108
|
if (showUserList) {
|
43490
|
-
|
44109
|
+
var unsubscribeArrowUp = addEventListener("arrowUp", function (event) {
|
43491
44110
|
event.stopPropagation();
|
43492
44111
|
event.preventDefault();
|
43493
44112
|
metionUserListRef.current.prevUser();
|
43494
44113
|
});
|
43495
|
-
|
44114
|
+
var unsubscribeArrowDown = addEventListener("arrowDown", function (event) {
|
43496
44115
|
event.stopPropagation();
|
43497
44116
|
event.preventDefault();
|
43498
44117
|
metionUserListRef.current.nextUser();
|
43499
44118
|
});
|
43500
|
-
return ()
|
44119
|
+
return function () {
|
43501
44120
|
unsubscribeArrowUp();
|
43502
44121
|
unsubscribeArrowDown();
|
43503
44122
|
};
|
@@ -43510,7 +44129,7 @@ const MentionWrapper = ({
|
|
43510
44129
|
|
43511
44130
|
function handleSelect(user) {
|
43512
44131
|
onSelectUser();
|
43513
|
-
appendContent(
|
44132
|
+
appendContent("<span class=\"react-input-emoji--mention--text\" data-mention-id=\"".concat(user.id, "\" data-mention-name=\"").concat(user.name, "\">@").concat(user.name, "</span> "));
|
43514
44133
|
}
|
43515
44134
|
|
43516
44135
|
return /*#__PURE__*/React.createElement(React.Fragment, null, loading ? /*#__PURE__*/React.createElement("div", {
|
@@ -43521,7 +44140,9 @@ const MentionWrapper = ({
|
|
43521
44140
|
className: "react-input-emoji--mention--loading--spinner"
|
43522
44141
|
}, "Loading..."))) : showUserList && /*#__PURE__*/React.createElement("div", {
|
43523
44142
|
className: "react-input-emoji--mention--container",
|
43524
|
-
onClick:
|
44143
|
+
onClick: function onClick(evt) {
|
44144
|
+
return evt.stopPropagation();
|
44145
|
+
}
|
43525
44146
|
}, /*#__PURE__*/React.createElement(MentionUserListWithRef, {
|
43526
44147
|
ref: metionUserListRef,
|
43527
44148
|
mentionSearchText: mentionSearchText,
|
@@ -43540,16 +44161,20 @@ const MentionWrapper = ({
|
|
43540
44161
|
*/
|
43541
44162
|
function createObserver() {
|
43542
44163
|
/** @type {import('../types/types').Listerner<T>[]} */
|
43543
|
-
|
44164
|
+
var listeners = [];
|
43544
44165
|
return {
|
43545
|
-
subscribe: listener
|
44166
|
+
subscribe: function subscribe(listener) {
|
43546
44167
|
listeners.push(listener);
|
43547
|
-
return ()
|
43548
|
-
listeners = listeners.filter(
|
44168
|
+
return function () {
|
44169
|
+
listeners = listeners.filter(function (l) {
|
44170
|
+
return l !== listener;
|
44171
|
+
});
|
43549
44172
|
};
|
43550
44173
|
},
|
43551
|
-
publish: event
|
43552
|
-
listeners.forEach(
|
44174
|
+
publish: function publish(event) {
|
44175
|
+
listeners.forEach(function (listener) {
|
44176
|
+
return listener(event);
|
44177
|
+
});
|
43553
44178
|
},
|
43554
44179
|
|
43555
44180
|
get currentListerners() {
|
@@ -43569,26 +44194,28 @@ function createObserver() {
|
|
43569
44194
|
|
43570
44195
|
function useEventListeners() {
|
43571
44196
|
/** @type {TextInputListeners} */
|
43572
|
-
|
43573
|
-
|
43574
|
-
|
43575
|
-
|
43576
|
-
|
43577
|
-
|
43578
|
-
|
43579
|
-
|
43580
|
-
|
44197
|
+
var listeners = useMemo(function () {
|
44198
|
+
return {
|
44199
|
+
keyDown: createObserver(),
|
44200
|
+
keyUp: createObserver(),
|
44201
|
+
arrowUp: createObserver(),
|
44202
|
+
arrowDown: createObserver(),
|
44203
|
+
enter: createObserver(),
|
44204
|
+
focus: createObserver(),
|
44205
|
+
blur: createObserver()
|
44206
|
+
};
|
44207
|
+
}, []);
|
43581
44208
|
/**
|
43582
44209
|
* @template {keyof TextInputListeners} T, K
|
43583
44210
|
* @type {(event: keyof TextInputListeners, fn: import('../types/types').Listerner<any>) => () => void}
|
43584
44211
|
*/
|
43585
44212
|
|
43586
|
-
|
44213
|
+
var addEventListener = useCallback(function (event, fn) {
|
43587
44214
|
return listeners[event].subscribe(fn);
|
43588
44215
|
}, [listeners]);
|
43589
44216
|
return {
|
43590
|
-
addEventListener,
|
43591
|
-
listeners
|
44217
|
+
addEventListener: addEventListener,
|
44218
|
+
listeners: listeners
|
43592
44219
|
};
|
43593
44220
|
}
|
43594
44221
|
|
@@ -43602,23 +44229,23 @@ function useEventListeners() {
|
|
43602
44229
|
|
43603
44230
|
function usePollute() {
|
43604
44231
|
/** @type {React.MutableRefObject<PolluteFn[]>} */
|
43605
|
-
|
44232
|
+
var polluteFnsRef = useRef([]);
|
43606
44233
|
/** @type {(fn: PolluteFn) => void} */
|
43607
44234
|
|
43608
|
-
|
44235
|
+
var addPolluteFn = useCallback(function (fn) {
|
43609
44236
|
polluteFnsRef.current.push(fn);
|
43610
44237
|
}, []);
|
43611
44238
|
/** @type {(html: string) => string} */
|
43612
44239
|
|
43613
|
-
|
43614
|
-
|
44240
|
+
var pollute = useCallback(function (text) {
|
44241
|
+
var result = polluteFnsRef.current.reduce(function (acc, fn) {
|
43615
44242
|
return fn(acc);
|
43616
44243
|
}, text);
|
43617
44244
|
return result;
|
43618
44245
|
}, []);
|
43619
44246
|
return {
|
43620
|
-
addPolluteFn,
|
43621
|
-
pollute
|
44247
|
+
addPolluteFn: addPolluteFn,
|
44248
|
+
pollute: pollute
|
43622
44249
|
};
|
43623
44250
|
}
|
43624
44251
|
|
@@ -43667,72 +44294,71 @@ function usePollute() {
|
|
43667
44294
|
*/
|
43668
44295
|
|
43669
44296
|
function InputEmoji(props, ref) {
|
43670
|
-
|
43671
|
-
|
43672
|
-
|
43673
|
-
|
43674
|
-
|
43675
|
-
|
43676
|
-
|
43677
|
-
|
43678
|
-
|
43679
|
-
|
43680
|
-
|
43681
|
-
|
43682
|
-
|
43683
|
-
|
43684
|
-
|
43685
|
-
|
43686
|
-
|
43687
|
-
|
43688
|
-
|
43689
|
-
|
43690
|
-
|
43691
|
-
|
43692
|
-
|
43693
|
-
fontSize,
|
43694
|
-
fontFamily
|
43695
|
-
} = props;
|
44297
|
+
var onChange = props.onChange,
|
44298
|
+
onEnter = props.onEnter,
|
44299
|
+
onResize = props.onResize,
|
44300
|
+
onClick = props.onClick,
|
44301
|
+
onFocus = props.onFocus,
|
44302
|
+
onBlur = props.onBlur,
|
44303
|
+
onKeyDown = props.onKeyDown,
|
44304
|
+
theme = props.theme,
|
44305
|
+
cleanOnEnter = props.cleanOnEnter,
|
44306
|
+
placeholder = props.placeholder,
|
44307
|
+
maxLength = props.maxLength,
|
44308
|
+
keepOpened = props.keepOpened,
|
44309
|
+
inputClass = props.inputClass,
|
44310
|
+
disableRecent = props.disableRecent,
|
44311
|
+
tabIndex = props.tabIndex,
|
44312
|
+
value = props.value,
|
44313
|
+
customEmojis = props.customEmojis,
|
44314
|
+
searchMention = props.searchMention,
|
44315
|
+
buttonElement = props.buttonElement,
|
44316
|
+
borderRadius = props.borderRadius,
|
44317
|
+
borderColor = props.borderColor,
|
44318
|
+
fontSize = props.fontSize,
|
44319
|
+
fontFamily = props.fontFamily;
|
43696
44320
|
/** @type {React.MutableRefObject<import('./text-input').Ref | null>} */
|
43697
44321
|
|
43698
|
-
|
43699
|
-
|
43700
|
-
|
43701
|
-
|
43702
|
-
|
43703
|
-
|
43704
|
-
|
43705
|
-
|
43706
|
-
|
43707
|
-
|
43708
|
-
|
43709
|
-
|
43710
|
-
|
43711
|
-
|
43712
|
-
|
44322
|
+
var textInputRef = useRef(null);
|
44323
|
+
|
44324
|
+
var _useEventListeners = useEventListeners(),
|
44325
|
+
addEventListener = _useEventListeners.addEventListener,
|
44326
|
+
listeners = _useEventListeners.listeners;
|
44327
|
+
|
44328
|
+
var _useSanitize = useSanitize(),
|
44329
|
+
addSanitizeFn = _useSanitize.addSanitizeFn,
|
44330
|
+
sanitize = _useSanitize.sanitize,
|
44331
|
+
sanitizedTextRef = _useSanitize.sanitizedTextRef;
|
44332
|
+
|
44333
|
+
var _usePollute = usePollute(),
|
44334
|
+
addPolluteFn = _usePollute.addPolluteFn,
|
44335
|
+
pollute = _usePollute.pollute;
|
44336
|
+
|
44337
|
+
var updateHTML = useCallback(function () {
|
44338
|
+
var nextValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
|
43713
44339
|
if (textInputRef.current === null) return;
|
43714
44340
|
textInputRef.current.html = replaceAllTextEmojis(nextValue);
|
43715
44341
|
sanitizedTextRef.current = nextValue;
|
43716
44342
|
}, [sanitizedTextRef]);
|
43717
|
-
|
44343
|
+
var setValue = useCallback(function (value) {
|
43718
44344
|
updateHTML(value);
|
43719
44345
|
}, [updateHTML]);
|
43720
|
-
|
44346
|
+
var emitChange = useEmit(textInputRef, onResize, onChange);
|
43721
44347
|
useExpose({
|
43722
|
-
ref,
|
43723
|
-
setValue,
|
43724
|
-
textInputRef,
|
43725
|
-
emitChange
|
44348
|
+
ref: ref,
|
44349
|
+
setValue: setValue,
|
44350
|
+
textInputRef: textInputRef,
|
44351
|
+
emitChange: emitChange
|
43726
44352
|
});
|
43727
|
-
useEffect(()
|
44353
|
+
useEffect(function () {
|
43728
44354
|
if (sanitizedTextRef.current !== value) {
|
43729
44355
|
setValue(value);
|
43730
44356
|
}
|
43731
44357
|
}, [sanitizedTextRef, setValue, value]);
|
43732
|
-
useEffect(()
|
44358
|
+
useEffect(function () {
|
43733
44359
|
updateHTML();
|
43734
44360
|
}, [updateHTML]);
|
43735
|
-
useEffect(()
|
44361
|
+
useEffect(function () {
|
43736
44362
|
/**
|
43737
44363
|
* Handle keydown event
|
43738
44364
|
* @param {React.KeyboardEvent} event
|
@@ -43745,7 +44371,7 @@ function InputEmoji(props, ref) {
|
|
43745
44371
|
|
43746
44372
|
if (event.key === "Enter" && textInputRef.current) {
|
43747
44373
|
event.preventDefault();
|
43748
|
-
|
44374
|
+
var text = sanitize(textInputRef.current.html);
|
43749
44375
|
emitChange(sanitizedTextRef.current);
|
43750
44376
|
|
43751
44377
|
if (typeof onEnter === "function" && listeners.enter.currentListerners.length === 0) {
|
@@ -43770,12 +44396,12 @@ function InputEmoji(props, ref) {
|
|
43770
44396
|
return true;
|
43771
44397
|
}
|
43772
44398
|
|
43773
|
-
|
43774
|
-
return ()
|
44399
|
+
var unsubscribe = addEventListener("keyDown", handleKeydown);
|
44400
|
+
return function () {
|
43775
44401
|
unsubscribe();
|
43776
44402
|
};
|
43777
44403
|
}, [addEventListener, cleanOnEnter, emitChange, listeners.enter.currentListerners.length, maxLength, onEnter, onKeyDown, sanitize, sanitizedTextRef, updateHTML]);
|
43778
|
-
useEffect(()
|
44404
|
+
useEffect(function () {
|
43779
44405
|
/** */
|
43780
44406
|
function handleFocus() {
|
43781
44407
|
if (typeof onClick === "function") {
|
@@ -43787,12 +44413,12 @@ function InputEmoji(props, ref) {
|
|
43787
44413
|
}
|
43788
44414
|
}
|
43789
44415
|
|
43790
|
-
|
43791
|
-
return ()
|
44416
|
+
var unsubscribe = addEventListener("focus", handleFocus);
|
44417
|
+
return function () {
|
43792
44418
|
unsubscribe();
|
43793
44419
|
};
|
43794
44420
|
}, [addEventListener, onClick, onFocus]);
|
43795
|
-
useEffect(()
|
44421
|
+
useEffect(function () {
|
43796
44422
|
/** */
|
43797
44423
|
function handleBlur() {
|
43798
44424
|
if (typeof onBlur === "function") {
|
@@ -43800,8 +44426,8 @@ function InputEmoji(props, ref) {
|
|
43800
44426
|
}
|
43801
44427
|
}
|
43802
44428
|
|
43803
|
-
|
43804
|
-
return ()
|
44429
|
+
var unsubscribe = addEventListener("blur", handleBlur);
|
44430
|
+
return function () {
|
43805
44431
|
unsubscribe();
|
43806
44432
|
};
|
43807
44433
|
}, [addEventListener, onBlur]);
|
@@ -43847,7 +44473,7 @@ function InputEmoji(props, ref) {
|
|
43847
44473
|
|
43848
44474
|
function handlePaste(event) {
|
43849
44475
|
event.preventDefault();
|
43850
|
-
|
44476
|
+
var content;
|
43851
44477
|
|
43852
44478
|
if (event.clipboardData) {
|
43853
44479
|
content = event.clipboardData.getData("text/plain");
|
@@ -43876,10 +44502,10 @@ function InputEmoji(props, ref) {
|
|
43876
44502
|
onEnter: listeners.enter.publish,
|
43877
44503
|
placeholder: placeholder,
|
43878
44504
|
style: {
|
43879
|
-
borderRadius,
|
43880
|
-
borderColor,
|
43881
|
-
fontSize,
|
43882
|
-
fontFamily
|
44505
|
+
borderRadius: borderRadius,
|
44506
|
+
borderColor: borderColor,
|
44507
|
+
fontSize: fontSize,
|
44508
|
+
fontFamily: fontFamily
|
43883
44509
|
},
|
43884
44510
|
tabIndex: tabIndex,
|
43885
44511
|
className: inputClass,
|
@@ -43896,7 +44522,7 @@ function InputEmoji(props, ref) {
|
|
43896
44522
|
}));
|
43897
44523
|
}
|
43898
44524
|
|
43899
|
-
|
44525
|
+
var InputEmojiWithRef = /*#__PURE__*/forwardRef(InputEmoji);
|
43900
44526
|
InputEmojiWithRef.defaultProps = {
|
43901
44527
|
theme:
|
43902
44528
|
/** @type {const} */
|