Skip to content

Feature/2422 emoji only message font size - #3414

Open
kingalg wants to merge 3 commits into
developfrom
feature/2422-emoji-only-message-font-size
Open

Feature/2422 emoji only message font size#3414
kingalg wants to merge 3 commits into
developfrom
feature/2422-emoji-only-message-font-size

Conversation

@kingalg

@kingalg kingalg commented Aug 24, 2026

Copy link
Copy Markdown
Collaborator

Pull Request Checklist

Fixes #2422 — emoji-only messages now render at fontSize: 28 instead of the default 14, matching existing desktop behavior (#519 ).

  • packages/common/src/index.ts: exported isAllEmoji — it already existed and was already tested, but wasn't part of @quiet/common's public API (desktop reaches it via a deep relative import instead of the package entry point).
  • Message.component.tsx: the message-body markdown rule now picks fontSize based on isAllEmoji(message.message).
  • Message.test.tsx (new file): 3 focused tests — default text, emoji-only, and mixed text+emoji (the negative case, added after review). Verified they actually catch a regression by deliberately breaking the fix and confirming the test fails with a clear diff, then restored it.

I had a dilemma about what to do with tests because we have a disabled message.test already but at the end decided on the following approach:
New test file vs. reviving Message.test.disabled.tsx: that file is a pre-existing, already-broken ~1400-line snapshot (avatar SVG + MathJax rendering), disabled during a past RN upgrade and not run by Jest. Fixing it properly is a separate, unrelated effort, so it's left untouched — flagged in-line with a one-line comment pointing at it so it's not mistaken for overlapping coverage. I'm gonna check and, if needed and it's not created yet, create an issue to fix the disabled test.

@kingalg kingalg added this to Quiet Aug 24, 2026
@kingalg kingalg added the mobile label Aug 24, 2026
@kingalg kingalg moved this to In progress in Quiet Aug 24, 2026
@kingalg kingalg self-assigned this Aug 24, 2026

@holmesworcester holmesworcester left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved, but if you'd like to do this bonus item from the linked issue, that would be great!

I don't know if desktop does this yet but I think it does

Bonus: in-line emojis should have a larger font size too. (Slack seems to render them as images at 22px.)

@kingalg

kingalg commented Aug 25, 2026

Copy link
Copy Markdown
Collaborator Author

TLDR: @holmesworcester the requested change is done; tests are modified and slightly improved; It wasn’t done on desktop, and we still need to do it.

This turned out to be bigger than I thought (or I kept running into things I wanted to fix). Several points to explain:

  • We don’t have this implemented on desktop; I’ll make an issue for that, but here I wanted to focus on mobile.
  • We need to consider using emoji-regex instead of isAllEmoji; it’ll fix some of our issues, like automatically changing numbers to emojis. I don’t know why we didn’t use it; maybe there is a legit reason behind it, but it’s worth investigating and potentially changing for both desktop and mobile. I don’t have enough info to handle it in this PR.
  • You’ll see that I moved the emoji-sizing helper functions out of Message.component.tsx into a new Message.utils.tsx. I did it because it matches a pattern already used elsewhere in this codebase (Typography.utils.ts). This makes them directly testable without the full component + mock setup and keeps the component file focused on rendering rather than logic.
  • Another change in the tests you may have questions about (packages/mobile/src/components/Message/Message.test.tsx): Our test mock for the markdown library was oversimplified in a way that let a real bug slip through. The emoji-sizing feature looked correct in tests but didn't actually work in the app. I fixed the mock to accurately simulate how the library renders text, so tests now catch this class of bug instead of hiding it.
  • I decided to add some exclusions that we didn't have before, following other similar apps' examples (like code_inline/code_block/fence).

Changes that I’ve made:

  • packages/common/src/emojis.ts — added splitEmoji(), splits text into emoji/non-emoji runs.
  • packages/common/src/emojis.test.ts — tests for splitEmoji.
  • packages/mobile/src/components/Message/Message.utils.tsx — new file: emoji-sizing helpers (renderWithInlineEmoji, isPlainMessageText), moved out of the component for testability.
  • packages/mobile/src/components/Message/Message.component.tsx — inline emoji in a message now render bigger (22px), scoped to plain message text only.
  • packages/mobile/src/components/Message/Message.test.tsx — tests for the above; mock rewritten to match how the markdown library actually renders text.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

Status: In progress

Development

Successfully merging this pull request may close these issues.

Emoji-only messages should have larger font size on mobile

2 participants