[Hold for payment 2024-02-13] [$500] Private Note - Code block paste in private notes does not work (works fine in native apps) #29806

kbecciv · 2023-10-17T17:50:02Z

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

Version Number: 1.3.85.0
Reproducible in staging?: y
Reproducible in production?: y
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
Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1697530399668279

Action Performed:

Open the app
Open any user report
Send 3 backtick code block eg: Hii
Hover and click copy to clipboard
Click on header to open user details
Click on privates notes-> my notes
Paste the copied text and observe that app removes backticks while pasting

Expected Result:

App should paste text with backticks in private notes

Actual Result:

App does not paste text with private notes (works fine only in native apps)

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Android: Native

Android: mWeb Chrome

Android.chrome.copy.to.clipboard.code.block.paste.notes.mp4

iOS: Native

iOS: mWeb Safari

ios.safari.paste.code.block.in.notes.mov

MacOS: Chrome / Safari

windows.chrome.code.block.paste.notes.mp4

mac.chrome.paste.code.block.notes.not.working.mov

MacOS: Desktop

mac.desktop.paste.code.block.notes.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~013e368c7fef7e59bc
Upwork Job ID: 1714338003846836224
Last Price Increase: 2023-11-07

The text was updated successfully, but these errors were encountered:

melvin-bot · 2023-10-17T17:50:08Z

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

melvin-bot · 2023-10-17T17:50:08Z

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

melvin-bot · 2023-10-17T17:50:10Z

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

melvin-bot · 2023-10-17T17:50:14Z

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

FitseTLT · 2023-10-17T18:48:04Z

Proposal

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

Code block paste doesn't work properly in private notes text input

What is the root cause of that problem?

When user copies code block message we set the code in 'html' prop of the clipboard and the plain text (found by parsing it with ExpensiMark htmToText function) to 'text' prop of the clipboard in here when canSetHtml is true( for web only, that's why it works fine for native apps).

App/src/pages/home/report/ContextMenu/ContextMenuActions.js

Lines 284 to 292 in 7b546b0

    
           } else if (content) { 
        
               const parser = new ExpensiMark(); 
        
               if (!Clipboard.canSetHtml()) { 
        
                   Clipboard.setString(parser.htmlToMarkdown(content)); 
        
               } else { 
        
                   const plainText = parser.htmlToText(content); 
        
                   Clipboard.setHtml(content, plainText); 
        
               } 
        
           }

So when the user pastes in PrivatesNotesEditPage text input the plain text is copied by default as we have not implemented a code that pastes the html whenever the clipboard has html code inside it as we did in our Composer component.

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

We need to take the code inside Composer component that handles paste of html code and reimplement it in a reusable code (custom hook or HOC) and then use it both in here privates notes and in composer.
So for instance we can use a custom hook like this and use it both in Private notes and Composer

