react-input-emoji 5.0.0 → 5.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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} */
|