feat: emojis in the input value will be converted to images

README.md

@@ -80,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.                                                                                  |

example/src/App.js

@@ -327,6 +327,14 @@ export default function App() {
                 Allows the user to use the <Code inline>Shift + Enter</Code> or <Code inline>Ctrl + Enter</Code> keyboard shortcut to create a new line.
               </TableTd>
             </TableTr>
+            <TableTr>
+              <TableTd>
+                <Code>shouldConvertEmojiToImage</Code>
+              </TableTd>
+              <TableTd>
+                Defaults to false. If set to true, emojis will be converted to images in the result.
+              </TableTd>
+            </TableTr>
             <TableTr>
               <TableTd>
                 <Code>value</Code>

package.json

@@ -78,6 +78,7 @@
   "dependencies": {
     "@emoji-mart/data": "1.1.2",
     "@emoji-mart/react": "1.1.1",
-    "emoji-mart": "5.5.2"
+    "emoji-mart": "5.5.2",
+    "react-easy-emoji": "^1.8.1"
   }
 }

src/hooks/use-expose.js

@@ -9,14 +9,15 @@ import { useSanitize } from "./use-sanitize";
  * @property {React.MutableRefObject<import('../text-input').Ref | null>} textInputRef
  * @property {(value: string) => void} setValue
  * @property {() => void} emitChange
+ * @property {boolean=} shouldConvertEmojiToImage
  */
 
 /**
  *
  * @param {Props} props
  */
-export function useExpose({ ref, textInputRef, setValue, emitChange }) {
-  const { sanitize, sanitizedTextRef } = useSanitize(false);
+export function useExpose({ ref, textInputRef, setValue, emitChange, shouldConvertEmojiToImage }) {
+  const { sanitize, sanitizedTextRef } = useSanitize(false, shouldConvertEmojiToImage);
 
   useImperativeHandle(ref, () => ({
     get value() {

src/hooks/use-sanitize.js

@@ -1,17 +1,24 @@
 // @ts-check
 
 import { useCallback, useRef } from "react";
+import { renderToString } from 'react-dom/server'
+import emoji from 'react-easy-emoji'
 import { removeHtmlExceptBr } from "../utils/input-event-utils";
 
+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
+)
+
 /**
  * @typedef {import('../types/types').SanitizeFn} SanitizeFn
  */
 
 // eslint-disable-next-line valid-jsdoc
 /**
  * @param {boolean} shouldReturn
+ * @param {boolean} shouldConvertEmojiToImage
  */
-export function useSanitize(shouldReturn) {
+export function useSanitize(shouldReturn, shouldConvertEmojiToImage) {
   /** @type {React.MutableRefObject<SanitizeFn[]>} */
   const sanitizeFnsRef = useRef([]);
 
@@ -30,10 +37,14 @@ export function useSanitize(shouldReturn) {
 
     result = replaceAllHtmlToString(result, shouldReturn);
 
+    if (shouldConvertEmojiToImage) {
+      result = convertEmojiToImage(result);
+    }
+
     sanitizedTextRef.current = result;
 
     return result;
-  }, []);
+  }, [shouldReturn, shouldConvertEmojiToImage]);
 
   return { addSanitizeFn, sanitize, sanitizedTextRef };
 }
@@ -59,3 +70,29 @@ export 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>')
+}

src/index.js

@@ -43,7 +43,7 @@ import { usePollute } from "./hooks/user-pollute";
  * @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
@@ -61,6 +61,7 @@ import { usePollute } from "./hooks/user-pollute";
  * @property {(text: string) => Promise<MetionUser[]>=} searchMention
  * @property {HTMLDivElement=} buttonElement
  * @property {React.MutableRefObject=} buttonRef
+ * @property {boolean} shouldConvertEmojiToImage
  */
 
 /**
@@ -73,7 +74,6 @@ function InputEmoji(props, ref) {
   const {
     onChange,
     onEnter,
-    shouldReturn,
     onResize,
     onClick,
     onFocus,
@@ -93,6 +93,8 @@ function InputEmoji(props, ref) {
     searchMention,
     buttonElement,
     buttonRef,
+    shouldReturn,
+    shouldConvertEmojiToImage,
     // style
     borderRadius,
     borderColor,
@@ -108,7 +110,7 @@ function InputEmoji(props, ref) {
 
   const { addEventListener, listeners } = useEventListeners();
 
-  const { addSanitizeFn, sanitize, sanitizedTextRef } = useSanitize(props.shouldReturn);
+  const { addSanitizeFn, sanitize, sanitizedTextRef } = useSanitize(shouldReturn, shouldConvertEmojiToImage);
 
   const { addPolluteFn, pollute } = usePollute();
 
@@ -139,7 +141,8 @@ function InputEmoji(props, ref) {
     ref,
     setValue,
     textInputRef,
-    emitChange
+    emitChange,
+    shouldConvertEmojiToImage
   });
 
   useEffect(() => {
@@ -360,6 +363,7 @@ InputEmojiWithRef.defaultProps = {
   background: "white",
   tabIndex: 0,
   shouldReturn: false,
+  shouldConvertEmojiToImage: false,
   customEmojis: [],
   language: undefined,
 };