[HOLD for payment 2021-09-27] Chat - Text and URL inside a strikethrough markdown isn't working

[kavimuru]

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. Launch the app
2. Log in with any account
3. Start your conversation with text www.homedepot.com

Expected Result:

Text and URL inside a strikethrough markdown should work in Android app

Actual Result:

Text and URL inside a strikethrough markdown isn't working

Workaround:

Unknown

Platform:

Where is this issue occurring?

• iOS
• Android

Version Number:
1.0.88-2
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Bug5212974_Screen_Recording_20210827-215028_New_Expensify.mp4

Expensify/Expensify Issue URL:

View all open jobs on GitHub
Occurs in Production app too. So not adding Deployblocker

[MelvinBot]

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

[flodnv]

I can confirm this works on desktop but not on android. Probably a good External issue?

[MelvinBot]

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

[dylanexpensify]

On it!

[dylanexpensify]

Posted!

Internal: https://www.upwork.com/ab/applicants/1432715868561301504/job-details
External: https://www.upwork.com/jobs/~014e2072ea720fbf5a

[pROFESOR11]

Proposal

Hi @dylanexpensify and everybody,
I've been debugging the issue for a while and here is my proposal:

Related code block:

App/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js

Lines 67 to 93 in 5bc21cd

	function AnchorRenderer({tnode, key, style}) {
	const htmlAttribs = tnode.attributes;
	// An auth token is needed to download Expensify chat attachments
	const isAttachment = Boolean(htmlAttribs['data-expensify-source']);
	const fileName = lodashGet(tnode, 'domNode.children[0].data', '');
	return (
	<AnchorForCommentsOnly
	href={htmlAttribs.href}
	isAuthTokenRequired={isAttachment}
	// Unless otherwise specified open all links in
	// a new window. On Desktop this means that we will
	// skip the default Save As... download prompt
	// and defer to whatever browser the user has.
	// eslint-disable-next-line react/jsx-props-no-multi-spaces
	target={htmlAttribs.target || '_blank'}
	rel={htmlAttribs.rel || 'noopener noreferrer'}
	style={style}
	key={key}
	fileName={fileName}
	>
	<TNodeChildrenRenderer tnode={tnode} />
	</AnchorForCommentsOnly>
	);
	}

Here in AnchorRenderer, I suggest to override styles with parent styles. So it will be:

function AnchorRenderer({tnode, key, style}) {
    const htmlAttribs = tnode.attributes;

    // An auth token is needed to download Expensify chat attachments
    const isAttachment = Boolean(htmlAttribs['data-expensify-source']);
    const fileName = lodashGet(tnode, 'domNode.children[0].data', '');
+   const parentStyle = lodashGet(tnode, 'parent.styles.nativeTextRet', {});

    return (
        <AnchorForCommentsOnly
            href={htmlAttribs.href}
            isAuthTokenRequired={isAttachment}

            // Unless otherwise specified open all links in
            // a new window. On Desktop this means that we will
            // skip the default Save As... download prompt
            // and defer to whatever browser the user has.
            // eslint-disable-next-line react/jsx-props-no-multi-spaces
            target={htmlAttribs.target || '_blank'}
            rel={htmlAttribs.rel || 'noopener noreferrer'}
-           style={style}
+           style={{...style, ...parentStyle}}
            key={key}
            fileName={fileName}
        >
            <TNodeChildrenRenderer tnode={tnode} />
        </AnchorForCommentsOnly>
    );
}

[roryabraham]

@dylanexpensify Heads up that you forgot to add the Exported label here which means that there's no CME assigned to this issue.

[MelvinBot]

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

[roryabraham]

Interesting ... I think @pROFESOR11's proposal looks reasonable – if there are specific styles being applied to the parent element that conflict with the default styles of the link, we should give preference to the parent style.

LGTM, so @dylanexpensify let's hire @pROFESOR11 on Upwork. @pROFESOR11 please feel free to submit a pull request for this once you've been hired on Upwork.

[dylanexpensify]

On it now to send the offer @roryabraham (cc @pROFESOR11)!

[dylanexpensify]

Offer: sent!

[pROFESOR11]

Hi @dylanexpensify and @roryabraham,
Thanks for the feedback and offer, PR submitted!

[MelvinBot]

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

[roryabraham]

For some reason I wasn't automatically assigned as a reviewer of the linked PR, but I just submitted my review now.

[dylanexpensify]

Sounds good, thanks @roryabraham !

[botify]

@pROFESOR11, Great job getting your first Expensify/App pull request over the finish line! 🎉

I know there's a lot of information in our contributing guidelines, so here are some points to take note of 📝:

1. Now that your first PR has been merged, you can be hired for another issue. Once you've completed a few issues, you may be eligible to work on more than one job at a time.
2. Once your PR is deployed to our staging servers, it will undergo quality assurance (QA) testing. If we find that it doesn't work as expected or causes a regression, you'll be responsible for fixing it. Typically, we would revert this PR and give you another chance to create a similar PR without causing a regression.
3. Once your PR is deployed to production, we start a 7-day timer ⏰. After it has been on production for 7 days without causing any regressions, then we pay out the Upwork job. 💰

So it might take a while before you're paid for your work, but we typically post multiple new jobs every day, so there's plenty of opportunity. I hope you've had a positive experience contributing to this repo! 😊

[botify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[botify]

🚀 Deployed to staging by @marcaaron in version: 1.0.98-2 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[roryabraham]

Not sure that this really needs to be on hold, because it's already been deployed to staging.

[mountiny]

The PR has been deployed to production on Monday 20th September. Updating the title appropriately 🙌

[roryabraham]

On hold for payment, changing this to weekly to appease melvin

[dylanexpensify]

Submitting payment today

[dylanexpensify]

Payment sent!