[Feature] Support to html pasting on web by parasharrajat · Pull Request #4009 · Expensify/App

parasharrajat · 2021-07-13T17:49:03Z

Details

Fixed Issues

$ Fixes #3790

Tests | QA Steps

Copy the following text:

Bold text
italic text
~~Strikethrough text~~

Paste the text in e.cash

Tested On

Screenshots

Web | Desktop

paste-w.mp4

Mobile Web

iOS

Android

…-html

Jag96

A couple of nitpicks but it's working well!

Jag96 · 2021-07-14T01:49:57Z

src/components/TextInputFocusable/index.js

        const {files, types} = event.clipboardData;
        const TEXT_HTML = 'text/html';
-        const TEXT_PLAIN = 'text/plain';
+        const pastedHTML = event.clipboardData.getData(TEXT_HTML);


I'd move this inside the types.includes(TEXT_HTML) check since it's only used in that context

Yes. Thanks

Jag96 · 2021-07-14T01:50:24Z

src/components/TextInputFocusable/index.js

            const domparser = new DOMParser();
-            const embededImages = domparser.parseFromString(event.clipboardData.getData(TEXT_HTML), TEXT_HTML).images;
-            const pastedText = event.clipboardData.getData(TEXT_PLAIN);
+            const embededImages = domparser.parseFromString(pastedHTML, TEXT_HTML).images;


Suggested change

const embededImages = domparser.parseFromString(pastedHTML, TEXT_HTML).images;

const embeddedImages = domparser.parseFromString(pastedHTML, TEXT_HTML).images;

Yup. It was already there but I will update.

parasharrajat · 2021-07-14T02:21:29Z

@Jag96 While handling all this I found a couple of issues.

If we edited the formatted text I see MD syntax but clicking save does not show formatting anymore.
There is an extra Line Break added on paste. I debugged the main cause and found we are getting newlines via HTMLparser.
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. Which we can't really interpret ATM.

Do you suggest they need solving and if so, How can I help?

parasharrajat · 2021-07-14T02:48:11Z

Updated.

Jag96 · 2021-07-14T02:51:45Z

Good finds!

1 sounds like a regression to me, so I think that would be a blocker in this case and something we should look into.
For 2, I tested on Firefox and Chrome and it looks like Firefox has extra line breaks in the HTML whereas Chrome doesn't. Could that be the issue there? If our code is adding unnecessary line breaks I think that'd be a blocker, but if it's just the way the HTML is copied from the browser I don't think that should block this PR. Looking into this a bit more, I do see that there are <br> tags in the HTML when pasting on chrome (using the same text in the issue description), so perhaps there is an issue w/ the newline regex causing it to fail in this case?
For 3 that sounds like a different issue and something to discuss in #expensify-open-source since I think that will be a bit more involved, so I wouldn't block this PR on that.

Thoughts?

parasharrajat · 2021-07-14T02:55:11Z

Ok. I agree. Should I add those fixes in this PR?

Jag96 · 2021-07-14T02:57:01Z

I think fixes for 1 and 2 should be added to this PR, assuming 2 requires a fix.

parasharrajat · 2021-07-14T03:26:04Z

@Jag96 Just opened a new PR for 2. Expensify/expensify-common#393. Could be merged quickly and we can move forward here.
1's fix is done here.

parasharrajat · 2021-07-14T03:41:09Z

Okay, I have updated the E-common here. and 1 & 2 is fixed

parasharrajat · 2021-07-14T04:09:28Z

Please let me know if anything else is needed here.

Jag96 · 2021-07-14T04:30:35Z

1 looks good, for 2 it looks like when I copy HTML that contains a <br> tag it doesn't add the line breaks if the <br> tag has styles. For example, copying the following from #3790:

Results in the following html value inside handlePastedHTML

"<meta charset='utf-8'><strong style=\"box-sizing: border-box; font-weight: 600; color: rgb(36, 41, 46); font-family: -apple-system, system-ui, &quot;Segoe UI&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;\">Bold text</strong><br style=\"box-sizing: border-box; color: rgb(36, 41, 46); font-family: -apple-system, system-ui, &quot;Segoe UI&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;\"><em style=\"box-sizing: border-box; color: rgb(36, 41, 46); font-family: -apple-system, system-ui, &quot;Segoe UI&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;; font-size: 14px; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;\">italic text</em><br style=\"box-sizing: border-box; color: rgb(36, 41, 46); font-family: -apple-system, system-ui, &quot;Segoe UI&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;\"><del style=\"box-sizing: border-box; color: rgb(36, 41, 46); font-family: -apple-system, system-ui, &quot;Segoe UI&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);\">Strikethrough text</del>"

Before this PR, pasting the content would include these line breaks, but now it strips them:

Before	After

However, this just looks like a bug in the regex and isn't really tied to the core of this PR, so I won't block on it and I'll open a new issue for this.

OSBotify · 2021-07-14T04:31:47Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

parasharrajat · 2021-07-14T05:17:15Z

Yeah @Jag96 Do you want me to correct the Br tag regex

