fix: add support for new emojis in v5 (closes RocketChat#1020)

package.json

@@ -46,5 +46,10 @@
   "packageManager": "yarn@4.4.0",
   "eslintConfig": {
     "extends": "@rocket.chat/eslint-config-alt"
-  }
+  },
+  "version": "1.0.0",
+  "description": "<p align=\"center\">   <a href=\"https://rocket.chat\" title=\"Rocket.Chat\">     <img src=\"https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png\" alt=\"Rocket.Chat\" />   </a> </p>",
+  "main": "index.js",
+  "author": "",
+  "license": "ISC"
 }

packages/fuselage/src/components/Message/MessageEmoji.tsx

@@ -1,5 +1,4 @@
 import type { ComponentProps } from 'react';
-
 import { MessageEmojiBase } from './MessageEmojiBase';
 
 type MessageEmojiProps = ComponentProps<typeof MessageEmojiBase> & {

packages/fuselage/src/components/Message/MessageEmojiBase.tsx

@@ -10,10 +10,22 @@ export const MessageEmojiBase = ({
   image,
   className,
   ...props
-}: MessageEmojiBaseProps) => (
-  <span
-    className={`${className || ''} ${name}`}
-    style={image && image.length ? { backgroundImage: image } : undefined}
-    {...props}
-  />
-);
+}: MessageEmojiBaseProps) => {
+  // Detect if the name prop is a ZWJ sequence
+  const isZWJSequence = name.includes('\u200D'); // '\u200D' is the Unicode for ZWJ
+
+  return (
+    <span
+      className={`${className || ''} ${name}`}
+      style={
+        image && image.length
+          ? { backgroundImage: `url(${image})` } // Use `url()` to ensure the image is properly applied
+          : undefined
+      }
+      {...props}
+    >
+      {/* Render the name directly if it's a ZWJ sequence to let the browser handle rendering */}
+      {isZWJSequence ? name : null}
+    </span>
+  );
+};