packages/pass/hooks/usePasteLengthLimiter.ts

   1 import type { ClipboardEventHandler } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { useNotifications } from '@proton/components';
   6
   7 export const usePasteLengthLimiter = () => {
   8     const { createNotification } = useNotifications();
   9
  10     return (
  11             maxLength: number,
  12             originalOnPaste?: ClipboardEventHandler<HTMLInputElement | HTMLTextAreaElement>
  13         ): ClipboardEventHandler<HTMLInputElement | HTMLTextAreaElement> =>
  14         (event) => {
  15             const text = event.clipboardData?.getData('text') ?? '';
  16             const { value, selectionStart, selectionEnd } = event.currentTarget;
  17             const base = value.length - ((selectionEnd ?? 0) - (selectionStart ?? 0));
  18
  19             if (base + text.length > maxLength) {
  20                 createNotification({
  21                     key: 'max-length-limiter',
  22                     type: 'warning',
  23                     deduplicate: true,
  24                     text: c('Info')
  25                         .t`The text you're trying to paste is longer than the maximum allowed length of ${maxLength} characters.`,
  26                 });
  27             }
  28
  29             originalOnPaste?.(event);
  30         };
  31 };