[HOLD for payment 2024-04-15] [$500] iOS - Chat - Strikethrough not applied for multiline hyperlinks deleted offline

[lanitochka17]

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

---

Version Number: 1.4.55-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4441552
Issue reported by: Applause - Internal Team

Action Performed:

1. Log in to New Expensify
2. Navigate to any chat
3. Send multiline hyperlink
4. Disable the internet connection
5. Delete the message

Expected Result:

The message should be grayed out with strikethrough formatting applied to indicate that the deletion is pending

Actual Result:

The message is grayed out but the strikethrough is not applied

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

Add any screenshot/video evidence

Bug6420587_1710946305742.SUGF1463.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ef21d15df0bfd5a6
• Upwork Job ID: 1770552279000301568
• Last Price Increase: 2024-03-20
• Automatic offers:
• mollfpr | Reviewer | 0
• bernhardoj | Contributor | 0

[melvin-bot]

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

[lanitochka17]

@puneetlath FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #vip-vsp

[bernhardoj]

Proposal

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

The strikethrough/deleted styles aren't applied to multi-line links when deleting it while offline.

What is the root cause of that problem?

When we have a single line link, the anchor renderer will have 1 text as the child that contains the link text. It gets the style from the parent.

App/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.tsx

Lines 66 to 68 in 99169e1

	<Text
	ref={linkRef}
	style={StyleSheet.flatten([style, defaultTextStyle])}

App/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.tsx

Line 68 in 99169e1

style={[style, parentStyle, styles.textUnderlinePositionUnder, styles.textDecorationSkipInkNone]}

There are 2 styles that affect it, style and parentStyle. style contains the anchor tag style, and parentStyle contains the strikethrough style and the important style is textDecorationLine. style textDecorationLine value is underline, while parentStyle textDecorationLine is line-through and it overwrites the style one.

But for multi-line links, there are multiple children (MemoizedTNodeRenderer) of the component. If we have a multi-line link like this:

[multi
line](google.com)

then the children will be 3: multi, br, line.

The parent text contains the strikethrough style that I explained above, but each child here also contains the anchor tag style. Based on this upstream issue, it's not possible to have both line-through and underline styles, that's why for multi-line links, we see the underline styles.

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

We can render the children for a multi-line link by ourselves by using renderChildren props of TNodeChildrenRenderer.

App/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.tsx

Line 73 in 99169e1

<TNodeChildrenRenderer tnode={tnode} />

and to have both underline and strikethrough, we can use textDecorationLine: 'underline line-through' style.

const hasStrikethroughStyle = 'textDecorationLine' in parentStyle && parentStyle.textDecorationLine === 'line-through';
const textDecorationLineStyle = hasStrikethroughStyle ? {textDecorationLine: 'underline line-through'} : {};

return (
    <AnchorForCommentsOnly ...
        // add textDecorationLineStyle here
        style={[style, parentStyle, textDecorationLineStyle, styles.textUnderlinePositionUnder, styles.textDecorationSkipInkNone]}
    >
        <TNodeChildrenRenderer
            tnode={tnode}
            // renderChild is only called for multi-line link
            renderChild={(props) => {
                if (props.childTnode.tagName === 'br') {
                    return <Text>{'\n'}</Text>
                }
                if (props.childTnode.type === 'text') {
                    // and here
                    return <Text style={[props.childTnode.getNativeStyles(), parentStyle, textDecorationLineStyle, styles.textUnderlinePositionUnder, styles.textDecorationSkipInkNone]}>{props.childTnode.data}</Text>
                }
                return props.childElement;
            }}
        />
    </AnchorForCommentsOnly>
);

we can further improve this if there is any missing style

[melvin-bot]

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

[melvin-bot]

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

[mollfpr]

@bernhardoj The result on Android is missing the underline, is this expected?

Prev

After