noto color emoji

src/views/Conversations/Components/Messages.jsx

@@ -60,28 +60,34 @@ const Messages = ({ ...props }) => {
   };
 
   const RenderText = memo(function renderText({ str }) {
-    const parts = str.split(/(https?:\/\/[^\s]+|\p{Emoji_Presentation})/gmu).filter((s) => s !== '');
-    // const parts = str.split(/(https?:\/\/[^\s]+|\p{Emoji}\uFE0F?|\b\d+\b)/gu);
+    const parts = str.split(/(https?:\/\/[^\s]+|\p{Emoji_Presentation})/gmu).filter(s => s !== '');
+    const links = str.match(/https?:\/\/[\S]+/gi) || [];
+    const emojis = str.match(/\p{Emoji_Presentation}/gu) || [];
+    const extraClass = isEmpty(emojis) ? '' : 'text-xl leading-5 emoji-text';
+    const objArr = parts.reduce((prev, curr, index) => {
+      if (links.includes(curr)) {
+        prev.push({ type: 'link', key: curr });
+      } else if (emojis.includes(curr)) {
+        prev.push({ type: 'emoji', key: curr });
+      } else {
+        prev.push({type: 'text', key: curr});
+      }
+      return prev;
+    }, []);
     return (
-      <>
-        {(parts || []).map((part, index) => {
-          // if (/\p{Emoji}\uFE0F?/u.test(part)) {
-          if (/\p{Emoji_Presentation}/u.test(part)) {
-            const code = [...part].map((e) => e.codePointAt(0).toString(16)).join(`-`);
-            return <Emoji key={`${part}${index}${code}`} unified={code} size={24} emojiStyle={'google'} />;
-          } else if (/https?:\/\/[\S]+/gi.test(part)) {
-            return (
-              <a href={part} target='_blank' key={`${part}${index}`} rel='noreferrer'>
-                {part}
-              </a>
-            );
-          } else if (part.trim() !== '') {
-            return <span key={`${part}${index}`}>{part}</span>;
-          } else {
-            return <span key={`${part}${index}`}>{part}</span>;
+      <span className={extraClass}>
+        {(objArr || []).map((part, index) => {
+            if (part.type === 'link') {
+              return (
+                <a href={part.key} target='_blank' key={`${part.key}${index}`} rel='noreferrer' className='text-sm'>
+                  {part.key}
+                </a>
+              );
+            } else  { // if (part.type === 'emoji')
+            return part.key;
           }
         })}
-      </>
+      </span>
     );
   });
   // eslint-disable-next-line react/display-name

src/views/Conversations/Conversations.css

@@ -1,3 +1,38 @@
+@font-face {
+    font-family: 'Noto Color Emoji';
+    src: url('/src/assets/noto-color-emoji.2.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Noto Color Emoji';
+    src: url('/src/assets/noto-color-emoji.7.woff2') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Noto Color Emoji';
+    src: url('/src/assets/noto-color-emoji.8.woff2') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Noto Color Emoji';
+    src: url('/src/assets/noto-color-emoji.9.woff2') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Noto Color Emoji';
+    src: url('/src/assets/noto-color-emoji.10.woff2') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
 .ant-card .ant-card-head{
     padding: 0 .5em .5em .5em;
     min-height: unset;