react-input-emoji 5.7.0 → 5.8.0

package/README.md

@@ -66,6 +66,7 @@ export default function Example() {
 | `buttonElement`    | HTMLElement              | -                | Allows you to provide a custom HTMLElement that, when clicked, triggers the emoji picker. If this prop is provided, the default emoji picker button is removed. |
 | `buttonRef`        | React.MutableRefObject   | -                | Accepts a React mutable ref object that, when referenced, triggers the emoji picker. If this prop is provided, the default emoji picker button is removed. |
 | `cleanOnEnter`     | boolean                  | false            | When set to true, the input value will be cleared after the user presses the Enter key.                                  |
+| `color`            | string                   | "black"          | Specifies the color of the input text. Accepts any valid CSS color value.                                                |
 | `fontSize`         | number                   | 15               | Controls the font size (in pixels) of the placeholder text and input value.                                              |
 | `fontFamily`       | string                   | "sans-serif"     | Specifies the font family for the placeholder text and input value. Accepts any valid CSS font-family value.             |
 | `height`           | number                   | 40               | Sets the total height (in pixels) of the area in which the input element is rendered.                                    |
@@ -79,6 +80,7 @@ export default function Example() {
 | `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. |
 | `placeholder`      | string                   | "Type a message" | Specifies the placeholder text to be displayed when the input is empty.                                                  |
 | `placeholderColor` | string                   | "#C4C4C4"        | Specifies the color of the placeholder text. Accepts any valid CSS color value.                                          |
+| `shouldConvertEmojiToImage` | boolean        | false            | When set to true, emojis in the input value will be converted to images.                                                  |
 | `shouldReturn`     | boolean                  | -                | When set to true, allows the user to create a new line using the `Shift + Enter` or `Ctrl + Enter` keyboard shortcuts.   |
 | `theme`            | string                   | -                | Specifies the theme for the emoji picker popup. Available values: "light", "dark", "auto".                               |
 | `value`            | string                   | ""               | The current value of the input element.                                                                                  |

package/dist/index.es.js

@@ -1,4 +1,5 @@
 import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, useMemo, useState, memo } from 'react';
+import { renderToString } from 'react-dom/server';
 import ReactDOM from 'react-dom';
 
 function styleInject(css, ref) {
@@ -780,7 +781,213 @@ function addLineBreak() {
   }
 }
 
+// Inspiration: https://github.com/facebook/react/issues/3386
+
+function replace(string, regexpOrSubstr, newValueOrFn, globalOffset) {
+  if (typeof string !== 'string') throw new Error('First param must be a string');
+  if (typeof regexpOrSubstr !== 'string' && !(regexpOrSubstr instanceof RegExp)) throw new Error('Second param must be a string pattern or a regular expression');
+  var fn = typeof regexpOrSubstr === 'string' ? replaceUsingString : replaceUsingRegexp;
+  return fn(string, regexpOrSubstr, newValueOrFn, globalOffset);
+}
+function replaceUsingString(string, patternString, newValueOrFn, globalOffset) {
+  var index = string.indexOf(patternString);
+  if (index >= 0) {
+    var arr = [];
+    var endIndex = index + patternString.length;
+    if (index > 0) {
+      arr.push(string.substring(0, index));
+    }
+    arr.push(typeof newValueOrFn === 'function' ? newValueOrFn(string.substring(index, endIndex), index + globalOffset, string) : newValueOrFn);
+    if (endIndex < string.length) {
+      arr.push(string.substring(endIndex));
+    }
+    return arr;
+  } else {
+    return [string];
+  }
+}
+function replaceUsingRegexp(string, regexp, newValueOrFn, globalOffset) {
+  var output = [];
+  var replacerIsFn = typeof newValueOrFn === 'function';
+  var storedLastIndex = regexp.lastIndex;
+  regexp.lastIndex = 0;
+  var result;
+  var lastIndex = 0;
+  while (result = regexp.exec(string)) {
+    var index = result.index;
+    if (result[0] === '') {
+      // When the regexp is an empty string
+      // we still want to advance our cursor to the next item.
+      // This is the behavior of String.replace.
+      regexp.lastIndex++;
+    }
+    if (index !== lastIndex) {
+      output.push(string.substring(lastIndex, index));
+    }
+    var match = result[0];
+    lastIndex = index + match.length;
+    var out = replacerIsFn ? newValueOrFn.apply(this, result.concat(index + globalOffset, result.input)) : newValueOrFn;
+    output.push(out);
+    if (!regexp.global) {
+      break;
+    }
+  }
+  if (lastIndex < string.length) {
+    output.push(string.substring(lastIndex));
+  }
+  regexp.lastIndex = storedLastIndex;
+  return output;
+}
+var stringReplaceToArray = function stringReplaceToArray(stringOrArray, regexpOrSubstr, newSubStrOrFn) {
+  if (typeof stringOrArray === 'string') {
+    return replace(stringOrArray, regexpOrSubstr, newSubStrOrFn, 0);
+  } else if (!Array.isArray(stringOrArray) || !stringOrArray[0]) {
+    throw new TypeError('First argument must be an array or non-empty string');
+  } else {
+    var len = stringOrArray.length;
+    var output = [];
+    var globalOffset = 0;
+    for (var i = 0; i < len; ++i) {
+      var arrayItem = stringOrArray[i];
+      if (typeof arrayItem === 'string') {
+        output.push.apply(output, replace(arrayItem, regexpOrSubstr, newSubStrOrFn, globalOffset));
+        globalOffset += arrayItem.length;
+      } else {
+        output.push(arrayItem);
+      }
+    }
+    return output;
+  }
+};
+
+// This is based off of https://github.com/twitter/twemoji/blob/gh-pages/2/twemoji.js
+//
+// Ideally we'd use twemoji instead of replicating its logic.
+// The reason we can't is that we need to run our own replace.
+//
+// We could use it for most things (by essentially running twemoji.parse for each
+// regex match, and reading the code from the callback), but the one thing we'd always need
+// to copy and paste into this file is the regex since we need it to run the replace.
+//
+// Another option is to fork twemoji and expose a method in it that could help us, then
+// ask them to pull it in.
+//
+
+// RegExp based on emoji's official Unicode standards
+// http://www.unicode.org/Public/UNIDATA/EmojiSources.txt
+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;
+function toCodePoint(unicodeSurrogates, sep) {
+  var r = [],
+    c = 0,
+    p = 0,
+    i = 0;
+  while (i < unicodeSurrogates.length) {
+    c = unicodeSurrogates.charCodeAt(i++);
+    if (p) {
+      r.push((0x10000 + (p - 0xD800 << 10) + (c - 0xDC00)).toString(16));
+      p = 0;
+    } else if (0xD800 <= c && c <= 0xDBFF) {
+      p = c;
+    } else {
+      r.push(c.toString(16));
+    }
+  }
+  return r.join(sep || '-');
+}
+
+// avoid runtime RegExp creation for not so smart,
+// not JIT based, and old browsers / engines
+var UFE0Fg = /\uFE0F/g;
+
+// avoid using a string literal like '\u200D' here because minifiers expand it inline
+var U200D = String.fromCharCode(0x200D);
+
+/**
+* Used to both remove the possible variant
+*  and to convert utf16 into code points.
+*  If there is a zero-width-joiner (U+200D), leave the variants in.
+* @param   string    the raw text of the emoji match
+*/
+function grabTheRightIcon(rawText) {
+  // if variant is present as \uFE0F
+  return toCodePoint(rawText.indexOf(U200D) < 0 ? rawText.replace(UFE0Fg, '') : rawText);
+}
+var replaceEmoji$1 = function replaceEmoji(string, render) {
+  // Note: the latest regex added an empty matching group, so we ignore it.
+  return stringReplaceToArray(string, re, function emojiReplacer(match, _, offset) {
+    var icon = grabTheRightIcon(match);
+    return render(icon, match, offset);
+  });
+};
+
+var createElement = React.createElement;
+var pageProtocol = typeof location === 'undefined' ? '' : location.protocol === 'https:' ? 'https:' : 'http:';
+var emojiStyle = {
+  height: '1em',
+  width: '1em',
+  margin: '0 .05em 0 .1em',
+  verticalAlign: '-0.1em'
+};
+
+// Accept protocol with or without a colon
+function normalizeProtocol(protocol) {
+  if (protocol && protocol.length > 0 && protocol.charAt(protocol.length - 1) !== ':') {
+    return protocol + ':';
+  }
+  return protocol;
+}
+var makeTwemojiRenderer$1 = function makeTwemojiRenderer(options) {
+  options = merge({
+    protocol: pageProtocol,
+    baseUrl: '//cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/',
+    size: '72x72',
+    ext: '.png',
+    props: null
+  }, options);
+  return function renderTwemoji(icon, match, offset) {
+    var src = '';
+    if (options.baseUrl.indexOf('http') !== 0) {
+      src += normalizeProtocol(options.protocol);
+    }
+    src += options.baseUrl + options.size + '/' + icon + options.ext;
+    return createElement('img', merge({
+      key: offset,
+      alt: match,
+      draggable: false,
+      src: src,
+      style: emojiStyle
+    }, options.props));
+  };
+};
+function merge() {
+  var out = {},
+    len = arguments.length;
+  for (var i = 0; i < len; ++i) {
+    var source = arguments[i];
+    if (source) {
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          out[key] = source[key];
+        }
+      }
+    }
+  }
+  return out;
+}
+
+var replaceEmoji = replaceEmoji$1;
+
+var makeTwemojiRenderer = makeTwemojiRenderer$1;
+
+var reactEasyEmoji = function reactEasyEmoji(element, optionsOrFn) {
+  var render = typeof optionsOrFn === 'function' ? optionsOrFn : makeTwemojiRenderer(optionsOrFn);
+  return replaceEmoji(element, render);
+};
+
+var emoji = reactEasyEmoji;
+
 // @ts-check
+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);
 
 /**
  * @typedef {import('../types/types').SanitizeFn} SanitizeFn
@@ -789,8 +996,9 @@ function addLineBreak() {
 // eslint-disable-next-line valid-jsdoc
 /**
  * @param {boolean} shouldReturn
+ * @param {boolean} shouldConvertEmojiToImage
  */
-function useSanitize(shouldReturn) {
+function useSanitize(shouldReturn, shouldConvertEmojiToImage) {
   /** @type {React.MutableRefObject<SanitizeFn[]>} */
   var sanitizeFnsRef = useRef([]);
   var sanitizedTextRef = useRef("");
@@ -806,9 +1014,12 @@ function useSanitize(shouldReturn) {
       return fn(acc);
     }, html);
     result = replaceAllHtmlToString(result, shouldReturn);
+    if (shouldConvertEmojiToImage) {
+      result = convertEmojiToImage(result);
+    }
     sanitizedTextRef.current = result;
     return result;
-  }, []);
+  }, [shouldReturn, shouldConvertEmojiToImage]);
   return {
     addSanitizeFn: addSanitizeFn,
     sanitize: sanitize,
@@ -837,6 +1048,28 @@ function replaceAllHtmlToString(html, shouldReturn) {
   return text;
 }
 
+/**
+ * 
+ * @param {string} text 
+ * @return {string}
+ */
+function convertEmojiToImage(text) {
+  text = handleEmoji(text);
+  text = renderToString(emoji(text));
+  text = text.replace(new RegExp('&lt;span class=&quot;message-emoji&quot;&gt;', 'g'), '<span class="message-emoji">');
+  text = text.replace(new RegExp('&lt;/span&gt;', 'g'), '</span>');
+  return text;
+}
+
+/**
+ * 
+ * @param {string} text 
+ * @return {string}
+ */
+function handleEmoji(text) {
+  return text.replace(EMOJI_REGEX, '<span class="message-emoji">$&</span>');
+}
+
 // @ts-check
 
 /**
@@ -845,6 +1078,7 @@ function replaceAllHtmlToString(html, shouldReturn) {
  * @property {React.MutableRefObject<import('../text-input').Ref | null>} textInputRef
  * @property {(value: string) => void} setValue
  * @property {() => void} emitChange
+ * @property {boolean=} shouldConvertEmojiToImage
  */
 
 /**
@@ -855,8 +1089,9 @@ function useExpose(_ref) {
   var ref = _ref.ref,
     textInputRef = _ref.textInputRef,
     setValue = _ref.setValue,
-    emitChange = _ref.emitChange;
-  var _useSanitize = useSanitize(false),
+    emitChange = _ref.emitChange,
+    shouldConvertEmojiToImage = _ref.shouldConvertEmojiToImage;
+  var _useSanitize = useSanitize(false, shouldConvertEmojiToImage),
     sanitize = _useSanitize.sanitize,
     sanitizedTextRef = _useSanitize.sanitizedTextRef;
   useImperativeHandle(ref, function () {
@@ -936,7 +1171,7 @@ var _excluded = ["placeholder", "style", "tabIndex", "className", "onChange"];
  * @property {(event: React.ClipboardEvent) => void} onCopy
  * @property {(event: React.ClipboardEvent) => void} onPaste
  * @property {string} placeholder
- * @property {{borderRadius?: number; borderColor?: string; fontSize?: number; fontFamily?: string; background: string; placeholderColor?: string;}} style
+ * @property {{borderRadius?: number; color?: string; borderColor?: string; fontSize?: number; fontFamily?: string; background: string; placeholderColor?: string;}} style
  * @property {number} tabIndex
  * @property {string} className
  * @property {(html: string) => void} onChange
@@ -1030,7 +1265,16 @@ var TextInput = function TextInput(_ref, ref) {
       placeholderStyle.color = style.placeholderColor;
     }
     return placeholderStyle;
-  }, [style.placeholderColor]);
+  }, [style === null || style === void 0 ? void 0 : style.placeholderColor]);
+
+  /** @type {React.CSSProperties} */
+  var inputStyle = useMemo(function () {
+    var inputStyle = {};
+    if (style.color) {
+      inputStyle.color = style.color;
+    }
+    return inputStyle;
+  }, [style === null || style === void 0 ? void 0 : style.color]);
 
   /** @type {React.MutableRefObject<HTMLDivElement | null>} */
   var placeholderRef = useRef(null);
@@ -1107,7 +1351,8 @@ var TextInput = function TextInput(_ref, ref) {
     onBlur: props.onBlur,
     onCopy: props.onCopy,
     onPaste: props.onPaste,
-    "data-testid": "react-input-emoji--input"
+    "data-testid": "react-input-emoji--input",
+    style: inputStyle
   })));
 };
 var TextInputWithRef = /*#__PURE__*/forwardRef(TextInput);
@@ -4501,11 +4746,12 @@ function usePollute() {
  * @property {(text: string) => void=} onEnter
  * @property {string=} placeholder
  * @property {string=} placeholderColor
+ * @property {string=} color
  * @property {(size: {width: number, height: number}) => void=} onResize
  * @property {() => void=} onClick
  * @property {() => void=} onFocus
  * @property {() => void=} onBlur
- * @property {boolean=} shouldReturn
+ * @property {boolean} shouldReturn
  * @property {number=} maxLength
  * @property {boolean=} keepOpened
  * @property {(event: KeyboardEvent) => void=} onKeyDown
@@ -4523,6 +4769,7 @@ function usePollute() {
  * @property {(text: string) => Promise<MetionUser[]>=} searchMention
  * @property {HTMLDivElement=} buttonElement
  * @property {React.MutableRefObject=} buttonRef
+ * @property {boolean} shouldConvertEmojiToImage
  */
 
 /**
@@ -4534,7 +4781,6 @@ function usePollute() {
 function InputEmoji(props, ref) {
   var onChange = props.onChange,
     onEnter = props.onEnter,
-    shouldReturn = props.shouldReturn,
     onResize = props.onResize,
     onClick = props.onClick,
     onFocus = props.onFocus,
@@ -4554,19 +4800,22 @@ function InputEmoji(props, ref) {
     searchMention = props.searchMention,
     buttonElement = props.buttonElement,
     buttonRef = props.buttonRef,
+    shouldReturn = props.shouldReturn,
+    shouldConvertEmojiToImage = props.shouldConvertEmojiToImage,
     borderRadius = props.borderRadius,
     borderColor = props.borderColor,
     fontSize = props.fontSize,
     fontFamily = props.fontFamily,
     background = props.background,
-    placeholderColor = props.placeholderColor;
+    placeholderColor = props.placeholderColor,
+    color = props.color;
 
   /** @type {React.MutableRefObject<import('./text-input').Ref | null>} */
   var textInputRef = useRef(null);
   var _useEventListeners = useEventListeners(),
     addEventListener = _useEventListeners.addEventListener,
     listeners = _useEventListeners.listeners;
-  var _useSanitize = useSanitize(props.shouldReturn),
+  var _useSanitize = useSanitize(shouldReturn, shouldConvertEmojiToImage),
     addSanitizeFn = _useSanitize.addSanitizeFn,
     sanitize = _useSanitize.sanitize,
     sanitizedTextRef = _useSanitize.sanitizedTextRef;
@@ -4592,7 +4841,8 @@ function InputEmoji(props, ref) {
     ref: ref,
     setValue: setValue,
     textInputRef: textInputRef,
-    emitChange: emitChange
+    emitChange: emitChange,
+    shouldConvertEmojiToImage: shouldConvertEmojiToImage
   });
   useEffect(function () {
     if (sanitizedTextRef.current !== value) {
@@ -4730,7 +4980,8 @@ function InputEmoji(props, ref) {
       fontSize: fontSize,
       fontFamily: fontFamily,
       background: background,
-      placeholderColor: placeholderColor
+      placeholderColor: placeholderColor,
+      color: color
     },
     tabIndex: tabIndex,
     className: inputClass,
@@ -4755,11 +5006,13 @@ InputEmojiWithRef.defaultProps = {
   placeholder: "Type a message",
   borderRadius: 21,
   borderColor: "#EAEAEA",
+  color: "black",
   fontSize: 15,
   fontFamily: "sans-serif",
   background: "white",
   tabIndex: 0,
   shouldReturn: false,
+  shouldConvertEmojiToImage: false,
   customEmojis: [],
   language: undefined
 };