Remove whitespace: pre because of extra empty lines bug #9195
Conversation
|
@parasharrajat since you are somewhat familiarized with the problem... do you know of any regressions this PR could cause by removing |
|
Update: ❗ I think this is not avoid copy/pasting or not... is about a message containing a code block or not I can see that this breaks in some cases when you copy/paste HTML stuff that had white spaces. I.e. copy the sample text from test step 3) and paste it as comment using
The whitespaces are simply gone when looking at the DOM. The spaces seem to be getting lost in the rendering process because I can see them coming from the backend in the Report_History: And this is one that looks fine:
I'm not sure about what is the difference yet. Update: ❗ I think this is not avoid copy/pasting or not... is about a message containing a code block or not |
|
I will dig this over the weekend and let you know. Thanks for waiting. |
…aldo_fix-empty-lines
|
The easiest way to reproduce is to add this line in the promise handler for
data.history = [{"person":[{"type":"TEXT","style":"strong","text":"aldo+test-spacing1@expensifail.com"}],"actorEmail":"aldo+test-spacing1@expensifail.com","actorAccountID":11030556,"message":[{"type":"COMMENT","html":" <div class=\"WordSection1\"> <p class=\"MsoNormal\">Hi SomeName, <\/p><p><\/p> <p class=\"MsoNormal\"><\/p><p>\u00a0<\/p> <p class=\"MsoNormal\">Will tomorrow at 34 est. work?<\/p><p><\/p> <p class=\"MsoNormal\"><\/p><p>\u00a0<\/p> <p class=\"MsoNormal\">Thanks, Test<\/p><p><\/p> <p class=\"MsoNormal\"><\/p><p>\u00a0<\/p> <\/div>xxxxxx xxxxxxxx xx xxx: xxxx x-xxxx xxx xxxxxxxxxx xx xxxxxxxxxxxxx xx xxxxxxxxxxxx xxxxx x.x. xxx, xx xxx xxxxxxx xxxxxxx xx xx xxxxxxxxx xx xxxxxxx x xxxxxxxxxx xxxxxxx xx xxxxxxx. xxx xxx xxxxxx xxx xx xxxxxxx xxxxxxxxxxx xxx xxxxxxxxxxx xxxxxxxx xxxx xxxxx xxx (xxxxxx xxx xxx xxxxx.xxx xxxxxxx, xxxxx xxxxxx x-xxxx xxxxxxxxxxx xxxxxxx x xxxxxxxx xxxxxxx) xx xxxx x-xxxx xxxxxxx xx xxxxxxxxxx xxxx xxxxxxx xx xxxxxxxxxxxxxxxx@xxxxx.xxx. xx xxx xx xx, xxx xxxxxx xx xxxx xxxxxxx xxxx xx xxxxxxxx xxxxxxxx. xxx xxxxxxxxx xxxxxx xxxxxxx xx 225 x xxxxxx xxxxx, xxxxx 2600, xxxxxxx, xx 60602-4903. xxxx xxxxx xxxxxxx xx xxxx xxxxx xxx xx xxx xx xxx xxxxxxxxxxxx xxx xxx xxxxxxx xxxxxxxxxx xx xxxxxxxxxxxx xxxxxxxxxxx xx xxxxx xxxxxxxxxxx xxxxxx xxxx xxxxxxxxxx xxxxx xxxxxxxxxx xxx. xx xxx xxx xxx xxx xxxxxxxx xxxxxxxxx, xxxxxx xxxxxx xxx xxxxxx xx xxxxx xxxxx xxxxxxxxxxx xxx xxxxxx xxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xx xxxxxxxxxx xx xxxxxx. xxxx xxxxx xx xxx xxxxxxxx xx xx x xxxxxxxx xx xxxxx xxxxxxx xxxxxxx xxxxxxxxxx, xxx xxx xxx xxxxxx xxxxxxxxx xx xxxx xxxxx xxxxxx xxx xx xxxxxxxxx xx x xxxxxx xxx xxxxxxx xxxxxx xxxxxxxxx xxxxxx. xxxxx xxx.xxxxx.xxx\/xxxxxxxxxx xxx xxxx xxxxxxxxxxx xxxxx xxxxx xxx xxx xxx xxxxxxxxxxxx. ","text":" Hi SomeName, \u00a0 Will tomorrow at 34 est. work? \u00a0 Thanks, Test \u00a0 xxxxxx xxxxxxxx xx xxx: xxxx x-xxxx xxx xxxxxxxxxx xx xxxxxxxxxxxxx xx xxxxxxxxxxxx xxxxx x.x. xxx, xx xxx xxxxxxx xxxxxxx xx xx xxxxxxxxx xx xxxxxxx x xxxxxxxxxx xxxxxxx xx xxxxxxx. xxx xxx xxxxxx xxx xx xxxxxxx xxxxxxxxxxx xxx xxxxxxxxxxx xxxxxxxx xxxx xxxxx xxx (xxxxxx xxx xxx xxxxx.xxx xxxxxxx, xxxxx xxxxxx x-xxxx xxxxxxxxxxx xxxxxxx x xxxxxxxx xxxxxxx) xx xxxx x-xxxx xxxxxxx xx xxxxxxxxxx xxxx xxxxxxx xx xxxxxxxxxxxxxxxx@xxxxx.xxx. xx xxx xx xx, xxx xxxxxx xx xxxx xxxxxxx xxxx xx xxxxxxxx xxxxxxxx. xxx xxxxxxxxx xxxxxx xxxxxxx xx 225 x xxxxxx xxxxx, xxxxx 2600, xxxxxxx, xx 60602-4903. xxxx xxxxx xxxxxxx xx xxxx xxxxx xxx xx xxx xx xxx xxxxxxxxxxxx xxx xxx xxxxxxx xxxxxxxxxx xx xxxxxxxxxxxx xxxxxxxxxxx xx xxxxx xxxxxxxxxxx xxxxxx xxxx xxxxxxxxxx xxxxx xxxxxxxxxx xxx. xx xxx xxx xxx xxx xxxxxxxx xxxxxxxxx, xxxxxx xxxxxx xxx xxxxxx xx xxxxx xxxxx xxxxxxxxxxx xxx xxxxxx xxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xx xxxxxxxxxx xx xxxxxx. xxxx xxxxx xx xxx xxxxxxxx xx xx x xxxxxxxx xx xxxxx xxxxxxx xxxxxxx xxxxxxxxxx, xxx xxx xxx xxxxxx xxxxxxxxx xx xxxx xxxxx xxxxxx xxx xx xxxxxxxxx xx x xxxxxx xxx xxxxxxx xxxxxx xxxxxxxxx xxxxxx. xxxxx xxx.xxxxx.xxx\/xxxxxxxxxx xxx xxxx xxxxxxxxxxx xxxxx xxxxx xxx xxx xxx xxxxxxxxxxxx. ","isEdited":false}],"originalMessage":{"html":" <div class=\"WordSection1\"> <p class=\"MsoNormal\">Hi SomeName, <\/p><p><\/p> <p class=\"MsoNormal\"><\/p><p>\u00a0<\/p> <p class=\"MsoNormal\">Will tomorrow at 34 est. work?<\/p><p><\/p> <p class=\"MsoNormal\"><\/p><p>\u00a0<\/p> <p class=\"MsoNormal\">Thanks, Test<\/p><p><\/p> <p class=\"MsoNormal\"><\/p><p>\u00a0<\/p> <\/div>xxxxxx xxxxxxxx xx xxx: xxxx x-xxxx xxx xxxxxxxxxx xx xxxxxxxxxxxxx xx xxxxxxxxxxxx xxxxx x.x. xxx, xx xxx xxxxxxx xxxxxxx xx xx xxxxxxxxx xx xxxxxxx x xxxxxxxxxx xxxxxxx xx xxxxxxx. xxx xxx xxxxxx xxx xx xxxxxxx xxxxxxxxxxx xxx xxxxxxxxxxx xxxxxxxx xxxx xxxxx xxx (xxxxxx xxx xxx xxxxx.xxx xxxxxxx, xxxxx xxxxxx x-xxxx xxxxxxxxxxx xxxxxxx x xxxxxxxx xxxxxxx) xx xxxx x-xxxx xxxxxxx xx xxxxxxxxxx xxxx xxxxxxx xx xxxxxxxxxxxxxxxx@xxxxx.xxx. xx xxx xx xx, xxx xxxxxx xx xxxx xxxxxxx xxxx xx xxxxxxxx xxxxxxxx. xxx xxxxxxxxx xxxxxx xxxxxxx xx 225 x xxxxxx xxxxx, xxxxx 2600, xxxxxxx, xx 60602-4903. xxxx xxxxx xxxxxxx xx xxxx xxxxx xxx xx xxx xx xxx xxxxxxxxxxxx xxx xxx xxxxxxx xxxxxxxxxx xx xxxxxxxxxxxx xxxxxxxxxxx xx xxxxx xxxxxxxxxxx xxxxxx xxxx xxxxxxxxxx xxxxx xxxxxxxxxx xxx. xx xxx xxx xxx xxx xxxxxxxx xxxxxxxxx, xxxxxx xxxxxx xxx xxxxxx xx xxxxx xxxxx xxxxxxxxxxx xxx xxxxxx xxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xx xxxxxxxxxx xx xxxxxx. xxxx xxxxx xx xxx xxxxxxxx xx xx x xxxxxxxx xx xxxxx xxxxxxx xxxxxxx xxxxxxxxxx, xxx xxx xxx xxxxxx xxxxxxxxx xx xxxx xxxxx xxxxxx xxx xx xxxxxxxxx xx x xxxxxx xxx xxxxxxx xxxxxx xxxxxxxxx xxxxxx. xxxxx xxx.xxxxx.xxx\/xxxxxxxxxx xxx xxxx xxxxxxxxxxx xxxxx xxxxx xxx xxx xxx xxxxxxxxxxxx. "},"avatar":"https:\/\/d2k5nsl2zxldvw.cloudfront.net\/images\/avatars\/avatar_2.png","created":"May 28 2022 9:10am PDT","timestamp":1653754210,"automatic":false,"sequenceNumber":3,"actionName":"ADDCOMMENT","shouldShow":true,"clientID":"","reportActionID":"63777"},{"person":[{"type":"TEXT","style":"strong","text":"aldo+test-spacing1@expensifail.com"}],"actorEmail":"aldo+test-spacing1@expensifail.com","actorAccountID":11030556,"message":[{"type":"COMMENT","html":"0 spaces<br \/> 1 spaces<br \/> 2 spaces<br \/> 3 spaces<br \/> 4 spaces<br \/> <pre>Test<\/pre>","text":"0 spaces 1 spaces 2 spaces 3 spaces 4 spaces Test","isEdited":false}],"originalMessage":{"clientID":"1654303872951187","html":"0 spaces<br \/> 1 spaces<br \/> 2 spaces<br \/> 3 spaces<br \/> 4 spaces<br \/> <pre>Test<\/pre>"},"avatar":"https:\/\/d2k5nsl2zxldvw.cloudfront.net\/images\/avatars\/avatar_2.png","created":"Jun 3 2022 5:51pm PDT","timestamp":1654303873,"automatic":false,"sequenceNumber":2,"actionName":"ADDCOMMENT","shouldShow":true,"clientID":"1654303872951187","reportActionID":"63776"},{"person":[{"type":"TEXT","style":"strong","text":"aldo+test-spacing1@expensifail.com"}],"actorEmail":"aldo+test-spacing1@expensifail.com","actorAccountID":11030556,"message":[{"type":"COMMENT","html":"0 spaces<br \/> 1 spaces<br \/> 2 spaces<br \/> 3 spaces<br \/> 4 spaces","text":"0 spaces 1 spaces 2 spaces 3 spaces 4 spaces","isEdited":false}],"originalMessage":{"clientID":"1654303847866358","html":"0 spaces<br \/> 1 spaces<br \/> 2 spaces<br \/> 3 spaces<br \/> 4 spaces"},"avatar":"https:\/\/d2k5nsl2zxldvw.cloudfront.net\/images\/avatars\/avatar_2.png","created":"Jun 3 2022 5:50pm PDT","timestamp":1654303855,"automatic":false,"sequenceNumber":1,"actionName":"ADDCOMMENT","shouldShow":true,"clientID":"1654303847866358","reportActionID":"63775"},{"actionName":"CREATED","created":"Jun 3 2022 5:39pm PDT","timestamp":1654303194,"avatar":"https:\/\/d2k5nsl2zxldvw.cloudfront.net\/images\/avatars\/avatar_3.png","message":[{"type":"TEXT","style":"strong","text":"__FAKE__"},{"type":"TEXT","style":"normal","text":" created this report"}],"person":[{"type":"TEXT","style":"strong","text":"__FAKE__"}],"automatic":false,"sequenceNumber":0,"shouldShow":true}];You should have the exact same messages I have. Without the changes from this PR you should see:
With the change (remove whitespace:pre) from this PR you will see:
|
|
Sorry, I wasn't able to look into this on the weekend but I will follow up tomorrow. For now, I see that there is a issue with |
|
Looking at the code, I can say that removing What if we convert the When a user replies via email, parse the message and do the necessary conversion before saving. |
|
That is exactly an option I was considering, I'll test it today later
…On Wed, Jun 8, 2022, 11:19 Rajat Parashar ***@***.***> wrote:
Looking at the code, I can say that removing whitespace:pre is not
completely safe. It will not preserve whitespaces in HTML. Your explanation
is correct #8088 (comment)
<#8088 (comment)>.
What if we convert the to normal whitespace.
—
Reply to this email directly, view it on GitHub
<#9195 (comment)>, or
unsubscribe
<https://github.com/notifications/unsubscribe-auth/AU2LVBU5RKQF3Q2TCPRWWHDVODPZZANCNFSM5XCRBU7Q>
.
You are receiving this because you were assigned.Message ID:
***@***.***>
|
|
I gave it a try to converting the For the purpose of testing it quicker, I did it in the front here (ReportActionItemFragment):
I also tested adding |
|
Got it. Then backend would be the only viable option. |
Not necessarily. I'm somewhat confident in that email replies will very often contain And by "backend would be the only viable option", what kind of processing would you suggest? because now we know that just replacing the |
Yeah, it would be too much work. Normally Markup of emails is complex.
Sounds like it will work. Remove the styles from baseFont and apply it to the wrapper. |
A comment flag with source = 'email' should be displayed with whitespace: 'normal';
aldo-expensify
force-pushed
the
aldo_fix-empty-lines
branch
from
3a62b03
to
c7e2d84
Compare
This happens when you type a new message and the message getting rendered is the optimistic data
src/libs/SelectionScraper/index.js
Outdated
| @@ -103,7 +103,7 @@ const replaceNodes = (dom) => { | |||
| } | |||
|
|
|||
| // Adding a new line after each comment here, because adding after each range is not working for chrome. | |||
| if (dom.attribs[tagAttribute] === 'comment') { | |||
| if (dom.attribs[tagAttribute] === 'comment' || dom.attribs[tagAttribute] === 'email-comment') { | |||
There was a problem hiding this comment.
Maybe we should have a function like
function isCommentTag(nodeTag) {
return nodeTag === 'email-comment' || nodeTag === 'comment';
}
aldo-expensify
changed the title
aldo-expensify
changed the title
|
I'll try and remember to check this, but please remind me if I forget to review this once the other PR is merged. |
|
cc @roryabraham can you have a look a this too? since it is related to https://github.com/Expensify/Web-Expensify/pull/33993 😬 |
Co-authored-by: Rory Abraham <47436092+roryabraham@users.noreply.github.com>
|
Update: DRYer code |
@Julesssss I merged the other PR, just letting you know in case you want to review this |
aldo-expensify
changed the title
|
Removed hold for https://github.com/Expensify/Web-Expensify/pull/33993 (it has been deployed to production).. fixing conflicts now. |
aldo-expensify
dismissed stale reviews from Julesssss and roryabraham
via
65fe23e
|
Update: had to resolve conflicts |
|
Bump, had to resolve conflicts, need an approval again to get this merged :) |
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚀 Deployed to production by @luacmartins in version: 1.1.85-8 🚀
|
Details
This PR needs the changes from the PR: https://github.com/Expensify/Web-Expensify/pull/33993 . This PR without PR#33993 shouldn't break anything.
This PR is reverting partially what was done here: https://github.com/Expensify/App/pull/9025/files
There are email clients like outlook that add a bunch of
\nin between the html of the email. Thewhitespace: precause these\nto be rendered as empty lines.This PR is applying
whitespace: preto messages that don't havesource: "email"andwhitespace: normalfor messages that have it. Email clients don't usewhitespace: prewhen showing the email body, they use to force/keep whitespaces.When testing / QA we should make sure that the test / QA from these PRs also passes:
Fixed Issues
$ #8088
Tests
http://localhost:8080/r/<chat ID>0 spaces 1 spaces 2 spaces 3 spaces 4 spaces0 spaces 1 spaces 2 spaces 3 spaces 4 spaces ``` some code ```"Expensify rID:<replace-chat-id-here>" <postmaster@sandboxbdd8eb86efaa4dd68b56e83b7b379bd9.mailgun.org>QA (Production)
https://new.expensify.com/r/<chat ID>0 spaces 1 spaces 2 spaces 3 spaces 4 spaces0 spaces 1 spaces 2 spaces 3 spaces 4 spaces ``` some code ```replies+<replace-your-chat-id-here>@expensify.comPR Review Checklist
Contributor (PR Author) Checklist
### Fixed Issuessection aboveTestssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*filesSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)/** comment above it */displayNamepropertythisproperly so there are no scoping issues (i.e. foronClick={this.submit}the methodthis.submitshould be bound tothisin the constructor)thisare necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);ifthis.submitis never passed to a component event handler likeonClick)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)Avataris modified, I verified thatAvataris working as expected in all cases)PR Reviewer Checklist
### Fixed Issuessection aboveTestssectionQA stepssectiontoggleReportand notonIconClick).src/languages/*filesSTYLE.md) were followed/** comment above it */displayNamepropertythisproperly so there are no scoping issues (i.e. foronClick={this.submit}the methodthis.submitshould be bound tothisin the constructor)thisare necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);ifthis.submitis never passed to a component event handler likeonClick)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)Avataris modified, I verified thatAvataris working as expected in all cases)Screenshots
Web
Mobile Web
Desktop
iOS
Android