[$250] Web - Compose Box - Emoji only is being accepted as an anchor text

[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: 9.0.78-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Open a chat and put an emoji inside of square brackets "[]" and put a link inside of parenthesis "()" and post the comment

Expected Result:

Emoji only should not be accepted as an anchor text

Actual Result:

Emoji only is being accepted as an anchor text for hyperlinks

Workaround:

Unknown

Platforms:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6679568_1732833962064.AnchorEmoji.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021871677968650628808
• Upwork Job ID: 1871677968650628808
• Last Price Increase: 2024-12-24

[melvin-bot]

Triggered auto assignment to @sakluger (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[sakluger]

We fixed this a long time ago here: #18386

@dukenv0307 and @sobitneupane worked on that issue. Do either of you have any ideas where this regression came from?

[melvin-bot]

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

[melvin-bot]

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

[dukenv0307]

@sakluger, I found the PR that caused this issue: Expensify/expensify-common#749. It seems like it's the expectation

[varun531]

Proposal

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

The issue appears to be with hyperlinks in the chat. When a user attempts to create a link with only an emoji as the anchor text ( using markdown format [emoji](url)), the app is accepting this as valid when it should not. The core problem seems to be insufficient validation of anchor text in the links.

What is the root cause of that problem?

The updateComment in ComposerWithSuggestions processes emojis but doesn't validate the structural integrity of markdown elements like links.

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

Add a utility function to check for valid anchor text, maybe in EmojiUtils:

const validateEmojiLinks = (text: string): boolean => {
  const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
  let match;
  
  while ((match = linkRegex.exec(text)) !== null) {
    const [, linkText] = match;
    // Check if the anchor text contains only emojis
    const nonEmojiContent = linkText.replace(CONST.REGEX.EMOJI_REGEX, '').trim();
    if (nonEmojiContent.length === 0) {
      return false; // Invalid - contains only emojis
    }
  }
  
  return true; // Valid - no emoji-only links found
};

Add this to the start of the updateComment method in ComposerWithSuggestions. It will convert emoji only links to: {emoji} {url}:

const updateComment = useCallback(
    (commentValue: string, shouldDebounceSaveComment?: boolean) => {
        raiseIsScrollLikelyLayoutTriggered();
        
        let validatedComment = commentValue;
        if (!validateEmojiLinks(commentValue)) {
            // If emoji-only links found, convert [emoji](url) to "emoji url"
            const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
            validatedComment = commentValue.replace(linkRegex, (fullMatch, anchorText, url) => {
                return `${anchorText} ${url}`;
            });
        }
        
        // Continue with existing emoji processing
        const {startIndex, endIndex, diff} = findNewlyAddedChars(lastTextRef.current, validatedComment);

This is obviously a rough attempt, we'd probably add another function to EmojiUtils to do the replacement, or combine validation and replacement into one method.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

You could obviously add unit tests for verifying the validation function.

What alternative solutions did you explore? (Optional)

In onChangeText in ComposerWithSuggestions, you could not call updateComment if this problematic link is detected.

[melvin-bot]

📣 @varun531! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[varun531]

Contributor details
Your Expensify account email: varun531@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~016c3e14bfc62eb770

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[M00rish]

Edited by proposal-police: This proposal was edited at 2024-12-26 20:53:41 UTC.

Proposal

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

Web - Compose Box - Emoji only is being accepted as an anchor text

What is the root cause of that problem?

the link rule used by the parser.replace function does not count for this case :

https://github.com/Expensify/expensify-common/blob/7b423b266ae5a304d7d7272425b82f1f9b1b02d7/lib/ExpensiMark.ts#L305-L320

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

according to the issue of the PR that caused this we want to allow emojis if combined with text but not only emojis.

1. create a function that checks if text contains only emojis or not :

function containsOnlyEmojis(message: string): boolean {
    const sanitizedMessage = message.replace(/\s+/g, '');
    const emojiMatches = sanitizedMessage.match(CONST.REGEX.EMOJIS) || [];

    const emojiCodesInMessage = [...sanitizedMessage]
        .map((char) => getEmojiUnicode(char))
        .filter((unicode) => unicode.length > 0 && !(CONST.INVISIBLE_CODEPOINTS as readonly string[]).includes(unicode));

    return emojiMatches.length === emojiCodesInMessage.length;
}

2. use function in link rule :

{
    name: 'link',
    process: (textToProcess, replacement) => this.modifyTextForUrlLinks(MARKDOWN_LINK_REGEX, textToProcess, replacement as ReplacementFn),
    replacement: (_extras, match, g1, g2) => {
        if (!g1.trim() || containsOnlyEmojis(g1.trim())) {
            return match;
        }
        return `<a href="${Str.sanitizeURL(g2)}" target="_blank" rel="noreferrer noopener">${g1.trim()}</a>`;
    },
    rawInputReplacement: (_extras, match, g1, g2) => {
     
        if (!g1.trim() || containsOnlyEmojis(g1.trim())) {
            return match;
        }
        return `<a href="${Str.sanitizeURL(g2)}" data-raw-href="${g2}" data-link-variant="labeled" target="_blank" rel="noreferrer noopener">${g1}</a>`;
    },
}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

we can add a test for replace the function to verify emoji doesn't get hyperlinked and a test for containsOnlyEmojis

What alternative solutions did you explore? (Optional)

[melvin-bot]

@sakluger, @Ollyws Eep! 4 days overdue now. Issues have feelings too...

[sakluger]

Thanks @dukenv0307! That's super helpful context. It seems like we started allowing emojis to be hyperlinked because they used to look bad (the underline intersected with the emoji), but they look fine now.

I don't see any issue with allowing hyperlinks when an emoji is part of a text thread, but I can see an argument for not allowing emoji-only hyperlinks. I started a discussion in Slack (here) to see if we want to allow emoji-only hyperlinks or now.

[sakluger]

I confirmed with the team that we would like to continue allowing emoji-only hyperlinks. Closing!