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.

[Jag96]

Thanks for clarifying, that all sounds good. For the control + c copy and your linked comment to point 3, would the existing behavior remain the same after your change? If so, I think the above plan is fine, since we do not want to allow users to enter HTML in the message field. Updating control + c to work will require a larger discussion since we'll have to figure out how to handle that case, so I'd rather just have this issue handle fixing the Copy to clipboard for all platforms which I believe @parasharrajat's proposal does.

@jasperhuangg can you have a look and see if you agree?

Also, since the control + c discussion has come up multiple times, I've created a slack post for the bug here.

[mananjadhav]

There's a slack post on concerns with MD on pasted links

https://expensify.slack.com/archives/C01GTK53T8Q/p1630695075427100

Might want to address it with this issue.

[Jag96]

Thanks for the context, I've commented in slack, I think that should be a separate issue w/ a separate discussion.

[MelvinBot]

@jasperhuangg, @bfitzexpensify Huh... This is 4 days overdue. Who can take care of this?

[MelvinBot]

@jasperhuangg, @bfitzexpensify 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[MelvinBot]

@jasperhuangg, @bfitzexpensify 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[jasperhuangg]

Plate is full with User-Created Policy Rooms stuff and midterm season approaching, going to unassign myself for the time being.

[bfitzexpensify]

I'll reassign this on Monday once we're past the hold.

[bfitzexpensify]

Yes melv, will get this rolling on monday

[Julesssss]

E/Clipboard PR merged, awaiting E/App PR

[parasharrajat]

There is a silly issue. Npm Installing the package does not work but yarn install works.

[bfitzexpensify]

#6537 in review

[bfitzexpensify]

Issue found in review that will be discussed in Slack.

[quinthar]

Hi! I'm coming into this late, and having a hard time figuring out what the final plan is. I would think there should only be two outputs:

1. Pasting into an HTML field (eg, Gmail, Google Docs) would paste HTML
2. Pasting into a text field (eg, Github, WhatsApp) would paste Markdown

However, it seems from the above discussion this is not what we're doing, though I can't quite figure out what we are doing. Can someone summarize the final plan?

[parasharrajat]

So we planned to copy the HTML markup of the message in the clipboard so that we can get the native formatting based on the app we use.
for e.g.

1. HTML for Gmail.
2. Markdown for our app.
3. Text for Whatsapp.

But we hit a bottleneck wherein our Android app pasting HTML shows formatted text like slack and we don't have a direct way to block the direct pasting of HTML in composer.

[Julesssss]

I know that you've spent some time on the initial PR, but perhaps we should return to the proposal stage, as it seems we need to rethink this solution. What do you think @parasharrajat?

[parasharrajat]

Yeah, now my thoughts are just saying markdown in the clipboard as text which will work fine for most of the providers which accept MD but not for Gmail and locations which accept text.

I will try to give some time this week to explore it further and come up with a proper plan and all the options that we can do.

[Julesssss]

Makes sense, we can further improve later on if we have further ideas.

[Julesssss]

Hi @parasharrajat, any updates here?

[parasharrajat]

Sorry, didn't get more time to look into this. But I can only suggest saving MD as text. I didn't find any way to disable HTML pasting. I will update the PR asap if you are fine with the approach.

If that does not sound good. I request you to reopen this issue to other contributors.

[parasharrajat]

I will update the PR today to save MD into the clipboard based on #5125 (comment). Sorry I missed that comment earlier.

[mallenexpensify]

Just ran into this issue again today and was frustrated, it was for the below. In Slack, the text was added and the emoji wasn't, which seems like a good solution, at least to start so we can paste in text with emoji and the most important part will show

The shelters there are standard size, so when you’re ready, we can just flip the switch and turn them on. 😊

[parasharrajat]

I will update the PR to store MD as of now. I was trying to manage the HTML yesterday but there are a few issues. So I think MD copy would be fine at least.

Just ran into this issue again today and was frustrated, it was for the below. In Slack, the text was added and the emoji wasn't, which seems like a good solution, at least to start so we can paste in text with emoji and the most important part will show

That is something needs to be build into the app. Slack usages images as emojis and our app use pure text emojies.

So we will have to add new code to manage that copy pasting. Unfortunately its not part of this issue. Let me know if you want that to be done also. I can submit a small proposal here for the change and add that into the PR.

[parasharrajat]

@Julesssss I just checked that this part is already done

App/src/pages/home/report/ContextMenu/ContextMenuActions.js

Lines 54 to 63 in 1d72a5e

	const parser = new ExpensiMark();
	const reportMarkdown = parser.htmlToMarkdown(html);
	const text = selection || reportMarkdown;
	const isAttachment = _.has(reportAction, 'isAttachment')
	? reportAction.isAttachment
	: ReportUtils.isReportMessageAttachment(text);
	if (!isAttachment) {
	Clipboard.setString(text);

I have closed my PR #6537 as HTML pasting had issues. Also, we will not need changes from our clipboard fork where I added HTML copy/paste support.

Please let me know what are the next steps?

[Julesssss]

Hi @parasharrajat, I'm a bit confused but it sounds like we don't need to make any changes?

we will not need changes from our clipboard fork

Is this something that will be unused now? If so we should probably clear that up and then we can pay out the issue.

[parasharrajat]

Is this something that will be unused now?

Yeah, maybe just revert the PRs from the fork. I am not able to find the fork as well.

[parasharrajat]

I think we can close this now. @Julesssss

[bfitzexpensify]

Re-hired you @parasharrajat (job had closed). Will pay out once you accept.