Add Windows twemoji fallback and use in picker - #79
Conversation
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThis PR implements Windows-specific Twemoji image rendering for Unicode emojis with native emoji fallback. A new utility module detects the Windows platform and generates Twemoji CDN URLs. EmojiRenderer refactors failure tracking into separate flags for custom and Unicode emoji images, and PollEmojiPickerField integrates Unicode image rendering with dynamic picker style selection. ChangesWindows emoji rendering with fallback
Sequence DiagramsequenceDiagram
participant User
participant PollEmojiPickerField
participant EmojiRendering
participant Browser
participant TwemojiCDN
User->>PollEmojiPickerField: Select Unicode emoji on Windows
PollEmojiPickerField->>EmojiRendering: getUnicodeEmojiImageUrl(emoji)
EmojiRendering->>Browser: Detect Windows platform
Browser-->>EmojiRendering: Platform is Windows
EmojiRendering-->>PollEmojiPickerField: Return Twemoji CDN URL
PollEmojiPickerField->>TwemojiCDN: Request emoji SVG image
alt Image loads successfully
TwemojiCDN-->>PollEmojiPickerField: SVG image data
PollEmojiPickerField->>User: Render Twemoji image
else Image load fails
TwemojiCDN--xPollEmojiPickerField: Load error
PollEmojiPickerField->>User: Fallback to native emoji text
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@dashboard/frontend/src/app/lib/emoji-rendering.ts`:
- Around line 26-31: The function toTwemojiCodepoints is producing zero-padded
4-digit hex codepoints which breaks Twemoji CDN URLs; update it so that after
mapping code points to hex (codepoint.toString(16)) you do not call .padStart(4,
'0') — just use the raw hex strings joined with '-' (preserve the existing
Array.from/map/filter flow in toTwemojiCodepoints and remove only the padStart
call) so low-range codepoints like U+00A9 become "a9" instead of "00a9".
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 9169d405-9dc3-490a-84dd-b517cbcee8aa
📒 Files selected for processing (6)
dashboard/frontend/src/app/components/EmojiRenderer.test.tsxdashboard/frontend/src/app/components/EmojiRenderer.tsxdashboard/frontend/src/app/components/PollEmojiPickerField.tsxdashboard/frontend/src/app/lib/emoji-rendering.tsdashboard/frontend/src/app/pages/CreatePoll.test.tsxdashboard/frontend/src/app/pages/PollDrafts.test.tsx
1 participant
This pull request improves emoji rendering across the application, especially for Windows users, by introducing Twemoji SVG image rendering for Unicode emojis when appropriate. It also enhances emoji picker consistency and error handling for emoji image fallbacks. The main changes are grouped below.
Emoji Rendering Enhancements:
emoji-rendering.tsthat detects the user's platform and determines whether Unicode emojis should be rendered as images (using Twemoji SVGs) on Windows, along with helpers to generate Twemoji image URLs.EmojiRenderer.tsxto render Unicode emojis as images on Windows, fall back to text if the image fails to load, and reset error state when emoji props change. [1] [2] [3] [4] [5]Emoji Picker Improvements:
PollEmojiPickerField.tsxto use Twemoji images in the emoji picker on Windows, show a Unicode emoji preview as an image when appropriate, and handle image load errors gracefully. [1] [2] [3] [4] [5] [6]TWITTERemoji style. [1] [2]Testing Improvements:
EmojiRenderer.test.tsxto simulate different platforms by overriding the user agent, ensuring correct fallback and image rendering behavior on Windows. [1] [2]Summary by CodeRabbit
New Features
Bug Fixes
Tests