[$1000] The strikethrough on the "edited" label is not visible for Code Blocks, Quotes, and Headings when an edited message was deleted in offline mode on mobile apps.

[kavimuru]

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

---

Action Performed:

1. Open any chat in native mobile apps
2. Send a code block, quote and heading (Code Block / > Quote / # Heading)
3. Edit the messages so that the "edited" label is visible
4. Now switch to offline mode and delete the messages
5. Observe the "edited" label

Expected Result:

The "edited" label should have a strikethrough on it as seen on web and mobile web

Actual Result:

The "edited" label does not have a strikethrough

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.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
Notes/Photos/Videos: Any additional supporting documentation

az_recorder_20230426_164913.1.mp4

!

Expensify/Expensify Issue URL:
Issue reported by: @pubudu-ranasinghe
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1682161364254109

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01fb84eccd46f00572
• Upwork Job ID: 1653351142673272832
• Last Price Increase: 2023-06-21

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~01fb84eccd46f00572

[MelvinBot]

Current assignee @flaviadefaria is eligible for the External assigner, not assigning anyone new.

[MelvinBot]

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

[MelvinBot]

Triggered auto assignment to @neil-marcellini (External), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[flaviadefaria]

Assigned the external label

[bernhardoj]

Proposal

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

There is no strikethrough style applied to the edited label for code block, quotes, and heading.

What is the root cause of that problem?

We previously have an issue which a markdown does not have the strikethrough when deleted while offline here #15571. The root cause of it because ReportActionItemFragment html (RenderHTML) doesn't receive the pending deleted style. We have a similar case here where the (edited) text does not get the deleted style. The (edited) text is shown by adding the <edited> tag and we have a custom renderer to show it.

App/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js

Lines 15 to 29 in c9f6606

	const EditedRenderer = (props) => {
	const defaultRendererProps = _.omit(props, ['TDefaultRenderer', 'style', 'tnode']);
	return (
	<Text
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...defaultRendererProps}
	fontSize={variables.fontSizeSmall}
	color={themeColors.textSupporting}
	>
	{/* Native devices do not support margin between nested text */}
	<Text style={styles.w1}>{' '}</Text>
	{props.translate('reportActionCompose.edited')}
	</Text>
	);
	};

The problem is, we omit the style props which means the deleted style will be lost. I believe we omit the style because we don't want any style comes from RenderHTML affects the styling (for example the font size from the props has a font size of 15, but we want the edited text font size to be 11).

The next question, why it only happens for codeblock, quote, and heading? We can see that it happens for a markdown that is a block element and not with inline element, for example italic/bold. If we look at the component tree, we can see that edited text in italic/bold is nested inside the bolded/italicize text. Because it's nested, the edited text will also be strikethrough-ed.

However, if it's a heading, the text and the edited text is not nested and both is a children of a View.

MemoizedTNodeRenderer with key 0 is the heading text, while MemoizedTNodeRenderer with key 1 is the edited text.

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

Instead of omitting all style, we can just pick the deleted style, which is textDecorationLine and textDecorationStyle. We can use _.pick(props.style, 'textDecorationStyle', 'textDecorationLine') and pass it to Text style.

What alternative solutions did you explore? (Optional)

Previously I mentioned the reason we omit the style above. But, we can actually not omitting the props.style. We can override the text style in tagStyles

App/src/styles/styles.js

Lines 59 to 65 in c9f6606

	const webViewStyles = {
	// As of react-native-render-html v6, don't declare distinct styles for
	// custom renderers, the API for custom renderers has changed. Declare the
	// styles in the below "tagStyles" instead. If you need to reuse those
	// styles from the renderer, just pass the "style" prop to the underlying
	// component.
	tagStyles: {

by adding the tag, which is edited.

edited: {
   color: editedColor,
   fontSize: editedFontSize,
   etc..
}

[Santhosh-Sellavel]

I see the edited label does not have strike though on the web also

[Santhosh-Sellavel]

What's the issue here Having a Strike through or not, bit confused. First, we should update the OP here before moving forward

Can you elaborate on what exactly is the issue here @pubudu-ranasinghe ?

cc: @neil-marcellini @bernhardoj

[bernhardoj]

@Santhosh-Sellavel just tested the latest main branch. The edited label is not getting strikethrough on every kind of text after this PR #17704 is merged, specifically the display inline flex style. However, on native we still have it because display inline flex is not available on native.

[pubudu-ranasinghe]

Yes, seems like this is broken for all messages in master. When a message is deleted in offline mode, a strikethrough is applied to indicate that it is a pending delete. If the message was edited, the edited label should also have a strikethrough.

Initially, when I reported this bug, the strikethrough issue was only visible for code blocks, quotes, and headings in native apps. Seems like we may need to update this bug with the new scope. Attaching screenshots I had taken earlier.

How it used to look like before

This is related to #17181 which I'm working on at PR #17781 . With the updates from master branch I may need to revisit my PR and maybe I could try to fix this issue as well.

[Ollyws]

@bernhardoj It's not because of the inline flex style, it's because we mirrored the layout from EditedRenderer in ReportActionItemFragment.
Your proposal should still work you'd just need to apply it in both places.

[bernhardoj]

Your proposal should still work you'd just need to apply it in both places.

Yes, you are right.

But it's also true that the inline flex is the one that causing the strikethrough missing on both markdown and normal text, ONLY on Web. Removing it will solve the issue.

However, I'm not saying that is 100% a bad thing because now we are manually apply the strikethrough style to the edited text that will eventually solve this web only issue #17181

[bernhardoj]

Correction, my proposal will only work for native. Web platform won't receive the deleted style as applyStrikethrough is for native only.

[neil-marcellini]

Bump @Santhosh-Sellavel. Any promising proposals?

[Santhosh-Sellavel]

@neil-marcellini there is contradiction between Expected OP & current behavior . More broken than before reporting it seems
as per this comment -> #18042 (comment)
We should wait for #17781 before moving forward.

[neil-marcellini]

Sounds good thanks! I'll put this on hold.

[neil-marcellini]

still holding

[flaviadefaria]

I'm OoO for 8 days so re-adding the BUG label, but keeping myself assigned. I'll be back at work on May 30th if this needs to be actioned before I'm back please re-apply the bug label.

[neil-marcellini]

Still holding. There's progress on the issue this is held on.

[flaviadefaria]

@neil-marcellini any new update here?

[neil-marcellini]

#17781 was deployed to production so we can take this off of hold 🥳. @Santhosh-Sellavel where do we go from here?

[Santhosh-Sellavel]

Ah completely missed this one, will check and update you.

[neil-marcellini]

All good! I always forget to edit the title after I say we can take this off of hold haha. I posted in Slack here that the issue is back open and ready for proposals.

[Santhosh-Sellavel]

I was typing here, and at the same time I get a notification from you on Slack 😅 .

[pubudu-ranasinghe]

I believe this is already fixed.

AFAIR the issue was the Text node in EditedRenderer.js did not have strikethrough styling. I've added it here https://github.com/Expensify/App/pull/17781/files#diff-810d7261a8a012ad50e42153c3648aeec64e629af864f6ff93d3137eebecdb18L24

There are two additional issues,

1. Inline code not visible in android ([HOLD on App/issues/4733 & facebook/react-native/pull/37397] [$4000] Inline code blocks do not appear on Android Native #17441)
2. Extra strikethrough seen before edited label in android

Need to check if these have been reported already

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[neil-marcellini]

Ok great, yep I think this was fixed. I'm going to close this and I don't think we owe any payments.