react-input-emoji 5.7.1 → 5.8.0

Sign up to get free protection for your applications and to get access to all the features.
package/README.md CHANGED
@@ -80,6 +80,7 @@ export default function Example() {
80
80
  | `onResize` | function | - | A callback function that is invoked when the width or height of the input element changes. It receives the current size value as its argument. |
81
81
  | `placeholder` | string | "Type a message" | Specifies the placeholder text to be displayed when the input is empty. |
82
82
  | `placeholderColor` | string | "#C4C4C4" | Specifies the color of the placeholder text. Accepts any valid CSS color value. |
83
+ | `shouldConvertEmojiToImage` | boolean | false | When set to true, emojis in the input value will be converted to images. |
83
84
  | `shouldReturn` | boolean | - | When set to true, allows the user to create a new line using the `Shift + Enter` or `Ctrl + Enter` keyboard shortcuts. |
84
85
  | `theme` | string | - | Specifies the theme for the emoji picker popup. Available values: "light", "dark", "auto". |
85
86
  | `value` | string | "" | The current value of the input element. |
package/dist/index.es.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, useMemo, useState, memo } from 'react';
2
+ import { renderToString } from 'react-dom/server';
2
3
  import ReactDOM from 'react-dom';
3
4
 
4
5
  function styleInject(css, ref) {
@@ -780,7 +781,213 @@ function addLineBreak() {
780
781
  }
781
782
  }
782
783
 
