chore: introduce @trezor/dom-utils package

packages/dom-utils/package.json

@@ -0,0 +1,12 @@
+{
+    "name": "@trezor/dom-utils",
+    "version": "1.0.0",
+    "private": true,
+    "license": "See LICENSE.md in repo root",
+    "sideEffects": false,
+    "main": "src/index",
+    "scripts": {
+        "lint": "eslint '**/*.{ts,tsx,js}'",
+        "type-check": "tsc --build"
+    }
+}

packages/dom-utils/src/copyToClipboard.ts

@@ -0,0 +1,27 @@
+/**
+ * Returns string if there is an error, otherwise returns true
+ */
+export const copyToClipboard = (
+    value: string,
+    parent: HTMLDivElement | HTMLPreElement | HTMLButtonElement | null,
+) => {
+    try {
+        const container = parent || document.body;
+        const el = document.createElement('textarea');
+        el.value = value;
+        el.setAttribute('readonly', '');
+        el.style.position = 'absolute';
+        el.style.left = '-9999px';
+        container.appendChild(el);
+        el.select();
+        el.setSelectionRange(0, 99999); /* For mobile devices */
+        const successful = document.execCommand('copy');
+        if (!successful) {
+            throw new Error('Copy command unsuccessful');
+        }
+        container.removeChild(el);
+        return true;
+    } catch (error) {
+        return error.message;
+    }
+};

packages/dom-utils/src/download.ts

@@ -0,0 +1,12 @@
+export const download = (value: string, filename: string) => {
+    const element = document.createElement('a');
+    element.setAttribute('href', `data:text/plain;charset=utf-8,${encodeURIComponent(value)}`);
+    element.setAttribute('download', filename);
+
+    element.style.display = 'none';
+    document.body.appendChild(element);
+
+    element.click();
+
+    document.body.removeChild(element);
+};

packages/dom-utils/src/index.ts

@@ -0,0 +1,5 @@
+export { copyToClipboard } from './copyToClipboard';
+export { download } from './download';
+export { moveCaretToEndOfContentEditable } from './moveCaretToEndOfContentEditable';
+export { selectText } from './selectText';
+export { setCaretPosition } from './setCaretPosition';

packages/dom-utils/src/moveCaretToEndOfContentEditable.ts

@@ -0,0 +1,19 @@
+/**
+ * When focusing content editable element, caret appears at the begging of string it contains.
+ * We need to move it to the end.
+ * Solution from https://stackoverflow.com/questions/36284973/set-cursor-at-the-end-of-content-editable
+ */
+export const moveCaretToEndOfContentEditable = (contentEditableElement: HTMLElement) => {
+    let range;
+    let selection;
+    if (document.createRange) {
+        range = document.createRange(); // Create a range (a range is a like the selection but invisible)
+        range.selectNodeContents(contentEditableElement); // Select the entire contents of the element with the range
+        range.collapse(false); // collapse the range to the end point. false means collapse to end rather than the start
+        selection = window.getSelection(); // get the selection object (allows you to change selection)
+        if (selection) {
+            selection.removeAllRanges(); // remove any selections already made
+            selection.addRange(range); // make the range you have just created the visible selection
+        }
+    }
+};

packages/dom-utils/src/selectText.ts

@@ -0,0 +1,12 @@
+export const selectText = (element: HTMLElement) => {
+    const doc = document;
+    if (window.getSelection) {
+        const selection = window.getSelection();
+        if (selection) {
+            const range = doc.createRange();
+            range.selectNodeContents(element);
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+    }
+};

packages/dom-utils/src/setCaretPosition.ts

@@ -0,0 +1,11 @@
+/**
+ * Use this function to position caret in input element
+ * @param el - input element ref
+ * @param pos - index of value in el where caret should be positioned
+ */
+export const setCaretPosition = (el: HTMLInputElement, pos: number) => {
+    if (el.setSelectionRange) {
+        el.focus();
+        el.setSelectionRange(pos, pos);
+    }
+};

packages/dom-utils/tsconfig.json

@@ -0,0 +1,5 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": { "outDir": "libDev" },
+    "references": []
+}

packages/suite/package.json

@@ -28,6 +28,7 @@
         "@sentry/integrations": "6.17.2",
         "@sentry/minimal": "6.17.2",
         "@trezor/components": "*",
+        "@trezor/dom-utils": "*",
         "@trezor/connect": "9.0.0-beta.7",
         "@trezor/react-utils": "*",
         "@trezor/suite-analytics": "*",

packages/suite/src/components/suite/Labeling/components/Metadata/withEditable.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useCallback, useRef } from 'react';
 import styled, { css } from 'styled-components';
 import { Icon, useTheme, KEYBOARD_CODE } from '@trezor/components';
 