function useCodePaste(textInputRef) {
    const navigation = useNavigation();

    /**
     * Set pasted text to clipboard
     * @param {String} text
     */
    const paste = useCallback((text) => {
        try {
            document.execCommand('insertText', false, text);
            // Pointer will go out of sight when a large paragraph is pasted on the web. Refocusing the input keeps the cursor in view.
            textInputRef.current.blur();
            textInputRef.current.focus();
            // eslint-disable-next-line no-empty
        } catch (e) {}
    }, []);

    /**
     * Manually place the pasted HTML into Composer
     *
     * @param {String} html - pasted HTML
     */
    const handlePastedHTML = useCallback(
        (html) => {
            const parser = new ExpensiMark();
            paste(parser.htmlToMarkdown(html));
        },
        [paste],
    );

    /**
     * Paste the plaintext content into Composer.
     *
     * @param {ClipboardEvent} event
     */
    const handlePastePlainText = useCallback(
        (event) => {
            const plainText = event.clipboardData.getData('text/plain');
            paste(plainText);
        },
        [paste],
    );

    const handlePaste = useCallback(
        (event) => {
            const isFocused = textInputRef.current.isFocused();

            if (!isFocused) {
                return;
            }

            if (textInputRef.current !== event.target) {
                // To make sure the text input does not capture paste events from other inputs, we check where the event originated
                // If it did originate in another input, we return early to prevent the text input from handling the paste
                const isTargetInput = event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || event.target.contentEditable === 'true';
                if (isTargetInput) {
                    return;
                }

                textInputRef.current.focus();
            }

            event.preventDefault();

            const {types} = event.clipboardData;
            const TEXT_HTML = 'text/html';

            // If paste contains HTML
            if (types.includes(TEXT_HTML)) {
                const pastedHTML = event.clipboardData.getData(TEXT_HTML);

                const domparser = new DOMParser();
                const embeddedImages = domparser.parseFromString(pastedHTML, TEXT_HTML).images;

                // Exclude parsing img tags in the HTML, as fetching the image via fetch triggers a connect-src Content-Security-Policy error.
                if (embeddedImages.length > 0 && embeddedImages[0].src) {
                    // If HTML has emoji, then treat this as plain text.
                    if (embeddedImages[0].dataset && embeddedImages[0].dataset.stringifyType === 'emoji') {
                        handlePastePlainText(event);
                        return;
                    }
                }
                handlePastedHTML(pastedHTML);
                return;
            }
            handlePastePlainText(event);
        },
        [handlePastedHTML, handlePastePlainText],
    );

    useEffect(() => {
        // we need to handle listeners on navigation focus/blur as Composer is not unmounting
        // when navigating away to different report
        const unsubscribeFocus = navigation.addListener('focus', () => document.addEventListener('paste', handlePaste));
        const unsubscribeBlur = navigation.addListener('blur', () => document.removeEventListener('paste', handlePaste));

        if (textInputRef.current) {
            document.addEventListener('paste', handlePaste);
        }

        return () => {
            unsubscribeFocus();
            unsubscribeBlur();
            document.removeEventListener('paste', handlePaste);
            // eslint-disable-next-line es/no-optional-chaining
            if (!textInputRef.current) {
                return;
            }
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
}

And in both PrivateNotesEditPage and Composer we call the custom hook passing the appropriate textInputRef parameter like this (or we can also return the ref from the custom hook and assign it to the ref of our text inputs):

    useCodePaste(privateNotesInput);

In Composer we change

App/src/components/Composer/index.js

Lines 298 to 330 in 098157c

    
                   const {files, types} = event.clipboardData; 
        
                   const TEXT_HTML = 'text/html'; 
        
                   // If paste contains files, then trigger file management 
        
                   if (files.length > 0) { 
        
                       // Prevent the default so we do not post the file name into the text box 
        
                       onPasteFile(event.clipboardData.files[0]); 
        
                       return; 
        
                   } 
        
                   // If paste contains HTML 
        
                   if (types.includes(TEXT_HTML)) { 
        
                       const pastedHTML = event.clipboardData.getData(TEXT_HTML); 
        
                       const domparser = new DOMParser(); 
        
                       const embeddedImages = domparser.parseFromString(pastedHTML, TEXT_HTML).images; 
        
                       // Exclude parsing img tags in the HTML, as fetching the image via fetch triggers a connect-src Content-Security-Policy error. 
        
                       if (embeddedImages.length > 0 && embeddedImages[0].src) { 
        
                           // If HTML has emoji, then treat this as plain text. 
        
                           if (embeddedImages[0].dataset && embeddedImages[0].dataset.stringifyType === 'emoji') { 
        
                               handlePastePlainText(event); 
        
                               return; 
        
                           } 
        
                       } 
        
                       handlePastedHTML(pastedHTML); 
        
                       return; 
        
                   } 
        
                   handlePastePlainText(event); 
        
               }, 
        
               [onPasteFile, handlePastedHTML, checkComposerVisibility, handlePastePlainText], 
        
           );

to

            const {files} = event.clipboardData;

            // If paste contains files, then trigger file management
            if (files.length > 0) {
                // Prevent the default so we do not post the file name into the text box
                onPasteFile(event.clipboardData.files[0]);
                return;
            }
        },
        [onPasteFile, checkComposerVisibility],
    );

    useCodePaste(textInput);

(Optional) We can use also HOC (whichever is appropriate I am just trying to explain the basic idea).
*** We can also use HOC 👍 ***
Here is the result:

10.New.Expensify.1.mp4

What alternative solutions did you explore? (Optional)

neonbhai · 2023-10-17T23:38:03Z

Cannot reproduce on latest main

FitseTLT · 2023-10-19T09:16:23Z

Updated comment
And also I still can reproduce it in the latest main :-

3.New.Expensify.2.mp4

garrettmknight · 2023-10-20T19:14:00Z

