[$250] [TS migration] Migrate 'Clipboard' lib to TypeScript

[melvin-bot]

TypeScript migration

Make sure you read through our TypeScript's style guide, cheatsheet and PropTypes conversion table before you start working on this migration issue.

Files

Path	Dependencies
src/libs/Clipboard/index.native.js	1
src/libs/Clipboard/index.js	5

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01380b48af60123d4a
• Upwork Job ID: 1717487195847479296
• Last Price Increase: 2023-11-02

[melvin-bot]

This issue has not been updated in over 15 days. eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[teneeto]

Hi, I'm Eto from Callstack - expert contributor group - and I would like to take a look at this issue.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01380b48af60123d4a

[melvin-bot]

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

[ZhenjaHorbach]

Proposal

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

Need update clipboard lib using TS

What is the root cause of that problem?

It's part of the migration from JS to TS

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

For the native part, minimal changes are required since this library is practically not used on native devices
https://github.com/Expensify/App/blob/main/src/libs/Clipboard/index.native.js

For example

import Clipboard from '@react-native-clipboard/clipboard';

/**
 * Sets a string on the Clipboard object via @react-native-clipboard/clipboard
 */
const setString = (text: string): void => {
    Clipboard.setString(text);
};

export default {
    setString,

    // We don't want to set HTML on native platforms so noop them.
    canSetHtml: (): boolean => false,
    setHtml: (): void => {},
};

For web part we need more changes
https://github.com/Expensify/App/blob/main/src/libs/Clipboard/index.js

For example

import Clipboard from '@react-native-clipboard/clipboard';
import lodashGet from 'lodash/get';
import CONST from '../../CONST';
import * as Browser from '../Browser';

const canSetHtml = (): boolean => lodashGet(navigator, 'clipboard.write');

/**
 * Deprecated method to write the content as HTML to clipboard.
 */
function setHTMLSync(html: string, text: string): void {
    const node = document.createElement('span');
    node.textContent = html;
    node.style.all = 'unset';
    node.style.opacity = '0';
    node.style.position = 'absolute';
    node.style.whiteSpace = 'pre-wrap';
    node.style.userSelect = 'text';
    node.addEventListener('copy', (e) => {
        e.stopPropagation();
        e.preventDefault();
        e.clipboardData.clearData();
        e.clipboardData.setData('text/html', html);
        e.clipboardData.setData('text/plain', text);
    });
    document.body.appendChild(node);

    const selection = window.getSelection();
    const firstAnchorChild = selection.anchorNode && selection.anchorNode.firstChild;
    const isComposer = firstAnchorChild instanceof HTMLTextAreaElement;
    let originalSelection = null;
    if (isComposer) {
        originalSelection = {
            start: firstAnchorChild.selectionStart,
            end: firstAnchorChild.selectionEnd,
            direction: firstAnchorChild.selectionDirection,
        };
    } else {
        originalSelection = {
            anchorNode: selection.anchorNode,
            anchorOffset: selection.anchorOffset,
            focusNode: selection.focusNode,
            focusOffset: selection.focusOffset,
        };
    }

    selection.removeAllRanges();
    const range = document.createRange();
    range.selectNodeContents(node);
    selection.addRange(range);

    try {
        document.execCommand('copy');
    } catch (e) {
        // The 'copy' command can throw a SecurityError exception, we ignore this exception on purpose.
        // See https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html#the-copy-command for more details.
    }

    selection.removeAllRanges();

    if (isComposer) {
        firstAnchorChild.setSelectionRange(originalSelection.start, originalSelection.end, originalSelection.direction);
    } else {
        selection.setBaseAndExtent(originalSelection.anchorNode, originalSelection.anchorOffset, originalSelection.focusNode, originalSelection.focusOffset);
    }

    document.body.removeChild(node);
}

/**
 * Writes the content as HTML if the web client supports it.
 */
const setHtml = (html: string, text: string): void => {
    if (!html || !text) {
        return;
    }

    if (!canSetHtml()) {
        throw new Error('clipboard.write is not supported on this platform, thus HTML cannot be copied.');
    }

    if (CONST.BROWSER.SAFARI === Browser.getBrowser()) {
        // Safari sanitizes "text/html" data before writing to the pasteboard when using Clipboard API,
        // whitespaces in the start of the line are stripped away. We use the deprecated method to copy
        // contents as HTML and keep whitespaces at the start of the line on Safari.
        // See https://webkit.org/blog/10855/async-clipboard-api/ for more details.
        setHTMLSync(html, text);
    } else {
        navigator.clipboard.write([
            // eslint-disable-next-line no-undef
            new ClipboardItem({
                'text/html': new Blob([html], { type: 'text/html' }),
                'text/plain': new Blob([text], { type: 'text/plain' }),
            }),
        ]);
    }
};

/**
 * Sets a string on the Clipboard object via react-native-web
 */
const setString = (text: string): void => {
    Clipboard.setString(text);
};

export default {
    setString,
    canSetHtml,
    setHtml,
};

What alternative solutions did you explore? (Optional)

NA

[fabioh8010]

@Julesssss Why External label was added to this issue? We already have a PR for that -> #28789

[Julesssss]

Why External label was added to this issue? We already have a PR for that -> #28789

Just to find a C+ reviewer, and someone to pay the C+ reviewer.

[situchan]

The only remaining here is to remove Help Wanted label.

[melvin-bot]

@sobitneupane Whoops! This issue is 2 days overdue. Let's get this updated quick!

[Christinadobrzyn]

these jobs are $250 per https://expensify.slack.com/archives/C01SKUP7QR0/p1698944041595109

[melvin-bot]

Upwork job price has been updated to $250

[melvin-bot]

@sobitneupane 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

@sobitneupane 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[Christinadobrzyn]

I think we need a bug teammate for payment? Let me know if that's true and I can add the label.

[melvin-bot]

@sobitneupane 10 days overdue. I'm getting more depressed than Marvin.

[melvin-bot]

@sobitneupane 10 days overdue. I'm getting more depressed than Marvin.

[melvin-bot]

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

[Christinadobrzyn]

adding BZ for payment and tracking this issue. I'm happy to take this Joe if you'd prefer.
@sobitneupane where are we with this? Can you update us?

[joekaufmanexpensify]

I took a look at the PR, and it already has a separate payment issue, which @mallenexpensify is actively tracking.

[joekaufmanexpensify]

Going to close this issue, since the PR is out on production, and Matt is handling the $250 to @sobitneupane in the separate issue linked above.