Empty codeblock appears when using mention with bold markdown

[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. Go to NewDot
2. Go to any chat with User B
3. First send a message that is bold in nature and which should be within backtick. For example : *hello*
4. Notice that the message is sent without any problem
5. Now follow the same process but in this case, mention the user B. For example :*@[email protected]*
6. Notice that nothing is displayed but if you try to edit it, you can see the whole text

Expected Result:

Mentioning user in bold format and within backticks should not behave weirdly and empty message should not be shown

Actual Result:

Mentioning user in bold format and within backticks behaves weirdly and empty message is shown (works well with the messages , problem is with the mentions only)

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.13
Reproducible in staging?: y
Reproducible in production?:
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

error-2023-05-11_16.34.54.mp4

Recording.572.mp4

Expensify/Expensify Issue URL:
Issue reported by: @priya-zha
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1683802669770569

View all open jobs on GitHub

[melvin-bot]

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

[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

[dukenv0307]

Proposal

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

Empty codeblock appears when mention with bold markdown inside codeblock

What is the root cause of that problem?

Codeblock is rendered in here, the content of text is props.defaultRendererProps.tnode.data

App/src/components/InlineCodeBlock/index.js

Line 12 in 615ebd9

<Text style={{...props.boxModelStyle, ...props.textStyle}}>{props.defaultRendererProps.tnode.data}</Text>

App/src/components/InlineCodeBlock/index.native.js

Line 17 in 615ebd9

{props.defaultRendererProps.tnode.data}

1. Mention without bold markdown inside codeblock. For example: @[email protected]. The html when is rendered of this message is : <code><mention-user>@[email protected]</mention-user></code>. After translation by react-native-render-html it is:

<TBlock>
  <TText>
    @[email protected]
  </TText>
</TBlock>

props.defaultRendererProps.tnode now is TText and it has data is text that user enter so that props.defaultRendererProps.tnode.data is the data of TText and codeblock is renderer exactly.

2. Mention with bold markdown inside codeblock. For example: *@[email protected]*. The html when is rendered of this message is : <code>*<mention-user>@[email protected]</mention-user>*</code> because bold markdown is disabled inside code markdown that is the rule replace of expensify-common. After translation by react-native-render-html it is:

<TBlock>
  <TPhrasing>
    <TText>
      *
    </TText>
    <TText>
      @[email protected]
    </TText>
    <TText>
      *
    </TText>
  </TPhrasing>
</TBlock>

props.defaultRendererProps.tnode now is TPhrasing and it doesn't have data (only TText that is children of its has data) so that props.defaultRendererProps.tnode.data is undefined and the empty codeblock is rendered.

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

On native, because children of WrappedText is string so that we need create a function that will get all data from TText and return text data that user enter. Because we only get text data and render it without children tag, all styles of children tag is removed.

App/src/components/InlineCodeBlock/index.native.js

Line 17 in 615ebd9

{props.defaultRendererProps.tnode.data}

On the other platforms, We could change the children of text from props.defaultRendererProps.tnode.data to <TNodeChildrenRenderer tnode={props.defaultRendererProps.tnode} /> to render exactly content for all case in web. If expected of codeblock is not apply styles of children tag inside we can do similar with solution for native above.

App/src/components/InlineCodeBlock/index.js

Line 12 in 615ebd9

<Text style={{...props.boxModelStyle, ...props.textStyle}}>{props.defaultRendererProps.tnode.data}</Text>

What alternative solutions did you explore? (Optional)

If dont't need to update Render of codeblock, we need verify that html of codeblock markdown only have text inside and without any tag.

[jjcoffee]

Proposal

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

Mentions within codeblocks are resulting in an empty codeblock displaying on the FE, despite the message correctly reaching the BE.

What is the root cause of that problem?

Mentions within codeblocks are incorrectly being processed by ExpensiMark. You can see this in the HTML that is generated when sending the message `@[email protected]`:

This also happens for any additional text included in a codeblock, e.g. `hello @[email protected]` will have the same result of an empty codeblock.

If we look at the regex used by the mentions in ExpensiMark, we can see that there's only handling for a codeblock with optional whitespace character(s) following it, see here or below:

regex: new RegExp(`((&#x60;|<code>|<pre>)\\s*?)?[\`.a-zA-Z]?@+${CONST.REG_EXP.EMAIL_PART}`, 'gm'),

There's an underlying issue that @dukenv0307's proposal highlights that is actually causing the codeblock to display as empty, but I don't think it's worth fixing as it's only happening because mentions are being rendered within the codeblock, which shouldn't be happening in the first place!

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

The reason we're capturing the <code>, etc. tags in the snippet above is so that we can check with isValidMention to ensure the mention isn't surrounded by any disallowed tags (like <code>). So we need to update the regex so that they handle codeblocks followed by any character, whilst also maintaining the behaviour that those HTML tags are pulled through for validation.

We can therefore change the regex (for both userMentions and hereMentions) here to this:

regex: new RegExp(`((&#x60;|<code>|<pre>)(?!.*(&#x60;|<\/code>|<\/pre>).+).*?)?[\`.a-zA-Z]?@+${CONST.REG_EXP.EMAIL_PART}`, 'gm'),

Changing the \s to the any character (*) regex ensures we can have any of those tags followed by any character.

I've also added a negative lookahead for the same tags as closing tags, so that we don't match other codeblocks within the message, e.g.: hi @[email protected], which would translate into <code>hi</code> @[email protected]. That whole string would be matched and pulled into isValidMention which would fail as it checks for the validity of the first character in the match, see here).

What alternative solutions did you explore? (Optional)

We could also avoid the negative lookahead and use capture groups instead to pass the actual captured mention separately from the context (i.e. any HTML tags). Then in isValidMention we can check if the mention itself starts with a valid character, and separately check if it is surrounded by HTML tags.

[tjferriss]

I can't get the blank message.

[dukenv0307]

@tjferriss you need start after * with "@" before email

[jjcoffee]

@tjferriss Just to clarify, the string you need to enter is: `*@[email protected]*` (with the leading @ so that it's a mention). I am still able to repro on both production and main.

[kavimuru]

@tjferriss I am also able to reproduce.

[jjcoffee]

Should be getting fixed in #18983