Paste is unable to render number emojis in text

[arpitbatra123]

As part of an investigation on a customer reported issue, we found that our chat components are unable to render number emojis like 1️⃣ properly, Here's a screenshot of how it looks on the UI:

This component inherits the global fonts from the paste theme as they're defined here.

Here's a codesandbox reproduction for the same - https://codesandbox.io/s/kind-microservice-ldh9nw?file=/src/index.tsx

In our investigation, we found out that this happens on the "Inter var" font that paste has chosen to be the default for text, and overriding our component's font to be "Open Sans" or "Twilio Sans" fixes this issue.

Please guide us on what a solution for this would be.

[TheSisb]

Hmm it looks like our main font-stack doesn't fall-back to something that supports it, but our code font-stack does. You can do something like this for the time being, as we investigate our font-stack: https://codesandbox.io/s/upbeat-butterfly-lhvy96?file=/src/index.tsx

[arpitbatra123]

@TheSisb I'm afraid that might not be the best solution as the text is user generated and applying a specific font family for emojis would involve detection of emojis in the text, which can be tricky.

[TheSisb]

Understood. I looked into it some more and traced it to the Inter variable font in our font stack. There's a closed issue for this on the Inter repo here: rsms/inter#371

Looks like a Chrome bug affecting only the #1-9 number emojis, but there's a fix in a newer version of the font. I'll make a ticket for us to update the font.

[oscar8880]

Hey @TheSisb !

Will this be patched on older versions of Paste? I ask because Flex is currently using v15. I suppose we could consume this fix as a patch to v17 (given versions > 17 are for React 18 and we can't upgrade react without a breaking change for customers).

[TheSisb]

Hi @oscar8880,

This fix will land in Paste 19.6.0, which supports React 18 and is backwards compatible with previous versions of React too.

If that isn't something you can apply, you can instead follow the instructions on our docs where we recommend loading the fonts in your apps but change the second link to:

<link rel="stylesheet" href="https://assets.twilio.com/public_assets/paste-fonts/1.5.1/fonts.css">

[oscar8880]

Thanks @TheSisb, we can definitely give an upgrade to v19 a go. Your second workaround prompted me to check how we're loading the font in on the Flex UI side and it seems we're directly pulling in that paste-font resource anyway, so we can simply pull the newer 1.5.1, and that appears to work. I'll report back if that does get confirmed as a viable solution for us

[SiTaggart]

The only thing thats really worth mentioning is we finally removed the "lighter" "darker" named tokens from the theme.

That shouldn't be an issue, as we changed the names based on what you folks suggested as a better alternatives, so I'm hopeful the product isn't actually using them and instead using the ones suggested by your team