784
+ // Inspiration: https://github.com/facebook/react/issues/3386
785
+
786
+ function replace(string, regexpOrSubstr, newValueOrFn, globalOffset) {
787
+ if (typeof string !== 'string') throw new Error('First param must be a string');
788
+ if (typeof regexpOrSubstr !== 'string' && !(regexpOrSubstr instanceof RegExp)) throw new Error('Second param must be a string pattern or a regular expression');
789
+ var fn = typeof regexpOrSubstr === 'string' ? replaceUsingString : replaceUsingRegexp;
790
+ return fn(string, regexpOrSubstr, newValueOrFn, globalOffset);
791
+ }
792
+ function replaceUsingString(string, patternString, newValueOrFn, globalOffset) {
793
+ var index = string.indexOf(patternString);
794
+ if (index >= 0) {
795
+ var arr = [];
796
+ var endIndex = index + patternString.length;
797
+ if (index > 0) {
798
+ arr.push(string.substring(0, index));
799
+ }
800
+ arr.push(typeof newValueOrFn === 'function' ? newValueOrFn(string.substring(index, endIndex), index + globalOffset, string) : newValueOrFn);
801
+ if (endIndex < string.length) {
802
+ arr.push(string.substring(endIndex));
803
+ }
804
+ return arr;
805
+ } else {
806
+ return [string];
807
+ }
808
+ }
809
+ function replaceUsingRegexp(string, regexp, newValueOrFn, globalOffset) {
810
+ var output = [];
811
+ var replacerIsFn = typeof newValueOrFn === 'function';
812
+ var storedLastIndex = regexp.lastIndex;
813
+ regexp.lastIndex = 0;
814
+ var result;
815
+ var lastIndex = 0;
816
+ while (result = regexp.exec(string)) {
817
+ var index = result.index;
818
+ if (result[0] === '') {
819
+ // When the regexp is an empty string
820
+ // we still want to advance our cursor to the next item.
821
+ // This is the behavior of String.replace.
822
+ regexp.lastIndex++;
823
+ }
824
+ if (index !== lastIndex) {
825
+ output.push(string.substring(lastIndex, index));
826
+ }
827
+ var match = result[0];
828
+ lastIndex = index + match.length;
829
+ var out = replacerIsFn ? newValueOrFn.apply(this, result.concat(index + globalOffset, result.input)) : newValueOrFn;
830
+ output.push(out);
831
+ if (!regexp.global) {
832
+ break;
833
+ }
834
+ }
835
+ if (lastIndex < string.length) {
836
+ output.push(string.substring(lastIndex));
837
+ }
838
+ regexp.lastIndex = storedLastIndex;
839
+ return output;
840
+ }
841
+ var stringReplaceToArray = function stringReplaceToArray(stringOrArray, regexpOrSubstr, newSubStrOrFn) {
842
+ if (typeof stringOrArray === 'string') {
843
+ return replace(stringOrArray, regexpOrSubstr, newSubStrOrFn, 0);
844
+ } else if (!Array.isArray(stringOrArray) || !stringOrArray[0]) {
845
+ throw new TypeError('First argument must be an array or non-empty string');
846
+ } else {
847
+ var len = stringOrArray.length;
848
+ var output = [];
849
+ var globalOffset = 0;
850
+ for (var i = 0; i < len; ++i) {
851
+ var arrayItem = stringOrArray[i];
852
+ if (typeof arrayItem === 'string') {
853
+ output.push.apply(output, replace(arrayItem, regexpOrSubstr, newSubStrOrFn, globalOffset));
854
+ globalOffset += arrayItem.length;
855
+ } else {
856
+ output.push(arrayItem);
857
+ }
858
+ }
859
+ return output;
860
+ }
861
+ };
862
+
863
+ // This is based off of https://github.com/twitter/twemoji/blob/gh-pages/2/twemoji.js
864
+ //
865
+ // Ideally we'd use twemoji instead of replicating its logic.
866
+ // The reason we can't is that we need to run our own replace.
867
+ //
868
+ // We could use it for most things (by essentially running twemoji.parse for each
869
+ // regex match, and reading the code from the callback), but the one thing we'd always need
870
+ // to copy and paste into this file is the regex since we need it to run the replace.
871
+ //
872
+ // Another option is to fork twemoji and expose a method in it that could help us, then
873
+ // ask them to pull it in.
874
+ //
875
+
876
+ // RegExp based on emoji's official Unicode standards
877
+ // http://www.unicode.org/Public/UNIDATA/EmojiSources.txt
878
+ var re = /(?:\ud83d\udc68\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udffc\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udffd\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udffe\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffc\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffc\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffd\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffd\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffe\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffe\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83e\uddd1\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83e\uddd1\ud83c[\udffc-\udfff]|\ud83e\uddd1\ud83c\udffc\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83e\uddd1\ud83c[\udffb\udffd-\udfff]|\ud83e\uddd1\ud83c\udffd\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83e\uddd1\ud83c[\udffb\udffc\udffe\udfff]|\ud83e\uddd1\ud83c\udffe\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83e\uddd1\ud83c[\udffb-\udffd\udfff]|\ud83e\uddd1\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83e\uddd1\ud83c[\udffb-\udffe]|\ud83d\udc68\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udffb\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffc-\udfff]|\ud83d\udc68\ud83c\udffc\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udffc\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb\udffd-\udfff]|\ud83d\udc68\ud83c\udffd\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udffd\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb\udffc\udffe\udfff]|\ud83d\udc68\ud83c\udffe\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udffe\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb-\udffd\udfff]|\ud83d\udc68\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udfff\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb-\udffe]|\ud83d\udc69\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffb\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffc-\udfff]|\ud83d\udc69\ud83c\udffb\u200d\ud83e\udd1d\u200d\ud83d\udc69\ud83c[\udffc-\udfff]|\ud83d\udc69\ud83c\udffc\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffc\u200d\u2764\ufe0f\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffc\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb\udffd-\udfff]|\ud83d\udc69\ud83c\udffc\u200d\ud83e\udd1d\u200d\ud83d\udc69\ud83c[\udffb\udffd-\udfff]|\ud83d\udc69\ud83c\udffd\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffd\u200d\u2764\ufe0f\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffd\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb\udffc\udffe\udfff]|\ud83d\udc69\ud83c\udffd\u200d\ud83e\udd1d\u200d\ud83d\udc69\ud83c[\udffb\udffc\udffe\udfff]|\ud83d\udc69\ud83c\udffe\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffe\u200d\u2764\ufe0f\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffe\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb-\udffd\udfff]|\ud83d\udc69\ud83c\udffe\u200d\ud83e\udd1d\u200d\ud83d\udc69\ud83c[\udffb-\udffd\udfff]|\ud83d\udc69\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udfff\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb-\udffe]|\ud83d\udc69\ud83c\udfff\u200d\ud83e\udd1d\u200d\ud83d\udc69\ud83c[\udffb-\udffe]|\ud83e\uddd1\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83e\uddd1\ud83c[\udffc-\udfff]|\ud83e\uddd1\ud83c\udffb\u200d\ud83e\udd1d\u200d\ud83e\uddd1\ud83c[\udffb-\udfff]|\ud83e\uddd1\ud83c\udffc\u200d\u2764\ufe0f\u200d\ud83e\uddd1\ud83c[\udffb\udffd-\udfff]|\ud83e\uddd1\ud83c\udffc\u200d\ud83e\udd1d\u200d\ud83e\uddd1\ud83c[\udffb-\udfff]|\ud83e\uddd1\ud83c\udffd\u200d\u2764\ufe0f\u200d\ud83e\uddd1\ud83c[\udffb\udffc\udffe\udfff]|\ud83e\uddd1\ud83c\udffd\u200d\ud83e\udd1d\u200d\ud83e\uddd1\ud83c[\udffb-\udfff]|\ud83e\uddd1\ud83c\udffe\u200d\u2764\ufe0f\u200d\ud83e\uddd1\ud83c[\udffb-\udffd\udfff]|\ud83e\uddd1\ud83c\udffe\u200d\ud83e\udd1d\u200d\ud83e\uddd1\ud83c[\udffb-\udfff]|\ud83e\uddd1\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83e\uddd1\ud83c[\udffb-\udffe]|\ud83e\uddd1\ud83c\udfff\u200d\ud83e\udd1d\u200d\ud83e\uddd1\ud83c[\udffb-\udfff]|\ud83d\udc68\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68|\ud83d\udc69\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d[\udc68\udc69]|\ud83e\udef1\ud83c\udffb\u200d\ud83e\udef2\ud83c[\udffc-\udfff]|\ud83e\udef1\ud83c\udffc\u200d\ud83e\udef2\ud83c[\udffb\udffd-\udfff]|\ud83e\udef1\ud83c\udffd\u200d\ud83e\udef2\ud83c[\udffb\udffc\udffe\udfff]|\ud83e\udef1\ud83c\udffe\u200d\ud83e\udef2\ud83c[\udffb-\udffd\udfff]|\ud83e\udef1\ud83c\udfff\u200d\ud83e\udef2\ud83c[\udffb-\udffe]|\ud83d\udc68\u200d\u2764\ufe0f\u200d\ud83d\udc68|\ud83d\udc69\u200d\u2764\ufe0f\u200d\ud83d[\udc68\udc69]|\ud83e\uddd1\u200d\ud83e\udd1d\u200d\ud83e\uddd1|\ud83d\udc6b\ud83c[\udffb-\udfff]|\ud83d\udc6c\ud83c[\udffb-\udfff]|\ud83d\udc6d\ud83c[\udffb-\udfff]|\ud83d\udc8f\ud83c[\udffb-\udfff]|\ud83d\udc91\ud83c[\udffb-\udfff]|\ud83e\udd1d\ud83c[\udffb-\udfff]|\ud83d[\udc6b-\udc6d\udc8f\udc91]|\ud83e\udd1d)|(?:\ud83d[\udc68\udc69]|\ud83e\uddd1)(?:\ud83c[\udffb-\udfff])?\u200d(?:\u2695\ufe0f|\u2696\ufe0f|\u2708\ufe0f|\ud83c[\udf3e\udf73\udf7c\udf84\udf93\udfa4\udfa8\udfeb\udfed]|\ud83d[\udcbb\udcbc\udd27\udd2c\ude80\ude92]|\ud83e[\uddaf-\uddb3\uddbc\uddbd])|(?:\ud83c[\udfcb\udfcc]|\ud83d[\udd74\udd75]|\u26f9)((?:\ud83c[\udffb-\udfff]|\ufe0f)\u200d[\u2640\u2642]\ufe0f)|(?:\ud83c[\udfc3\udfc4\udfca]|\ud83d[\udc6e\udc70\udc71\udc73\udc77\udc81\udc82\udc86\udc87\ude45-\ude47\ude4b\ude4d\ude4e\udea3\udeb4-\udeb6]|\ud83e[\udd26\udd35\udd37-\udd39\udd3d\udd3e\uddb8\uddb9\uddcd-\uddcf\uddd4\uddd6-\udddd])(?:\ud83c[\udffb-\udfff])?\u200d[\u2640\u2642]\ufe0f|(?:\ud83d\udc68\u200d\ud83d\udc68\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc68\u200d\ud83d\udc68\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc69\u200d\ud83d\udc69\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc69\u200d\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc68\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc68\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc68\u200d\ud83d\udc68\u200d\ud83d[\udc66\udc67]|\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d[\udc66\udc67]|\ud83d\udc69\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc69\u200d\ud83d\udc69\u200d\ud83d[\udc66\udc67]|\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f|\ud83c\udff3\ufe0f\u200d\ud83c\udf08|\ud83d\ude36\u200d\ud83c\udf2b\ufe0f|\u2764\ufe0f\u200d\ud83d\udd25|\u2764\ufe0f\u200d\ud83e\ude79|\ud83c\udff4\u200d\u2620\ufe0f|\ud83d\udc15\u200d\ud83e\uddba|\ud83d\udc3b\u200d\u2744\ufe0f|\ud83d\udc41\u200d\ud83d\udde8|\ud83d\udc68\u200d\ud83d[\udc66\udc67]|\ud83d\udc69\u200d\ud83d[\udc66\udc67]|\ud83d\udc6f\u200d\u2640\ufe0f|\ud83d\udc6f\u200d\u2642\ufe0f|\ud83d\ude2e\u200d\ud83d\udca8|\ud83d\ude35\u200d\ud83d\udcab|\ud83e\udd3c\u200d\u2640\ufe0f|\ud83e\udd3c\u200d\u2642\ufe0f|\ud83e\uddde\u200d\u2640\ufe0f|\ud83e\uddde\u200d\u2642\ufe0f|\ud83e\udddf\u200d\u2640\ufe0f|\ud83e\udddf\u200d\u2642\ufe0f|\ud83d\udc08\u200d\u2b1b)|[#*0-9]\ufe0f?\u20e3|(?:[©®\u2122\u265f]\ufe0f)|(?:\ud83c[\udc04\udd70\udd71\udd7e\udd7f\ude02\ude1a\ude2f\ude37\udf21\udf24-\udf2c\udf36\udf7d\udf96\udf97\udf99-\udf9b\udf9e\udf9f\udfcd\udfce\udfd4-\udfdf\udff3\udff5\udff7]|\ud83d[\udc3f\udc41\udcfd\udd49\udd4a\udd6f\udd70\udd73\udd76-\udd79\udd87\udd8a-\udd8d\udda5\udda8\uddb1\uddb2\uddbc\uddc2-\uddc4\uddd1-\uddd3\udddc-\uddde\udde1\udde3\udde8\uddef\uddf3\uddfa\udecb\udecd-\udecf\udee0-\udee5\udee9\udef0\udef3]|[\u203c\u2049\u2139\u2194-\u2199\u21a9\u21aa\u231a\u231b\u2328\u23cf\u23ed-\u23ef\u23f1\u23f2\u23f8-\u23fa\u24c2\u25aa\u25ab\u25b6\u25c0\u25fb-\u25fe\u2600-\u2604\u260e\u2611\u2614\u2615\u2618\u2620\u2622\u2623\u2626\u262a\u262e\u262f\u2638-\u263a\u2640\u2642\u2648-\u2653\u2660\u2663\u2665\u2666\u2668\u267b\u267f\u2692-\u2697\u2699\u269b\u269c\u26a0\u26a1\u26a7\u26aa\u26ab\u26b0\u26b1\u26bd\u26be\u26c4\u26c5\u26c8\u26cf\u26d1\u26d3\u26d4\u26e9\u26ea\u26f0-\u26f5\u26f8\u26fa\u26fd\u2702\u2708\u2709\u270f\u2712\u2714\u2716\u271d\u2721\u2733\u2734\u2744\u2747\u2757\u2763\u2764\u27a1\u2934\u2935\u2b05-\u2b07\u2b1b\u2b1c\u2b50\u2b55\u3030\u303d\u3297\u3299])(?:\ufe0f|(?!\ufe0e))|(?:(?:\ud83c[\udfcb\udfcc]|\ud83d[\udd74\udd75\udd90]|[\u261d\u26f7\u26f9\u270c\u270d])(?:\ufe0f|(?!\ufe0e))|(?:\ud83c[\udf85\udfc2-\udfc4\udfc7\udfca]|\ud83d[\udc42\udc43\udc46-\udc50\udc66-\udc69\udc6e\udc70-\udc78\udc7c\udc81-\udc83\udc85-\udc87\udcaa\udd7a\udd95\udd96\ude45-\ude47\ude4b-\ude4f\udea3\udeb4-\udeb6\udec0\udecc]|\ud83e[\udd0c\udd0f\udd18-\udd1c\udd1e\udd1f\udd26\udd30-\udd39\udd3d\udd3e\udd77\uddb5\uddb6\uddb8\uddb9\uddbb\uddcd-\uddcf\uddd1-\udddd\udec3-\udec5\udef0-\udef6]|[\u270a\u270b]))(?:\ud83c[\udffb-\udfff])?|(?:\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f|\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc73\udb40\udc63\udb40\udc74\udb40\udc7f|\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc77\udb40\udc6c\udb40\udc73\udb40\udc7f|\ud83c\udde6\ud83c[\udde8-\uddec\uddee\uddf1\uddf2\uddf4\uddf6-\uddfa\uddfc\uddfd\uddff]|\ud83c\udde7\ud83c[\udde6\udde7\udde9-\uddef\uddf1-\uddf4\uddf6-\uddf9\uddfb\uddfc\uddfe\uddff]|\ud83c\udde8\ud83c[\udde6\udde8\udde9\uddeb-\uddee\uddf0-\uddf5\uddf7\uddfa-\uddff]|\ud83c\udde9\ud83c[\uddea\uddec\uddef\uddf0\uddf2\uddf4\uddff]|\ud83c\uddea\ud83c[\udde6\udde8\uddea\uddec\udded\uddf7-\uddfa]|\ud83c\uddeb\ud83c[\uddee-\uddf0\uddf2\uddf4\uddf7]|\ud83c\uddec\ud83c[\udde6\udde7\udde9-\uddee\uddf1-\uddf3\uddf5-\uddfa\uddfc\uddfe]|\ud83c\udded\ud83c[\uddf0\uddf2\uddf3\uddf7\uddf9\uddfa]|\ud83c\uddee\ud83c[\udde8-\uddea\uddf1-\uddf4\uddf6-\uddf9]|\ud83c\uddef\ud83c[\uddea\uddf2\uddf4\uddf5]|\ud83c\uddf0\ud83c[\uddea\uddec-\uddee\uddf2\uddf3\uddf5\uddf7\uddfc\uddfe\uddff]|\ud83c\uddf1\ud83c[\udde6-\udde8\uddee\uddf0\uddf7-\uddfb\uddfe]|\ud83c\uddf2\ud83c[\udde6\udde8-\udded\uddf0-\uddff]|\ud83c\uddf3\ud83c[\udde6\udde8\uddea-\uddec\uddee\uddf1\uddf4\uddf5\uddf7\uddfa\uddff]|\ud83c\uddf4\ud83c\uddf2|\ud83c\uddf5\ud83c[\udde6\uddea-\udded\uddf0-\uddf3\uddf7-\uddf9\uddfc\uddfe]|\ud83c\uddf6\ud83c\udde6|\ud83c\uddf7\ud83c[\uddea\uddf4\uddf8\uddfa\uddfc]|\ud83c\uddf8\ud83c[\udde6-\uddea\uddec-\uddf4\uddf7-\uddf9\uddfb\uddfd-\uddff]|\ud83c\uddf9\ud83c[\udde6\udde8\udde9\uddeb-\udded\uddef-\uddf4\uddf7\uddf9\uddfb\uddfc\uddff]|\ud83c\uddfa\ud83c[\udde6\uddec\uddf2\uddf3\uddf8\uddfe\uddff]|\ud83c\uddfb\ud83c[\udde6\udde8\uddea\uddec\uddee\uddf3\uddfa]|\ud83c\uddfc\ud83c[\uddeb\uddf8]|\ud83c\uddfd\ud83c\uddf0|\ud83c\uddfe\ud83c[\uddea\uddf9]|\ud83c\uddff\ud83c[\udde6\uddf2\uddfc]|\ud83c[\udccf\udd8e\udd91-\udd9a\udde6-\uddff\ude01\ude32-\ude36\ude38-\ude3a\ude50\ude51\udf00-\udf20\udf2d-\udf35\udf37-\udf7c\udf7e-\udf84\udf86-\udf93\udfa0-\udfc1\udfc5\udfc6\udfc8\udfc9\udfcf-\udfd3\udfe0-\udff0\udff4\udff8-\udfff]|\ud83d[\udc00-\udc3e\udc40\udc44\udc45\udc51-\udc65\udc6a\udc6f\udc79-\udc7b\udc7d-\udc80\udc84\udc88-\udc8e\udc90\udc92-\udca9\udcab-\udcfc\udcff-\udd3d\udd4b-\udd4e\udd50-\udd67\udda4\uddfb-\ude44\ude48-\ude4a\ude80-\udea2\udea4-\udeb3\udeb7-\udebf\udec1-\udec5\uded0-\uded2\uded5-\uded7\udedd-\udedf\udeeb\udeec\udef4-\udefc\udfe0-\udfeb\udff0]|\ud83e[\udd0d\udd0e\udd10-\udd17\udd20-\udd25\udd27-\udd2f\udd3a\udd3c\udd3f-\udd45\udd47-\udd76\udd78-\uddb4\uddb7\uddba\uddbc-\uddcc\uddd0\uddde-\uddff\ude70-\ude74\ude78-\ude7c\ude80-\ude86\ude90-\udeac\udeb0-\udeba\udec0-\udec2\uded0-\uded9\udee0-\udee7]|[\u23e9-\u23ec\u23f0\u23f3\u267e\u26ce\u2705\u2728\u274c\u274e\u2753-\u2755\u2795-\u2797\u27b0\u27bf\ue50a])|\ufe0f/g;
879
+ function toCodePoint(unicodeSurrogates, sep) {
880
+ var r = [],
881
+ c = 0,
882
+ p = 0,
883
+ i = 0;
884
+ while (i < unicodeSurrogates.length) {
885
+ c = unicodeSurrogates.charCodeAt(i++);
886
+ if (p) {
887
+ r.push((0x10000 + (p - 0xD800 << 10) + (c - 0xDC00)).toString(16));
888
+ p = 0;
889
+ } else if (0xD800 <= c && c <= 0xDBFF) {
890
+ p = c;
891
+ } else {
892
+ r.push(c.toString(16));
893
+ }
894
+ }
895
+ return r.join(sep || '-');
896
+ }
897
+
898
+ // avoid runtime RegExp creation for not so smart,
899
+ // not JIT based, and old browsers / engines
900
+ var UFE0Fg = /\uFE0F/g;
901
+
902
+ // avoid using a string literal like '\u200D' here because minifiers expand it inline
903
+ var U200D = String.fromCharCode(0x200D);
904
+
905
+ /**
906
+ * Used to both remove the possible variant
907
+ * and to convert utf16 into code points.
908
+ * If there is a zero-width-joiner (U+200D), leave the variants in.
909
+ * @param string the raw text of the emoji match
910
+ */
911
+ function grabTheRightIcon(rawText) {
912
+ // if variant is present as \uFE0F
913
+ return toCodePoint(rawText.indexOf(U200D) < 0 ? rawText.replace(UFE0Fg, '') : rawText);
914
+ }
915
+ var replaceEmoji$1 = function replaceEmoji(string, render) {
916
+ // Note: the latest regex added an empty matching group, so we ignore it.
917
+ return stringReplaceToArray(string, re, function emojiReplacer(match, _, offset) {
918
+ var icon = grabTheRightIcon(match);
919
+ return render(icon, match, offset);
920
+ });
921
+ };
922
+
923
+ var createElement = React.createElement;
924
+ var pageProtocol = typeof location === 'undefined' ? '' : location.protocol === 'https:' ? 'https:' : 'http:';
925
+ var emojiStyle = {
926
+ height: '1em',
927
+ width: '1em',
928
+ margin: '0 .05em 0 .1em',
929
+ verticalAlign: '-0.1em'
930
+ };
931
+
932
+ // Accept protocol with or without a colon
933
+ function normalizeProtocol(protocol) {
934
+ if (protocol && protocol.length > 0 && protocol.charAt(protocol.length - 1) !== ':') {
935
+ return protocol + ':';
936
+ }
937
+ return protocol;
938
+ }
939
+ var makeTwemojiRenderer$1 = function makeTwemojiRenderer(options) {
940
+ options = merge({
941
+ protocol: pageProtocol,
942
+ baseUrl: '//cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/',
943
+ size: '72x72',
944
+ ext: '.png',
945
+ props: null
946
+ }, options);
947
+ return function renderTwemoji(icon, match, offset) {
948
+ var src = '';
949
+ if (options.baseUrl.indexOf('http') !== 0) {
950
+ src += normalizeProtocol(options.protocol);
951
+ }
952
+ src += options.baseUrl + options.size + '/' + icon + options.ext;
953
+ return createElement('img', merge({
954
+ key: offset,
955
+ alt: match,
956
+ draggable: false,
957
+ src: src,
958
+ style: emojiStyle
959
+ }, options.props));
960
+ };
961
+ };
962
+ function merge() {
963
+ var out = {},
964
+ len = arguments.length;
965
+ for (var i = 0; i < len; ++i) {
966
+ var source = arguments[i];
967
+ if (source) {
968
+ for (var key in source) {
969
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
970
+ out[key] = source[key];
971
+ }
972
+ }
973
+ }
974
+ }
975
+ return out;
976
+ }
977
+
978
+ var replaceEmoji = replaceEmoji$1;
979
+
980
+ var makeTwemojiRenderer = makeTwemojiRenderer$1;
981
+
982
+ var reactEasyEmoji = function reactEasyEmoji(element, optionsOrFn) {
983
+ var render = typeof optionsOrFn === 'function' ? optionsOrFn : makeTwemojiRenderer(optionsOrFn);
984
+ return replaceEmoji(element, render);
985
+ };
986
+
987
+ var emoji = reactEasyEmoji;
988
+
783
989
  // @ts-check
