[$500] Android - Note - The page is broken with a long blockcode with one backtick

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Issue found when validating PR #29055

Version Number: v1.3.81-6

Reproducible in staging?: Y

Reproducible in production?: Y

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Expensify/Expensify Issue URL:

Issue reported by: @dhanashree-sawant

Slack conversation: @

Action Performed:

1. Open the App
2. Login with any account
3. Open a Person to Person report.
4. Now open Profile Details.
5. Press on Private Note.
6. Select My Note
7. Enter a long blockcode with one backtick ( ) and save it.

Expected Result:

The code block does not go beyond the page (the page is broken)

Actual Result:

The block of code goes outside the page

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Android: Native

Bug6233522_1697053941799.Record_2023-10-11-17-37-11.mp4

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01412f56d0ed1fc241
• Upwork Job ID: 1712207610531987456
• Last Price Increase: 2023-10-11
• Automatic offers:
• dhanashree-sawant | Reporter | 27538114

[melvin-bot]

Triggered auto assignment to @dylanexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01412f56d0ed1fc241

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Santhosh-Sellavel (External)

[koko57]

this one looks very similar to #29408

[dylanexpensify]

Agree @koko57! This was created first, so we'll keep this open (cc @greg-schroeder)

[DaniloVlad]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Inline Code blocks render beyond the page/parent boundaries in private notes.
Inline Code blocks render beyond page boundaries in Reports: #29408 (comment)

What is the root cause of that problem?

There are a few separate issues happening here.
To start with the web platform, we observe that when a message is sent in a report that contains an inline code block with tons of trailing spaces, we get this result:

(Image 1)

The same message observed on an android device, gives:

(Image 2)

Now on the other hand, when dealing with Private Notes we observe that the following input:

(Image 3)

Produces the same output on web and android, where the spaces are trimmed:

(Image 4)

I should note there may also be a bug here: You can't have new lines in the code blocks, but maybe not since they are supposed to be "inline?" I used spaces to get the wrapping effect.

However, a very Private note with a ton of characters breaks on android but not web:

(Image 5)

But what we do observe is that once again, in the Private Note, long whitespace sequences were truncated and replaced with a new line.

So depending on what is the actual expected result then the root cause might slightly differ.

Assuming the goal of the product wanted to leave all whitespace the user enters in a inline-codeblock as-is, regardless of if it is a Private Note or a Message in a Report; then these would be the problem areas I found:

1. Incorrect text splitting of Report Messages/Private Notes on native apps:

App/src/components/InlineCodeBlock/WrappedText.js

Lines 19 to 21 in 91e2120

	function getTextMatrix(text) {
	return _.map(text.split('\n'), (row) => _.without(row.split(CONST.REGEX.SPACE_OR_EMOJI), ''));
	}

the result of this method on native for our above example is:

[["⁦.", "    ", "a.", "                                                                                                                                                                                                                                                "]]

2. Incorrect formatting of Report Messages on Web

The issue here is that the rendered span tag for inline code blocks is missing CSS styles to achieve the desired outcome. More on this below in the solutions section.

3. Private Notes New line in Inline code blocks bug

This happens due to the library used here:

App/src/libs/actions/Report.js

Lines 1168 to 1177 in be44c93

	const handleUserDeletedLinksInHtml = (newCommentText, originalHtml) => {
	const parser = new ExpensiMark();
	if (newCommentText.length > CONST.MAX_MARKUP_LENGTH) {
	return newCommentText;
	}
	const markdownOriginalComment = parser.htmlToMarkdown(originalHtml).trim();
	const htmlForNewComment = parser.replace(newCommentText);
	const removedLinks = parser.getRemovedMarkdownLinks(markdownOriginalComment, newCommentText);
	return removeLinksFromHtml(htmlForNewComment, removedLinks);
	};

Which is called from:

App/src/pages/PrivateNotes/PrivateNotesEditPage.js

Line 107 in be44c93

const editedNote = Report.handleUserDeletedLinksInHtml(privateNote.trim(), originalNote);

What changes do you think we should make in order to solve the problem?

1. Incorrect text splitting of Report Messages/Private Notes on native apps:

Again under the assumption that we want to preserve user entered white space, I think the best approach here would be to replace the existing code here:

App/src/components/InlineCodeBlock/WrappedText.js

Lines 41 to 70 in bb22e06

	function WrappedText(props) {
	if (!_.isString(props.children)) {
	return null;
	}
	const textMatrix = getTextMatrix(props.children);
	return (
	<>
	{_.map(textMatrix, (rowText, rowIndex) => (
	<Fragment
	// eslint-disable-next-line react/no-array-index-key
	key={`${rowText}-${rowIndex}`}
	>
	{_.map(rowText, (colText, colIndex) => (
	// Outer View is important to vertically center the Text
	<View
	// eslint-disable-next-line react/no-array-index-key
	key={`${colText}-${colIndex}`}
	style={styles.codeWordWrapper}
	>
	<View style={[props.wordStyles, colIndex === 0 && styles.codeFirstWordStyle, colIndex === rowText.length - 1 && styles.codeLastWordStyle]}>
	<Text style={props.textStyles}>{colText}</Text>
	</View>
	</View>
	))}
	</Fragment>
	))}
	</>
	);
	}

and instead we could nest a text element within another one:

<Text style={props.boxModelStyles}>
            <Text style={props.textStyles}>{props.children}</Text>
</Text>

Which would give this effect:

NOTE: i styled these manually, that would be improved in a PR

2. Incorrect Formatting of Report Messages on Web

Using white-space: break-spaces; CSS Property:

Alternatively I believe its better to switch from display:inline; to display:inline-block;

Which also fixed private notes on web:

And if we wanted to truly preserve the user white-space as they entered it, both properties should be used, as if i'm not mistake inline-block alone does trim leading spaces on a new line

