Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update htmlToMarkdownRules userMention and reportMention #741

Merged
merged 1 commit into from
Jul 5, 2024

Conversation

ahmedGaber93
Copy link
Contributor

@ahmedGaber93 ahmedGaber93 commented Jul 4, 2024

CC @marcaaron @lakchote @eh2077

When We copy <mention-user accountID="1234" /> as text/html to clipboard on the web here. The paste value here paste with different format <meta charset='utf-8'><html><head></head><body><mention-user accountid="1234"></mention-user></body></html>

(<openTag></closeTag> not <closedTag />), and this format not match rule reportMention in ExpensiMark

This issue will update htmlToMarkdownRules userMention and reportMention regex to work for both self closing and non self closing tags.

Fixed Issues

$ Expensify/App#40477
$ Expensify/App#40403

Tests

  1. pull this branch
  2. run npm install & npm run build
  3. copy dist folder to E/App to node_modules/expensify-common/dist
  4. run E/App and open any report
  5. mention a user in message and send it
  6. right click > copy to clipboard and paste it in a composer and Verify that message is pasted correctly
  7. mention a report in message and send it
  8. right click > copy to clipboard and paste it in a composer and Verify that message is pasted correctly

Screenshots/Videos

Android: Native
a.mp4
Android: mWeb Chrome
aw.mp4
iOS: Native
i.mp4
iOS: mWeb Safari
iw.mp4
MacOS: Chrome / Safari
w.mp4
MacOS: Desktop
d.mp4

@ahmedGaber93
Copy link
Contributor Author

ahmedGaber93 commented Jul 4, 2024

Bug

add some text after the mention or more than one mention not pasted correctly.

video
20240704205333017.mp4

like the main root cause, it seems browser clipboard not parse self-clothing tags with type text/html correctly and ignore it

We write to clipboard here. And get clipboard data here

// coping value as text/html
<mention-report reportID="1234" /> text after
// paste value as text/html
<mention-report reportID="1234"> text after</mention-report>

// coping value as text/html
<mention-report reportID="1234" /> <mention-user accountID="1234" />
// paste value as text/html
<mention-report reportID="1234"> <mention-user accountID="1234"></mention-user></mention-report>

Solution

convert self-clothing closing tags to non self-clothing before writing it to clipboard here.

const htmlNonClosingTags = html.replace(/<mention-report reportID="(\d+)" *\/>/gi, '<mention-report reportID="$1"></mention-report>')
    .replace(/<mention-user accountID="(\d+)" *\/>/gi, '<mention-user accountID="$1"></mention-user>')

@ahmedGaber93 ahmedGaber93 marked this pull request as ready for review July 4, 2024 18:55
@ahmedGaber93 ahmedGaber93 requested a review from a team as a code owner July 4, 2024 18:55
@melvin-bot melvin-bot bot requested review from puneetlath and removed request for a team July 4, 2024 18:56
@eh2077
Copy link
Contributor

eh2077 commented Jul 5, 2024

@ahmedGaber93 I'd like to confirm one thing - in report action, we only save self-closing tags, like <mention-report reportID="1234" /> and <mention-report reportID="1234" /> <mention-user accountID="1234" />, right?

@ahmedGaber93
Copy link
Contributor Author

ahmedGaber93 commented Jul 5, 2024

@eh2077 I think we use combine of them. In optimistic data, we use <mention-report>#report</mention-report> and in backend data it converted in backend side and come with based ID <mention-report reportID="1234" />

@eh2077
Copy link
Contributor

eh2077 commented Jul 5, 2024

So we'll also need to fix in App codebase to convert self-closing tags to paired tags when setting clipboard right?

@ahmedGaber93
Copy link
Contributor Author

Yes, we need that to cover this case #741 (comment)

@marcaaron marcaaron requested review from marcaaron and removed request for puneetlath July 5, 2024 19:04
marcaaron
marcaaron previously approved these changes Jul 5, 2024
@marcaaron
Copy link
Contributor

@ahmedGaber93 I can't merge this because you have unverified commits. Please resolve that and tag me again when it's ready.

@ahmedGaber93
Copy link
Contributor Author

@marcaaron commits now are verified.

@ahmedGaber93
Copy link
Contributor Author

ahmedGaber93 commented Jul 5, 2024

@marcaaron hope you noticed this comment, plus this PR, I will create a PR in E/App also to fix this.

@marcaaron
Copy link
Contributor

All of them need to be verified. Can you squash the initial commit?

@ahmedGaber93
Copy link
Contributor Author

I don't use squash before, what about force push?

@ahmedGaber93 ahmedGaber93 force-pushed the update-html-mention-rules branch from ff7ffcc to b0e752c Compare July 5, 2024 19:55
@ahmedGaber93
Copy link
Contributor Author

@marcaaron I forced push a new verified commit, all commits are verified now.

Copy link
Contributor

@marcaaron marcaaron left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perfect, thanks!

@marcaaron marcaaron merged commit 14cc4dd into Expensify:main Jul 5, 2024
3 checks passed
Copy link

github-actions bot commented Jul 5, 2024

🚀Published to npm in v2.0.39

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants