From a116a45a20bf765ab9afa8f53c8319607f50af9e Mon Sep 17 00:00:00 2001
From: Vansh5632 <vanshgiilhotra8885@gmail.com>
Date: Mon, 26 Aug 2024 20:06:45 +0530
Subject: [PATCH] fix: add support for new emojis in v5 (closes #1020)

---
 package.json                                  |  7 ++++-
 .../src/components/Message/MessageEmoji.tsx   |  1 -
 .../components/Message/MessageEmojiBase.tsx   | 26 ++++++++++++++-----
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 1b8e78e695..5b566909fc 100644
--- a/package.json
+++ b/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"
 }
diff --git a/packages/fuselage/src/components/Message/MessageEmoji.tsx b/packages/fuselage/src/components/Message/MessageEmoji.tsx
index e5ed190e10..f32a0746bf 100644
--- a/packages/fuselage/src/components/Message/MessageEmoji.tsx
+++ b/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> & {
diff --git a/packages/fuselage/src/components/Message/MessageEmojiBase.tsx b/packages/fuselage/src/components/Message/MessageEmojiBase.tsx
index b827d676b4..796c7dcff8 100644
--- a/packages/fuselage/src/components/Message/MessageEmojiBase.tsx
+++ b/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>
+  );
+};