react-input-emoji 5.8.0 → 5.9.0-beta.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.es.js +555 -1089
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +555 -1089
- package/dist/index.js.map +1 -1
- package/dist/src/utils/input-event-utils.d.ts +9 -2
- package/package.json +4 -4
package/dist/index.js
CHANGED
@@ -37,479 +37,10 @@ function styleInject(css, ref) {
|
|
37
37
|
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";
|
38
38
|
styleInject(css_248z);
|
39
39
|
|
40
|
-
function _iterableToArrayLimit(r, l) {
|
41
|
-
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
42
|
-
if (null != t) {
|
43
|
-
var e,
|
44
|
-
n,
|
45
|
-
i,
|
46
|
-
u,
|
47
|
-
a = [],
|
48
|
-
f = !0,
|
49
|
-
o = !1;
|
50
|
-
try {
|
51
|
-
if (i = (t = t.call(r)).next, 0 === l) {
|
52
|
-
if (Object(t) !== t) return;
|
53
|
-
f = !1;
|
54
|
-
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
|
55
|
-
} catch (r) {
|
56
|
-
o = !0, n = r;
|
57
|
-
} finally {
|
58
|
-
try {
|
59
|
-
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
|
60
|
-
} finally {
|
61
|
-
if (o) throw n;
|
62
|
-
}
|
63
|
-
}
|
64
|
-
return a;
|
65
|
-
}
|
66
|
-
}
|
67
|
-
function ownKeys(e, r) {
|
68
|
-
var t = Object.keys(e);
|
69
|
-
if (Object.getOwnPropertySymbols) {
|
70
|
-
var o = Object.getOwnPropertySymbols(e);
|
71
|
-
r && (o = o.filter(function (r) {
|
72
|
-
return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
73
|
-
})), t.push.apply(t, o);
|
74
|
-
}
|
75
|
-
return t;
|
76
|
-
}
|
77
|
-
function _objectSpread2(e) {
|
78
|
-
for (var r = 1; r < arguments.length; r++) {
|
79
|
-
var t = null != arguments[r] ? arguments[r] : {};
|
80
|
-
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
|
81
|
-
_defineProperty(e, r, t[r]);
|
82
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
|
83
|
-
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
84
|
-
});
|
85
|
-
}
|
86
|
-
return e;
|
87
|
-
}
|
88
|
-
function _regeneratorRuntime() {
|
89
|
-
_regeneratorRuntime = function () {
|
90
|
-
return e;
|
91
|
-
};
|
92
|
-
var t,
|
93
|
-
e = {},
|
94
|
-
r = Object.prototype,
|
95
|
-
n = r.hasOwnProperty,
|
96
|
-
o = Object.defineProperty || function (t, e, r) {
|
97
|
-
t[e] = r.value;
|
98
|
-
},
|
99
|
-
i = "function" == typeof Symbol ? Symbol : {},
|
100
|
-
a = i.iterator || "@@iterator",
|
101
|
-
c = i.asyncIterator || "@@asyncIterator",
|
102
|
-
u = i.toStringTag || "@@toStringTag";
|
103
|
-
function define(t, e, r) {
|
104
|
-
return Object.defineProperty(t, e, {
|
105
|
-
value: r,
|
106
|
-
enumerable: !0,
|
107
|
-
configurable: !0,
|
108
|
-
writable: !0
|
109
|
-
}), t[e];
|
110
|
-
}
|
111
|
-
try {
|
112
|
-
define({}, "");
|
113
|
-
} catch (t) {
|
114
|
-
define = function (t, e, r) {
|
115
|
-
return t[e] = r;
|
116
|
-
};
|
117
|
-
}
|
118
|
-
function wrap(t, e, r, n) {
|
119
|
-
var i = e && e.prototype instanceof Generator ? e : Generator,
|
120
|
-
a = Object.create(i.prototype),
|
121
|
-
c = new Context(n || []);
|
122
|
-
return o(a, "_invoke", {
|
123
|
-
value: makeInvokeMethod(t, r, c)
|
124
|
-
}), a;
|
125
|
-
}
|
126
|
-
function tryCatch(t, e, r) {
|
127
|
-
try {
|
128
|
-
return {
|
129
|
-
type: "normal",
|
130
|
-
arg: t.call(e, r)
|
131
|
-
};
|
132
|
-
} catch (t) {
|
133
|
-
return {
|
134
|
-
type: "throw",
|
135
|
-
arg: t
|
136
|
-
};
|
137
|
-
}
|
138
|
-
}
|
139
|
-
e.wrap = wrap;
|
140
|
-
var h = "suspendedStart",
|
141
|
-
l = "suspendedYield",
|
142
|
-
f = "executing",
|
143
|
-
s = "completed",
|
144
|
-
y = {};
|
145
|
-
function Generator() {}
|
146
|
-
function GeneratorFunction() {}
|
147
|
-
function GeneratorFunctionPrototype() {}
|
148
|
-
var p = {};
|
149
|
-
define(p, a, function () {
|
150
|
-
return this;
|
151
|
-
});
|
152
|
-
var d = Object.getPrototypeOf,
|
153
|
-
v = d && d(d(values([])));
|
154
|
-
v && v !== r && n.call(v, a) && (p = v);
|
155
|
-
var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
|
156
|
-
function defineIteratorMethods(t) {
|
157
|
-
["next", "throw", "return"].forEach(function (e) {
|
158
|
-
define(t, e, function (t) {
|
159
|
-
return this._invoke(e, t);
|
160
|
-
});
|
161
|
-
});
|
162
|
-
}
|
163
|
-
function AsyncIterator(t, e) {
|
164
|
-
function invoke(r, o, i, a) {
|
165
|
-
var c = tryCatch(t[r], t, o);
|
166
|
-
if ("throw" !== c.type) {
|
167
|
-
var u = c.arg,
|
168
|
-
h = u.value;
|
169
|
-
return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
|
170
|
-
invoke("next", t, i, a);
|
171
|
-
}, function (t) {
|
172
|
-
invoke("throw", t, i, a);
|
173
|
-
}) : e.resolve(h).then(function (t) {
|
174
|
-
u.value = t, i(u);
|
175
|
-
}, function (t) {
|
176
|
-
return invoke("throw", t, i, a);
|
177
|
-
});
|
178
|
-
}
|
179
|
-
a(c.arg);
|
180
|
-
}
|
181
|
-
var r;
|
182
|
-
o(this, "_invoke", {
|
183
|
-
value: function (t, n) {
|
184
|
-
function callInvokeWithMethodAndArg() {
|
185
|
-
return new e(function (e, r) {
|
186
|
-
invoke(t, n, e, r);
|
187
|
-
});
|
188
|
-
}
|
189
|
-
return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
|
190
|
-
}
|
191
|
-
});
|
192
|
-
}
|
193
|
-
function makeInvokeMethod(e, r, n) {
|
194
|
-
var o = h;
|
195
|
-
return function (i, a) {
|
196
|
-
if (o === f) throw new Error("Generator is already running");
|
197
|
-
if (o === s) {
|
198
|
-
if ("throw" === i) throw a;
|
199
|
-
return {
|
200
|
-
value: t,
|
201
|
-
done: !0
|
202
|
-
};
|
203
|
-
}
|
204
|
-
for (n.method = i, n.arg = a;;) {
|
205
|
-
var c = n.delegate;
|
206
|
-
if (c) {
|
207
|
-
var u = maybeInvokeDelegate(c, n);
|
208
|
-
if (u) {
|
209
|
-
if (u === y) continue;
|
210
|
-
return u;
|
211
|
-
}
|
212
|
-
}
|
213
|
-
if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
|
214
|
-
if (o === h) throw o = s, n.arg;
|
215
|
-
n.dispatchException(n.arg);
|
216
|
-
} else "return" === n.method && n.abrupt("return", n.arg);
|
217
|
-
o = f;
|
218
|
-
var p = tryCatch(e, r, n);
|
219
|
-
if ("normal" === p.type) {
|
220
|
-
if (o = n.done ? s : l, p.arg === y) continue;
|
221
|
-
return {
|
222
|
-
value: p.arg,
|
223
|
-
done: n.done
|
224
|
-
};
|
225
|
-
}
|
226
|
-
"throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
|
227
|
-
}
|
228
|
-
};
|
229
|
-
}
|
230
|
-
function maybeInvokeDelegate(e, r) {
|
231
|
-
var n = r.method,
|
232
|
-
o = e.iterator[n];
|
233
|
-
if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y;
|
234
|
-
var i = tryCatch(o, e.iterator, r.arg);
|
235
|
-
if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
|
236
|
-
var a = i.arg;
|
237
|
-
return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y);
|
238
|
-
}
|
239
|
-
function pushTryEntry(t) {
|
240
|
-
var e = {
|
241
|
-
tryLoc: t[0]
|
242
|
-
};
|
243
|
-
1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
|
244
|
-
}
|
245
|
-
function resetTryEntry(t) {
|
246
|
-
var e = t.completion || {};
|
247
|
-
e.type = "normal", delete e.arg, t.completion = e;
|
248
|
-
}
|
249
|
-
function Context(t) {
|
250
|
-
this.tryEntries = [{
|
251
|
-
tryLoc: "root"
|
252
|
-
}], t.forEach(pushTryEntry, this), this.reset(!0);
|
253
|
-
}
|
254
|
-
function values(e) {
|
255
|
-
if (e || "" === e) {
|
256
|
-
var r = e[a];
|
257
|
-
if (r) return r.call(e);
|
258
|
-
if ("function" == typeof e.next) return e;
|
259
|
-
if (!isNaN(e.length)) {
|
260
|
-
var o = -1,
|
261
|
-
i = function next() {
|
262
|
-
for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
|
263
|
-
return next.value = t, next.done = !0, next;
|
264
|
-
};
|
265
|
-
return i.next = i;
|
266
|
-
}
|
267
|
-
}
|
268
|
-
throw new TypeError(typeof e + " is not iterable");
|
269
|
-
}
|
270
|
-
return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
|
271
|
-
value: GeneratorFunctionPrototype,
|
272
|
-
configurable: !0
|
273
|
-
}), o(GeneratorFunctionPrototype, "constructor", {
|
274
|
-
value: GeneratorFunction,
|
275
|
-
configurable: !0
|
276
|
-
}), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
|
277
|
-
var e = "function" == typeof t && t.constructor;
|
278
|
-
return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
|
279
|
-
}, e.mark = function (t) {
|
280
|
-
return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
|
281
|
-
}, e.awrap = function (t) {
|
282
|
-
return {
|
283
|
-
__await: t
|
284
|
-
};
|
285
|
-
}, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
|
286
|
-
return this;
|
287
|
-
}), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
|
288
|
-
void 0 === i && (i = Promise);
|
289
|
-
var a = new AsyncIterator(wrap(t, r, n, o), i);
|
290
|
-
return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
|
291
|
-
return t.done ? t.value : a.next();
|
292
|
-
});
|
293
|
-
}, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
|
294
|
-
return this;
|
295
|
-
}), define(g, "toString", function () {
|
296
|
-
return "[object Generator]";
|
297
|
-
}), e.keys = function (t) {
|
298
|
-
var e = Object(t),
|
299
|
-
r = [];
|
300
|
-
for (var n in e) r.push(n);
|
301
|
-
return r.reverse(), function next() {
|
302
|
-
for (; r.length;) {
|
303
|
-
var t = r.pop();
|
304
|
-
if (t in e) return next.value = t, next.done = !1, next;
|
305
|
-
}
|
306
|
-
return next.done = !0, next;
|
307
|
-
};
|
308
|
-
}, e.values = values, Context.prototype = {
|
309
|
-
constructor: Context,
|
310
|
-
reset: function (e) {
|
311
|
-
if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
|
312
|
-
},
|
313
|
-
stop: function () {
|
314
|
-
this.done = !0;
|
315
|
-
var t = this.tryEntries[0].completion;
|
316
|
-
if ("throw" === t.type) throw t.arg;
|
317
|
-
return this.rval;
|
318
|
-
},
|
319
|
-
dispatchException: function (e) {
|
320
|
-
if (this.done) throw e;
|
321
|
-
var r = this;
|
322
|
-
function handle(n, o) {
|
323
|
-
return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
|
324
|
-
}
|
325
|
-
for (var o = this.tryEntries.length - 1; o >= 0; --o) {
|
326
|
-
var i = this.tryEntries[o],
|
327
|
-
a = i.completion;
|
328
|
-
if ("root" === i.tryLoc) return handle("end");
|
329
|
-
if (i.tryLoc <= this.prev) {
|
330
|
-
var c = n.call(i, "catchLoc"),
|
331
|
-
u = n.call(i, "finallyLoc");
|
332
|
-
if (c && u) {
|
333
|
-
if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
|
334
|
-
if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
|
335
|
-
} else if (c) {
|
336
|
-
if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
|
337
|
-
} else {
|
338
|
-
if (!u) throw new Error("try statement without catch or finally");
|
339
|
-
if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
|
340
|
-
}
|
341
|
-
}
|
342
|
-
}
|
343
|
-
},
|
344
|
-
abrupt: function (t, e) {
|
345
|
-
for (var r = this.tryEntries.length - 1; r >= 0; --r) {
|
346
|
-
var o = this.tryEntries[r];
|
347
|
-
if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
|
348
|
-
var i = o;
|
349
|
-
break;
|
350
|
-
}
|
351
|
-
}
|
352
|
-
i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
|
353
|
-
var a = i ? i.completion : {};
|
354
|
-
return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
|
355
|
-
},
|
356
|
-
complete: function (t, e) {
|
357
|
-
if ("throw" === t.type) throw t.arg;
|
358
|
-
return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y;
|
359
|
-
},
|
360
|
-
finish: function (t) {
|
361
|
-
for (var e = this.tryEntries.length - 1; e >= 0; --e) {
|
362
|
-
var r = this.tryEntries[e];
|
363
|
-
if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
|
364
|
-
}
|
365
|
-
},
|
366
|
-
catch: function (t) {
|
367
|
-
for (var e = this.tryEntries.length - 1; e >= 0; --e) {
|
368
|
-
var r = this.tryEntries[e];
|
369
|
-
if (r.tryLoc === t) {
|
370
|
-
var n = r.completion;
|
371
|
-
if ("throw" === n.type) {
|
372
|
-
var o = n.arg;
|
373
|
-
resetTryEntry(r);
|
374
|
-
}
|
375
|
-
return o;
|
376
|
-
}
|
377
|
-
}
|
378
|
-
throw new Error("illegal catch attempt");
|
379
|
-
},
|
380
|
-
delegateYield: function (e, r, n) {
|
381
|
-
return this.delegate = {
|
382
|
-
iterator: values(e),
|
383
|
-
resultName: r,
|
384
|
-
nextLoc: n
|
385
|
-
}, "next" === this.method && (this.arg = t), y;
|
386
|
-
}
|
387
|
-
}, e;
|
388
|
-
}
|
389
|
-
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
390
|
-
try {
|
391
|
-
var info = gen[key](arg);
|
392
|
-
var value = info.value;
|
393
|
-
} catch (error) {
|
394
|
-
reject(error);
|
395
|
-
return;
|
396
|
-
}
|
397
|
-
if (info.done) {
|
398
|
-
resolve(value);
|
399
|
-
} else {
|
400
|
-
Promise.resolve(value).then(_next, _throw);
|
401
|
-
}
|
402
|
-
}
|
403
|
-
function _asyncToGenerator(fn) {
|
404
|
-
return function () {
|
405
|
-
var self = this,
|
406
|
-
args = arguments;
|
407
|
-
return new Promise(function (resolve, reject) {
|
408
|
-
var gen = fn.apply(self, args);
|
409
|
-
function _next(value) {
|
410
|
-
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
411
|
-
}
|
412
|
-
function _throw(err) {
|
413
|
-
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
414
|
-
}
|
415
|
-
_next(undefined);
|
416
|
-
});
|
417
|
-
};
|
418
|
-
}
|
419
|
-
function _defineProperty(obj, key, value) {
|
420
|
-
key = _toPropertyKey(key);
|
421
|
-
if (key in obj) {
|
422
|
-
Object.defineProperty(obj, key, {
|
423
|
-
value: value,
|
424
|
-
enumerable: true,
|
425
|
-
configurable: true,
|
426
|
-
writable: true
|
427
|
-
});
|
428
|
-
} else {
|
429
|
-
obj[key] = value;
|
430
|
-
}
|
431
|
-
return obj;
|
432
|
-
}
|
433
|
-
function _objectWithoutPropertiesLoose(source, excluded) {
|
434
|
-
if (source == null) return {};
|
435
|
-
var target = {};
|
436
|
-
var sourceKeys = Object.keys(source);
|
437
|
-
var key, i;
|
438
|
-
for (i = 0; i < sourceKeys.length; i++) {
|
439
|
-
key = sourceKeys[i];
|
440
|
-
if (excluded.indexOf(key) >= 0) continue;
|
441
|
-
target[key] = source[key];
|
442
|
-
}
|
443
|
-
return target;
|
444
|
-
}
|
445
|
-
function _objectWithoutProperties(source, excluded) {
|
446
|
-
if (source == null) return {};
|
447
|
-
var target = _objectWithoutPropertiesLoose(source, excluded);
|
448
|
-
var key, i;
|
449
|
-
if (Object.getOwnPropertySymbols) {
|
450
|
-
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
451
|
-
for (i = 0; i < sourceSymbolKeys.length; i++) {
|
452
|
-
key = sourceSymbolKeys[i];
|
453
|
-
if (excluded.indexOf(key) >= 0) continue;
|
454
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
455
|
-
target[key] = source[key];
|
456
|
-
}
|
457
|
-
}
|
458
|
-
return target;
|
459
|
-
}
|
460
|
-
function _slicedToArray(arr, i) {
|
461
|
-
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
462
|
-
}
|
463
|
-
function _toConsumableArray(arr) {
|
464
|
-
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
|
465
|
-
}
|
466
|
-
function _arrayWithoutHoles(arr) {
|
467
|
-
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
|
468
|
-
}
|
469
|
-
function _arrayWithHoles(arr) {
|
470
|
-
if (Array.isArray(arr)) return arr;
|
471
|
-
}
|
472
|
-
function _iterableToArray(iter) {
|
473
|
-
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
|
474
|
-
}
|
475
|
-
function _unsupportedIterableToArray(o, minLen) {
|
476
|
-
if (!o) return;
|
477
|
-
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
478
|
-
var n = Object.prototype.toString.call(o).slice(8, -1);
|
479
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
480
|
-
if (n === "Map" || n === "Set") return Array.from(o);
|
481
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
482
|
-
}
|
483
|
-
function _arrayLikeToArray(arr, len) {
|
484
|
-
if (len == null || len > arr.length) len = arr.length;
|
485
|
-
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
486
|
-
return arr2;
|
487
|
-
}
|
488
|
-
function _nonIterableSpread() {
|
489
|
-
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
490
|
-
}
|
491
|
-
function _nonIterableRest() {
|
492
|
-
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
493
|
-
}
|
494
|
-
function _toPrimitive(input, hint) {
|
495
|
-
if (typeof input !== "object" || input === null) return input;
|
496
|
-
var prim = input[Symbol.toPrimitive];
|
497
|
-
if (prim !== undefined) {
|
498
|
-
var res = prim.call(input, hint || "default");
|
499
|
-
if (typeof res !== "object") return res;
|
500
|
-
throw new TypeError("@@toPrimitive must return a primitive value.");
|
501
|
-
}
|
502
|
-
return (hint === "string" ? String : Number)(input);
|
503
|
-
}
|
504
|
-
function _toPropertyKey(arg) {
|
505
|
-
var key = _toPrimitive(arg, "string");
|
506
|
-
return typeof key === "symbol" ? key : String(key);
|
507
|
-
}
|
508
|
-
|
509
40
|
/* eslint-disable valid-jsdoc */
|
510
41
|
// @ts-check
|
511
42
|
|
512
|
-
|
43
|
+
const TRANSPARENT_GIF = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
|
513
44
|
|
514
45
|
/**
|
515
46
|
* Replace all text with emoji with an image html tag
|
@@ -517,11 +48,11 @@ var TRANSPARENT_GIF = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAA
|
|
517
48
|
* @return {string}
|
518
49
|
*/
|
519
50
|
function replaceAllTextEmojis(text) {
|
520
|
-
|
51
|
+
let allEmojis = getAllEmojisFromText(text);
|
521
52
|
if (allEmojis) {
|
522
|
-
allEmojis =
|
53
|
+
allEmojis = [...new Set(allEmojis)]; // remove duplicates
|
523
54
|
|
524
|
-
allEmojis.forEach(
|
55
|
+
allEmojis.forEach(emoji => {
|
525
56
|
text = replaceAll(text, emoji, getInputEmojiHTML('', emoji));
|
526
57
|
});
|
527
58
|
}
|
@@ -555,20 +86,19 @@ function getAllEmojisFromText(text) {
|
|
555
86
|
* @return {string}
|
556
87
|
*/
|
557
88
|
function getImageEmoji(emoji) {
|
558
|
-
var _emojiPickerEl$shadow;
|
559
89
|
/** @type {HTMLElement | null} */
|
560
|
-
|
90
|
+
const emojiPickerEl = document.querySelector('em-emoji-picker');
|
561
91
|
if (!emojiPickerEl) {
|
562
|
-
return getInputEmojiNativeHTML(emoji
|
92
|
+
return getInputEmojiNativeHTML(emoji.native);
|
563
93
|
}
|
564
94
|
|
565
95
|
/** @type {HTMLSpanElement | null=} */
|
566
|
-
|
96
|
+
const emojiSpanEl = emojiPickerEl?.shadowRoot?.querySelector(`[title="${emoji.name}"] > span > span`);
|
567
97
|
if (!emojiSpanEl) {
|
568
|
-
return getInputEmojiNativeHTML(emoji
|
98
|
+
return getInputEmojiNativeHTML(emoji.native);
|
569
99
|
}
|
570
|
-
|
571
|
-
return getInputEmojiHTML(style, emoji
|
100
|
+
const style = replaceAll(emojiSpanEl.style.cssText, '"', "'");
|
101
|
+
return getInputEmojiHTML(style, emoji.native);
|
572
102
|
}
|
573
103
|
|
574
104
|
// eslint-disable-next-line valid-jsdoc
|
@@ -579,7 +109,7 @@ function getImageEmoji(emoji) {
|
|
579
109
|
* @returns
|
580
110
|
*/
|
581
111
|
function getInputEmojiHTML(style, emoji) {
|
582
|
-
return
|
112
|
+
return `<img style="${style}; display: inline-block" data-emoji="${emoji}" src="${TRANSPARENT_GIF}" />`;
|
583
113
|
}
|
584
114
|
|
585
115
|
/**
|
@@ -588,7 +118,7 @@ function getInputEmojiHTML(style, emoji) {
|
|
588
118
|
* @returns
|
589
119
|
*/
|
590
120
|
function getInputEmojiNativeHTML(emoji) {
|
591
|
-
return
|
121
|
+
return `<span class="width: 18px; height: 18px; display: inline-block; margin: 0 1px;">${emoji}</span>`;
|
592
122
|
}
|
593
123
|
|
594
124
|
/**
|
@@ -597,10 +127,10 @@ function getInputEmojiNativeHTML(emoji) {
|
|
597
127
|
* @return {string}
|
598
128
|
*/
|
599
129
|
function replaceAllTextEmojiToString(html) {
|
600
|
-
|
130
|
+
const container = document.createElement("div");
|
601
131
|
container.innerHTML = html;
|
602
|
-
|
603
|
-
images.forEach(
|
132
|
+
const images = Array.prototype.slice.call(container.querySelectorAll("img"));
|
133
|
+
images.forEach(image => {
|
604
134
|
container.innerHTML = container.innerHTML.replace(image.outerHTML, image.dataset.emoji);
|
605
135
|
});
|
606
136
|
return container.innerHTML;
|
@@ -613,12 +143,12 @@ function replaceAllTextEmojiToString(html) {
|
|
613
143
|
* @param {React.ClipboardEvent} event
|
614
144
|
*/
|
615
145
|
function handleCopy(event) {
|
616
|
-
|
146
|
+
const selectedText = window.getSelection();
|
617
147
|
if (selectedText === null) {
|
618
148
|
return;
|
619
149
|
}
|
620
|
-
|
621
|
-
for (
|
150
|
+
let container = document.createElement("div");
|
151
|
+
for (let i = 0, len = selectedText.rangeCount; i < len; ++i) {
|
622
152
|
container.appendChild(selectedText.getRangeAt(i).cloneContents());
|
623
153
|
}
|
624
154
|
container = replaceEmojiToString(container);
|
@@ -626,28 +156,41 @@ function handleCopy(event) {
|
|
626
156
|
event.preventDefault();
|
627
157
|
}
|
628
158
|
|
159
|
+
/** @type {Range|undefined} */
|
160
|
+
/** @type {Range|undefined} */
|
161
|
+
let currentRangeCached;
|
162
|
+
|
163
|
+
/**
|
164
|
+
* Caches the current text selection range
|
165
|
+
*/
|
166
|
+
function cacheCurrentRange() {
|
167
|
+
const selection = window.getSelection();
|
168
|
+
if (!selection.rangeCount || selection?.anchorNode['className'] !== 'react-input-emoji--input' && selection.anchorNode.parentNode['className'] !== 'react-input-emoji--input') return;
|
169
|
+
const range = selection.getRangeAt(0);
|
170
|
+
currentRangeCached = range.cloneRange();
|
171
|
+
}
|
172
|
+
|
629
173
|
/**
|
630
|
-
*
|
631
|
-
* @param {string} html
|
174
|
+
* @param {string} html - HTML string to be pasted at the caret position
|
632
175
|
*/
|
633
176
|
function handlePasteHtmlAtCaret(html) {
|
634
|
-
|
635
|
-
|
177
|
+
let sel;
|
178
|
+
let range;
|
636
179
|
if (window.getSelection) {
|
637
180
|
// IE9 and non-IE
|
638
181
|
sel = window.getSelection();
|
639
182
|
if (sel === null) return;
|
640
183
|
if (sel.getRangeAt && sel.rangeCount) {
|
641
|
-
range = sel.getRangeAt(0);
|
184
|
+
range = currentRangeCached ?? sel.getRangeAt(0);
|
642
185
|
range.deleteContents();
|
643
186
|
|
644
187
|
// Range.createContextualFragment() would be useful here but is
|
645
188
|
// non-standard and not supported in all browsers (IE9, for one)
|
646
|
-
|
189
|
+
const el = document.createElement("div");
|
647
190
|
el.innerHTML = html;
|
648
|
-
|
649
|
-
|
650
|
-
|
191
|
+
const frag = document.createDocumentFragment();
|
192
|
+
let node;
|
193
|
+
let lastNode;
|
651
194
|
while (node = el.firstChild) {
|
652
195
|
lastNode = frag.appendChild(node);
|
653
196
|
}
|
@@ -656,6 +199,7 @@ function handlePasteHtmlAtCaret(html) {
|
|
656
199
|
// Preserve the selection
|
657
200
|
if (lastNode) {
|
658
201
|
range = range.cloneRange();
|
202
|
+
currentRangeCached = range;
|
659
203
|
range.setStartAfter(lastNode);
|
660
204
|
range.collapse(true);
|
661
205
|
sel.removeAllRanges();
|
@@ -671,8 +215,8 @@ function handlePasteHtmlAtCaret(html) {
|
|
671
215
|
* @return {HTMLDivElement}
|
672
216
|
*/
|
673
217
|
function replaceEmojiToString(container) {
|
674
|
-
|
675
|
-
images.forEach(
|
218
|
+
const images = Array.prototype.slice.call(container.querySelectorAll("img"));
|
219
|
+
images.forEach(image => {
|
676
220
|
image.outerHTML = image.dataset.emoji;
|
677
221
|
});
|
678
222
|
return container;
|
@@ -683,11 +227,12 @@ function replaceEmojiToString(container) {
|
|
683
227
|
* @param {{text: string, html: string}} props
|
684
228
|
* @return {number}
|
685
229
|
*/
|
686
|
-
function totalCharacters(
|
687
|
-
|
688
|
-
|
689
|
-
|
690
|
-
|
230
|
+
function totalCharacters({
|
231
|
+
text,
|
232
|
+
html
|
233
|
+
}) {
|
234
|
+
const textCount = text.length;
|
235
|
+
const emojisCount = (html.match(/<img/g) || []).length;
|
691
236
|
return textCount + emojisCount;
|
692
237
|
}
|
693
238
|
/**
|
@@ -696,12 +241,12 @@ function totalCharacters(_ref2) {
|
|
696
241
|
* @return {string}
|
697
242
|
*/
|
698
243
|
function removeHtmlExceptBr(inputDiv) {
|
699
|
-
|
700
|
-
|
244
|
+
const temp = inputDiv.innerHTML.replaceAll(/<br\s*\/?>/gi, "[BR]"); // temporarily replace <br> with placeholder
|
245
|
+
const tempContainer = document.createElement("div");
|
701
246
|
tempContainer.innerHTML = temp;
|
702
|
-
|
703
|
-
|
704
|
-
return
|
247
|
+
const stripped = tempContainer.innerText; // strip all html tags
|
248
|
+
const final = stripped.replaceAll(/\[BR\]/gi, "</br>"); // replace placeholders with <br>
|
249
|
+
return final;
|
705
250
|
}
|
706
251
|
|
707
252
|
/**
|
@@ -710,8 +255,8 @@ function removeHtmlExceptBr(inputDiv) {
|
|
710
255
|
* @returns
|
711
256
|
*/
|
712
257
|
function getSelectionStart$1(range) {
|
713
|
-
|
714
|
-
|
258
|
+
let node = range.startContainer;
|
259
|
+
let offset = range.startOffset;
|
715
260
|
|
716
261
|
// Handle cases where the selection start node is not a text node
|
717
262
|
if (node.nodeType !== Node.TEXT_NODE) {
|
@@ -728,8 +273,8 @@ function getSelectionStart$1(range) {
|
|
728
273
|
offset = 0;
|
729
274
|
}
|
730
275
|
return {
|
731
|
-
node
|
732
|
-
offset
|
276
|
+
node,
|
277
|
+
offset
|
733
278
|
};
|
734
279
|
}
|
735
280
|
|
@@ -738,13 +283,13 @@ function getSelectionStart$1(range) {
|
|
738
283
|
* @return {Object} cursor
|
739
284
|
*/
|
740
285
|
function getCursor() {
|
741
|
-
|
742
|
-
|
743
|
-
|
286
|
+
const selection = window.getSelection();
|
287
|
+
const range = selection.getRangeAt(0);
|
288
|
+
const selectionStart = getSelectionStart$1(range);
|
744
289
|
return {
|
745
|
-
selection
|
746
|
-
range
|
747
|
-
selectionStart
|
290
|
+
selection,
|
291
|
+
range,
|
292
|
+
selectionStart
|
748
293
|
};
|
749
294
|
}
|
750
295
|
|
@@ -752,30 +297,31 @@ function getCursor() {
|
|
752
297
|
*
|
753
298
|
*/
|
754
299
|
function addLineBreak() {
|
755
|
-
|
756
|
-
selection
|
757
|
-
range
|
758
|
-
selectionStart
|
300
|
+
const {
|
301
|
+
selection,
|
302
|
+
range,
|
303
|
+
selectionStart
|
304
|
+
} = getCursor();
|
759
305
|
|
760
306
|
// If cursor is at the end of the text content, add one more line break
|
761
307
|
if (selection.isCollapsed && selectionStart.offset === selectionStart.node.textContent.length) {
|
762
|
-
|
308
|
+
const br = document.createElement("br");
|
763
309
|
range.insertNode(br);
|
764
310
|
range.setStartAfter(br);
|
765
311
|
range.setEndAfter(br);
|
766
312
|
selection.removeAllRanges();
|
767
313
|
selection.addRange(range);
|
768
|
-
|
314
|
+
const br2 = document.createElement("br");
|
769
315
|
range.insertNode(br2);
|
770
316
|
range.setStartAfter(br2);
|
771
317
|
range.setEndAfter(br2);
|
772
318
|
selection.removeAllRanges();
|
773
319
|
selection.addRange(range);
|
774
320
|
} else {
|
775
|
-
|
776
|
-
range.insertNode(
|
777
|
-
range.setStartAfter(
|
778
|
-
range.setEndAfter(
|
321
|
+
const br = document.createElement("br");
|
322
|
+
range.insertNode(br);
|
323
|
+
range.setStartAfter(br);
|
324
|
+
range.setEndAfter(br);
|
779
325
|
selection.removeAllRanges();
|
780
326
|
selection.addRange(range);
|
781
327
|
// Set cursor position right before the first letter after the line break
|
@@ -994,7 +540,7 @@ var reactEasyEmoji = function reactEasyEmoji(element, optionsOrFn) {
|
|
994
540
|
var emoji = reactEasyEmoji;
|
995
541
|
|
996
542
|
// @ts-check
|
997
|
-
|
543
|
+
const EMOJI_REGEX = new RegExp(/(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?(?:\u200d(?:[^\ud800-\udfff]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?)*/g);
|
998
544
|
|
999
545
|
/**
|
1000
546
|
* @typedef {import('../types/types').SanitizeFn} SanitizeFn
|
@@ -1007,17 +553,17 @@ var EMOJI_REGEX = new RegExp(/(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\
|
|
1007
553
|
*/
|
1008
554
|
function useSanitize(shouldReturn, shouldConvertEmojiToImage) {
|
1009
555
|
/** @type {React.MutableRefObject<SanitizeFn[]>} */
|
1010
|
-
|
1011
|
-
|
556
|
+
const sanitizeFnsRef = React.useRef([]);
|
557
|
+
const sanitizedTextRef = React.useRef("");
|
1012
558
|
|
1013
559
|
/** @type {(fn: SanitizeFn) => void} */
|
1014
|
-
|
560
|
+
const addSanitizeFn = React.useCallback(fn => {
|
1015
561
|
sanitizeFnsRef.current.push(fn);
|
1016
562
|
}, []);
|
1017
563
|
|
1018
564
|
/** @type {(html: string) => string} */
|
1019
|
-
|
1020
|
-
|
565
|
+
const sanitize = React.useCallback(html => {
|
566
|
+
let result = sanitizeFnsRef.current.reduce((acc, fn) => {
|
1021
567
|
return fn(acc);
|
1022
568
|
}, html);
|
1023
569
|
result = replaceAllHtmlToString(result, shouldReturn);
|
@@ -1028,9 +574,9 @@ function useSanitize(shouldReturn, shouldConvertEmojiToImage) {
|
|
1028
574
|
return result;
|
1029
575
|
}, [shouldReturn, shouldConvertEmojiToImage]);
|
1030
576
|
return {
|
1031
|
-
addSanitizeFn
|
1032
|
-
sanitize
|
1033
|
-
sanitizedTextRef
|
577
|
+
addSanitizeFn,
|
578
|
+
sanitize,
|
579
|
+
sanitizedTextRef
|
1034
580
|
};
|
1035
581
|
}
|
1036
582
|
|
@@ -1041,9 +587,9 @@ function useSanitize(shouldReturn, shouldConvertEmojiToImage) {
|
|
1041
587
|
* @return {string}
|
1042
588
|
*/
|
1043
589
|
function replaceAllHtmlToString(html, shouldReturn) {
|
1044
|
-
|
590
|
+
const container = document.createElement("div");
|
1045
591
|
container.innerHTML = html;
|
1046
|
-
|
592
|
+
let text;
|
1047
593
|
if (shouldReturn) {
|
1048
594
|
text = removeHtmlExceptBr(container);
|
1049
595
|
} else {
|
@@ -1092,35 +638,35 @@ function handleEmoji(text) {
|
|
1092
638
|
*
|
1093
639
|
* @param {Props} props
|
1094
640
|
*/
|
1095
|
-
function useExpose(
|
1096
|
-
|
1097
|
-
|
1098
|
-
|
1099
|
-
|
1100
|
-
|
1101
|
-
|
1102
|
-
|
1103
|
-
|
1104
|
-
|
1105
|
-
|
1106
|
-
|
1107
|
-
|
1108
|
-
|
1109
|
-
|
1110
|
-
|
1111
|
-
|
1112
|
-
|
1113
|
-
|
1114
|
-
|
1115
|
-
|
1116
|
-
|
1117
|
-
|
1118
|
-
|
1119
|
-
|
1120
|
-
emitChange();
|
641
|
+
function useExpose({
|
642
|
+
ref,
|
643
|
+
textInputRef,
|
644
|
+
setValue,
|
645
|
+
emitChange,
|
646
|
+
shouldConvertEmojiToImage
|
647
|
+
}) {
|
648
|
+
const {
|
649
|
+
sanitize,
|
650
|
+
sanitizedTextRef
|
651
|
+
} = useSanitize(false, shouldConvertEmojiToImage);
|
652
|
+
React.useImperativeHandle(ref, () => ({
|
653
|
+
get value() {
|
654
|
+
return sanitizedTextRef.current;
|
655
|
+
},
|
656
|
+
set value(value) {
|
657
|
+
setValue(value);
|
658
|
+
},
|
659
|
+
focus: () => {
|
660
|
+
if (textInputRef.current === null) return;
|
661
|
+
textInputRef.current.focus();
|
662
|
+
},
|
663
|
+
blur: () => {
|
664
|
+
if (textInputRef.current !== null) {
|
665
|
+
sanitize(textInputRef.current.html);
|
1121
666
|
}
|
1122
|
-
|
1123
|
-
|
667
|
+
emitChange();
|
668
|
+
}
|
669
|
+
}));
|
1124
670
|
}
|
1125
671
|
|
1126
672
|
// @ts-check
|
@@ -1134,19 +680,19 @@ function useExpose(_ref) {
|
|
1134
680
|
*/
|
1135
681
|
function useEmit(textInputRef, onResize, onChange) {
|
1136
682
|
/** @type {React.MutableRefObject<{width: number; height: number} | null>} */
|
1137
|
-
|
1138
|
-
|
1139
|
-
|
683
|
+
const currentSizeRef = React.useRef(null);
|
684
|
+
const onChangeFn = React.useRef(onChange);
|
685
|
+
const checkAndEmitResize = React.useCallback(() => {
|
1140
686
|
if (textInputRef.current !== null) {
|
1141
|
-
|
1142
|
-
|
687
|
+
const currentSize = currentSizeRef.current;
|
688
|
+
const nextSize = textInputRef.current.size;
|
1143
689
|
if ((!currentSize || currentSize.width !== nextSize.width || currentSize.height !== nextSize.height) && typeof onResize === "function") {
|
1144
690
|
onResize(nextSize);
|
1145
691
|
}
|
1146
692
|
currentSizeRef.current = nextSize;
|
1147
693
|
}
|
1148
694
|
}, [onResize, textInputRef]);
|
1149
|
-
|
695
|
+
const emitChange = React.useCallback(sanitizedText => {
|
1150
696
|
if (typeof onChangeFn.current === "function") {
|
1151
697
|
onChangeFn.current(sanitizedText);
|
1152
698
|
}
|
@@ -1154,7 +700,7 @@ function useEmit(textInputRef, onResize, onChange) {
|
|
1154
700
|
checkAndEmitResize();
|
1155
701
|
}
|
1156
702
|
}, [checkAndEmitResize, onResize]);
|
1157
|
-
React.useEffect(
|
703
|
+
React.useEffect(() => {
|
1158
704
|
if (textInputRef.current) {
|
1159
705
|
checkAndEmitResize();
|
1160
706
|
}
|
@@ -1162,7 +708,7 @@ function useEmit(textInputRef, onResize, onChange) {
|
|
1162
708
|
return emitChange;
|
1163
709
|
}
|
1164
710
|
|
1165
|
-
|
711
|
+
// @ts-check
|
1166
712
|
|
1167
713
|
/**
|
1168
714
|
* @typedef {Object} Props
|
@@ -1196,97 +742,96 @@ var _excluded = ["placeholder", "style", "tabIndex", "className", "onChange"];
|
|
1196
742
|
|
1197
743
|
// eslint-disable-next-line valid-jsdoc
|
1198
744
|
/** @type {React.ForwardRefRenderFunction<Ref, Props>} */
|
1199
|
-
|
1200
|
-
|
1201
|
-
|
1202
|
-
|
1203
|
-
|
1204
|
-
|
1205
|
-
|
1206
|
-
|
1207
|
-
|
1208
|
-
|
1209
|
-
|
1210
|
-
|
1211
|
-
|
1212
|
-
|
1213
|
-
|
1214
|
-
|
1215
|
-
|
1216
|
-
|
745
|
+
const TextInput = ({
|
746
|
+
placeholder,
|
747
|
+
style,
|
748
|
+
tabIndex,
|
749
|
+
className,
|
750
|
+
onChange,
|
751
|
+
...props
|
752
|
+
}, ref) => {
|
753
|
+
React.useImperativeHandle(ref, () => ({
|
754
|
+
appendContent: html => {
|
755
|
+
if (textInputRef.current) {
|
756
|
+
textInputRef.current.focus();
|
757
|
+
}
|
758
|
+
handlePasteHtmlAtCaret(html);
|
759
|
+
if (textInputRef.current) {
|
760
|
+
textInputRef.current.focus();
|
761
|
+
}
|
762
|
+
if (textInputRef.current && placeholderRef.current && replaceAllTextEmojiToString(textInputRef.current.innerHTML) === "") {
|
763
|
+
placeholderRef.current.style.visibility = "visible";
|
764
|
+
} else if (placeholderRef.current) {
|
765
|
+
placeholderRef.current.style.visibility = "hidden";
|
766
|
+
}
|
767
|
+
if (textInputRef.current && typeof onChange === 'function') {
|
768
|
+
onChange(textInputRef.current.innerHTML);
|
769
|
+
}
|
770
|
+
},
|
771
|
+
set html(value) {
|
772
|
+
if (textInputRef.current) {
|
773
|
+
textInputRef.current.innerHTML = value;
|
774
|
+
}
|
775
|
+
if (placeholderRef.current) {
|
776
|
+
const text = replaceAllTextEmojiToString(value);
|
777
|
+
if (text === "") {
|
1217
778
|
placeholderRef.current.style.visibility = "visible";
|
1218
|
-
} else
|
779
|
+
} else {
|
1219
780
|
placeholderRef.current.style.visibility = "hidden";
|
1220
781
|
}
|
1221
|
-
|
1222
|
-
|
1223
|
-
|
1224
|
-
}
|
1225
|
-
|
1226
|
-
|
1227
|
-
|
1228
|
-
|
1229
|
-
|
1230
|
-
|
1231
|
-
|
1232
|
-
|
1233
|
-
|
1234
|
-
|
1235
|
-
|
1236
|
-
}
|
1237
|
-
if (typeof onChange === 'function' && textInputRef.current) {
|
1238
|
-
onChange(textInputRef.current.innerHTML);
|
1239
|
-
}
|
1240
|
-
},
|
1241
|
-
get html() {
|
1242
|
-
if (!textInputRef.current) return '';
|
1243
|
-
return textInputRef.current.innerHTML;
|
1244
|
-
},
|
1245
|
-
get text() {
|
1246
|
-
if (!textInputRef.current) return '';
|
1247
|
-
return textInputRef.current.innerText;
|
1248
|
-
},
|
1249
|
-
get size() {
|
1250
|
-
if (!textInputRef.current) {
|
1251
|
-
return {
|
1252
|
-
width: 0,
|
1253
|
-
height: 0
|
1254
|
-
};
|
1255
|
-
}
|
782
|
+
}
|
783
|
+
if (typeof onChange === 'function' && textInputRef.current) {
|
784
|
+
onChange(textInputRef.current.innerHTML);
|
785
|
+
}
|
786
|
+
},
|
787
|
+
get html() {
|
788
|
+
if (!textInputRef.current) return '';
|
789
|
+
return textInputRef.current.innerHTML;
|
790
|
+
},
|
791
|
+
get text() {
|
792
|
+
if (!textInputRef.current) return '';
|
793
|
+
return textInputRef.current.innerText;
|
794
|
+
},
|
795
|
+
get size() {
|
796
|
+
if (!textInputRef.current) {
|
1256
797
|
return {
|
1257
|
-
width:
|
1258
|
-
height:
|
798
|
+
width: 0,
|
799
|
+
height: 0
|
1259
800
|
};
|
1260
|
-
},
|
1261
|
-
focus: function focus() {
|
1262
|
-
if (!textInputRef.current) return;
|
1263
|
-
textInputRef.current.focus();
|
1264
801
|
}
|
1265
|
-
|
1266
|
-
|
802
|
+
return {
|
803
|
+
width: textInputRef.current.offsetWidth,
|
804
|
+
height: textInputRef.current.offsetHeight
|
805
|
+
};
|
806
|
+
},
|
807
|
+
focus() {
|
808
|
+
if (!textInputRef.current) return;
|
809
|
+
textInputRef.current.focus();
|
810
|
+
}
|
811
|
+
}));
|
1267
812
|
|
1268
813
|
/** @type {React.CSSProperties} */
|
1269
|
-
|
1270
|
-
|
814
|
+
const placeholderStyle = React.useMemo(() => {
|
815
|
+
const placeholderStyle = {};
|
1271
816
|
if (style.placeholderColor) {
|
1272
817
|
placeholderStyle.color = style.placeholderColor;
|
1273
818
|
}
|
1274
819
|
return placeholderStyle;
|
1275
|
-
}, [style
|
820
|
+
}, [style?.placeholderColor]);
|
1276
821
|
|
1277
822
|
/** @type {React.CSSProperties} */
|
1278
|
-
|
1279
|
-
|
823
|
+
const inputStyle = React.useMemo(() => {
|
824
|
+
const inputStyle = {};
|
1280
825
|
if (style.color) {
|
1281
826
|
inputStyle.color = style.color;
|
1282
827
|
}
|
1283
828
|
return inputStyle;
|
1284
|
-
}, [style
|
829
|
+
}, [style?.color]);
|
1285
830
|
|
1286
831
|
/** @type {React.MutableRefObject<HTMLDivElement | null>} */
|
1287
|
-
|
832
|
+
const placeholderRef = React.useRef(null);
|
1288
833
|
/** @type {React.MutableRefObject<HTMLDivElement | null>} */
|
1289
|
-
|
834
|
+
const textInputRef = React.useRef(null);
|
1290
835
|
|
1291
836
|
/**
|
1292
837
|
*
|
@@ -1325,9 +870,9 @@ var TextInput = function TextInput(_ref, ref) {
|
|
1325
870
|
*/
|
1326
871
|
function handleKeyUp(event) {
|
1327
872
|
props.onKeyUp(event);
|
1328
|
-
|
873
|
+
const input = textInputRef.current;
|
1329
874
|
if (placeholderRef.current && input) {
|
1330
|
-
|
875
|
+
const text = replaceAllTextEmojiToString(input.innerHTML);
|
1331
876
|
if (text === "") {
|
1332
877
|
placeholderRef.current.style.visibility = "visible";
|
1333
878
|
} else {
|
@@ -1354,7 +899,7 @@ var TextInput = function TextInput(_ref, ref) {
|
|
1354
899
|
onKeyUp: handleKeyUp,
|
1355
900
|
tabIndex: tabIndex,
|
1356
901
|
contentEditable: true,
|
1357
|
-
className:
|
902
|
+
className: `react-input-emoji--input${className ? ` ${className}` : ""}`,
|
1358
903
|
onBlur: props.onBlur,
|
1359
904
|
onCopy: props.onCopy,
|
1360
905
|
onPaste: props.onPaste,
|
@@ -1362,7 +907,9 @@ var TextInput = function TextInput(_ref, ref) {
|
|
1362
907
|
style: inputStyle
|
1363
908
|
})));
|
1364
909
|
};
|
1365
|
-
|
910
|
+
const TextInputWithRef = /*#__PURE__*/React.forwardRef(TextInput);
|
911
|
+
|
912
|
+
// vendors
|
1366
913
|
|
1367
914
|
/**
|
1368
915
|
* @typedef {object} Props
|
@@ -1377,30 +924,27 @@ var TextInputWithRef = /*#__PURE__*/React.forwardRef(TextInput);
|
|
1377
924
|
* @param {Props} props
|
1378
925
|
* @return {JSX.Element}
|
1379
926
|
*/
|
1380
|
-
function EmojiPickerButton(
|
1381
|
-
|
1382
|
-
|
1383
|
-
|
1384
|
-
|
1385
|
-
|
1386
|
-
|
1387
|
-
|
1388
|
-
|
1389
|
-
|
1390
|
-
React.useEffect(function () {
|
1391
|
-
var _buttonRef$current$ch, _buttonRef$current, _buttonElement$childN, _buttonElement$childN2;
|
1392
|
-
if (((_buttonRef$current$ch = buttonRef === null || buttonRef === void 0 || (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 || (_buttonRef$current = _buttonRef$current.childNodes) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.length) !== null && _buttonRef$current$ch !== void 0 ? _buttonRef$current$ch : 0) > 2) {
|
927
|
+
function EmojiPickerButton({
|
928
|
+
showPicker,
|
929
|
+
toggleShowPicker,
|
930
|
+
buttonElement,
|
931
|
+
buttonRef
|
932
|
+
}) {
|
933
|
+
const localButtonRef = React.useRef(null);
|
934
|
+
const [showCustomButtonContent, setShowCustomButtonContent] = React.useState(false);
|
935
|
+
React.useEffect(() => {
|
936
|
+
if ((buttonRef?.current?.childNodes?.length ?? 0) > 2) {
|
1393
937
|
localButtonRef.current.appendChild(buttonRef.current.childNodes[0]);
|
1394
938
|
setShowCustomButtonContent(true);
|
1395
|
-
} else if ((
|
1396
|
-
localButtonRef.current.appendChild(buttonElement
|
939
|
+
} else if ((buttonElement?.childNodes?.length ?? 0) > 2) {
|
940
|
+
localButtonRef.current.appendChild(buttonElement?.childNodes[0]);
|
1397
941
|
setShowCustomButtonContent(true);
|
1398
942
|
}
|
1399
|
-
}, [buttonElement
|
943
|
+
}, [buttonElement?.childNodes]);
|
1400
944
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
1401
945
|
ref: localButtonRef,
|
1402
946
|
type: "button",
|
1403
|
-
className:
|
947
|
+
className: `react-input-emoji--button${showPicker ? " react-input-emoji--button__show" : ""}`,
|
1404
948
|
onClick: toggleShowPicker
|
1405
949
|
}, !showCustomButtonContent && /*#__PURE__*/React__default["default"].createElement("svg", {
|
1406
950
|
xmlns: "http://www.w3.org/2000/svg",
|
@@ -1738,6 +1282,9 @@ var $f72b75cf796873c7$export$2e2bcd8739ae039 = {
|
|
1738
1282
|
};
|
1739
1283
|
const $c84d045dcc34faf5$var$CACHE = new Map();
|
1740
1284
|
const $c84d045dcc34faf5$var$VERSIONS = [{
|
1285
|
+
v: 15,
|
1286
|
+
emoji: "\uD83E\uDEE8"
|
1287
|
+
}, {
|
1741
1288
|
v: 14,
|
1742
1289
|
emoji: "\uD83E\uDEE0"
|
1743
1290
|
}, {
|
@@ -1917,8 +1464,8 @@ var $b247ea80b67298d5$export$2e2bcd8739ae039 = {
|
|
1917
1464
|
value: 24
|
1918
1465
|
},
|
1919
1466
|
emojiVersion: {
|
1920
|
-
value:
|
1921
|
-
choices: [1, 2, 3, 4, 5, 11, 12, 12.1, 13, 13.1, 14]
|
1467
|
+
value: 15,
|
1468
|
+
choices: [1, 2, 3, 4, 5, 11, 12, 12.1, 13, 13.1, 14, 15]
|
1922
1469
|
},
|
1923
1470
|
exceptEmojis: {
|
1924
1471
|
value: []
|
@@ -1929,7 +1476,7 @@ var $b247ea80b67298d5$export$2e2bcd8739ae039 = {
|
|
1929
1476
|
},
|
1930
1477
|
locale: {
|
1931
1478
|
value: "en",
|
1932
|
-
choices: ["en", "ar", "be", "cs", "de", "es", "fa", "fi", "fr", "hi", "it", "ja", "
|
1479
|
+
choices: ["en", "ar", "be", "cs", "de", "es", "fa", "fi", "fr", "hi", "it", "ja", "ko", "nl", "pl", "pt", "ru", "sa", "tr", "uk", "vi", "zh"]
|
1933
1480
|
},
|
1934
1481
|
maxFrequentRows: {
|
1935
1482
|
value: 4
|
@@ -2448,8 +1995,8 @@ function $254755d3f438722f$export$2e2bcd8739ae039(props) {
|
|
2448
1995
|
emoji || (emoji = ($c4d155af13ad4d4b$export$2e2bcd8739ae039).get(id || props.native));
|
2449
1996
|
if (!emoji) return props.fallback;
|
2450
1997
|
const emojiSkin = emoji.skins[skin - 1] || emoji.skins[0];
|
2451
|
-
const imageSrc = emojiSkin.src || (props.set != "native" && !props.spritesheet ? typeof props.getImageURL === "function" ? props.getImageURL(props.set, emojiSkin.unified) : `https://cdn.jsdelivr.net/npm/emoji-datasource-${props.set}@
|
2452
|
-
const spritesheetSrc = typeof props.getSpritesheetURL === "function" ? props.getSpritesheetURL(props.set) : `https://cdn.jsdelivr.net/npm/emoji-datasource-${props.set}@
|
1998
|
+
const imageSrc = emojiSkin.src || (props.set != "native" && !props.spritesheet ? typeof props.getImageURL === "function" ? props.getImageURL(props.set, emojiSkin.unified) : `https://cdn.jsdelivr.net/npm/emoji-datasource-${props.set}@15.0.1/img/${props.set}/64/${emojiSkin.unified}.png` : undefined);
|
1999
|
+
const spritesheetSrc = typeof props.getSpritesheetURL === "function" ? props.getSpritesheetURL(props.set) : `https://cdn.jsdelivr.net/npm/emoji-datasource-${props.set}@15.0.1/img/${props.set}/sheets-256/64.png`;
|
2453
2000
|
return /*#__PURE__*/($bd9dd35321b03dd4$export$34b9dba7ce09269b)("span", {
|
2454
2001
|
class: "emoji-mart-emoji",
|
2455
2002
|
"data-emoji-set": props.set,
|
@@ -2972,6 +2519,7 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
|
|
2972
2519
|
}
|
2973
2520
|
unregister() {
|
2974
2521
|
document.removeEventListener("click", this.handleClickOutside);
|
2522
|
+
this.darkMedia?.removeEventListener("change", this.darkMediaCallback);
|
2975
2523
|
this.unobserve();
|
2976
2524
|
}
|
2977
2525
|
observe() {
|
@@ -3029,12 +2577,7 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
|
|
3029
2577
|
if (!this.darkMedia) {
|
3030
2578
|
this.darkMedia = matchMedia("(prefers-color-scheme: dark)");
|
3031
2579
|
if (this.darkMedia.media.match(/^not/)) return "light";
|
3032
|
-
this.darkMedia.
|
3033
|
-
if (this.props.theme != "auto") return;
|
3034
|
-
this.setState({
|
3035
|
-
theme: this.darkMedia.matches ? "dark" : "light"
|
3036
|
-
});
|
3037
|
-
});
|
2580
|
+
this.darkMedia.addEventListener("change", this.darkMediaCallback);
|
3038
2581
|
}
|
3039
2582
|
return this.darkMedia.matches ? "dark" : "light";
|
3040
2583
|
}
|
@@ -3639,6 +3182,12 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
|
|
3639
3182
|
}
|
3640
3183
|
constructor(props) {
|
3641
3184
|
super();
|
3185
|
+
($c770c458706daa72$export$2e2bcd8739ae039)(this, "darkMediaCallback", () => {
|
3186
|
+
if (this.props.theme != "auto") return;
|
3187
|
+
this.setState({
|
3188
|
+
theme: this.darkMedia.matches ? "dark" : "light"
|
3189
|
+
});
|
3190
|
+
});
|
3642
3191
|
($c770c458706daa72$export$2e2bcd8739ae039)(this, "handleClickOutside", e => {
|
3643
3192
|
const {
|
3644
3193
|
element: element
|
@@ -3847,8 +3396,9 @@ function $e5534fc185f7111e$export$2e2bcd8739ae039(props) {
|
|
3847
3396
|
});
|
3848
3397
|
}
|
3849
3398
|
|
3850
|
-
|
3851
|
-
|
3399
|
+
// vendors
|
3400
|
+
const EMOJI_MART_DATA_URL = "https://cdn.jsdelivr.net/npm/@emoji-mart/data";
|
3401
|
+
const cacheI18n = {};
|
3852
3402
|
|
3853
3403
|
/**
|
3854
3404
|
* @typedef {object} Props
|
@@ -3864,55 +3414,38 @@ var cacheI18n = {};
|
|
3864
3414
|
* @param {Props} props
|
3865
3415
|
*/
|
3866
3416
|
function EmojiPicker(props) {
|
3867
|
-
|
3868
|
-
|
3869
|
-
|
3870
|
-
|
3871
|
-
|
3417
|
+
const {
|
3418
|
+
theme,
|
3419
|
+
onSelectEmoji,
|
3420
|
+
disableRecent,
|
3421
|
+
customEmojis,
|
3422
|
+
language
|
3423
|
+
} = props;
|
3872
3424
|
|
3873
3425
|
/** @type {string[]} */
|
3874
|
-
|
3426
|
+
const categories = React.useMemo(() => {
|
3875
3427
|
/** @type {string[]} */
|
3876
|
-
|
3428
|
+
let categoryies = [];
|
3877
3429
|
if (!disableRecent) {
|
3878
3430
|
categoryies.push("frequent");
|
3879
3431
|
}
|
3880
|
-
categoryies = [
|
3432
|
+
categoryies = [...categoryies, "people", "nature", "foods", "activity", "places", "objects", "symbols", "flags"];
|
3881
3433
|
return categoryies;
|
3882
3434
|
}, [disableRecent]);
|
3883
|
-
|
3884
|
-
|
3885
|
-
i18n = _useState2[0],
|
3886
|
-
setI18n = _useState2[1];
|
3887
|
-
React.useEffect(function () {
|
3888
|
-
var _ref2;
|
3435
|
+
const [i18n, setI18n] = React.useState(undefined);
|
3436
|
+
React.useEffect(() => {
|
3889
3437
|
if (!language) {
|
3890
|
-
var _ref;
|
3891
3438
|
if (cacheI18n.en) {
|
3892
3439
|
setI18n(cacheI18n.en);
|
3893
3440
|
return;
|
3894
3441
|
}
|
3895
3442
|
|
3896
3443
|
// @ts-ignore
|
3897
|
-
fetch(
|
3898
|
-
|
3899
|
-
|
3900
|
-
|
3901
|
-
|
3902
|
-
case 0:
|
3903
|
-
_context.next = 2;
|
3904
|
-
return data.json();
|
3905
|
-
case 2:
|
3906
|
-
translations = _context.sent;
|
3907
|
-
setI18n(translations);
|
3908
|
-
cacheI18n.en = translations;
|
3909
|
-
case 5:
|
3910
|
-
case "end":
|
3911
|
-
return _context.stop();
|
3912
|
-
}
|
3913
|
-
}, _callee);
|
3914
|
-
}))).apply(this, arguments);
|
3915
|
-
})["catch"](function (error) {
|
3444
|
+
fetch(`${EMOJI_MART_DATA_URL}/i18n/en.json`).then(async data => {
|
3445
|
+
const translations = await data.json();
|
3446
|
+
setI18n(translations);
|
3447
|
+
cacheI18n.en = translations;
|
3448
|
+
}).catch(error => {
|
3916
3449
|
console.error("Failed to load translations:", error);
|
3917
3450
|
});
|
3918
3451
|
return;
|
@@ -3923,25 +3456,11 @@ function EmojiPicker(props) {
|
|
3923
3456
|
}
|
3924
3457
|
|
3925
3458
|
// @ts-ignore
|
3926
|
-
fetch(
|
3927
|
-
|
3928
|
-
|
3929
|
-
|
3930
|
-
|
3931
|
-
case 0:
|
3932
|
-
_context2.next = 2;
|
3933
|
-
return data.json();
|
3934
|
-
case 2:
|
3935
|
-
translations = _context2.sent;
|
3936
|
-
setI18n(translations);
|
3937
|
-
cacheI18n[language] = translations;
|
3938
|
-
case 5:
|
3939
|
-
case "end":
|
3940
|
-
return _context2.stop();
|
3941
|
-
}
|
3942
|
-
}, _callee2);
|
3943
|
-
}))).apply(this, arguments);
|
3944
|
-
})["catch"](function (error) {
|
3459
|
+
fetch(`${EMOJI_MART_DATA_URL}/i18n/${language}.json`).then(async data => {
|
3460
|
+
const translations = await data.json();
|
3461
|
+
setI18n(translations);
|
3462
|
+
cacheI18n[language] = translations;
|
3463
|
+
}).catch(error => {
|
3945
3464
|
console.error("Failed to load translations:", error);
|
3946
3465
|
});
|
3947
3466
|
}, [language]);
|
@@ -3977,21 +3496,20 @@ var EmojiPicker$1 = /*#__PURE__*/React.memo(EmojiPicker);
|
|
3977
3496
|
* @param {Props} props
|
3978
3497
|
* @return {JSX.Element}
|
3979
3498
|
*/
|
3980
|
-
function EmojiPickerContainer(
|
3981
|
-
|
3982
|
-
|
3983
|
-
|
3984
|
-
|
3985
|
-
|
3986
|
-
|
3987
|
-
|
3499
|
+
function EmojiPickerContainer({
|
3500
|
+
showPicker,
|
3501
|
+
theme,
|
3502
|
+
handleSelectEmoji,
|
3503
|
+
disableRecent,
|
3504
|
+
customEmojis,
|
3505
|
+
position,
|
3506
|
+
language
|
3507
|
+
}) {
|
3988
3508
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
3989
3509
|
className: "react-emoji-picker--container"
|
3990
3510
|
}, showPicker && /*#__PURE__*/React__default["default"].createElement("div", {
|
3991
3511
|
className: "react-emoji-picker--wrapper",
|
3992
|
-
onClick:
|
3993
|
-
return evt.stopPropagation();
|
3994
|
-
},
|
3512
|
+
onClick: evt => evt.stopPropagation(),
|
3995
3513
|
style: position === 'below' ? {
|
3996
3514
|
top: '40px'
|
3997
3515
|
} : {}
|
@@ -4006,7 +3524,8 @@ function EmojiPickerContainer(_ref) {
|
|
4006
3524
|
}))));
|
4007
3525
|
}
|
4008
3526
|
|
4009
|
-
|
3527
|
+
// @ts-check
|
3528
|
+
const EMOJI_PICKER_CONTAINER_HEIGHT = 435;
|
4010
3529
|
|
4011
3530
|
/**
|
4012
3531
|
* @typedef {import('../types/types').SanitizeFn} SanitizeFn
|
@@ -4032,38 +3551,36 @@ var EMOJI_PICKER_CONTAINER_HEIGHT = 435;
|
|
4032
3551
|
|
4033
3552
|
// eslint-disable-next-line valid-jsdoc
|
4034
3553
|
/** @type {React.FC<Props>} */
|
4035
|
-
|
4036
|
-
|
4037
|
-
|
4038
|
-
|
4039
|
-
|
4040
|
-
|
4041
|
-
|
4042
|
-
|
4043
|
-
|
4044
|
-
|
4045
|
-
|
4046
|
-
|
4047
|
-
|
4048
|
-
|
4049
|
-
setShowPicker = _useState2[1];
|
3554
|
+
const EmojiPickerWrapper = props => {
|
3555
|
+
const {
|
3556
|
+
theme,
|
3557
|
+
keepOpened,
|
3558
|
+
disableRecent,
|
3559
|
+
customEmojis,
|
3560
|
+
addSanitizeFn,
|
3561
|
+
addPolluteFn,
|
3562
|
+
appendContent,
|
3563
|
+
buttonElement,
|
3564
|
+
buttonRef,
|
3565
|
+
language
|
3566
|
+
} = props;
|
3567
|
+
const [showPicker, setShowPicker] = React.useState(false);
|
4050
3568
|
/** @type {[HTMLDivElement | undefined, React.Dispatch<React.SetStateAction<HTMLDivElement | undefined>>]} */
|
4051
|
-
|
4052
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
4053
|
-
customButton = _useState4[0],
|
4054
|
-
setCustomButton = _useState4[1];
|
3569
|
+
const [customButton, setCustomButton] = React.useState();
|
4055
3570
|
/** @type {['above' | 'below' | undefined, React.Dispatch<React.SetStateAction<'above' | 'below' | undefined>>]} */
|
4056
|
-
|
4057
|
-
|
4058
|
-
|
4059
|
-
|
4060
|
-
|
3571
|
+
const [emojiPickerPosition, setEmojiPickerPosition] = React.useState();
|
3572
|
+
React.useEffect(() => {
|
3573
|
+
if (showPicker) {
|
3574
|
+
cacheCurrentRange();
|
3575
|
+
}
|
3576
|
+
}, [showPicker]);
|
3577
|
+
React.useEffect(() => {
|
4061
3578
|
addSanitizeFn(replaceAllTextEmojiToString);
|
4062
3579
|
}, [addSanitizeFn]);
|
4063
|
-
React.useEffect(
|
3580
|
+
React.useEffect(() => {
|
4064
3581
|
addPolluteFn(replaceAllTextEmojis);
|
4065
3582
|
}, [addPolluteFn]);
|
4066
|
-
React.useEffect(
|
3583
|
+
React.useEffect(() => {
|
4067
3584
|
/**
|
4068
3585
|
*
|
4069
3586
|
* @param {MouseEvent} event
|
@@ -4071,14 +3588,14 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
|
|
4071
3588
|
function checkClickOutside(event) {
|
4072
3589
|
/** @type {HTMLElement} */
|
4073
3590
|
// @ts-ignore
|
4074
|
-
|
3591
|
+
const element = event.target;
|
4075
3592
|
if (element.classList.contains("react-input-emoji--button") || element.classList.contains("react-input-emoji--button--icon")) {
|
4076
3593
|
return;
|
4077
3594
|
}
|
4078
3595
|
setShowPicker(false);
|
4079
3596
|
}
|
4080
3597
|
document.addEventListener("click", checkClickOutside);
|
4081
|
-
return
|
3598
|
+
return () => {
|
4082
3599
|
document.removeEventListener("click", checkClickOutside);
|
4083
3600
|
};
|
4084
3601
|
}, []);
|
@@ -4091,9 +3608,7 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
|
|
4091
3608
|
event.stopPropagation();
|
4092
3609
|
event.preventDefault();
|
4093
3610
|
setEmojiPickerPosition(calcTopPosition(event));
|
4094
|
-
setShowPicker(
|
4095
|
-
return !currentShowPicker;
|
4096
|
-
});
|
3611
|
+
setShowPicker(currentShowPicker => !currentShowPicker);
|
4097
3612
|
}
|
4098
3613
|
|
4099
3614
|
/**
|
@@ -4102,9 +3617,9 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
|
|
4102
3617
|
* @return {'above' | 'below'}
|
4103
3618
|
*/
|
4104
3619
|
function calcTopPosition(event) {
|
4105
|
-
|
4106
|
-
|
4107
|
-
|
3620
|
+
const btn = event.currentTarget;
|
3621
|
+
const btnRect = btn.getBoundingClientRect();
|
3622
|
+
const popoverHeight = EMOJI_PICKER_CONTAINER_HEIGHT;
|
4108
3623
|
|
4109
3624
|
// Decide to display above or below based on available space
|
4110
3625
|
if (btnRect.top >= popoverHeight) {
|
@@ -4124,17 +3639,14 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
|
|
4124
3639
|
function handleSelectEmoji(emoji) {
|
4125
3640
|
appendContent(getImageEmoji(emoji));
|
4126
3641
|
if (!keepOpened) {
|
4127
|
-
setShowPicker(
|
4128
|
-
return !currentShowPicker;
|
4129
|
-
});
|
3642
|
+
setShowPicker(currentShowPicker => !currentShowPicker);
|
4130
3643
|
}
|
4131
3644
|
}
|
4132
|
-
React.useEffect(
|
4133
|
-
|
4134
|
-
if (buttonRef !== null && buttonRef !== void 0 && (_buttonRef$current = buttonRef.current) !== null && _buttonRef$current !== void 0 && _buttonRef$current.style) {
|
3645
|
+
React.useEffect(() => {
|
3646
|
+
if (buttonRef?.current?.style) {
|
4135
3647
|
buttonRef.current.style.position = "relative";
|
4136
3648
|
setCustomButton(buttonRef.current);
|
4137
|
-
} else if (buttonElement
|
3649
|
+
} else if (buttonElement?.style) {
|
4138
3650
|
buttonElement.style.position = "relative";
|
4139
3651
|
setCustomButton(buttonElement);
|
4140
3652
|
}
|
@@ -4173,16 +3685,16 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
|
|
4173
3685
|
* @return {string | null}
|
4174
3686
|
*/
|
4175
3687
|
function getTextFromAtToCaret() {
|
4176
|
-
|
3688
|
+
const range = getRangeFromAtToCaret();
|
4177
3689
|
if (!range) return null;
|
4178
|
-
|
3690
|
+
const text = range.text.substring(range.begin, range.end);
|
4179
3691
|
return text || null;
|
4180
3692
|
}
|
4181
3693
|
|
4182
3694
|
// eslint-disable-next-line valid-jsdoc
|
4183
3695
|
/** */
|
4184
3696
|
function deleteTextFromAtToCaret() {
|
4185
|
-
|
3697
|
+
const range = getRangeFromAtToCaret();
|
4186
3698
|
if (!range) return;
|
4187
3699
|
|
4188
3700
|
// @ts-ignore
|
@@ -4194,22 +3706,24 @@ function deleteTextFromAtToCaret() {
|
|
4194
3706
|
* @return {{begin: number, end: number, text: string, element: Node} | null}
|
4195
3707
|
*/
|
4196
3708
|
function getRangeFromAtToCaret() {
|
4197
|
-
|
3709
|
+
const elementWithFocus = getElementWithFocus();
|
4198
3710
|
if (!elementWithFocus) {
|
4199
3711
|
return null;
|
4200
3712
|
}
|
4201
|
-
|
4202
|
-
|
4203
|
-
|
4204
|
-
|
3713
|
+
const {
|
3714
|
+
element,
|
3715
|
+
caretOffset
|
3716
|
+
} = elementWithFocus;
|
3717
|
+
const text = element.textContent;
|
3718
|
+
const lastAt = text.lastIndexOf("@");
|
4205
3719
|
if (lastAt === -1 || lastAt >= caretOffset || lastAt !== 0 && text[lastAt - 1] !== " ") {
|
4206
3720
|
return null;
|
4207
3721
|
}
|
4208
3722
|
return {
|
4209
3723
|
begin: lastAt,
|
4210
3724
|
end: caretOffset,
|
4211
|
-
text
|
4212
|
-
element
|
3725
|
+
text,
|
3726
|
+
element
|
4213
3727
|
};
|
4214
3728
|
}
|
4215
3729
|
|
@@ -4218,14 +3732,14 @@ function getRangeFromAtToCaret() {
|
|
4218
3732
|
* @return {{element: Node, caretOffset: number}}
|
4219
3733
|
*/
|
4220
3734
|
function getElementWithFocus() {
|
4221
|
-
|
3735
|
+
const element = getSelectionStart();
|
4222
3736
|
if (element === null) {
|
4223
3737
|
return null;
|
4224
3738
|
}
|
4225
|
-
|
3739
|
+
let caretOffset = 0;
|
4226
3740
|
if (typeof window.getSelection != "undefined") {
|
4227
|
-
|
4228
|
-
|
3741
|
+
const range = window.getSelection().getRangeAt(0);
|
3742
|
+
const preCaretRange = range.cloneRange();
|
4229
3743
|
preCaretRange.selectNodeContents(element);
|
4230
3744
|
preCaretRange.setEnd(range.endContainer, range.endOffset);
|
4231
3745
|
caretOffset = preCaretRange.toString().length;
|
@@ -4235,16 +3749,16 @@ function getElementWithFocus() {
|
|
4235
3749
|
// @ts-ignore
|
4236
3750
|
document.selection.type != "Control") {
|
4237
3751
|
// @ts-ignore
|
4238
|
-
|
3752
|
+
const textRange = document.selection.createRange();
|
4239
3753
|
// @ts-ignore
|
4240
|
-
|
3754
|
+
const preCaretTextRange = document.body.createTextRange();
|
4241
3755
|
preCaretTextRange.moveToElementText(element);
|
4242
3756
|
preCaretTextRange.setEndPoint("EndToEnd", textRange);
|
4243
3757
|
caretOffset = preCaretTextRange.text.length;
|
4244
3758
|
}
|
4245
3759
|
return {
|
4246
|
-
element
|
4247
|
-
caretOffset
|
3760
|
+
element,
|
3761
|
+
caretOffset
|
4248
3762
|
};
|
4249
3763
|
}
|
4250
3764
|
|
@@ -4253,10 +3767,12 @@ function getElementWithFocus() {
|
|
4253
3767
|
* @return {Node | null}
|
4254
3768
|
*/
|
4255
3769
|
function getSelectionStart() {
|
4256
|
-
|
4257
|
-
return
|
3770
|
+
const node = document.getSelection().anchorNode;
|
3771
|
+
return node?.nodeType == 3 ? node : null;
|
4258
3772
|
}
|
4259
3773
|
|
3774
|
+
// @ts-check
|
3775
|
+
|
4260
3776
|
/**
|
4261
3777
|
* @typedef {import('../types/types').MentionUser} MentionUser
|
4262
3778
|
*/
|
@@ -4268,98 +3784,57 @@ function getSelectionStart() {
|
|
4268
3784
|
* @returns {{mentionSearchText: string | null, mentionUsers: MentionUser[], onKeyUp: (event: React.KeyboardEvent) => void, onFocus: () => void, onSelectUser: () => void, loading: boolean}}
|
4269
3785
|
*/
|
4270
3786
|
function useMention(searchMention) {
|
4271
|
-
|
4272
|
-
var _useState = React.useState(false),
|
4273
|
-
_useState2 = _slicedToArray(_useState, 2),
|
4274
|
-
loading = _useState2[0],
|
4275
|
-
setLoading = _useState2[1];
|
3787
|
+
const [loading, setLoading] = React.useState(false);
|
4276
3788
|
|
4277
3789
|
/** @type {[MentionUser[], React.Dispatch<React.SetStateAction<MentionUser[]>>]} */
|
4278
|
-
|
4279
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
4280
|
-
mentionUsers = _useState4[0],
|
4281
|
-
setMentionUsers = _useState4[1];
|
3790
|
+
const [mentionUsers, setMentionUsers] = React.useState([]);
|
4282
3791
|
|
4283
3792
|
/** @type {[string | null, React.Dispatch<React.SetStateAction<string | null>>]} */
|
4284
|
-
|
4285
|
-
|
4286
|
-
mentionSearchText = _useState6[0],
|
4287
|
-
setMentionSearchText = _useState6[1];
|
4288
|
-
var onSelectUser = React.useCallback(function () {
|
3793
|
+
const [mentionSearchText, setMentionSearchText] = React.useState(null);
|
3794
|
+
const onSelectUser = React.useCallback(() => {
|
4289
3795
|
deleteTextFromAtToCaret();
|
4290
3796
|
setMentionUsers([]);
|
4291
3797
|
}, []);
|
4292
3798
|
|
4293
3799
|
/** */
|
4294
|
-
|
4295
|
-
|
4296
|
-
|
4297
|
-
|
4298
|
-
|
4299
|
-
|
4300
|
-
|
4301
|
-
|
4302
|
-
|
4303
|
-
|
4304
|
-
|
4305
|
-
|
4306
|
-
_context.next = 12;
|
4307
|
-
break;
|
4308
|
-
case 6:
|
4309
|
-
setLoading(true);
|
4310
|
-
_context.next = 9;
|
4311
|
-
return searchMention(metionText);
|
4312
|
-
case 9:
|
4313
|
-
users = _context.sent;
|
4314
|
-
setLoading(false);
|
4315
|
-
setMentionUsers(users);
|
4316
|
-
case 12:
|
4317
|
-
case "end":
|
4318
|
-
return _context.stop();
|
4319
|
-
}
|
4320
|
-
}, _callee);
|
4321
|
-
})), [searchMention]);
|
3800
|
+
const checkMentionText = React.useCallback(async () => {
|
3801
|
+
const metionText = getTextFromAtToCaret();
|
3802
|
+
setMentionSearchText(metionText);
|
3803
|
+
if (metionText === null) {
|
3804
|
+
setMentionUsers([]);
|
3805
|
+
} else {
|
3806
|
+
setLoading(true);
|
3807
|
+
const users = await searchMention(metionText);
|
3808
|
+
setLoading(false);
|
3809
|
+
setMentionUsers(users);
|
3810
|
+
}
|
3811
|
+
}, [searchMention]);
|
4322
3812
|
|
4323
3813
|
/** @type {(event: React.KeyboardEvent) => void} */
|
4324
|
-
|
4325
|
-
|
4326
|
-
|
4327
|
-
|
4328
|
-
|
4329
|
-
|
4330
|
-
|
4331
|
-
|
4332
|
-
_context2.next = 2;
|
4333
|
-
break;
|
4334
|
-
}
|
4335
|
-
return _context2.abrupt("return");
|
4336
|
-
case 2:
|
4337
|
-
if (event.key === "Backspace" && (_getElementWithFocus = getElementWithFocus()) !== null && _getElementWithFocus !== void 0 && _getElementWithFocus.element.parentElement.hasAttribute("data-mention-id")) {
|
4338
|
-
elementWithFocus = getElementWithFocus();
|
4339
|
-
elementWithFocus.element.parentElement.remove();
|
4340
|
-
} else if (!["ArrowUp", "ArrowDown", "Esc", "Escape"].includes(event.key)) {
|
4341
|
-
checkMentionText();
|
4342
|
-
}
|
4343
|
-
case 3:
|
4344
|
-
case "end":
|
4345
|
-
return _context2.stop();
|
4346
|
-
}
|
4347
|
-
}, _callee2);
|
4348
|
-
}))).apply(this, arguments);
|
3814
|
+
const onKeyUp = React.useCallback(async event => {
|
3815
|
+
if (typeof searchMention !== "function") return;
|
3816
|
+
if (event.key === "Backspace" && getElementWithFocus()?.element.parentElement.hasAttribute("data-mention-id")) {
|
3817
|
+
const elementWithFocus = getElementWithFocus();
|
3818
|
+
elementWithFocus.element.parentElement.remove();
|
3819
|
+
} else if (!["ArrowUp", "ArrowDown", "Esc", "Escape"].includes(event.key)) {
|
3820
|
+
checkMentionText();
|
3821
|
+
}
|
4349
3822
|
}, [checkMentionText, searchMention]);
|
4350
|
-
|
3823
|
+
const onFocus = React.useCallback(() => {
|
4351
3824
|
checkMentionText();
|
4352
3825
|
}, [checkMentionText]);
|
4353
3826
|
return {
|
4354
|
-
mentionSearchText
|
4355
|
-
mentionUsers
|
4356
|
-
onKeyUp
|
4357
|
-
onFocus
|
4358
|
-
onSelectUser
|
4359
|
-
loading
|
3827
|
+
mentionSearchText,
|
3828
|
+
mentionUsers,
|
3829
|
+
onKeyUp,
|
3830
|
+
onFocus,
|
3831
|
+
onSelectUser,
|
3832
|
+
loading
|
4360
3833
|
};
|
4361
3834
|
}
|
4362
3835
|
|
3836
|
+
// @ts-check
|
3837
|
+
|
4363
3838
|
/**
|
4364
3839
|
* @typedef {import('../types/types').MentionUser} MentionUser
|
4365
3840
|
*/
|
@@ -4382,36 +3857,32 @@ function useMention(searchMention) {
|
|
4382
3857
|
|
4383
3858
|
// eslint-disable-next-line valid-jsdoc
|
4384
3859
|
/** @type {React.ForwardRefRenderFunction<Ref, Props>} */
|
4385
|
-
|
4386
|
-
|
4387
|
-
|
4388
|
-
|
4389
|
-
|
4390
|
-
|
4391
|
-
|
4392
|
-
|
4393
|
-
|
4394
|
-
|
4395
|
-
|
4396
|
-
|
4397
|
-
|
4398
|
-
|
4399
|
-
|
4400
|
-
|
4401
|
-
|
4402
|
-
|
4403
|
-
|
4404
|
-
|
4405
|
-
|
4406
|
-
|
4407
|
-
|
4408
|
-
|
4409
|
-
|
4410
|
-
|
4411
|
-
}
|
4412
|
-
};
|
4413
|
-
});
|
4414
|
-
React.useEffect(function () {
|
3860
|
+
const MentionUserList = ({
|
3861
|
+
users,
|
3862
|
+
mentionSearchText,
|
3863
|
+
onSelect,
|
3864
|
+
addEventListener
|
3865
|
+
}, ref) => {
|
3866
|
+
const [selectedUser, setSelectedUser] = React.useState(0);
|
3867
|
+
React.useImperativeHandle(ref, () => ({
|
3868
|
+
prevUser: () => {
|
3869
|
+
setSelectedUser(currentSelectedUser => {
|
3870
|
+
if (currentSelectedUser === 0) {
|
3871
|
+
return 0;
|
3872
|
+
}
|
3873
|
+
return currentSelectedUser - 1;
|
3874
|
+
});
|
3875
|
+
},
|
3876
|
+
nextUser: () => {
|
3877
|
+
setSelectedUser(currentSelectedUser => {
|
3878
|
+
if (currentSelectedUser === users.length - 1) {
|
3879
|
+
return users.length - 1;
|
3880
|
+
}
|
3881
|
+
return currentSelectedUser + 1;
|
3882
|
+
});
|
3883
|
+
}
|
3884
|
+
}));
|
3885
|
+
React.useEffect(() => {
|
4415
3886
|
setSelectedUser(0);
|
4416
3887
|
}, [users]);
|
4417
3888
|
|
@@ -4422,20 +3893,20 @@ var MentionUserList = function MentionUserList(_ref, ref) {
|
|
4422
3893
|
* @return {string}
|
4423
3894
|
*/
|
4424
3895
|
function getMentionSelectedNameEl(selectedText, rest) {
|
4425
|
-
return
|
3896
|
+
return `<span class="react-input-emoji--mention--item--name__selected" data-testid="metion-selected-word">${selectedText}</span>${rest}`;
|
4426
3897
|
}
|
4427
3898
|
|
4428
3899
|
/** @type {(MentionUser & {nameHtml: string})[]} */
|
4429
|
-
|
4430
|
-
|
4431
|
-
return users.map(
|
4432
|
-
|
3900
|
+
const usersFiltered = React.useMemo(() => {
|
3901
|
+
const searchText = mentionSearchText ? mentionSearchText.substring(1).toLocaleLowerCase() : "";
|
3902
|
+
return users.map(user => {
|
3903
|
+
let nameHtml = user.name;
|
4433
3904
|
if (mentionSearchText && mentionSearchText.length > 1) {
|
4434
3905
|
if (user.name.toLowerCase().startsWith(searchText)) {
|
4435
3906
|
nameHtml = getMentionSelectedNameEl(user.name.substring(0, searchText.length), user.name.substring(searchText.length));
|
4436
3907
|
} else {
|
4437
|
-
|
4438
|
-
nameHtml = names.map(
|
3908
|
+
const names = user.name.split(" ");
|
3909
|
+
nameHtml = names.map(name => {
|
4439
3910
|
if (name.toLocaleLowerCase().startsWith(searchText)) {
|
4440
3911
|
return getMentionSelectedNameEl(name.substring(0, searchText.length), name.substring(searchText.length));
|
4441
3912
|
}
|
@@ -4443,9 +3914,10 @@ var MentionUserList = function MentionUserList(_ref, ref) {
|
|
4443
3914
|
}).join(" ");
|
4444
3915
|
}
|
4445
3916
|
}
|
4446
|
-
return
|
4447
|
-
|
4448
|
-
|
3917
|
+
return {
|
3918
|
+
...user,
|
3919
|
+
nameHtml
|
3920
|
+
};
|
4449
3921
|
});
|
4450
3922
|
}, [mentionSearchText, users]);
|
4451
3923
|
|
@@ -4456,47 +3928,45 @@ var MentionUserList = function MentionUserList(_ref, ref) {
|
|
4456
3928
|
* @returns {(event: React.MouseEvent) => void} event
|
4457
3929
|
*/
|
4458
3930
|
function handleClick(user) {
|
4459
|
-
return
|
3931
|
+
return event => {
|
4460
3932
|
event.stopPropagation();
|
4461
3933
|
event.preventDefault();
|
4462
3934
|
onSelect(user);
|
4463
3935
|
};
|
4464
3936
|
}
|
4465
|
-
React.useEffect(
|
4466
|
-
|
3937
|
+
React.useEffect(() => {
|
3938
|
+
const unsubscribe = addEventListener("enter", event => {
|
4467
3939
|
event.stopPropagation();
|
4468
3940
|
event.preventDefault();
|
4469
3941
|
onSelect(usersFiltered[selectedUser]);
|
4470
3942
|
});
|
4471
|
-
return
|
3943
|
+
return () => {
|
4472
3944
|
unsubscribe();
|
4473
3945
|
};
|
4474
3946
|
}, [addEventListener, onSelect, selectedUser, usersFiltered]);
|
4475
3947
|
return /*#__PURE__*/React__default["default"].createElement("ul", {
|
4476
3948
|
className: "react-input-emoji--mention--list",
|
4477
3949
|
"data-testid": "mention-user-list"
|
4478
|
-
}, usersFiltered.map(
|
4479
|
-
|
4480
|
-
|
4481
|
-
|
4482
|
-
|
4483
|
-
|
4484
|
-
|
4485
|
-
|
4486
|
-
|
4487
|
-
|
4488
|
-
|
4489
|
-
|
4490
|
-
|
4491
|
-
|
4492
|
-
|
4493
|
-
|
4494
|
-
__html: user.nameHtml
|
4495
|
-
}
|
4496
|
-
})));
|
4497
|
-
}));
|
3950
|
+
}, usersFiltered.map((user, index) => /*#__PURE__*/React__default["default"].createElement("li", {
|
3951
|
+
key: user.id
|
3952
|
+
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
3953
|
+
type: "button",
|
3954
|
+
onClick: handleClick(user),
|
3955
|
+
className: `react-input-emoji--mention--item${selectedUser === index ? " react-input-emoji--mention--item__selected" : ""}`,
|
3956
|
+
onMouseOver: () => setSelectedUser(index)
|
3957
|
+
}, /*#__PURE__*/React__default["default"].createElement("img", {
|
3958
|
+
className: "react-input-emoji--mention--item--img",
|
3959
|
+
src: user.image
|
3960
|
+
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
3961
|
+
className: "react-input-emoji--mention--item--name",
|
3962
|
+
dangerouslySetInnerHTML: {
|
3963
|
+
__html: user.nameHtml
|
3964
|
+
}
|
3965
|
+
})))));
|
4498
3966
|
};
|
4499
|
-
|
3967
|
+
const MentionUserListWithRef = /*#__PURE__*/React.forwardRef(MentionUserList);
|
3968
|
+
|
3969
|
+
// @ts-check
|
4500
3970
|
|
4501
3971
|
/**
|
4502
3972
|
* @typedef {import('../types/types').MentionUser} MetionUser
|
@@ -4520,55 +3990,54 @@ var MentionUserListWithRef = /*#__PURE__*/React.forwardRef(MentionUserList);
|
|
4520
3990
|
|
4521
3991
|
// eslint-disable-next-line valid-jsdoc
|
4522
3992
|
/** @type {React.FC<Props>} */
|
4523
|
-
|
4524
|
-
|
4525
|
-
|
4526
|
-
|
4527
|
-
|
3993
|
+
const MentionWrapper = ({
|
3994
|
+
searchMention,
|
3995
|
+
addEventListener,
|
3996
|
+
appendContent,
|
3997
|
+
addSanitizeFn
|
3998
|
+
}) => {
|
4528
3999
|
/** @type {React.MutableRefObject<import('./mention-user-list').Ref | null>} */
|
4529
|
-
|
4530
|
-
|
4531
|
-
|
4532
|
-
|
4533
|
-
|
4534
|
-
|
4535
|
-
|
4536
|
-
|
4537
|
-
|
4538
|
-
|
4539
|
-
|
4540
|
-
|
4541
|
-
|
4542
|
-
addSanitizeFn(function (html) {
|
4543
|
-
var container = document.createElement("div");
|
4000
|
+
const metionUserListRef = React.useRef(null);
|
4001
|
+
const [showUserList, setShowUserList] = React.useState(false);
|
4002
|
+
const {
|
4003
|
+
mentionSearchText,
|
4004
|
+
mentionUsers,
|
4005
|
+
loading,
|
4006
|
+
onKeyUp,
|
4007
|
+
onFocus,
|
4008
|
+
onSelectUser
|
4009
|
+
} = useMention(searchMention);
|
4010
|
+
React.useEffect(() => {
|
4011
|
+
addSanitizeFn(html => {
|
4012
|
+
const container = document.createElement("div");
|
4544
4013
|
container.innerHTML = html;
|
4545
|
-
|
4546
|
-
mentionsEl.forEach(
|
4547
|
-
container.innerHTML = container.innerHTML.replace(mentionEl.outerHTML,
|
4014
|
+
const mentionsEl = Array.prototype.slice.call(container.querySelectorAll(".react-input-emoji--mention--text"));
|
4015
|
+
mentionsEl.forEach(mentionEl => {
|
4016
|
+
container.innerHTML = container.innerHTML.replace(mentionEl.outerHTML, `@[${mentionEl.dataset.mentionName}](userId:${mentionEl.dataset.mentionId})`);
|
4548
4017
|
});
|
4549
4018
|
return container.innerHTML;
|
4550
4019
|
});
|
4551
4020
|
}, [addSanitizeFn]);
|
4552
|
-
React.useEffect(
|
4021
|
+
React.useEffect(() => {
|
4553
4022
|
setShowUserList(mentionUsers.length > 0);
|
4554
4023
|
}, [mentionUsers]);
|
4555
|
-
React.useEffect(
|
4024
|
+
React.useEffect(() => {
|
4556
4025
|
/** */
|
4557
4026
|
function checkClickOutside() {
|
4558
4027
|
setShowUserList(false);
|
4559
4028
|
}
|
4560
4029
|
document.addEventListener("click", checkClickOutside);
|
4561
|
-
return
|
4030
|
+
return () => {
|
4562
4031
|
document.removeEventListener("click", checkClickOutside);
|
4563
4032
|
};
|
4564
4033
|
}, []);
|
4565
|
-
React.useEffect(
|
4566
|
-
|
4567
|
-
return
|
4034
|
+
React.useEffect(() => {
|
4035
|
+
const unsubscribe = addEventListener("keyUp", onKeyUp);
|
4036
|
+
return () => {
|
4568
4037
|
unsubscribe();
|
4569
4038
|
};
|
4570
4039
|
}, [addEventListener, onKeyUp]);
|
4571
|
-
React.useEffect(
|
4040
|
+
React.useEffect(() => {
|
4572
4041
|
/**
|
4573
4042
|
*
|
4574
4043
|
* @param {React.KeyboardEvent} event
|
@@ -4581,30 +4050,30 @@ var MentionWrapper = function MentionWrapper(_ref) {
|
|
4581
4050
|
break;
|
4582
4051
|
}
|
4583
4052
|
}
|
4584
|
-
|
4585
|
-
return
|
4053
|
+
const unsubscribe = addEventListener("keyDown", handleKeyDown);
|
4054
|
+
return () => {
|
4586
4055
|
unsubscribe();
|
4587
4056
|
};
|
4588
4057
|
}, [addEventListener]);
|
4589
|
-
React.useEffect(
|
4590
|
-
|
4591
|
-
return
|
4058
|
+
React.useEffect(() => {
|
4059
|
+
const unsubscribe = addEventListener("focus", onFocus);
|
4060
|
+
return () => {
|
4592
4061
|
unsubscribe();
|
4593
4062
|
};
|
4594
4063
|
}, [addEventListener, onFocus]);
|
4595
|
-
React.useEffect(
|
4064
|
+
React.useEffect(() => {
|
4596
4065
|
if (showUserList) {
|
4597
|
-
|
4066
|
+
const unsubscribeArrowUp = addEventListener("arrowUp", event => {
|
4598
4067
|
event.stopPropagation();
|
4599
4068
|
event.preventDefault();
|
4600
4069
|
metionUserListRef.current.prevUser();
|
4601
4070
|
});
|
4602
|
-
|
4071
|
+
const unsubscribeArrowDown = addEventListener("arrowDown", event => {
|
4603
4072
|
event.stopPropagation();
|
4604
4073
|
event.preventDefault();
|
4605
4074
|
metionUserListRef.current.nextUser();
|
4606
4075
|
});
|
4607
|
-
return
|
4076
|
+
return () => {
|
4608
4077
|
unsubscribeArrowUp();
|
4609
4078
|
unsubscribeArrowDown();
|
4610
4079
|
};
|
@@ -4617,7 +4086,7 @@ var MentionWrapper = function MentionWrapper(_ref) {
|
|
4617
4086
|
*/
|
4618
4087
|
function handleSelect(user) {
|
4619
4088
|
onSelectUser();
|
4620
|
-
appendContent(
|
4089
|
+
appendContent(`<span class="react-input-emoji--mention--text" data-mention-id="${user.id}" data-mention-name="${user.name}">@${user.name}</span> `);
|
4621
4090
|
}
|
4622
4091
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, loading ? /*#__PURE__*/React__default["default"].createElement("div", {
|
4623
4092
|
className: "react-input-emoji--mention--container"
|
@@ -4627,9 +4096,7 @@ var MentionWrapper = function MentionWrapper(_ref) {
|
|
4627
4096
|
className: "react-input-emoji--mention--loading--spinner"
|
4628
4097
|
}, "Loading..."))) : showUserList && /*#__PURE__*/React__default["default"].createElement("div", {
|
4629
4098
|
className: "react-input-emoji--mention--container",
|
4630
|
-
onClick:
|
4631
|
-
return evt.stopPropagation();
|
4632
|
-
}
|
4099
|
+
onClick: evt => evt.stopPropagation()
|
4633
4100
|
}, /*#__PURE__*/React__default["default"].createElement(MentionUserListWithRef, {
|
4634
4101
|
ref: metionUserListRef,
|
4635
4102
|
mentionSearchText: mentionSearchText,
|
@@ -4648,20 +4115,16 @@ var MentionWrapper = function MentionWrapper(_ref) {
|
|
4648
4115
|
*/
|
4649
4116
|
function createObserver() {
|
4650
4117
|
/** @type {import('../types/types').Listerner<T>[]} */
|
4651
|
-
|
4118
|
+
let listeners = [];
|
4652
4119
|
return {
|
4653
|
-
subscribe:
|
4120
|
+
subscribe: listener => {
|
4654
4121
|
listeners.push(listener);
|
4655
|
-
return
|
4656
|
-
listeners = listeners.filter(
|
4657
|
-
return l !== listener;
|
4658
|
-
});
|
4122
|
+
return () => {
|
4123
|
+
listeners = listeners.filter(l => l !== listener);
|
4659
4124
|
};
|
4660
4125
|
},
|
4661
|
-
publish:
|
4662
|
-
listeners.forEach(
|
4663
|
-
return listener(event);
|
4664
|
-
});
|
4126
|
+
publish: event => {
|
4127
|
+
listeners.forEach(listener => listener(event));
|
4665
4128
|
},
|
4666
4129
|
get currentListerners() {
|
4667
4130
|
return listeners;
|
@@ -4679,28 +4142,26 @@ function createObserver() {
|
|
4679
4142
|
/** */
|
4680
4143
|
function useEventListeners() {
|
4681
4144
|
/** @type {TextInputListeners} */
|
4682
|
-
|
4683
|
-
|
4684
|
-
|
4685
|
-
|
4686
|
-
|
4687
|
-
|
4688
|
-
|
4689
|
-
|
4690
|
-
|
4691
|
-
};
|
4692
|
-
}, []);
|
4145
|
+
const listeners = React.useMemo(() => ({
|
4146
|
+
keyDown: createObserver(),
|
4147
|
+
keyUp: createObserver(),
|
4148
|
+
arrowUp: createObserver(),
|
4149
|
+
arrowDown: createObserver(),
|
4150
|
+
enter: createObserver(),
|
4151
|
+
focus: createObserver(),
|
4152
|
+
blur: createObserver()
|
4153
|
+
}), []);
|
4693
4154
|
|
4694
4155
|
/**
|
4695
4156
|
* @template {keyof TextInputListeners} T, K
|
4696
4157
|
* @type {(event: keyof TextInputListeners, fn: import('../types/types').Listerner<any>) => () => void}
|
4697
4158
|
*/
|
4698
|
-
|
4159
|
+
const addEventListener = React.useCallback((event, fn) => {
|
4699
4160
|
return listeners[event].subscribe(fn);
|
4700
4161
|
}, [listeners]);
|
4701
4162
|
return {
|
4702
|
-
addEventListener
|
4703
|
-
listeners
|
4163
|
+
addEventListener,
|
4164
|
+
listeners
|
4704
4165
|
};
|
4705
4166
|
}
|
4706
4167
|
|
@@ -4714,23 +4175,23 @@ function useEventListeners() {
|
|
4714
4175
|
/** */
|
4715
4176
|
function usePollute() {
|
4716
4177
|
/** @type {React.MutableRefObject<PolluteFn[]>} */
|
4717
|
-
|
4178
|
+
const polluteFnsRef = React.useRef([]);
|
4718
4179
|
|
4719
4180
|
/** @type {(fn: PolluteFn) => void} */
|
4720
|
-
|
4181
|
+
const addPolluteFn = React.useCallback(fn => {
|
4721
4182
|
polluteFnsRef.current.push(fn);
|
4722
4183
|
}, []);
|
4723
4184
|
|
4724
4185
|
/** @type {(html: string) => string} */
|
4725
|
-
|
4726
|
-
|
4186
|
+
const pollute = React.useCallback(text => {
|
4187
|
+
const result = polluteFnsRef.current.reduce((acc, fn) => {
|
4727
4188
|
return fn(acc);
|
4728
4189
|
}, text);
|
4729
4190
|
return result;
|
4730
4191
|
}, []);
|
4731
4192
|
return {
|
4732
|
-
addPolluteFn
|
4733
|
-
pollute
|
4193
|
+
addPolluteFn,
|
4194
|
+
pollute
|
4734
4195
|
};
|
4735
4196
|
}
|
4736
4197
|
|
@@ -4786,72 +4247,77 @@ function usePollute() {
|
|
4786
4247
|
* @return {JSX.Element}
|
4787
4248
|
*/
|
4788
4249
|
function InputEmoji(props, ref) {
|
4789
|
-
|
4790
|
-
|
4791
|
-
|
4792
|
-
|
4793
|
-
|
4794
|
-
|
4795
|
-
|
4796
|
-
|
4797
|
-
|
4798
|
-
|
4799
|
-
|
4800
|
-
|
4801
|
-
|
4802
|
-
|
4803
|
-
|
4804
|
-
|
4805
|
-
|
4806
|
-
|
4807
|
-
|
4808
|
-
|
4809
|
-
|
4810
|
-
|
4811
|
-
|
4812
|
-
|
4813
|
-
|
4814
|
-
|
4815
|
-
|
4816
|
-
|
4817
|
-
|
4818
|
-
|
4250
|
+
const {
|
4251
|
+
onChange,
|
4252
|
+
onEnter,
|
4253
|
+
onResize,
|
4254
|
+
onClick,
|
4255
|
+
onFocus,
|
4256
|
+
onBlur,
|
4257
|
+
onKeyDown,
|
4258
|
+
theme,
|
4259
|
+
cleanOnEnter,
|
4260
|
+
placeholder,
|
4261
|
+
maxLength,
|
4262
|
+
keepOpened,
|
4263
|
+
inputClass,
|
4264
|
+
disableRecent,
|
4265
|
+
tabIndex,
|
4266
|
+
value,
|
4267
|
+
customEmojis,
|
4268
|
+
language,
|
4269
|
+
searchMention,
|
4270
|
+
buttonElement,
|
4271
|
+
buttonRef,
|
4272
|
+
shouldReturn,
|
4273
|
+
shouldConvertEmojiToImage,
|
4274
|
+
// style
|
4275
|
+
borderRadius,
|
4276
|
+
borderColor,
|
4277
|
+
fontSize,
|
4278
|
+
fontFamily,
|
4279
|
+
background,
|
4280
|
+
placeholderColor,
|
4281
|
+
color
|
4282
|
+
} = props;
|
4819
4283
|
|
4820
4284
|
/** @type {React.MutableRefObject<import('./text-input').Ref | null>} */
|
4821
|
-
|
4822
|
-
|
4823
|
-
addEventListener
|
4824
|
-
listeners
|
4825
|
-
|
4826
|
-
|
4827
|
-
|
4828
|
-
|
4829
|
-
|
4830
|
-
|
4831
|
-
|
4832
|
-
|
4833
|
-
|
4285
|
+
const textInputRef = React.useRef(null);
|
4286
|
+
const {
|
4287
|
+
addEventListener,
|
4288
|
+
listeners
|
4289
|
+
} = useEventListeners();
|
4290
|
+
const {
|
4291
|
+
addSanitizeFn,
|
4292
|
+
sanitize,
|
4293
|
+
sanitizedTextRef
|
4294
|
+
} = useSanitize(shouldReturn, shouldConvertEmojiToImage);
|
4295
|
+
const {
|
4296
|
+
addPolluteFn,
|
4297
|
+
pollute
|
4298
|
+
} = usePollute();
|
4299
|
+
const updateHTML = React.useCallback((nextValue = "") => {
|
4834
4300
|
if (textInputRef.current === null) return;
|
4835
4301
|
textInputRef.current.html = replaceAllTextEmojis(nextValue);
|
4836
4302
|
sanitizedTextRef.current = nextValue;
|
4837
4303
|
}, [sanitizedTextRef]);
|
4838
|
-
|
4304
|
+
const setValue = React.useCallback(
|
4839
4305
|
/**
|
4840
4306
|
*
|
4841
4307
|
* @param {string} value
|
4842
4308
|
*/
|
4843
|
-
|
4309
|
+
value => {
|
4844
4310
|
updateHTML(value);
|
4845
4311
|
}, [updateHTML]);
|
4846
|
-
|
4312
|
+
const emitChange = useEmit(textInputRef, onResize, onChange);
|
4847
4313
|
useExpose({
|
4848
|
-
ref
|
4849
|
-
setValue
|
4850
|
-
textInputRef
|
4851
|
-
emitChange
|
4852
|
-
shouldConvertEmojiToImage
|
4314
|
+
ref,
|
4315
|
+
setValue,
|
4316
|
+
textInputRef,
|
4317
|
+
emitChange,
|
4318
|
+
shouldConvertEmojiToImage
|
4853
4319
|
});
|
4854
|
-
React.useEffect(
|
4320
|
+
React.useEffect(() => {
|
4855
4321
|
if (sanitizedTextRef.current !== value) {
|
4856
4322
|
setValue(value);
|
4857
4323
|
}
|
@@ -4861,7 +4327,7 @@ function InputEmoji(props, ref) {
|
|
4861
4327
|
// updateHTML();
|
4862
4328
|
// }, [updateHTML]);
|
4863
4329
|
|
4864
|
-
React.useEffect(
|
4330
|
+
React.useEffect(() => {
|
4865
4331
|
/**
|
4866
4332
|
* Handle keydown event
|
4867
4333
|
* @param {React.KeyboardEvent} event
|
@@ -4873,7 +4339,7 @@ function InputEmoji(props, ref) {
|
|
4873
4339
|
}
|
4874
4340
|
if (event.key === "Enter" && textInputRef.current) {
|
4875
4341
|
event.preventDefault();
|
4876
|
-
|
4342
|
+
const text = sanitize(textInputRef.current.html);
|
4877
4343
|
emitChange(sanitizedTextRef.current);
|
4878
4344
|
if (typeof onEnter === "function" && listeners.enter.currentListerners.length === 0) {
|
4879
4345
|
onEnter(text);
|
@@ -4891,12 +4357,12 @@ function InputEmoji(props, ref) {
|
|
4891
4357
|
}
|
4892
4358
|
return true;
|
4893
4359
|
}
|
4894
|
-
|
4895
|
-
return
|
4360
|
+
const unsubscribe = addEventListener("keyDown", handleKeydown);
|
4361
|
+
return () => {
|
4896
4362
|
unsubscribe();
|
4897
4363
|
};
|
4898
4364
|
}, [addEventListener, cleanOnEnter, emitChange, listeners.enter.currentListerners.length, maxLength, onEnter, onKeyDown, sanitize, sanitizedTextRef, updateHTML]);
|
4899
|
-
React.useEffect(
|
4365
|
+
React.useEffect(() => {
|
4900
4366
|
/** */
|
4901
4367
|
function handleFocus() {
|
4902
4368
|
if (typeof onClick === "function") {
|
@@ -4906,20 +4372,20 @@ function InputEmoji(props, ref) {
|
|
4906
4372
|
onFocus();
|
4907
4373
|
}
|
4908
4374
|
}
|
4909
|
-
|
4910
|
-
return
|
4375
|
+
const unsubscribe = addEventListener("focus", handleFocus);
|
4376
|
+
return () => {
|
4911
4377
|
unsubscribe();
|
4912
4378
|
};
|
4913
4379
|
}, [addEventListener, onClick, onFocus]);
|
4914
|
-
React.useEffect(
|
4380
|
+
React.useEffect(() => {
|
4915
4381
|
/** */
|
4916
4382
|
function handleBlur() {
|
4917
4383
|
if (typeof onBlur === "function") {
|
4918
4384
|
onBlur();
|
4919
4385
|
}
|
4920
4386
|
}
|
4921
|
-
|
4922
|
-
return
|
4387
|
+
const unsubscribe = addEventListener("blur", handleBlur);
|
4388
|
+
return () => {
|
4923
4389
|
unsubscribe();
|
4924
4390
|
};
|
4925
4391
|
}, [addEventListener, onBlur]);
|
@@ -4954,7 +4420,7 @@ function InputEmoji(props, ref) {
|
|
4954
4420
|
*/
|
4955
4421
|
function handlePaste(event) {
|
4956
4422
|
event.preventDefault();
|
4957
|
-
|
4423
|
+
let content;
|
4958
4424
|
if (event.clipboardData) {
|
4959
4425
|
content = event.clipboardData.getData("text/plain");
|
4960
4426
|
content = pollute(content);
|
@@ -4982,13 +4448,13 @@ function InputEmoji(props, ref) {
|
|
4982
4448
|
onEnter: listeners.enter.publish,
|
4983
4449
|
placeholder: placeholder,
|
4984
4450
|
style: {
|
4985
|
-
borderRadius
|
4986
|
-
borderColor
|
4987
|
-
fontSize
|
4988
|
-
fontFamily
|
4989
|
-
background
|
4990
|
-
placeholderColor
|
4991
|
-
color
|
4451
|
+
borderRadius,
|
4452
|
+
borderColor,
|
4453
|
+
fontSize,
|
4454
|
+
fontFamily,
|
4455
|
+
background,
|
4456
|
+
placeholderColor,
|
4457
|
+
color
|
4992
4458
|
},
|
4993
4459
|
tabIndex: tabIndex,
|
4994
4460
|
className: inputClass,
|
@@ -5006,7 +4472,7 @@ function InputEmoji(props, ref) {
|
|
5006
4472
|
language: language
|
5007
4473
|
}));
|
5008
4474
|
}
|
5009
|
-
|
4475
|
+
const InputEmojiWithRef = /*#__PURE__*/React.forwardRef(InputEmoji);
|
5010
4476
|
InputEmojiWithRef.defaultProps = {
|
5011
4477
|
theme: /** @type {const} */"auto",
|
5012
4478
|
height: 30,
|