fix(react-email): avoid splitting surrogate pairs when truncating Preview text

Closed
RA
9d ago
+75-3

Summary

<Preview> truncates its text with substring(0, 200). When an emoji straddles the limit, the cut leaves a lone high surrogate, which shows up as a replacement character in the <title> and the preview text. The fix drops the dangling high surrogate after truncation.

Changes

  • Add a truncate helper in preview.tsx that removes a trailing high surrogate when the text was cut.
  • Add a regression test to preview.spec.tsx.
  • Add a patch changeset for react-email.

Testing

  • The new test fails without the fix and passes with it.
  • vitest run src/components/preview: 6 passed.
  • biome check is clean for the changed files.

Checklist

  • Tests added
  • Changeset added

Summary by cubic

Fixes react-email's <Preview> truncation so emoji aren't cut in half at the 200-character limit. Truncation now cuts on whole graphemes with Intl.Segmenter, so families, flags, and skin-tone emoji are kept or dropped whole instead of leaving a lone surrogate that renders as a replacement character.

  • Adds a truncate helper in preview.tsx and a regression test covering multiple emoji types at the cut point.
  • Adds a patch changeset.