990
+ var 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);
784
991
 
785
992
  /**
786
993
  * @typedef {import('../types/types').SanitizeFn} SanitizeFn
@@ -789,8 +996,9 @@ function addLineBreak() {
789
996
  // eslint-disable-next-line valid-jsdoc
790
997
  /**
791
998
  * @param {boolean} shouldReturn
999
+ * @param {boolean} shouldConvertEmojiToImage
792
1000
  */
793
- function useSanitize(shouldReturn) {
1001
+ function useSanitize(shouldReturn, shouldConvertEmojiToImage) {
794
1002
  /** @type {React.MutableRefObject<SanitizeFn[]>} */
795
1003
  var sanitizeFnsRef = useRef([]);
796
1004
  var sanitizedTextRef = useRef("");
@@ -806,9 +1014,12 @@ function useSanitize(shouldReturn) {
806
1014
  return fn(acc);
807
1015
  }, html);
808
1016
  result = replaceAllHtmlToString(result, shouldReturn);
1017
+ if (shouldConvertEmojiToImage) {
1018
+ result = convertEmojiToImage(result);
1019
+ }
809
1020
  sanitizedTextRef.current = result;
810
1021
  return result;
811
- }, []);
1022
+ }, [shouldReturn, shouldConvertEmojiToImage]);
812
1023
  return {
813
1024
  addSanitizeFn: addSanitizeFn,
814
1025
  sanitize: sanitize,
@@ -837,6 +1048,28 @@ function replaceAllHtmlToString(html, shouldReturn) {
837
1048
  return text;
838
1049
  }
839
1050
 
1051
+ /**
1052
+ *
1053
+ * @param {string} text
1054
+ * @return {string}
1055
+ */
1056
+ function convertEmojiToImage(text) {
1057
+ text = handleEmoji(text);
1058
+ text = renderToString(emoji(text));
1059
+ text = text.replace(new RegExp('&lt;span class=&quot;message-emoji&quot;&gt;', 'g'), '<span class="message-emoji">');
1060
+ text = text.replace(new RegExp('&lt;/span&gt;', 'g'), '</span>');
1061
+ return text;
1062
+ }
1063
+
1064
+ /**
1065
+ *
1066
+ * @param {string} text
1067
+ * @return {string}
1068
+ */
1069
+ function handleEmoji(text) {
1070
+ return text.replace(EMOJI_REGEX, '<span class="message-emoji">$&</span>');
1071
+ }
1072
+
840
1073
  // @ts-check
841
1074
 
842
1075
  /**
@@ -845,6 +1078,7 @@ function replaceAllHtmlToString(html, shouldReturn) {
845
1078
  * @property {React.MutableRefObject<import('../text-input').Ref | null>} textInputRef
846
1079
  * @property {(value: string) => void} setValue
847
1080
  * @property {() => void} emitChange
1081
+ * @property {boolean=} shouldConvertEmojiToImage
848
1082
  */
849
1083
 
850
1084
  /**
@@ -855,8 +1089,9 @@ function useExpose(_ref) {
855
1089
  var ref = _ref.ref,
856
1090
  textInputRef = _ref.textInputRef,
857
1091
  setValue = _ref.setValue,
858
- emitChange = _ref.emitChange;
859
- var _useSanitize = useSanitize(false),
1092
+ emitChange = _ref.emitChange,
1093
+ shouldConvertEmojiToImage = _ref.shouldConvertEmojiToImage;
1094
+ var _useSanitize = useSanitize(false, shouldConvertEmojiToImage),
860
1095
  sanitize = _useSanitize.sanitize,
861
1096
  sanitizedTextRef = _useSanitize.sanitizedTextRef;
862
1097
  useImperativeHandle(ref, function () {
@@ -4516,7 +4751,7 @@ function usePollute() {
4516
4751
  * @property {() => void=} onClick
4517
4752
  * @property {() => void=} onFocus
4518
4753
  * @property {() => void=} onBlur
4519
- * @property {boolean=} shouldReturn
4754
+ * @property {boolean} shouldReturn
4520
4755
  * @property {number=} maxLength
4521
4756
  * @property {boolean=} keepOpened
4522
4757
  * @property {(event: KeyboardEvent) => void=} onKeyDown
@@ -4534,6 +4769,7 @@ function usePollute() {
4534
4769
  * @property {(text: string) => Promise<MetionUser[]>=} searchMention
4535
4770
  * @property {HTMLDivElement=} buttonElement
4536
4771
  * @property {React.MutableRefObject=} buttonRef
4772
+ * @property {boolean} shouldConvertEmojiToImage
4537
4773
  */
4538
4774
 
4539
4775
  /**
@@ -4545,7 +4781,6 @@ function usePollute() {
4545
4781
  function InputEmoji(props, ref) {
4546
4782
  var onChange = props.onChange,
4547
4783
  onEnter = props.onEnter,
4548
- shouldReturn = props.shouldReturn,
4549
4784
  onResize = props.onResize,
4550
4785
  onClick = props.onClick,
4551
4786
  onFocus = props.onFocus,
@@ -4565,6 +4800,8 @@ function InputEmoji(props, ref) {
4565
4800
  searchMention = props.searchMention,
4566
4801
  buttonElement = props.buttonElement,
4567
4802
  buttonRef = props.buttonRef,
4803
+ shouldReturn = props.shouldReturn,
4804
+ shouldConvertEmojiToImage = props.shouldConvertEmojiToImage,
4568
4805
  borderRadius = props.borderRadius,
4569
4806
  borderColor = props.borderColor,
4570
4807
  fontSize = props.fontSize,
@@ -4578,7 +4815,7 @@ function InputEmoji(props, ref) {
4578
4815
  var _useEventListeners = useEventListeners(),
4579
4816
  addEventListener = _useEventListeners.addEventListener,
4580
4817
  listeners = _useEventListeners.listeners;
4581
- var _useSanitize = useSanitize(props.shouldReturn),
4818
+ var _useSanitize = useSanitize(shouldReturn, shouldConvertEmojiToImage),
4582
4819
  addSanitizeFn = _useSanitize.addSanitizeFn,
4583
4820
  sanitize = _useSanitize.sanitize,
4584
4821
  sanitizedTextRef = _useSanitize.sanitizedTextRef;
@@ -4604,7 +4841,8 @@ function InputEmoji(props, ref) {
4604
4841
  ref: ref,
4605
4842
  setValue: setValue,
4606
4843
  textInputRef: textInputRef,
4607
- emitChange: emitChange
4844
+ emitChange: emitChange,
4845
+ shouldConvertEmojiToImage: shouldConvertEmojiToImage
4608
4846
  });
4609
4847
  useEffect(function () {
4610
4848
  if (sanitizedTextRef.current !== value) {
@@ -4774,6 +5012,7 @@ InputEmojiWithRef.defaultProps = {
4774
5012
  background: "white",
4775
5013
  tabIndex: 0,
4776
5014
  shouldReturn: false,
5015
+ shouldConvertEmojiToImage: false,
4777
5016
  customEmojis: [],
4778
5017
  language: undefined
4779
5018
  };