refactor: create reusable emoji component (issue #6535)

[Sumanth2377]

Proposed changes

Refactored the Emoji component to be reusable across the application.

• Created app/containers/Emoji/Emoji.tsx as a shared component.
• Updated Markdown and EmojiPicker to use the new shared component.
• This reduces code duplication and centralizes emoji rendering logic.

Issue(s)

Closes #6535

How to test or reproduce

1. Open any chat room.
2. Send a message with standard emojis (e.g., :smile:) and custom emojis.
3. Verify that emojis render correctly in the message list (Markdown).
4. Open the Emoji Picker.
5. Verify that emojis render correctly in the picker list.

Screenshots

N/A (Refactor with no visual changes intended)

Types of changes

• [ ] Bugfix (non-breaking change which fixes an issue)
• [x] Improvement (non-breaking change which improves a current function)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Documentation update (if none of the other choices apply)

Checklist

• [x] I have read the CONTRIBUTING doc
• [x] I have signed the CLA
• [x] Lint and unit tests pass locally with my changes
• [ ] I have added tests that prove my fix is effective or that my feature works (if applicable)
• [ ] I have added necessary documentation (if applicable)
• [ ] Any dependent changes have been merged and published in downstream modules

Summary by CodeRabbit

• New Features

  • Added a unified Emoji component with responsive sizing, avatar styling, and custom-emoji support; exposed as a public export.

• Refactor

  • Standardized emoji rendering across picker, markdown, and UI by delegating to the shared Emoji implementation and simplifying local emoji logic.
  • Added a re-export to make the Emoji component available from the package module.

• Tests

  • Added unit tests verifying standard and custom emoji rendering.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[CLAassistant]

All committers have signed the CLA.

[coderabbitai[bot]]

Walkthrough

Adds a new reusable Emoji component and index re-export, updates EmojiPicker and Markdown emoji renderers to use the shared component, and adds unit tests covering both unicode and custom emoji rendering. Sizing and shortname-to-unicode conversion are centralized with fontScale-aware logic.

Changes

Cohort / File(s)	Summary
New shared Emoji component app/containers/Emoji/Emoji.tsx, app/containers/Emoji/index.ts	Adds default-exported Emoji functional component (literal, isBigEmoji, style, isAvatar, getCustomEmoji, customEmoji). Renders CustomEmoji when provided/resolved, otherwise converts shortname to unicode and renders Text. Uses theme colors and fontScale/fontScaleLimited sizing. Adds named re-export in index.ts.
EmojiPicker refactor app/containers/EmojiPicker/Emoji.tsx	Replaces local emoji rendering with the shared Emoji component (../Emoji/Emoji); string emojis passed as literal=":{emoji}:", non-string as customEmoji={emoji}; removes prior local unicode/ascii/custom handling.
Markdown emoji refactor app/containers/markdown/components/emoji/Emoji.tsx	Replaces in-file rendering with shared Emoji. Introduces getEmojiToken arrow helper to compute literal then delegates rendering. Removes local unicode conversion, CustomEmoji logic, and sizing/theme hooks; drops defaulted style/isAvatar in destructured props.
Tests app/containers/Emoji/__tests__/Emoji.test.tsx	Adds tests that mock shortname-to-unicode hook, CustomEmoji, theme, and responsive layout. Covers standard emoji (:smile: → "😄") and custom emoji rendering paths.

Sequence Diagram(s)

sequenceDiagram
    participant Picker as EmojiPicker
    participant Markdown as MarkdownEmoji
    participant Shared as Emoji (shared)
    participant Custom as CustomEmoji
    participant Theme as ThemeProvider

    Picker->>Shared: render(literal=":{emoji}:" / customEmoji)
    Markdown->>Shared: render(literal from getEmojiToken(...))

    alt customEmoji provided or resolved
        Shared->>Custom: render(customEmoji, size = isBig ? big*fontScale : small*fontScale)
    else
        Shared->>Shared: formatShortnameToUnicode(literal) → unicode
        Shared->>Theme: read colors & fontScale/fontScaleLimited
        Shared->>Shared: render Unicode text (apply big/avatar styles)
    end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Review focus:
  • app/containers/Emoji/Emoji.tsx — branching for customEmoji vs literal, fontScale and fontScaleLimited sizing math, theme color usage, and accessibility/testIDs.
  • app/containers/EmojiPicker/Emoji.tsx & app/containers/markdown/components/emoji/Emoji.tsx — confirm literal/token mapping preserves prior behavior.
  • app/containers/Emoji/__tests__/Emoji.test.tsx — ensure mocks align with real hooks/components and that tests cover both render paths.

Poem

A rabbit hops in code so spry, 🐇
I stitch a smile from shortname sky,
Picker and Markdown now agree,
One shared emoji for all to see,
I nibble bugs and bounce with glee. ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: creating a reusable emoji component, which aligns with the primary objective and changeset.
Linked Issues check	✅ Passed	All coding requirements from issue #6535 are met: a reusable Emoji component was created, and it's used in both Markdown rendering and EmojiPicker.
Out of Scope Changes check	✅ Passed	All changes are directly aligned with the stated objectives; no out-of-scope modifications were introduced beyond the emoji component refactoring.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}