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