[HOLD for payment 2022-05-20] [$2000] When copy&paste multiple messages line breaks aren't maintained

[mvtglobally]

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

---

Action Performed:

1. Open app
2. Copy a message with multiple line breaks
3. Paste into another chat

Steps 2

1. Send 3 separate messages
2. Copy all 3 messages
3. Paste in compose box

Expected Result:

Line breaks should be maintained. The three messages would show on three lines

Actual Result:

Line breaks are not maintained. The three messages are on one line.

Workaround:

Unknown.

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.30-3
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Related to #5142

Expensify/Expensify Issue URL:
Issue reported by: @mallenexpensify
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1642095778439500

View all open jobs on GitHub

[MelvinBot]

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

[MelvinBot]

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

[mallenexpensify]

cc @kursat since you worked on #5142
In case you wanted to work on this

[sig5]

Proposal
The problem arises due to the fact that only comments that are multiline are wrapped inside the <comment> tag. So when we parse the DOM Nodes in SelectionScrapper, single-line messages aren't appended with the <br> tag.

App/src/pages/home/report/ReportActionItemFragment.js

Lines 65 to 77 in 8a31526

	? (
	<RenderHTML
	html={`<comment>${props.fragment.html + (props.fragment.isEdited ? '<edited></edited>' : '')}</comment>`}
	/>
	) : (
	<Text
	selectable={!canUseTouchScreen() || !props.isSmallScreenWidth}
	style={EmojiUtils.isSingleEmoji(props.fragment.text) ? styles.singleEmojiText : undefined}
	>
	{Str.htmlDecode(props.fragment.text)}
	{props.fragment.isEdited && (
	<Text
	fontSize={variables.fontSizeSmall}

There is a simple solution for the problem:

We can enclose the decoded HTML for the single line messages in a div with the data-testid passed explicitly as comment. The id gets attached to the DOM element and parsing is done accordingly.

{<div data-testid='comment'>{Str.htmlDecode(props.fragment.text)}</div>}

1.New.Expensify.Mozilla.Firefox.2022-01-24.16-25-41.mp4

The above approach works fine as shown.
I have a couple of questions:

1. What other purpose does data-testId serve? Because this selectionScrapper functionality seems to have been implemented recently, and I can't find the occurrence of this attribute elsewhere.
2. If there is indeed another purpose, then we should probably introduce a new custom attribute for handling this kind of scenario. The steps will remain more or less similar along with modifying the SelectionScrapper for handling the new attribute.

[thienlnam]

@kursat Hey Kursat! Just looping back to this issue #6732, could you comment some additional context where data-testID comes from and what significance it serves?

[roryabraham]

What other purpose does data-testId serve? Because this selectionScrapper functionality seems to have been implemented recently, and I can't find the occurrence of this attribute elsewhere.

I too am trying to figure out where this comes from. It seems like it might be an implementation detail from either react-native-render-html or react-native-web 🤔

If that's the case, I think we need to decouple the SelectionScraper implementation from the data-testid attribute and instead make it reliant upon something we set explicitly in our app. I am still trying to understand all the implementation details of the SelectionScraper library, but it seems like at a high level it:

1. Uses the Selection Web API and then, for each Range in the selection, finds the closest div tag with the data-testid attribute. Aggregate all those results under a single div.
   • This part seems like it's dependent upon low-level implementation details of react-native-web and is very unclear to me.
2. Takes the result of the previous step and parses it using htmlparser2
3. Takes the result of the previous step, and recursively (for the dom tree parsed in the previous step) transform any div tags with the data-testid attribute to the actual tag specified in the attribute.
   • There is a comment here that alludes to that, but unless I'm mistaken this transform actually happens in a separate function here.
   • After each time we include a custom <comment> tag, we insert a <br> here.
4. "Re-render" the transformed html tree using dom-serializer here
   • This doesn't actually render anything, but instead just simulates a render and returns the resultant html as a string.
5. Parse the html from the previous step to mark down using our own ExpensiMark library.

I have several thoughts about how this could all be simplified/cleaned up, but first I want to confirm that my high-level understanding of this is correct. @kursat Any comments?

[kadiealexander]

Posted to upwork: https://www.upwork.com/jobs/~0104b0a207be0dbbcb