[$500] Do not allow emojis to be formatted (ie italics)

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Go to android app
2. Go to any chat
3. Try to make emoji in italic form:-Type in : insertemoji For example:⁦:100:, _⁦:purpleheart: , _⁦:partyingface: ,
4. Notice that the top right part of the emoji cuts off. Few Example: the :100:, :purple_heart:, :partying_face: emoji has its top right section cut , (It happens on android only latest)

Expected Result:

Users should not be able to format emojis, lets keep them with normal style (no bold, italics, strikethrough etc)

Actual Result:

Users can make emoji italic which leads to the emojis to cut off a few parts of the emoji (for some emojis)

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• [x] Android / native
• [x] MacOS Desktop
• [x] MacOS Chrome Web

Version Number: 1.2.62-1 Reproducible in staging?: y Reproducible in production?: y If this was caught during regression testing, add the test name, ID and link from TestRail: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos:

Expensify/Expensify Issue URL: Issue reported by: @priya-zha Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1675094271396099

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017d08e0c09284d31f
• Upwork Job ID: 1620563000799895552
• Last Price Increase: 2024-08-08
• Automatic offers:
• eh2077 | Reviewer | 0
• wildan-m | Contributor | 0

Issue Owner

Current Issue Owner: @mallenexpensify / @mallenexpensify

[MelvinBot]

Current assignee @aimane-chnaif is eligible for the Internal assigner, not assigning anyone new.

[tienifr]

@tienifr we already discussed. that's why we suggest to fix this in render level

Sure, I misunderstood what you mean by render level. In this case we can just apply the sequence of regex mentioned previously in here to the rendering.

Updated Proposal

Please re-state the problem that we are trying to solve in this issue.

Emoji has italic style if put in _ _ in markdown.

What is the root cause of that problem?

The emoji inside <em>/<i> tag in html has italic style. Same for bold.

What changes do you think we should make in order to solve the problem?

