[$250] Markdown- Bold markdown is not rendered when copied from another app

[lanitochka17]

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

---

Version Number: 9.0.17-0
Reproducible in staging?: Y
Reproducible in production?: Y
Issue reported by: Applause - Internal Team

Action Performed:

An account signed in to newdot

1. Navigate to a chat app that supports Markdown (Example: Slack)
2. Send a message containing the bold markdown
3. Copy the text (CTRL + C) with markdown and navigate back to NewDot
4. Open any conversation and paste the copied text with CTRL + V into the compose box

Expected Result:

The text is displayed with the bold markdown icon in the compose box and is rendered as bold when the text is sent

Actual Result:

The text is not displayed with the bold markdown icon in the compose box and is not rendered as bold when the text is sent

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6563272_1722942138525.2024-08-06_13_59_36.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e87ca27ee2372740
• Upwork Job ID: 1821228929551530763
• Last Price Increase: 2024-08-14

[melvin-bot]

Triggered auto assignment to @sakluger (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lanitochka17]

We think that this bug might be related to #Live Markdown.

[lanitochka17]

@sakluger FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[bernhardoj]

Proposal

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

Copying bold text from another app (such as Slack) isn't pasted as a bold markdown which is inconsistent with other markdowns.

What is the root cause of that problem?

The regex for bold and italic for example is pretty similar.
https://github.com/Expensify/expensify-common/blob/7351ac7e19f5cc8e694f8eb40768b9c6d6302852/lib/ExpensiMark.ts#L558-L564

The difference in bold markdown replacement is that it checks the <strong> or <b> HTML style attribute and doesn't render it as bold if the style doesn't have a font-weight of bold or 700.

https://github.com/Expensify/expensify-common/blob/7351ac7e19f5cc8e694f8eb40768b9c6d6302852/lib/ExpensiMark.ts#L565-L592

It's to fix #41109 where copying text from gdocs is rendered as bold because gdocs text HTML is b but with a style of font-weight: 400.

The problem with the current bold replacement logic is that if a style attribute is found on the HTML tag, then the decision to render it as bold or not relies on the style attribute even though there is no font-weight style found. This causes any bold HTML tag that has a style but no font-weight to be rendered as not bold, for example:

<b>example</b> rendered as bold
<b style="font-size:10px">example</b> not rendered as bold
<b style="font-size:10px; font-weight:bold">example</b> rendered as bold

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

We must decide whether to render it as bold or not based on the style attribute only if the style has font-weight value, otherwise, we will render it as bold. To do that, update the regex [1] [2] to:

/style="([^"]*?\bfont-weight:\s*(\d+|bold|normal)[^"]*?)"/

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01e87ca27ee2372740

[melvin-bot]

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

[melvin-bot]

@sakluger, @rushatgabhane Eep! 4 days overdue now. Issues have feelings too...