Add clipboard hooks - first approach

packages/web-api-hooks/src/index.ts

@@ -1,5 +1,6 @@
 export { EventArgs, EventMap, JSONArray, JSONObject, JSONValue } from './types';
 
+export { default as useClipboard } from './useClipboard';
 export { default as useDeviceMotion } from './useDeviceMotion';
 export { default as useDeviceOrientation } from './useDeviceOrientation';
 export { default as useDocumentReadiness } from './useDocumentReadiness';

packages/web-api-hooks/src/useClipboard.ts

@@ -0,0 +1,77 @@
+/* eslint consistent-return: 0 */
+/* eslint no-param-reassign: 0 */
+import { checkForPermission } from './utils';
+
+export default function useClipboard() {
+  const cut = async (
+    element: HTMLInputElement,
+    permissionErrorCallback: Function = () => {},
+  ): Promise<void | Error> => {
+    const permissionGranted = await checkForPermission(
+      'clipboard-write' as PermissionName,
+      permissionErrorCallback,
+    );
+    try {
+      if (permissionGranted) {
+        element.select();
+        document.execCommand('cut');
+        element.value = '';
+        element.blur();
+      }
+    } catch (error) {
+      return error;
+    }
+  };
+
+  const paste = async (
+    element: HTMLInputElement,
+    permissionErrorCallback: Function = () => {},
+  ): Promise<void | Error> => {
+    const permissionGranted = await checkForPermission(
+      'clipboard-read' as PermissionName,
+      permissionErrorCallback,
+    );
+    try {
+      if (permissionGranted) {
+        element.focus();
+        document.execCommand('paste');
+      }
+    } catch (error) {
+      return error;
+    }
+  };
+
+  const copy = async (
+    text: string,
+    permissionErrorCallback: Function = () => {},
+  ): Promise<void | Error> => {
+    const permissionGranted = await checkForPermission(
+      'clipboard-write' as PermissionName,
+      permissionErrorCallback,
+    );
+    try {
+      if (permissionGranted) {
+        if (navigator.clipboard) {
+          navigator.clipboard.writeText(text);
+        } else {
+          const tempInput = document.createElement('input');
+          document.body.appendChild(tempInput);
+          tempInput.setAttribute('id', 'temp-input');
+          (document.getElementById(
+            'temp-input',
+          ) as HTMLInputElement).value = text;
+          tempInput.select();
+          document.execCommand('copy');
+          document.body.removeChild(tempInput);
+        }
+      }
+    } catch (error) {
+      return error;
+    }
+  };
+  return {
+    copy,
+    cut,
+    paste,
+  };
+}

packages/web-api-hooks/src/utils.ts

@@ -40,3 +40,29 @@ export function useEventCallback<T extends Function>(callback: T) {
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   return useCallback((...args) => ref.current!(...args) as T, [ref]);
 }
+
+export async function checkForPermission(
+  type: PermissionName,
+  errorCallback: Function = () => {},
+): Promise<boolean> {
+  let status = false;
+  if (!navigator.permissions) {
+    status = true;
+  } else {
+    try {
+      /* Permission API is still a working draft, and Typescript types for it
+      are still not correct, hence 'any' type as an argument. Similar situation
+      in lines where checkForPermission function is invoked. */
+      const permissions = await navigator.permissions.query({ name: type });
+      if (permissions.state === 'granted') {
+        status = true;
+      } else {
+        errorCallback();
+        status = false;
+      }
+    } catch (error) {
+      return error;
+    }
+  }
+  return status;
+}