As mentioned by @aimane-chnaif above, when rendering the html, we can exclude the emoji from the em and similar tags. We can do that adding the following function to process the html (it's basically the same as the steps mentioned earlier in here, just applying to the rendering instead of markdown-to-html):

const excludeEmojisFromItalicAndBoldTags = (text) => {
    return text.replace(/<(em|i|b|strong)(?:"[^"]*"|'[^']*'|[^'">])*>([\s\S]*?)<\/\1>(?![^<]*(<\/pre>|<\/code>))/gi, (match, g1) => {
        const textWithEmojiExcluded = match.replace(/(([\p{Extended_Pictographic}](\u200D[\p{Extended_Pictographic}]|[\u{1F3FB}-\u{1F3FF}]|[\u{E0020}-\u{E007F}]|\uFE0F|\u20E3)*|[\u{1F1E6}-\u{1F1FF}]{2}|[#*0-9]\uFE0F?\u20E3)+)/gu, `</${g1}>$1<${g1}>`);
        const textWithEmptyTagRemoved = textWithEmojiExcluded.replace(new RegExp(`<${g1}></${g1}>`, 'g'), '');
        return textWithEmptyTagRemoved;
    });
}

this will be called with htmlContent as the param right before this line here https://github.com/Expensify/App/blob/79e8dd706f5760f398eaa1b94e2e2be97805fd6a/src/pages/home/report/ReportActionItemFragment.js#L112

const htmlContent = excludeEmojisFromItalicAndBoldTags(html + editedTag);

This will replace all emoji group inside the <em>, </em> by '</em>$1<em>', which will achieve the desired behavior.

We further refine this by removing redundant <em></em> that doesn't have any content inside. This can happen if an emoji happens to be right next to the leading and trailing <em>.

What alternative solutions did you explore? (Optional)

Another way is instead of the regex above to handle the emojis, we can have a regex to replace all non-emoji character group with <em>$1</em> (the <em> or </em> will be omitted if the group is next to the start or end of the tag)

[bernhardoj]

There is an issue that expects (only) emojis inside bold and italic should have larger size. But based on this confirmation, it shouldn't. But (again), in this issue, we are trying to take out the emoji from the italic/bold tag, which technically makes the emojis not inside bold/italic anymore. So, I have updated my proposal with a very little bit changes in case we want to show larger emojis inside bold/italic. If not, then I think we can close this issue.

[anmurali]

Proposals still being evaluated

[aimane-chnaif]

started public discussion here

[aimane-chnaif]

Still discussing on slack. Not many inputs so far.

[flodnv]

I asked for more voices on one of our internal Slack channels

[flodnv]

Callstack is going to take a look at this, although Rocio suggested that https://github.com/Expensify/App/pull/15611 might solve this issue.

[flodnv]

Let's HOLD on that PR to see if it fixes it.

[flodnv]

Still HOLDing, that PR is in progress.

[flodnv]

Same.

[flodnv]

That PR is now on HOLD with a bunch of conflicts 😂 moving this to Monthly...

[flodnv]

Still on HOLD, now held by https://github.com/facebook/hermes/pull/968

[priya-zha]

Hi @flodnv. Wanted to know if this issue here is same or not?

[flodnv]

I don't know, sorry

[mountiny]

Updating the issue body and title here. In this discussion we have agreed to not allow the emojis to be italics.

[flodnv]

This is still waiting on https://github.com/facebook/hermes/pull/968, which had some progress in the past month.

[anmurali]

https://github.com/facebook/hermes/pull/968 is still WIP

[flodnv]

Wow, it was merged!! 😂 What now?! Do you know how these PRs end up in RN releases @mountiny ?

[mountiny]

I believe there should be new 0.73 release coming up soon (October hopefully) cc @fabioh8010 do you have some better ETA?

[fabioh8010]

Hi @mountiny , the target date for RN 0.73 is 23 October (more info here). And according to Meta's team, this Hermes improvement is expected to be available on RN 0.73 as well.

But please have in mind that ETA will likely be 23 October + time to update E/App to latest RN version.

[mountiny]

Cool thanks!

[flodnv]

Still waiting for RN 0.73

[flodnv]

Same.

[fabioh8010]

We also can watch for this PR which is updating the app to 0.73 -> https://github.com/Expensify/App/pull/31558

[flodnv]

Seems like we're almost there 🙏

[anmurali]

https://github.com/Expensify/App/pull/31558 is deployed to production. @flodnv @fabioh8010 - what is the next step here?

[flodnv]

The problem still exists, so it needs to be fixed (or, we can close this issue as won't fix)

[aimane-chnaif]

I think this should be fixed for consistency. Also reporting from https://github.com/Expensify/App/pull/34292#issuecomment-1906078856

[flodnv]

Still not convinced this is a ""bug"". Look at GH:

Seen in https://github.com/Expensify/App/pull/35552

I think this should be fixed for consistency.

Consistency with what?

[aimane-chnaif]

Inconsistency meaning: This is android only bug. Also reported in https://github.com/Expensify/App/pull/34292#issuecomment-1906078856. This doesn't happen on all other platforms.

[flodnv]

Hm, I see the bug on Desktop and web (Chrome, MacOS). Are you saying it does not exist on iPhone?

[aimane-chnaif]

Ah this happen on web platforms as well? I will retest on all platforms

[flodnv]

Thanks, I think all that's left to test is iPhone? And maybe Android mWeb and iPhone mWeb

[aimane-chnaif]

• web

• ios

• android

[aimane-chnaif]

ok so only iOS emoji is not italic, while all other platforms are italic

[flodnv]

Alright then, I can kind of buy the consistency argument 👍

[anmurali]

Adding in BZ backup when I am OOO

[melvin-bot[bot]]

Triggered auto assignment to @mallenexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[stitesExpensify]

Wrong button :ohnothing:

I'm going to take this over as the internal engineer. We should hold on this until this is merged because we're adding a new <emoji> tag that will change the solution here.

I also wanted to mention that we are adding a requirement here to add a unit test. We have gone back and forth on whether emojis can be for formatted or not a few times, and we want to lock down that emojis should never be formatted.

[melvin-bot[bot]]

Upwork job price has been updated to $500

[mallenexpensify]

Off hold! @stitesExpensify , do you still want this to be a Monthly? Added to #vip-vsb because it doesn't have to do with money. This should be polish

[stitesExpensify]

We can switch it back to daily. I'm going to add external and help wanted as well

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @eh2077 (External)

[stitesExpensify]

I'm not sure why @eh2077 was added, @aimane-chnaif is already the c+ here right?

[eh2077]

@stitesExpensify I'm not sure if this is because @aimane-chnaif is OOO as they mentioned here

[stitesExpensify]

Ahh yep that's definitely it! Thanks for clarifying for me :)

[aimane-chnaif]

right. I am currently OOO and temporarily removed from github team.

[eh2077]

Wrong button :ohnothing:

I'm going to take this over as the internal engineer. We should hold on this until this is merged because we're adding a new <emoji> tag that will change the solution here.

I also wanted to mention that we are adding a requirement here to add a unit test. We have gone back and forth on whether emojis can be for formatted or not a few times, and we want to lock down that emojis should never be formatted.

@tienifr @bernhardoj Would you like to update your proposals based on this https://github.com/Expensify/App/issues/14676#issuecomment-1967604879 ?

[bernhardoj]

Updated my proposal, but it's only for sent message and not for live markdown preview.