OSBotify · 2021-07-14T19:52:24Z

🚀 Deployed to staging in version: 1.0.77-6🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅

Jag96 · 2021-07-14T22:04:43Z

@parasharrajat sounds good, feel free to leave a comment on #4052 so I can assign you, I'll invite you to the Upwork job in the meantime

isagoico · 2021-07-16T11:22:36Z

@Jag96 ~~Since this PR is failing because of the issue above, should we block prod deploy on this? or can we check it off the PR list and test this again when the fix is merged?~~ Ignore me on this, I was setting up QA and had not reached #4067 in the list yet 🤦

Jag96 · 2021-07-16T17:00:43Z

No worries! Now that #4067 is on staging that'll be the latest fix

OSBotify · 2021-07-23T21:14:52Z

🚀 Deployed to production in version: 1.0.79-4🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

sonialiap · 2023-02-02T01:07:10Z

An error was identified that was linked to this PR - #9505

parasharrajat added 4 commits July 10, 2021 16:16

support to html pasting on web

aca9f05

update E-common reference

d0aaacf

updated e-common & fix bug

f134fae

Merge branch 'main' of github.com:Expensify/Expensify.cash into paste…

3bb39d8

…-html

parasharrajat requested a review from a team as a code owner July 13, 2021 17:49

MelvinBot requested review from Jag96 and removed request for a team July 13, 2021 17:49

Jag96 suggested changes Jul 14, 2021

View reviewed changes

refactor

d483fa1

fix parsing on edit

c30e5ce

parasharrajat mentioned this pull request Jul 14, 2021

Fix newline parsing in MD to HTML parser Expensify/expensify-common#393

Merged

update e-common

86f3766

Jag96 approved these changes Jul 14, 2021

View reviewed changes

Jag96 merged commit f1ea424 into Expensify:main Jul 14, 2021

Jag96 mentioned this pull request Jul 14, 2021

[Tracking Issue] Implement HTML -> Markdown conversions in Expensimark #3047

Closed

10 tasks

This was referenced Jul 14, 2021

Deploy Checklist: Expensify.cash 2021-07-09 #3958

Closed

Deploy Checklist: Expensify.cash 2021-07-14 #4046

Closed

Jag96 mentioned this pull request Jul 14, 2021

[HOLD for payment July 22] Update line break regex for HTML->Markdown to support break tags with styles #4052

Closed

rdjuric mentioned this pull request Jul 16, 2021

Pasted content is placed at the beginning of the message and not where the cursor is positioned and undo (CTR+Z) is not working #4120

Closed

This was referenced Sep 7, 2021

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

Closed

[HOLD for payment 2022-01-11] [$1000] Copying messages with markdown via CTRL + C does not keep formatting #5142

Closed

pecanoro mentioned this pull request Feb 1, 2023

[HOLD for payment 2022-12-08] [$1000] Try to copy and paste an emoji from Slack into the chat editor shows an error #9505

Closed

	const embededImages = domparser.parseFromString(pastedHTML, TEXT_HTML).images;
	const embeddedImages = domparser.parseFromString(pastedHTML, TEXT_HTML).images;

Conversation

parasharrajat commented Jul 13, 2021 • edited by lanitochka17 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Details

Fixed Issues

Tests | QA Steps

Tested On

Screenshots

Web | Desktop

Mobile Web

iOS

Android

Uh oh!

Jag96 left a comment

Choose a reason for hiding this comment

Uh oh!

Jag96 Jul 14, 2021

Choose a reason for hiding this comment

Uh oh!

parasharrajat Jul 14, 2021

Choose a reason for hiding this comment

Uh oh!

Jag96 Jul 14, 2021

Choose a reason for hiding this comment

Uh oh!

parasharrajat Jul 14, 2021

Choose a reason for hiding this comment

Uh oh!

parasharrajat commented Jul 14, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

parasharrajat commented Jul 14, 2021

Uh oh!

Jag96 commented Jul 14, 2021

Uh oh!

parasharrajat commented Jul 14, 2021

Uh oh!

Jag96 commented Jul 14, 2021

Uh oh!

parasharrajat commented Jul 14, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

parasharrajat commented Jul 14, 2021

Uh oh!

parasharrajat commented Jul 14, 2021

Uh oh!

Jag96 commented Jul 14, 2021

Uh oh!

OSBotify commented Jul 14, 2021

Uh oh!

parasharrajat commented Jul 14, 2021

Uh oh!

OSBotify commented Jul 14, 2021

Uh oh!

Jag96 commented Jul 14, 2021

Uh oh!

isagoico commented Jul 16, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Jag96 commented Jul 16, 2021

Uh oh!

OSBotify commented Jul 23, 2021

Uh oh!

sonialiap commented Feb 2, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

parasharrajat commented Jul 13, 2021 •

edited by lanitochka17

Loading

parasharrajat commented Jul 14, 2021 •

edited

Loading

parasharrajat commented Jul 14, 2021 •

edited

Loading

isagoico commented Jul 16, 2021 •

edited

Loading