-import { moveCaretToEndOfContentEditable } from '@suite-utils/dom';
+import { moveCaretToEndOfContentEditable } from '@trezor/dom-utils';
 
 const IconWrapper = styled.div<{ bgColor: string }>`
     display: flex;

packages/suite/src/components/suite/modals/Passphrase/components/PassphraseTypeCard/index.tsx

@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useKeyPress } from '@trezor/react-utils';
 import { ANIMATION } from '@suite-config';
-import { setCaretPosition } from '@suite-utils/dom';
+import { setCaretPosition } from '@trezor/dom-utils';
 import styled, { css } from 'styled-components';
 import { Button, useTheme, variables, Input, Tooltip, Checkbox, Icon } from '@trezor/components';
 import { Translation } from '@suite-components/Translation';

packages/suite/src/components/suite/modals/ReviewTransaction/components/OutputList.tsx

@@ -6,7 +6,7 @@ import { Button, variables } from '@trezor/components';
 import { Translation } from '@suite-components';
 import { formatNetworkAmount, isTestnet } from '@suite-common/wallet-utils';
 import * as notificationActions from '@suite-actions/notificationActions';
-import { copyToClipboard, download } from '@suite-utils/dom';
+import { copyToClipboard, download } from '@trezor/dom-utils';
 import { useActions } from '@suite-hooks';
 import Detail from './Detail';
 import Indicator from './Indicator';

packages/suite/src/components/suite/modals/confirm/Address/index.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import * as notificationActions from '@suite-actions/notificationActions';
 import { Button, variables, ConfirmOnDevice } from '@trezor/components';
-import { copyToClipboard } from '@suite-utils/dom';
+import { copyToClipboard } from '@trezor/dom-utils';
 import { TrezorDevice } from '@suite-types';
 import { Translation, Modal } from '@suite-components';
 import { useActions } from '@suite-hooks';

packages/suite/src/components/suite/modals/confirm/Xpub/index.tsx

@@ -1,7 +1,7 @@
 import React, { createRef } from 'react';
 import styled from 'styled-components';
 import { Button, variables } from '@trezor/components';
-import { copyToClipboard } from '@suite-utils/dom';
+import { copyToClipboard } from '@trezor/dom-utils';
 import { Translation, Modal } from '@suite-components';
 import { Account } from '@wallet-types';
 import * as notificationActions from '@suite-actions/notificationActions';

packages/suite/src/components/wallet/CoinmarketTransactionId/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { variables, Button } from '@trezor/components';
-import { copyToClipboard } from '@suite-utils/dom';
+import { copyToClipboard } from '@trezor/dom-utils';
 import { useActions } from '@suite-hooks';
 import { Translation } from '@suite-components';
 import * as notificationActions from '@suite-actions/notificationActions';

packages/suite/src/components/wallet/TransactionItem/components/Target.tsx

@@ -10,7 +10,7 @@ import { useActions } from '@suite-hooks';
 import { TokenTransferAddressLabel } from './TokenTransferAddressLabel';
 import { TargetAddressLabel } from './TargetAddressLabel';
 import { BaseTargetLayout } from './BaseTargetLayout';
-import { copyToClipboard } from '@suite-utils/dom';
+import { copyToClipboard } from '@trezor/dom-utils';
 import { AccountMetadata } from '@suite-types/metadata';
 import { ExtendedMessageDescriptor } from '@suite-types';
 

packages/suite/src/hooks/wallet/sign-verify/useCopySignedMessage.ts

@@ -1,5 +1,5 @@
+import { copyToClipboard } from '@trezor/dom-utils';
 import { useActions } from '@suite-hooks';
-import { copyToClipboard } from '@suite-utils/dom';
 import { addToast } from '@suite-actions/notificationActions';
 
 type SignedMessageData = {

packages/suite/src/hooks/wallet/useCoinmarketSavingsPaymentInfoCopy.ts

@@ -1,5 +1,5 @@
 import type { SavingsPaymentInfo } from '@suite-services/invityAPI';
-import { copyToClipboard } from '@suite-utils/dom';
+import { copyToClipboard } from '@trezor/dom-utils';
 import { useActions } from '@suite-hooks';
 import * as notificationActions from '@suite-actions/notificationActions';
 

packages/suite/tsconfig.json

@@ -12,6 +12,7 @@
     "include": [".", "**/*.json"],
     "references": [
         { "path": "../components" },
+        { "path": "../dom-utils" },
         { "path": "../connect" },
         { "path": "../react-utils" },
         { "path": "../suite-analytics" },