[WIP]Feature: Copy Markdown/HTML support

[parasharrajat]

Details

Fixed Issues

$ #5125

Tests | QA Steps

1. Go any conversation.
2. Add a message that has markup.

**bold message** with mixed context
> Quote as well.
_italice_ fun
**More bold**

3. Click the copy to clipboard option from the contextMenu.
4. Try pasting in Slack. You should see formatted text.
5. Try pasting in E/app composer. You should see Markdown as above.
6. Try Gamil, You should see formatted text.
7. Try WhatsApp, you should see text.

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Mobile Web

Desktop

iOS

Android

...on the way

[Julesssss]

@parasharrajat the code looks fine, but a Unit test is failing. It would also be good to understand why yarn was necessary for our Clipboard fork.

[parasharrajat]

Hey @Julesssss, I am still testing it. I will let you when ready.

We don't need yarn after I fixed the issue on our fork.

[Julesssss]

Ah, it looked ready to me. Could you please switch it to WIP for the moment?

I saw the following error when running npm i, but if this is due to still being WIP then pls ignore.

[parasharrajat]

Blocker:

1. (Android) Pasting copied HTML into Composer shows HTML formatted text instead of Markdown. The question here is that HTML can be directly pasted into the composer but there is no event to detect the paste.

We need to handle paste just like we do on the Web and convert HTML to markdown. But there is no straight way to capture paste. All hacks. RN has not implemented this.

2. As you said above, the clipboard now needs yarn to build internal libs. I think we may have to revert to the new changes you pulled from the master. I can implement my own code for the web.

[Julesssss]

Ah, okay. Let's forget 2 for the moment.

The question here is that HTML can be directly pasted into the composer but there is no event to detect the paste.

Couldn't we detect paste manually by comparing the Clipboard data with the current TextInput value when the prop changes? It's definitely hacky though.

[parasharrajat]

Yeah, I am also leaning towards the same approach. I will update it.

[parasharrajat]

Update: I have hit a bottleneck. Changing the copied content before pasting on Native is really hacky. But we definitely need a way to do that. It could require making the composer Controlled.

[parasharrajat]

Ok, It seems that we can intercept the copy-past via making the Composer controlled.
Next problem is that Text that is pasted in the composer in Native is HTML formatted. but when we try to get its content that is Text which includes the proper spacing and newlines as pasted.
Now the clipboard contains the HTML data so we need a way to exactly match them to know that is pasted. Thus I need to covert the clipboard HTML to text first and then compare it to the text from Composer.

I have a doubt that if we are going to use a custom conversion function/lib it could be different from the text that we got from native TextInput as this comes from the native platform.

I want to ask what should I use to convert the HTML to text.

[Julesssss]

Damn, that's not ideal.

I'm not exactly sure how to move forward here, so I would suggest that we take this to Slack to see if anyone else has an alternative suggestion here. With workarounds on top of workarounds, it might not be worth implementing this after all.

[parasharrajat]

Sure, I will discuss this as soon as possible.

[parasharrajat]

Sorry for the delay here. I am working on a major refactor for one of the old PR. I will get back to this next week after I am back from vacation.

[parasharrajat]

Opening a new PR. Changes here are unnecesary.