Implement Block quote HTML to markdown conversion

[Jag96]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Related to #3047, similar to Expensify/expensify-common#392. Blockquote MD->HTML version can be found here

Action Performed:

Copied a blockquote message from slack to E.cash

Expected Result:

The message should contain markdown to create a blockquote in E.cash

Actual Result:

Message just pasted text

Platform:

Where is this issue occurring?

• Web
• Desktop App
• Mobile Web

View all open jobs on Upwork

view this job on Upwork

[MelvinBot]

Triggered auto assignment to @zanyrenney (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[MelvinBot]

Triggered auto assignment to @pecanoro (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[MelvinBot]

Triggered auto assignment to @SofiedeVreese (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[tugbadogan]

Hi,

I would like to work on this issue. Here is my proposal:

• I will add following regex rule for blockquote HTML to markdown conversion to htmlToMarkdownRules array in ExpensiMark library.

{
    name: 'quote',
    regex: /<(blockquote|q)(?:"[^"]*"|'[^']*'|[^'">])*>(.*?)<\/\1>(?![^<]*(<\/pre>|<\/code>))/gi,
    replacement: '> $2'
},

https://github.com/Expensify/expensify-common/blob/7d8408c5c78792394eee8e079f115b1380221a23/lib/ExpensiMark.js#L167-L174

• Also I will add unit test for this conversion to ExpensiMark-Markdown-test.

https://github.com/Expensify/expensify-common/blob/cf78cdc764ac17fb2aaa8b73626cca64c3aa565f/__tests__/ExpensiMark-Markdown-test.js

I have a question. I'm assuming that we're already calling HTML to markdown conversion function when a rich text is pasted from Slack. Is that right?

[SofiedeVreese]

I'm out of office- readding External label to reassign.

[MelvinBot]

Triggered auto assignment to @jboniface (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[MelvinBot]

Triggered auto assignment to @deetergp (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[jboniface]

@deetergp this has a pending proposal here, please review

[parasharrajat]

Proposal

1. we can follow the existing pattern of finding the tags by similar regex which I added for ~,*,_ parsing with one exception that we have to break the newlines into multiple quotes. We also optionally include the preceding newline. So that we don't insert two newlines after replacement.

2. It will require creating a new rule in the htmlToMarkdownRules in ExpensiMark.
   as follows

{
                name: 'quote',
                regex: /\n?<(blockquote|q)(?:"[^"]*"|'[^']*'|[^'">])*>((?:.|\n)*?)<\/\1>(?![^<]*(<\/pre>|<\/code>))/gi,
                replacement: (match, g1, g2) => {
                   const resultString = g2.trim().split('\n').map(m => `> ${m}`).join('\n')
                    return `\n${resultString}\n`;
                }
            },

[deetergp]

This GH seems to assume that there will be something in the paste buffer when you copy block-quoted text out of slack. But when I dump some lorem ipsum into a blockquote in Slack, copy it to the buffer, then dump it into terminal, there's nothing. And if I dump it into Google Docs, it retains a bit of the background color from Slack, but nothing else that would indicate a blockquote. Am I missing something here?

[parasharrajat]

terminal only supports plain text. HTML formatting it lost while pasting. Github| Slack accepts HTML formatting thus they remain quoted

[deetergp]

Ah, I see. The problem was with how much I was selecting to copy from Slack. If I include the timestamp, then pasting it back into Slack includes the block-quoting. @parasharrajat Can you show me an example of what your solution does that @tugbadogan's does not?

[parasharrajat]

Yeah, @deetergp.

Take this as example

<blockquote>RegExr was created by gskinner.com, and is proudly hosted by Media Temple

  Edit the Expression & Text to see matches. Roll over matches or the expression for details. PCRE & JavaScript 
</blockquote>

Blockquote can contain newlines between text.

you paste a quote with newlines in expensify as

> a quote
> multi
> 
> can have a empty line as well.

My regex will handle multi-lines as well. Now there could be an existing line break before the Quote while pasting. We always surround the quote with new lines. and if there was an existing newline before the quote while pasting then we should not add another newline before the quote. My solution handles that as well. She just missed this part.

[deetergp]

That does seem rather important @parasharrajat, let's go with your solution.

[MelvinBot]

@deetergp, @jboniface it looks like no one is assigned to work on this job.
Please double the price or add a comment stating why the job isn't being doubled.

[jboniface]

I don't know why melvin is spamming that message when this is already hired out 🤔

[parasharrajat]

This is paid and can be closed.