-
Notifications
You must be signed in to change notification settings - Fork 2.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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';
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe we should have a function like
function isCommentTag(nodeTag) {
return nodeTag === 'email-comment' || nodeTag === 'comment';
}
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice fix, looking good 👍
Removed hold for https://github.com/Expensify/Web-Expensify/pull/33993 (it has been deployed to production).. fixing conflicts now. |
65fe23e
Update: had to resolve conflicts |
Bump, had to resolve conflicts, need an approval again to get this merged :) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
✋ 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
\n
in between the html of the email. Thewhitespace: pre
cause these\n
to be rendered as empty lines.This PR is applying
whitespace: pre
to messages that don't havesource: "email"
andwhitespace: normal
for messages that have it. Email clients don't usewhitespace: pre
when 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>
"Expensify rID:<replace-chat-id-here>" <postmaster@sandboxbdd8eb86efaa4dd68b56e83b7b379bd9.mailgun.org>
QA (Production)
https://new.expensify.com/r/<chat ID>
replies+<replace-your-chat-id-here>@expensify.com
PR Review Checklist
Contributor (PR Author) Checklist
### Fixed Issues
section aboveTests
sectionQA steps
sectiontoggleReport
and notonIconClick
)src/languages/*
filesSTYLE.md
) were followedAvatar
, I verified the components usingAvatar
are working as expected)/** comment above it */
displayName
propertythis
properly so there are no scoping issues (i.e. foronClick={this.submit}
the methodthis.submit
should be bound tothis
in the constructor)this
are necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);
ifthis.submit
is never passed to a component event handler likeonClick
)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)PR Reviewer Checklist
### Fixed Issues
section aboveTests
sectionQA steps
sectiontoggleReport
and notonIconClick
).src/languages/*
filesSTYLE.md
) were followed/** comment above it */
displayName
propertythis
properly so there are no scoping issues (i.e. foronClick={this.submit}
the methodthis.submit
should be bound tothis
in the constructor)this
are necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);
ifthis.submit
is never passed to a component event handler likeonClick
)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)Screenshots
Web
Mobile Web
Desktop
iOS
Android