3. Private Notes Trimming Inline code blocks

I believe this is a separate bug and it would require a lot more investigation to give a concrete answer as to why new lines prevent code blocks from being rendered.

[Santhosh-Sellavel]

Unassigning due to low bandwidth!

[Santhosh-Sellavel]

@dylanexpensify Please assign a new C+ here

[b4s36t4]

Proposal

Please re-state the problem that we are trying to solve in this issue.

nline codeblock with white spaces until the end of the first line after text is displayed out of screen

What is the root cause of that problem?

We never had any styling for handling moving the things out of the screen for InlineCodeBlock component. We're just extending the styles we're getting from react-native-html-renderer

What changes do you think we should make in order to solve the problem?

We need to add whiteSpace property with value break-spaces to let the message break (pre) tag into new line.

As the message ends with all the spaces (is at the end so we should render all the message) we can't go with other values ofwhiteSpace` which may contain some more issues.

What alternative solutions did you explore? (Optional)

NA

[melvin-bot]

📣 @rushatgabhane Please request via NewDot manual requests for the Contributor role ($500)

[dylanexpensify]

@rushatgabhane assigning you for takeover, lmk if that's ok!

[dhanashree-sawant]

Hi @dylanexpensify, #29408 was closed as dupe of this issue but that issue was raised on 10th of October on slack and internal team has raised this issue on 12th October. Can you assign me issue reporter for this issue?

[melvin-bot]

@rushatgabhane, @dylanexpensify Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@rushatgabhane @dylanexpensify this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

@rushatgabhane, @dylanexpensify 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[DaniloVlad]

Hello @rlinoz @rushatgabhane @dylanexpensify , this would be my first contribution, and I have applied on UpWork, but it hasn't hired me for the job so i was just wondering how long this typically takes and/or have i missed anything in the process? (I have submitted all my details on another post previously)

[DaniloVlad]

Oh ok I was following the description on the posting itself
"- AFTER your proposal is accepted in Upwork and you have accepted the offer, you may submit the code to implement your solution..."

I was waiting for that confirmation but i will go ahead and finish up the implementation and open a PR then.

[rushatgabhane]

makes sense. but to speed things up you can submit a PR

[dylanexpensify]

+1 on submitting a PR!

[DaniloVlad]

Hey folks, I opened a WIP PR so that you guys know I am working on it. There is an issue. I am currently investigating but it seems i cant get the styles to match properly between the platforms. It wont overflow the page but for example the borders on the inline block wont render on ios...

Im working on a snack to present the proof of concept. Will keep you posted.

[rlinoz]

@DaniloVlad thanks for the update!

Would you mind converting it to a draft so we know when we can look at it?

[DaniloVlad]

Hey guys, so unfortunately switching over the design to be a code-block seems to be more difficult than expected. Especially when it comes to mobile.

I would like some input on the styling of these blocks. It seems previously there was a lot more padding and I'm curious if that is still preferred.

Here is how it looks:
Web:

IOS:

[DaniloVlad]

There are still some things I'd want to try out to support the "block" code style but i worry it may result in a lot of regressions. If anyone can point me to some information regarding where the element is used outside of in comments that could be helpful.

[dylanexpensify]

nice - @rlinoz thoughts:?

[rlinoz]

I would like some input on the styling of these blocks. It seems previously there was a lot more padding and I'm curious if that is still preferred.

@DaniloVlad I am not sure if I understand, the screenshots are for triple backticks or for single ones?

If it is for single ones it is looking very similar to what we have today, and I think it would be fine.

[DaniloVlad]

I would like some input on the styling of these blocks. It seems previously there was a lot more padding and I'm curious if that is still preferred.

@DaniloVlad I am not sure if I understand, the screenshots are for triple backticks or for single ones?

If it is for single ones it is looking very similar to what we have today, and I think it would be fine.

This would be for single back tick comments. If you take a look at my original proposal i had suggested a sort of auto code block style when a inline code block was longer than the line itself. Instead i chose to go the original direction of keeping these as inline code blocks and fixing the wrapping issues.

Really all that i would want to know is that if we would want to add more space between lines or padding within the inline code itself. I was able to preserve most of the existing styles from the previous implementation other than padding i believe.

[rlinoz]

I see, can you post a comment of how it is today and how it will be? Then I can add the design label to this issue and they can approve it.

[dylanexpensify]

bump @DaniloVlad

[dylanexpensify]

@DaniloVlad shall we reassign? Or can you get to it today?

[cubuspl42]

@dylanexpensify

Although I'm not involved, I'll bump this as Melvin doesn't

[dylanexpensify]

thank you!

[rlinoz]

I believe we can reassign, how do we do that?

[rushatgabhane]

We need to find a contributor with a new proposal. @rlinoz

[cubuspl42]

First, I'd suggest to clear up this issue. The actual scope of this issue is unclear. There's only one screenshot provided for one platform, while the proposal mentions issues on Native and web. The test steps render like this for me:

...while on the screenshot we can see that the text is very long and presumably consists of long words.

It should be made clear how this issue relates to #27913.

[cubuspl42]

If the scope was clear, I could help sketching a solution (maybe even fix this myself), because I have experience with the code related to the inline code blocks.

[rlinoz]

To be honest I am not sure this is still a problem since I cannot reproduce this issue either on web or Android.

Steps I took
For chats:

1. Open a chat
2. Write a long 1 tick block of code

For notes (basically the issue repro steps):

1. Open a Person to Person report.
2. Now open Profile Details.
3. Press on Private Note.
4. Select My Note
5. Enter a long blockcode with one backtick and save it eg:

`. asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf asdf asd asdf`

Android

Web

[dylanexpensify]

@rlinoz agree, closing