todo: emoji font

src/views/Conversations/Components/Messages.jsx

@@ -5,7 +5,7 @@ import { MessageBox } from 'react-chat-elements';
 import useConversationStore from '@/stores/ConversationStore';
 import { useShallow } from 'zustand/react/shallow';
 import { Emoji } from 'emoji-picker-react';
-import { olog } from '@/utils/utils';
+import { isEmpty, olog } from '@/utils/utils';
 
 const Messages = ({ ...props }) => {
   // const currentConversation = useConversationStore(useShallow((state) => state.currentConversation));
@@ -59,28 +59,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={'apple'} />;
-          } 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,4 +1,4 @@
-
+@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');
 .ant-card .ant-card-head{
     padding: 0 .5em .5em .5em;
     min-height: unset;
@@ -18,8 +18,13 @@
     background: linear-gradient(0deg,#00000014,#0000);
     color: #00000073;
 }
-.chatwindow-wrapper .rce-mbox-text, .chatwindow-wrapper .referrer-msg {
-    font-family: 'Twemoji Mozilla', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'EmojiOne Color', 'Android Emoji', sans-serif;
+.chatwindow-wrapper .rce-mbox-text .emoji-text,
+.chatwindow-wrapper .referrer-msg,
+.chatwindow-wrapper .rce-mbox-reply-message
+{
+    /* font-family: 'Apple Color Emoji', 'Twemoji Mozilla', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'EmojiOne Color', 'Android Emoji', sans-serif; */
+    font-family: "Noto Color Emoji", 'Apple Color Emoji', 'Twemoji Mozilla', 'Segoe UI Emoji', 'Segoe UI Symbol', 'EmojiOne Color', 'Android Emoji', sans-serif;
+    font-weight: 500;
 }
 .chatwindow-wrapper .rce-mbox-text a{
     color: #4f81a1;