Skip to content

Commit

Permalink
fix: add support for new emojis in v5 (closes RocketChat#1020)
Browse files Browse the repository at this point in the history
  • Loading branch information
Vansh5632 committed Aug 26, 2024
1 parent c5754e0 commit a116a45
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 9 deletions.
7 changes: 6 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,5 +46,10 @@
"packageManager": "[email protected]",
"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"
}
1 change: 0 additions & 1 deletion packages/fuselage/src/components/Message/MessageEmoji.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import type { ComponentProps } from 'react';

import { MessageEmojiBase } from './MessageEmojiBase';

type MessageEmojiProps = ComponentProps<typeof MessageEmojiBase> & {
Expand Down
26 changes: 19 additions & 7 deletions packages/fuselage/src/components/Message/MessageEmojiBase.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};

0 comments on commit a116a45

Please sign in to comment.