I was able to repro it on web via Chrome and also on the MacOS app.

garrettmknight · 2023-10-23T19:06:08Z

@ArekChr what do you think of that proposal?

ArekChr · 2023-10-24T10:57:39Z

@FitseTLT, Could you provide more details about where the change should be applied?

FitseTLT · 2023-10-24T11:11:00Z

@ArekChr we need to add this code to PrivateNotesEditPage and of course use withNavigation HOC on the PrivateNotesEditPage component exported.


    /**
     * Set pasted text to clipboard
     * @param {String} text
     */
    const paste = useCallback((text) => {
        try {
            document.execCommand('insertText', false, text);
            // Pointer will go out of sight when a large paragraph is pasted on the web. Refocusing the input keeps the cursor in view.
            textInput.current.blur();
            textInput.current.focus();
            // eslint-disable-next-line no-empty
        } catch (e) {}
    }, []);

    /**
     * Manually place the pasted HTML into Composer
     *
     * @param {String} html - pasted HTML
     */
    const handlePastedHTML = useCallback(
        (html) => {
            const parser = new ExpensiMark();
            paste(parser.htmlToMarkdown(html));
        },
        [paste],
    );

    /**
     * Paste the plaintext content into Composer.
     *
     * @param {ClipboardEvent} event
     */
    const handlePastePlainText = useCallback(
        (event) => {
            const plainText = event.clipboardData.getData('text/plain');
            paste(plainText);
        },
        [paste],
    );

    const handlePaste = useCallback(
        (event) => {
            const isFocused = privateNotesInput.current.isFocused();

            if (!isFocused) {
                return;
            }

            if (privateNotesInput.current !== event.target) {
                // To make sure the text input does not capture paste events from other inputs, we check where the event originated
                // If it did originate in another input, we return early to prevent the text input from handling the paste
                const isTargetInput = event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || event.target.contentEditable === 'true';
                if (isTargetInput) {
                    return;
                }

                privateNotesInput.current.focus();
            }

            event.preventDefault();

            const {types} = event.clipboardData;
            const TEXT_HTML = 'text/html';

            // If paste contains HTML
            if (types.includes(TEXT_HTML)) {
                const pastedHTML = event.clipboardData.getData(TEXT_HTML);

                const domparser = new DOMParser();
                const embeddedImages = domparser.parseFromString(pastedHTML, TEXT_HTML).images;

                // Exclude parsing img tags in the HTML, as fetching the image via fetch triggers a connect-src Content-Security-Policy error.
                if (embeddedImages.length > 0 && embeddedImages[0].src) {
                    // If HTML has emoji, then treat this as plain text.
                    if (embeddedImages[0].dataset && embeddedImages[0].dataset.stringifyType === 'emoji') {
                        handlePastePlainText(event);
                        return;
                    }
                }
                handlePastedHTML(pastedHTML);
                return;
            }
            handlePastePlainText(event);
        },
        [handlePastedHTML, handlePastePlainText],
    );

    useEffect(() => {
        // we need to handle listeners on navigation focus/blur as Composer is not unmounting
        // when navigating away to different report
        const unsubscribeFocus = navigation.addListener('focus', () => document.addEventListener('paste', handlePaste));
        const unsubscribeBlur = navigation.addListener('blur', () => document.removeEventListener('paste', handlePaste));

        if (privateNotesInput.current) {
            document.addEventListener('paste', handlePaste);
        }

        return () => {
            unsubscribeFocus();
            unsubscribeBlur();
            document.removeEventListener('paste', handlePaste);
            // eslint-disable-next-line es/no-optional-chaining
            if (!privateNotesInput.current) {
                return;
            }
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

ArekChr · 2023-10-24T11:49:45Z

@FitseTLT, I'm a bit confused. Previously, you mentioned that we don't handle pasted HTML like in the Composer, but now you suggest adding it to the PrivateNotesEditPage.
I'm unsure about the differences in the code you provided. It is similar to the code in Composer. Please update your proposal with the specific code changes and provide more details, especially regarding the exact file where these changes should be applied, by linking it in the proposal.

If you suggest using the same code from the Composer, we should create a reusable functionality instead of copying it to a different place.

FitseTLT · 2023-10-24T13:00:55Z

@FitseTLT, I'm a bit confused. Previously, you mentioned that we don't handle pasted HTML like in the Composer, but now you suggest adding it to the PrivateNotesEditPage. I'm unsure about the differences in the code you provided. It is similar to the code in Composer. Please update your proposal with the specific code changes and provide more details, especially regarding the exact file where these changes should be applied, by linking it in the proposal.

If you suggest using the same code from the Composer, we should create a reusable functionality instead of copying it to a different place.

Yes, reusable code, that's exactly what I proposed under What alternative solutions did you explore? (Optional) @ArekChr .
Now I have updated my proposal with a working custom hook that can be used in both places. Thx!!

melvin-bot · 2023-10-24T16:00:32Z

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

FitseTLT · 2023-10-26T08:14:39Z

@ArekChr did you check my updated proposal? I updated it with the custom hook implementation and result video but if it is better I can also implement the HOC implementation 👍 .

FitseTLT · 2023-10-26T10:20:23Z

Updated comment

ArekChr · 2023-10-26T11:38:19Z

@FitseTLT I’m going to check your proposal again soon. I just need a bit more time to look into how code blocks can be pasted on web platforms to make sure your solution works properly.

garrettmknight · 2023-10-30T19:06:38Z

@ArekChr will you be able to review this week?

flodnv · 2024-01-11T14:34:17Z

Thanks for the bump, done. Let me know if I misunderstood something. All yours @Santhosh-Sellavel 👍

FitseTLT · 2024-01-11T14:35:46Z

@Santhosh-Sellavel will let u know when to review as the pr is too old will have to merge main and test

garrettmknight · 2024-01-24T15:16:08Z

PR is being actively reveiwed.

Santhosh-Sellavel · 2024-02-12T20:04:14Z

@garrettmknight It's been deployed to production last week. Can you leave a payment summary please?

garrettmknight · 2024-02-13T13:20:53Z

Summarizing payments for this issue:

Reporter: @dhanashree-sawant $50 paid via Upwork
Contributor: @FitseTLT $250 (50% for the regression) paid via Upwork
Reviewer: @Santhosh-Sellavel $500 (since they didn't approve the original PR that resulted in a regression)

garrettmknight · 2024-02-21T18:27:21Z

@Santhosh-Sellavel please fill out the checklist when you get a chance and request payment. Dropping to weekly till then.

garrettmknight · 2024-03-01T18:04:35Z

Just waiting on checklist and payment.

garrettmknight · 2024-03-11T17:53:06Z

@Santhosh-Sellavel can you request payment when you get a chance? The checklist was completed in the original issue.

Santhosh-Sellavel · 2024-03-11T18:07:02Z

Feel free to close this one, I'll request later

Santhosh-Sellavel · 2024-05-22T17:43:44Z

Requested on ND

JmillsExpensify · 2024-05-31T04:28:37Z

$500 approved for @Santhosh-Sellavel

kbecciv added External Added to denote the issue can be worked on by a contributor Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Oct 17, 2023

melvin-bot bot changed the title ~~Private Note - Code block paste in private notes does not work (works fine in native apps)~~ [$500] Private Note - Code block paste in private notes does not work (works fine in native apps) Oct 17, 2023

melvin-bot bot assigned garrettmknight Oct 17, 2023

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Oct 17, 2023

melvin-bot bot assigned ArekChr Oct 17, 2023

melvin-bot bot added the Overdue label Oct 20, 2023

melvin-bot bot added Overdue and removed Overdue labels Oct 20, 2023

melvin-bot bot removed the Overdue label Oct 23, 2023

melvin-bot bot added the Overdue label Oct 30, 2023

flodnv assigned Santhosh-Sellavel and unassigned robertKozik Jan 11, 2024

flodnv added Weekly KSv2 and removed Monthly KSv2 labels Jan 11, 2024

garrettmknight added Awaiting Payment Auto-added when associated PR is deployed to production and removed Reviewing Has a PR in review labels Feb 13, 2024

garrettmknight changed the title ~~[$500] Private Note - Code block paste in private notes does not work (works fine in native apps)~~ [Hold for payment 2024-02-13] [$500] Private Note - Code block paste in private notes does not work (works fine in native apps) Feb 13, 2024

This comment was marked as resolved.

Sign in to view

melvin-bot bot added Daily KSv2 Overdue and removed Weekly KSv2 labels Feb 19, 2024

melvin-bot bot removed the Overdue label Feb 21, 2024

garrettmknight added Weekly KSv2 and removed Daily KSv2 labels Feb 21, 2024

melvin-bot bot added the Overdue label Mar 1, 2024

melvin-bot bot removed the Overdue label Mar 1, 2024

melvin-bot bot added the Overdue label Mar 11, 2024

melvin-bot bot removed the Overdue label Mar 11, 2024

garrettmknight closed this as completed Mar 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Hold for payment 2024-02-13] [$500] Private Note - Code block paste in private notes does not work (works fine in native apps) #29806

[Hold for payment 2024-02-13] [$500] Private Note - Code block paste in private notes does not work (works fine in native apps) #29806

kbecciv commented Oct 17, 2023 •

edited by flodnv

Loading

melvin-bot bot commented Oct 17, 2023

melvin-bot bot commented Oct 17, 2023

melvin-bot bot commented Oct 17, 2023

melvin-bot bot commented Oct 17, 2023

FitseTLT commented Oct 17, 2023 •

edited

Loading

neonbhai commented Oct 17, 2023

FitseTLT commented Oct 19, 2023

garrettmknight commented Oct 20, 2023

garrettmknight commented Oct 23, 2023

ArekChr commented Oct 24, 2023

FitseTLT commented Oct 24, 2023

ArekChr commented Oct 24, 2023 •

edited

Loading

FitseTLT commented Oct 24, 2023 •

edited

Loading

melvin-bot bot commented Oct 24, 2023

FitseTLT commented Oct 26, 2023

FitseTLT commented Oct 26, 2023

ArekChr commented Oct 26, 2023

garrettmknight commented Oct 30, 2023

flodnv commented Jan 11, 2024

FitseTLT commented Jan 11, 2024

garrettmknight commented Jan 24, 2024

Santhosh-Sellavel commented Feb 12, 2024

garrettmknight commented Feb 13, 2024 •

edited

Loading

This comment was marked as resolved.

garrettmknight commented Feb 21, 2024

garrettmknight commented Mar 1, 2024

garrettmknight commented Mar 11, 2024

Santhosh-Sellavel commented Mar 11, 2024

Santhosh-Sellavel commented May 22, 2024

JmillsExpensify commented May 31, 2024

[Hold for payment 2024-02-13] [$500] Private Note - Code block paste in private notes does not work (works fine in native apps) #29806

[Hold for payment 2024-02-13] [$500] Private Note - Code block paste in private notes does not work (works fine in native apps) #29806

Comments

kbecciv commented Oct 17, 2023 • edited by flodnv Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Oct 17, 2023

melvin-bot bot commented Oct 17, 2023

melvin-bot bot commented Oct 17, 2023

Bug0 Triage Checklist (Main S/O)

melvin-bot bot commented Oct 17, 2023

FitseTLT commented Oct 17, 2023 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

neonbhai commented Oct 17, 2023

FitseTLT commented Oct 19, 2023

garrettmknight commented Oct 20, 2023

garrettmknight commented Oct 23, 2023

ArekChr commented Oct 24, 2023

FitseTLT commented Oct 24, 2023

ArekChr commented Oct 24, 2023 • edited Loading

FitseTLT commented Oct 24, 2023 • edited Loading

melvin-bot bot commented Oct 24, 2023

FitseTLT commented Oct 26, 2023

FitseTLT commented Oct 26, 2023

ArekChr commented Oct 26, 2023

garrettmknight commented Oct 30, 2023

flodnv commented Jan 11, 2024

FitseTLT commented Jan 11, 2024

garrettmknight commented Jan 24, 2024

Santhosh-Sellavel commented Feb 12, 2024

garrettmknight commented Feb 13, 2024 • edited Loading

This comment was marked as resolved.

garrettmknight commented Feb 21, 2024

garrettmknight commented Mar 1, 2024

garrettmknight commented Mar 11, 2024

Santhosh-Sellavel commented Mar 11, 2024

Santhosh-Sellavel commented May 22, 2024

JmillsExpensify commented May 31, 2024

kbecciv commented Oct 17, 2023 •

edited by flodnv

Loading

FitseTLT commented Oct 17, 2023 •

edited

Loading

ArekChr commented Oct 24, 2023 •

edited

Loading

FitseTLT commented Oct 24, 2023 •

edited

Loading

garrettmknight commented Feb 13, 2024 •

edited

Loading