Skip to content

URL does not get highlighted properly in Expensify.cash #1234

Closed
Expensify/expensify-common
#327

Description

@roryabraham

If you haven’t already, check out our contributing guidelines for onboarding!


Platform

All platforms:

  1. Web
  2. macOS Desktop
  3. Android
  4. iOS
  5. Mobile web

Version

1.0.1-341

Action Performed (reproducible steps):

  1. Paste the following into an Expensify.cash chat:
Check out [this link](https://www.expensify.com/_devportal/tools/logSearch/#query=request_id:(%22Ufjjim%22)+AND+timestamp:[2021-01-08T03:48:10.389Z+TO+2021-01-08T05:48:10.389Z]&index=logs_expensify-008878)!
  1. Send the message.

Expected Result

The link is created properly and looks like this:

image

Actual Result

The URL is not properly highlighted and the link is not created properly.

image

Solution notes

The code that processes markdown is actually not in Expensify/Expensify.cash, but Expensify/expensify-common.

Add a unit test for this URL in ExpensiMark-test.js and then fix ExpensiMark to handle the URL properly.

A solution will not be considered complete unless it:

  1. Creates an automated unit test to cover this URL and potentially others like it,
  2. Provides videos of the working URL on all 5 platforms of Expensify.cash (Web, macOS Desktop, iOS, Android, mobile web). These must be video screen recordings and not static screenshots, so that we know that the correct URL was used to create the link, and that the link was created properly.

Activity

  1. roryabraham commented on Jan 13, 2021

    @roryabraham
    ContributorAuthor
  2. roryabraham commented on Jan 13, 2021

    @roryabraham
    ContributorAuthor

    Additionally, would like to see that the solution also works for this URL: http://necolas.github.io/react-native-web/docs/?path=/docs/components-pressable--disabled

  3. parasharrajat commented on Jan 14, 2021

    @parasharrajat
    Member

    is there any restriction of using regexp only?

  4. roryabraham commented on Jan 14, 2021

    @roryabraham
    ContributorAuthor

    What else would you use? These are the regexes we have currently

  5. Dal-Papa commented on Jan 18, 2021

    @Dal-Papa

    I was about to create a similar issue for the :~:text= syntax from Google Chrome (like here)
    Screen Shot 2021-01-12 at 10 15 35

  6. parasharrajat commented on Jan 19, 2021

    @parasharrajat
    Member

    @roryabraham Sorry for the late reply. I checked it. After making some adjustments to the URL Regex we can cover your case and other cases and also @Dal-Papa case.
    But there is one regression.

    https://github.com/Expensify/Expensify.cash/issues/1234#:~:text=The%20code%20that%20processes%20markdown%20is%20actually%20not%20in%20Expensify/Expensify.cash
    

    The above URL is being converted to link successfully but Strike conversion is swapping ~ with <del>.

    Can we adjust the strike regex to discard match when we found :~:text?

  7. Dal-Papa commented on Jan 19, 2021

    @Dal-Papa

    @parasharrajat : Should we rather fix it so that if the <del> doesn't have an ending ~, then it doesn't strike ?

  8. parasharrajat commented on Jan 19, 2021

    @parasharrajat
    Member

    @Dal-Papa so

    https://github.com/Expensify/Expensify.cash/issues/1234#:~:text=The%20code%20that%20processes%20markdown%20is%20actually%20not%20in%20Expensify/Expensify.cash 
    

    is converted to

    <a href="https://github.com/Expensify/Expensify.cash/issues/1234#:~:text=The%20code%20that%20processes%20markdown%20is%20actually%20not%20in%20Expensify/Expensify.cash" target="_blank">https://github.com/Expensify/Expensify.cash/issues/1234#:~:text=The%20code%20that%20processes%20markdown%20is%20actually%20not%20in%20Expensify/Expensify.cash</a>
    

    which then will be replaced with <del> in place of ~

    <a href=\"https://github.com/Expensify/Expensify.cash/issues/1234#:<del>:text=The%20code%20that%20processes%20markdown%20is%20actually%20not%20in%20Expensify/Expensify.cash\" target=\"_blank\">https://github.com/Expensify/Expensify.cash/issues/1234#:</del>:text=The%20code%20that%20processes%20markdown%20is%20actually%20not%20in%20Expensify/Expensify.cash</a>
    

    I see a possible solution that we can adopt is to check if ~ is between <a and > thus do not parse it as strike token.

  9. lucas-neuhaus-dev commented on Jan 25, 2021

    @lucas-neuhaus-dev
    Contributor

    @roryabraham
    Is this issue still open for grabs?

    I did some tests and I believe I can create a PR with everything that is required on the deliverable (including the additions on the comments section).

  10. kadiealexander commented on Jan 28, 2021

    @kadiealexander
    Contributor

    Hey @lucas-neuhaus-dev! Please review the rules here for submitting a Pull Request. Looking forward to hearing your proposal!

  11. lucas-neuhaus-dev commented on Jan 28, 2021

    @lucas-neuhaus-dev
    Contributor

    Hi @kadiealexander, sorry I forgot to comment here, I created the PR this afternoon.

    Here it is: Expensify/expensify-common#327.
    I will mention you in the description there as well.

    Edit: Now I realized (even having done it 4 times before) that I jumped the proposal step and went direct for the PR.
    My bad. But I think it is better to keep the discussion on the PR page now, and I can fix any possible review.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions