Expensify / App

Welcome to New Expensify: a complete re-imagination of financial collaboration, centered around chat. Help us build the next generation of Expensify by sharing feedback and contributing to the code.
https://new.expensify.com
MIT License
3.47k stars 2.82k forks source link

[HOLD for payment 2022-05-20][$2000] Copying / pasting code between < and /> seems broken #7912

Closed mvtglobally closed 2 years ago

mvtglobally commented 2 years ago

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. Type something like and send the message
  2. Try to select, copy, then paste into a new message

Expected Result:

Exactly what you copied should be pasted

Actual Result:

The code gets stripped Issue happens when selecting with a mouse, not when using the Copy button

Workaround:

unknown

Platform:

Where is this issue occurring?

Version Number: 1.1.40-0 Reproducible in staging?: Y Reproducible in production?: Y Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos: Any additional supporting documentation

https://user-images.githubusercontent.com/43995119/155665755-5ae5607a-9621-4cb0-bf88-3606dd32f313.mov

Expensify/Expensify Issue URL: Issue reported by: @Beamanator Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1644856333330159

View all open jobs on GitHub

MelvinBot commented 2 years ago

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

MelvinBot commented 2 years ago

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

mateusbra commented 2 years ago

PROPOSAL

We have to change how we strip html when copying to clipboard, at the moment we are only replacing everything within <> for an empty string here: https://github.com/Expensify/expensify-common/blob/f77bb4710c13d01153716df7fb087b637ba3b8bd/lib/str.js#L306-L318

adelekennedy commented 2 years ago

internal external

MelvinBot commented 2 years ago

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

MelvinBot commented 2 years ago

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

parasharrajat commented 2 years ago

Thanks for the proposal @mateusbra. Could you please root cause details to your proposal? and tell us how did you reach your solution.

dennismunene commented 2 years ago

PROPOSAL

We need to change how we handle pasted HTML here.

Change this

https://github.com/Expensify/expensify-common/blob/f77bb4710c13d01153716df7fb087b637ba3b8bd/lib/str.js#L312-L318

To

Only strip off valid html tags

    /**
     * Gets the textual value of the given string.
     *
     * @param {String} str The string to fetch the text value from.
     * @return {String} The text from within the HTML string.
     */
    stripHTML(str) {
        if (!this.isString(str)) {
            return '';
        }

        return str.replace(/<\/?(a|abbr|acronym|address|applet|area|article|aside|audio|b|base|basefont|bdi|bdo|bgsound|big|blink|blockquote|body|br|button|canvas|caption|center|cite|code|col|colgroup|data|datalist|dd|del|details|dfn|dir|div|dl|dt|em|embed|fieldset|figcaption|figure|font|footer|form|frame|frameset|h1|h2|h3|h4|h5|h6|head|header|hgroup|hr|html|i|iframe|img|input|ins|isindex|kbd|keygen|label|legend|li|link|listing|main|map|mark|marquee|menu|menuitem|meta|meter|nav|nobr|noframes|noscript|object|ol|optgroup|option|output|p|param|plaintext|pre|progress|q|rp|rt|ruby|s|samp|script|section|select|small|source|spacer|span|strike|strong|style|sub|summary|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|track|tt|u|ul|var|video|wbr|xmp|path|svg|...)\b[^<>]*>/g, '');
    },

SCREEN RECORDING

https://user-images.githubusercontent.com/4717301/155875274-e12f58b4-d934-4a93-b3b7-bfe7df2cbc84.mov

parasharrajat commented 2 years ago

Thanks for the proposal @dennismunene. Did you try?

 `<someComponent />` 

as message.

dennismunene commented 2 years ago

@parasharrajat yes I have , works as expected.

parasharrajat commented 2 years ago

Ok. Thanks but I don't consider this a proper approach.

const parser = new ExpensiMark(); 
     const markdownText = parser.htmlToMarkdown(html); 

This step is important for the app.

dennismunene commented 2 years ago

@parasharrajat updated my proposal.

parasharrajat commented 2 years ago

Thanks, @dennismunene but I still think we can do better.

  1. StripHTML is doing its job of removing HTML but the question is why are getting HTML at this stage? HTML should have been converted to MD by now.

Now there are two things to compare.

  1. Copy to clipboard and Selection copy via Ctrl+C.

Copy to clipboard works. But the selection does not. So it must have given you the idea by now what is wrong.

mateusbra commented 2 years ago

Thanks for the proposal @mateusbra. Could you please root cause details to your proposal? and tell us how did you reach your solution.

@parasharrajat thank you for the review. I think this is gonna be more complex than I thought, please ignore my proposal by now

MelvinBot commented 2 years ago

Current assignee @parasharrajat is eligible for the Exported assigner, not assigning anyone new.

MelvinBot commented 2 years ago

Current assignee @adelekennedy is eligible for the External assigner, not assigning anyone new.

MelvinBot commented 2 years ago

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

puneetlath commented 2 years ago

@marcaaron I'm about to head out on my two-month sabbatical, so handing this off to you. Thanks!

marcaaron commented 2 years ago

Still waiting for a proposal.

adelekennedy commented 2 years ago

Doubling the issue!

adelekennedy commented 2 years ago

Not overdue - just doubled the issue 4 days ago

MelvinBot commented 2 years ago

@parasharrajat, @marcaaron, @adelekennedy Whoops! This issue is 2 days overdue. Let's get this updated quick!

marcaaron commented 2 years ago

πŸ¦—

adelekennedy commented 2 years ago

Still no volunteers 😬 we're a day out from me doubling the issue

adelekennedy commented 2 years ago

πŸ€‘ doubled πŸ€‘

marcaaron commented 2 years ago

Melv needs a spa day

Beamanator commented 2 years ago

Maybe this should be weekly πŸ˜… ?

parasharrajat commented 2 years ago

In case someone is looking to solve this, https://github.com/Expensify/App/issues/7912#issuecomment-1053609946 indicates what needs to be done.

adelekennedy commented 2 years ago

We're at the mark to double the issue again! @parasharrajat you've pointed out how this issue can be resolved above @mateusbra and @dennismunene any interest in giving a proposal another go?

Big-Vi commented 2 years ago

Hi,

I just looked into this issue now. As mentioned in the previous comment, stripHTML function from expensify-common library strips out the text within <>.

https://github.com/Expensify/expensify-common/blob/main/lib/str.js#L312

striphtml striphtml-console-log

Modifying the regex works fine. The video is attached below:

https://user-images.githubusercontent.com/30820063/160226276-a10e4167-b4c2-4c33-b0aa-cb42bb0e6e49.mov

I know the above solution works. but what if we take this opportunity to build a text formatting toolbar like slack(Video attached below):

https://user-images.githubusercontent.com/30820063/160227053-a9a44475-01f9-45e7-9df6-2108b7bd3c32.mov

With this approach basically, We would replace the