fix: unwanted linebreaks added when translating html blockquote to markdown #554

eh2077 · 2023-06-28T03:00:40Z

Fixed Issues

$ Expensify/App#20725

Tests

Go to a chat and add a comment for case 1

==== Case 1: simple quote ===
> one line quote a

> two line quote b
> two line quote b

> quote c with internal line break
> 
> quote c with internal line break

Open the comment in editing mode and verify that the initial draft is same as input.
Select the comment, copy the selection by Ctr/Cmd + C, paste it to composer and verify that it's same as input

case-1.mov
Add a comment for case 2

==== Case 2: quote surrounded by text ===
text a
> quote a

> quote b
text b

text c
> quote c
text c

Repeat step 2 and 3

case-2.mov
Add a comment for case 3

==== Case 3: quote surrounded by inline element ===
_italic a_
> quote a

> quote b
*bold b*

_italic c_
> quote c
*bold c*

Repeat step 2 and 3

case-3.mov
Open w3schools, add following html and run

<!DOCTYPE html>
<html>
<body>

<p>==== Case 4A: quote surrounded by block element ===</p>

<pre>code fence a</pre>
<blockquote>
quote a
</blockquote>

<br />

<blockquote>
quote b
</blockquote>
<pre>code fence b</pre>

<br />

<pre>code fence c</pre>
<blockquote>
quote c
</blockquote>
<pre>code fence c</pre>

</body>
</html>

Select and copy html from right hand side of w3schools page and paste it to composer
Verify that the composer input is equal to following input

==== Case 4A: quote surrounded by block element ===
```
code fence a
```
> quote a

> quote b
```
code fence b
```

```
code fence c
```
> quote c
```
code fence c
```

case-4a-w3c.mov

Repeat Step 8 with following html

<!DOCTYPE html>
<html>
<body>

<p>==== Case 4B: quote surrounded by block element ===</p>

<h1>h1 a</h1>
<blockquote>
quote a
</blockquote>

<br />

<blockquote>
quote b
</blockquote>
<h1>h1 b</h1>

<br />

<h1>h1 c</h1>
<blockquote>
quote c
</blockquote>
<h1>h1 c</h1>

</body>
</html>

Repeat step 9
Verify that the composer input is equal to following input

==== Case 4B: quote surrounded by block element ===
# h1 a
> quote a

> quote b
# h1 b

# h1 c
> quote c
# h1 c

case-4b-w3c.mov

QA

Go to a chat and add comment

==== Case 1: simple quote ===
> one line quote a

> two line quote b
> two line quote b

> quote c with internal line break
> 
> quote c with internal line break

==== Case 2: quote surrounded by text ===
text a
> quote a

> quote b
text b

text c
> quote c
text c

==== Case 3: quote surrounded by inline element ===
_italic a_
> quote a

> quote b
*bold b*

_italic c_
> quote c
*bold c*

Open the comment in editing mode and verify that the initial draft is same as input.
Test copy and pasting
3a. On Web and Desktop, select the comment, copy the selection by Ctr/Cmd + C, paste it to composer and verify that it's same as input
3b. On mobile, long press comment, copy to clipboard, pasting in composer and verify that it's same as input
(Perform step 4-9 on Web only) Open w3schools, add following html and run

<!DOCTYPE html>
<html>
<body>

<p>==== Case 4A: quote surrounded by block element ===</p>

<pre>code fence a</pre>
<blockquote>
quote a
</blockquote>

<br />

<blockquote>
quote b
</blockquote>
<pre>code fence b</pre>

<br />

<pre>code fence c</pre>
<blockquote>
quote c
</blockquote>
<pre>code fence c</pre>

</body>
</html>

Select and copy html from right hand side of w3schools page and paste it to composer
Verify that the composer input is equal to following input

==== Case 4A: quote surrounded by block element ===
```
code fence a
```
> quote a

> quote b
```
code fence b
```

```
code fence c
```
> quote c
```
code fence c
```

case-4a-w3c.mov

Repeat Step 4 with following html

<!DOCTYPE html>
<html>
<body>

<p>==== Case 4B: quote surrounded by block element ===</p>

<h1>h1 a</h1>
<blockquote>
quote a
</blockquote>

<br />

<blockquote>
quote b
</blockquote>
<h1>h1 b</h1>

<br />

<h1>h1 c</h1>
<blockquote>
quote c
</blockquote>
<h1>h1 c</h1>

</body>
</html>

Repeat step 5
Verify that the composer input is equal to following input

==== Case 4B: quote surrounded by block element ===
# h1 a
> quote a

> quote b
# h1 b

# h1 c
> quote c
# h1 c

case-4b-w3c.mov

PR Author Checklist

Screenshots/Videos

Web

web.mov

case-4a-w3c.mov

case-4b-w3c.mov

Mobile Web - Chrome

mobile-chrome.mp4

Mobile Web - Safari

mobile-safari.mp4

Desktop

desktop.mov

iOS

ios.mp4

Android

android.mp4

… markdown

eh2077 · 2023-06-28T03:33:12Z

When preparing the PR, I performed testing by checking quote surrounded by text, inline and block elements. I found that currently we have 3 types of block elements(<h1>, <blockquote> and <pre>). I found that the way that the library handle line break for <pre> tag is really twisted and tricky. So, I temporarily use w3schools page to complete the test case.

During the testing

I found a bug that heading after a quote is not rendered, which is also reproducible on production. So I reported a bug on Slack.
I tried to refrain changing things outside the scope of this issue. So, I just corrected test cases of quote and add new test case to better cover the fix.
I confirmed that below two tests aren’t regression from this fix. They're existing on the production as well. I did try to get them fixed but they're both tricky.

case-4a.mov

case-4b.mov

eh2077 · 2023-06-28T03:39:04Z

lib/ExpensiMark.js

@@ -654,9 +656,6 @@ export default class ExpensiMark {
            if (textToFormat !== '') {
                replacedText += this.formatTextForQuote(regex, textToFormat, replacement);
            }
-
-            // Replace all the blank lines between quotes, if there are only blank lines between them
-            replacedText = replacedText.replace(/(<\/blockquote>((\s*)+)<blockquote>)/g, '</blockquote><blockquote>');


It's safe to remove this as it's not covered by any unit test.
I think we should retain line breaks between quotes because the App prefers to display user's input as it is.

hmmm can you look into when it was added and why please?

@iwiznia The change was added in this PR #385 which is quite old. This change was included at that time but no unit test case was added together in PR #385. From the corresponding original issue Expensify/App#2670, I found that it fixed retaining only one empty line within a quote if there’re more than one. But later we wanted to retain all empty rows inside a quote, see slack discussion https://expensify.slack.com/archives/C01GTK53T8Q/p1682331970891359.

I have fixed another issue #531 to avoid removing line break before and after heading. The App has been reported many issues about line break handling. And I found that we prefer to keep line breaks from user's input as it is instead of removing them, which is different from markdown rendering on Github.

So, I think, in this case, we can also remove it to keep line breaks between quotes. Strictly speaking, it can be out of the scope of this issue but given it's annoying when performing tests and is easy to fix without breaking existing tests, I prefer to fix it and add tests to cover it together in this PR.

Friendly bump @iwiznia

eh2077 · 2023-06-28T03:44:34Z

@iwiznia @narefyev91 I'm happy to hear your thoughts on this to move this issue forward.

narefyev91 · 2023-06-28T07:14:33Z

@eh2077 can you please following standard template to contributor PR. Also if issue already exists in production and not related to current one - we can skip it here. The main idea to fix current issue and not produce any regressions

MonilBhavsar · 2023-06-29T06:24:49Z

Ionatan could you please also review as I think you have more context on the issue

eh2077 · 2023-06-29T13:50:26Z

@eh2077 can you please following standard template to contributor PR. Also if issue already exists in production and not related to current one - we can skip it here. The main idea to fix current issue and not produce any regressions

Got it. I'm going to test case 1, 2 and 3 on all platforms and case 4A and 4B on web only.

eh2077 · 2023-06-29T15:45:41Z

@narefyev91 Updated PR check list

eh2077 · 2023-07-03T15:02:09Z

Bump @narefyev91

narefyev91

LGTM!

eh2077 · 2023-07-04T14:41:26Z

@MonilBhavsar Can you help to merge this PR if you're also happy with the change?

cc @iwiznia

MonilBhavsar

Thanks for adding detailed testing steps!

fix unwanted linebreaks added when translating html blockquote tag to…

3c2f334

… markdown

eh2077 requested a review from a team as a code owner June 28, 2023 03:00

melvin-bot bot requested review from MonilBhavsar and removed request for a team June 28, 2023 03:01

eh2077 commented Jun 28, 2023

View reviewed changes

MonilBhavsar requested a review from iwiznia June 29, 2023 06:24

iwiznia approved these changes Jul 3, 2023

View reviewed changes

narefyev91 approved these changes Jul 4, 2023

View reviewed changes

MonilBhavsar approved these changes Jul 4, 2023

View reviewed changes

MonilBhavsar merged commit d636fef into Expensify:main Jul 4, 2023

eh2077 mentioned this pull request Jul 6, 2023

fix: unwanted linebreaks added when translating html blockquote to markdown Expensify/App#22275

Merged

57 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: unwanted linebreaks added when translating html blockquote to markdown #554

fix: unwanted linebreaks added when translating html blockquote to markdown #554

eh2077 commented Jun 28, 2023 •

edited

Loading

eh2077 commented Jun 28, 2023

eh2077 Jun 28, 2023

iwiznia Jun 29, 2023

eh2077 Jun 30, 2023 •

edited

Loading

eh2077 Jul 3, 2023

eh2077 commented Jun 28, 2023

narefyev91 commented Jun 28, 2023

MonilBhavsar commented Jun 29, 2023

eh2077 commented Jun 29, 2023

eh2077 commented Jun 29, 2023

eh2077 commented Jul 3, 2023

narefyev91 left a comment

eh2077 commented Jul 4, 2023

MonilBhavsar left a comment

fix: unwanted linebreaks added when translating html blockquote to markdown #554

fix: unwanted linebreaks added when translating html blockquote to markdown #554

Conversation

eh2077 commented Jun 28, 2023 • edited Loading

Fixed Issues

Tests

QA

PR Author Checklist

Screenshots/Videos

eh2077 commented Jun 28, 2023

eh2077 Jun 28, 2023

Choose a reason for hiding this comment

iwiznia Jun 29, 2023

Choose a reason for hiding this comment

eh2077 Jun 30, 2023 • edited Loading

Choose a reason for hiding this comment

eh2077 Jul 3, 2023

Choose a reason for hiding this comment

eh2077 commented Jun 28, 2023

narefyev91 commented Jun 28, 2023

MonilBhavsar commented Jun 29, 2023

eh2077 commented Jun 29, 2023

eh2077 commented Jun 29, 2023

eh2077 commented Jul 3, 2023

narefyev91 left a comment

Choose a reason for hiding this comment

eh2077 commented Jul 4, 2023

MonilBhavsar left a comment

Choose a reason for hiding this comment

eh2077 commented Jun 28, 2023 •

edited

Loading

eh2077 Jun 30, 2023 •

edited

Loading