Markdown - Copied text (with markdown) does not show the formatting when pasted

[isagoico]

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. Send several messages each with a different markdown (bold, strike, italic, and hyperlink)
2. Copy and paste each of the messages in compose box

Expected Result:

HTML Markdown should be copied and pasted.

Actual Result:

HTML Markdown is not copied and user has to add the markdown again.

Workaround:

User has to manually add the markdown again.

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.0.94-0

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

copy-to-clipboard-formatting.mp4

Issue reported by: @mananjadhav
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1630818514450000

View all open jobs on GitHub

Similar issue was raised here #3790 and fixed here #4009 (CC @parasharrajat / @Jag96)

[MelvinBot]

Triggered auto assignment to @jasperhuangg (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[Jag96]

From the slack thread, I don't think this is a regression and I believe it falls under item 3 of this comment, so we can let this go through the normal process.

[mananjadhav]

Proposal

The solution would be to convert the copied text to markdownText.

In ContextMenuActions.js, we update the onPress event for 'Copy to Clipboard'

fixed-with-formatting.mp4

[jasperhuangg]

@mananjadhav Your solution looks good to me! Let me get in touch with someone to get you a job posted on Upwork; feel free to submit a PR and request me for review when that happens!

[MelvinBot]

Triggered auto assignment to @bfitzexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[mananjadhav]

Thanks @jasperhuangg I'll do that.

[parasharrajat]

I don't think we should do this in this way. More https://expensify.slack.com/archives/C01GTK53T8Q/p1631081985061300?thread_ts=1630818514.450000&cid=C01GTK53T8Q.

I already reported it here #4009 (comment).

I propose a different solution without breaking everything.
https://expensify.slack.com/archives/C01GTK53T8Q/p1631083001062000?thread_ts=1630818514.450000&cid=C01GTK53T8Q

[mananjadhav]

@jasperhuangg @Jag96 Before I start on this, I would recommend checking @parasharrajat's proposal. It seems there's some old discussion and both are in different directions. You guys can evaluate which one to go ahead and then accordingly one of us will submit the PR.

[Jag96]

@parasharrajat brings up a great point, I agree that we don't want to create copy/paste issues for pasting outside of the app.

From the slack thread:

I will add HTML as a MIME type to the clipboard as well as string. it won't block the apps that don't understand the MD.
Both Android and IOS understands MIME Types same as web. This will allow pasting html into gmail and text on Whatsapp (it does not take html AFAIK).
We will have to extend the https://www.npmjs.com/package/@react-native-community/clipboard lib to allow setting html for all platforms.

text/plain

text of the the message

text/html

text of the <b>message</b>

@parasharrajat could you could help me understand what the result would be then for the following situations after your fix is completed?

1. Copying from our app via Copy to Clipboard and pasting into the message field in our app
2. Copying from our app via Copy to Clipboard and pasting into the message field in Slack
3. Copying from our app via Copy to Clipboard and pasting into the message field in Gmail
4. Copying from our app via Copy to Clipboard and pasting into the message field in Whatsapp

Also a couple of questions:

1. Would the behavior for the above scenarios be different on iOS/Android?
2. Would copying the text via control + c or command + c on web/desktop yield different results?
3. For the updates to the clipboard repo, we have a fork that can be updated here, so I assume you'd update that?

[parasharrajat]

1. Copying from our app via Copy to Clipboard and pasting into the message field in our app
   MD
2. Copying from our app via Copy to Clipboard and pasting into the message field in Slack
   HTML
3. Copying from our app via Copy to Clipboard and pasting into the message field in Gmail
   HTML
4. Copying from our app via Copy to Clipboard and pasting into the message field in Whatsapp
   Text

---

1. Would the behavior for the above scenarios be different on iOS/Android?

I think it would be the same for other apps if they intercept pasted HTML on iOS/Android. For example, try copying and pasting HTML in Gmail.

2. Would copy the text via control + c or command + c on web/desktop yield different results?

This is another issue which I mentioned #4009 (comment) on point 3.

When I copy the existing sent message which is formatted and pastes it. it does not convert to formatted MD strings. The main issue here is that we don't use HTML semantic tags for rendering. Every type of element is made with div and styling rules in our app. Which we can't really interpret ATM.

To correct this we have to use tags as a,b, em,i for formatting in our app.

3. For the updates to the clipboard repo, we have a fork that can be updated here, so I assume you'd update that?
   The plan is to do so.