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

[kbecciv]

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: 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:

1. Open the app
2. Open any user report
3. Send 3 backtick code block eg: Hii
4. Hover and click copy to clipboard
5. Click on header to open user details
6. Click on privates notes-> my notes
7. 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?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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]

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

[FitseTLT]

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]

Cannot reproduce on latest main

[FitseTLT]

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

3.New.Expensify.2.mp4