feat(ui): adds support for copy pasting complex fields (#11513)

<!--

Thank you for the PR! Please go through the checklist below and make
sure you've completed all the steps.

Please review the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository if you haven't already.

The following items will ensure that your PR is handled as smoothly as
possible:

- PR Title must follow conventional commits format. For example, `feat:
my new feature`, `fix(plugin-seo): my fix`.
- Minimal description explained as if explained to someone not
immediately familiar with the code.
- Provide before/after screenshots or code diffs if applicable.
- Link any related issues/discussions from GitHub or Discord.
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Fixes #

-->
### What?
This PR introduces support for copy + pasting complex fields such as
Arrays and Blocks. These changes introduce a new `ClipboardAction`
component that houses logic for copy + pasting to and from the clipboard
to supported fields. I've scoped this PR to include only Blocks &
Arrays, however the structure of the components introduced lend
themselves to be easily extended to other field types. I've limited the
scope because there may be design & functional blockers that make it
unclear how to add actions to particular fields.

Supported fields:
- Arrays
([Demo](https://github.com/user-attachments/assets/523916f6-77d0-43e2-9a11-a6a9d8c1b71c))
- Array Rows
([Demo](https://github.com/user-attachments/assets/0cd01a1f-3e5e-4fea-ac83-8c0bba8d1aac))
- Blocks
([Demo](https://github.com/user-attachments/assets/4c55ac2b-55f4-4793-9b53-309b2e090dd9))
- Block Rows
([Demo](https://github.com/user-attachments/assets/1b4d2bea-981a-485b-a6c4-c59a77a50567))

Fields that may be supported in the future with minimal effort by
adopting the changes introduced here:
- Tabs
- Groups
- Collapsible
- Relationships

This PR also encompasses e2e tests that check both field and row-level
copy/pasting.

### Why?
To make it simpler and faster to copy complex fields over between
documents and rows within those docs.

### How?
Introduces a new `ClipboardAction` component with helper utilities to
aid in copy/pasting and validating field data.

Addresses #2977 & #10703

Notes:
- There seems to be an issue with Blocks & Arrays that contain RichText
fields where the RichText field dissappears from the dom upon replacing
form state. These fields are resurfaced after either saving the data or
dragging/dropping the row containing them.
- Copying a Row and then pasting it at the field-level will overwrite
the field to include only that one row. This is intended however can be
changed if requested.
- Clipboard permissions are required to use this feature. [See Clipboard
API caniuse](https://caniuse.com/async-clipboard).

#### TODO
- [x] ~~I forgot BlockReferences~~
- [x] ~~Fix tests failing due to new buttons causing locator conflicts~~
- [x] ~~Ensure deeply nested structures work~~
- [x] ~~Add missing translations~~
- [x] ~~Implement local storage instead of clipboard api~~
- [x] ~~Improve tests~~

---------

Co-authored-by: Germán Jabloñski <43938777+GermanJablo@users.noreply.github.com>

Author: akhrarovsaid

packages/translations/src/clientKeys.ts

@@ -68,12 +68,15 @@ export const clientTranslationKeys = createClientTranslationKeys([
   'error:emailOrPasswordIncorrect',
   'error:usernameOrPasswordIncorrect',
   'error:loadingDocument',
+  'error:insufficientClipboardPermissions',
+  'error:invalidClipboardData',
   'error:invalidRequestArgs',
   'error:invalidFileType',
   'error:logoutFailed',
   'error:noMatchedField',
   'error:notAllowedToAccessPage',
   'error:previewing',
+  'error:unableToCopy',
   'error:unableToDeleteCount',
   'error:unableToReindexCollection',
   'error:unableToUpdateCount',
@@ -182,6 +185,8 @@ export const clientTranslationKeys = createClientTranslationKeys([
   'general:copied',
   'general:clearAll',
   'general:copy',
+  'general:copyField',
+  'general:copyRow',
   'general:copyWarning',
   'general:copying',
   'general:create',
@@ -267,6 +272,8 @@ export const clientTranslationKeys = createClientTranslationKeys([
   'general:overwriteExistingData',
   'general:pageNotFound',
   'general:password',
+  'general:pasteField',
+  'general:pasteRow',
   'general:payloadSettings',
   'general:perPage',
   'general:previous',

packages/translations/src/languages/ar.ts

@@ -90,6 +90,8 @@ export const arTranslations: DefaultTranslationsObject = {
     followingFieldsInvalid_one: 'الحقل التالي غير صالح:',
     followingFieldsInvalid_other: 'الحقول التالية غير صالحة:',
     incorrectCollection: 'مجموعة غير صحيحة',
+    insufficientClipboardPermissions: 'تم رفض الوصول إلى الحافظة. يرجى التحقق من أذونات الحافظة.',
+    invalidClipboardData: 'بيانات الحافظة غير صالحة.',
     invalidFileType: 'نوع ملف غير صالح',
     invalidFileTypeValue: 'نوع ملف غير صالح: {{value}}',
     invalidRequestArgs: 'تم تمرير وسيطات غير صالحة في الطلب: {{args}}',
@@ -111,6 +113,7 @@ export const arTranslations: DefaultTranslationsObject = {
     problemUploadingFile: 'حدث خطأ اثناء رفع الملفّ.',
     tokenInvalidOrExpired: 'الرّمز إمّا غير صالح أو منتهي الصّلاحيّة.',
     tokenNotProvided: 'لم يتم تقديم الرمز.',
+    unableToCopy: 'تعذر النسخ.',
     unableToDeleteCount: 'يتعذّر حذف {{count}} من {{total}} {{label}}.',
     unableToReindexCollection: 'خطأ في إعادة فهرسة المجموعة {{collection}}. تم إيقاف العملية.',
     unableToUpdateCount: 'يتعذّر تحديث {{count}} من {{total}} {{label}}.',
@@ -237,7 +240,9 @@ export const arTranslations: DefaultTranslationsObject = {
       'سيؤدي هذا إلى إزالة الفهارس الحالية وإعادة فهرسة المستندات في جميع المجموعات.',
     copied: 'تمّ النّسخ',
     copy: 'نسخ',
+    copyField: 'نسخ الحقل',
     copying: 'نسخ',
+    copyRow: 'نسخ الصف',
     copyWarning: 'أنت على وشك الكتابة فوق {{to}} بـ {{from}} لـ {{label}} {{title}}. هل أنت متأكد؟',
     create: 'إنشاء',
     created: 'تمّ الإنشاء',
@@ -330,6 +335,8 @@ export const arTranslations: DefaultTranslationsObject = {
     overwriteExistingData: 'استبدل بيانات الحقل الموجودة',
     pageNotFound: 'الصّفحة غير موجودة',
     password: 'كلمة المرور',
+    pasteField: 'لصق الحقل',
+    pasteRow: 'لصق الصف',
     payloadSettings: 'الإعدادات',
     perPage: 'لكلّ صفحة: {{limit}}',
     previous: 'سابق',

packages/translations/src/languages/az.ts

@@ -90,6 +90,9 @@ export const azTranslations: DefaultTranslationsObject = {
     followingFieldsInvalid_one: 'Aşağıdakı sahə yanlışdır:',
     followingFieldsInvalid_other: 'Aşağıdaki sahələr yanlışdır:',
     incorrectCollection: 'Yanlış Kolleksiya',
+    insufficientClipboardPermissions:
+      'Mübadilə buferinə giriş rədd edildi. Zəhmət olmasa, icazələri yoxlayın.',
+    invalidClipboardData: 'Yanlış mübadilə buferi məlumatı.',
     invalidFileType: 'Yanlış fayl növü',
     invalidFileTypeValue: 'Yanlış fayl növü: {{value}}',
     invalidRequestArgs: 'Sorguda etibarsız arqumentlər təqdim edildi: {{args}}',
@@ -111,6 +114,7 @@ export const azTranslations: DefaultTranslationsObject = {
     problemUploadingFile: 'Faylın yüklənməsi zamanı problem yarandı.',
     tokenInvalidOrExpired: 'Token ya yanlışdır və ya müddəti bitib.',
     tokenNotProvided: 'Token təqdim edilməyib.',
+    unableToCopy: 'Kopyalama mümkün deyil.',
     unableToDeleteCount: '{{count}} dən {{total}} {{label}} silinə bilmir.',
     unableToReindexCollection:
       '{{collection}} kolleksiyasının yenidən indekslənməsi zamanı səhv baş verdi. Əməliyyat dayandırıldı.',
@@ -241,7 +245,9 @@ export const azTranslations: DefaultTranslationsObject = {
       'Bu, mövcud indeksləri siləcək və bütün kolleksiyalardakı sənədləri yenidən indeksləyəcək.',
     copied: 'Kopyalandı',
     copy: 'Kopyala',
+    copyField: 'Sahəni kopyala',
     copying: 'Kopyalama',
+    copyRow: 'Sətiri kopyala',
     copyWarning:
       'Siz {{label}} {{title}} üçün {{from}} ilə {{to}} -nu üzərindən yazmaq ətrafındasınız. Eminsiniz?',
     create: 'Yarat',
@@ -336,6 +342,8 @@ export const azTranslations: DefaultTranslationsObject = {
     overwriteExistingData: 'Mövcud sahə məlumatlarını yenidən yazın',
     pageNotFound: 'Səhifə tapılmadı',
     password: 'Şifrə',
+    pasteField: 'Sahəni yapışdır',
+    pasteRow: 'Sətiri yapışdır',
     payloadSettings: 'Payload Parametrləri',
     perPage: 'Hər səhifədə: {{limit}}',
     previous: 'Əvvəlki',

packages/translations/src/languages/bg.ts

@@ -90,6 +90,9 @@ export const bgTranslations: DefaultTranslationsObject = {
     followingFieldsInvalid_one: 'Следното поле е некоректно:',
     followingFieldsInvalid_other: 'Следните полета са некоректни:',
     incorrectCollection: 'Грешна колекция',
+    insufficientClipboardPermissions:
+      'Достъпът до клипборда е отказан. Моля, проверете вашите разрешения за клипборда.',
+    invalidClipboardData: 'Невалидни данни в клипборда.',
     invalidFileType: 'Невалиден тип на файл',
     invalidFileTypeValue: 'Невалиден тип на файл: {{value}}',
     invalidRequestArgs: 'Невалидни аргументи в заявката: {{args}}',
@@ -111,6 +114,7 @@ export const bgTranslations: DefaultTranslationsObject = {
     problemUploadingFile: 'Имаше проблем при качването на файла.',
     tokenInvalidOrExpired: 'Ключът е невалиден или изтекъл.',
     tokenNotProvided: 'Токенът не е предоставен.',
+    unableToCopy: 'Неуспешно копиране.',
     unableToDeleteCount: 'Не беше възможно да се изтрият {{count}} от {{total}} {{label}}.',
     unableToReindexCollection:
       'Грешка при преиндексиране на колекцията {{collection}}. Операцията е прекратена.',
@@ -240,7 +244,9 @@ export const bgTranslations: DefaultTranslationsObject = {
       'Това ще премахне съществуващите индекси и ще преиндексира документите във всички колекции.',
     copied: 'Копирано',
     copy: 'Копирай',
+    copyField: 'Копирай поле',
     copying: 'Копиране',
+    copyRow: 'Копирай ред',
     copyWarning:
       'Предстои да презапишете {{to}} с {{from}} за {{label}} {{title}}. Сигурни ли сте?',
     create: 'Създай',
@@ -335,6 +341,8 @@ export const bgTranslations: DefaultTranslationsObject = {
     overwriteExistingData: 'Презапишете съществуващите данни в полето',
     pageNotFound: 'Страницата не беше открита',
     password: 'Парола',
+    pasteField: 'Постави поле',
+    pasteRow: 'Постави ред',
     payloadSettings: 'Настройки на Payload',
     perPage: 'На страница: {{limit}}',
     previous: 'Предишен',

packages/translations/src/languages/bnBd.ts

@@ -90,6 +90,9 @@ export const bnBdTranslations: DefaultTranslationsObject = {
     followingFieldsInvalid_one: 'নিম্নলিখিত ক্ষেত্রটি অবৈধ:',
     followingFieldsInvalid_other: 'নিম্নলিখিত ক্ষেত্রগুলি অবৈধ:',
     incorrectCollection: 'ভুল সংগ্রহ',
+    insufficientClipboardPermissions:
+      'ক্লিপবোর্ড অ্যাক্সেস প্রত্যাখ্যান করা হয়েছে। দয়া করে আপনার ক্লিপবোর্ড অনুমতিগুলি পরীক্ষা করুন।',
+    invalidClipboardData: 'অবৈধ ক্লিপবোর্ড ডেটা।',
     invalidFileType: 'অবৈধ ফাইল প্রকার',
     invalidFileTypeValue: 'অবৈধ ফাইল প্রকার: {{value}}',
     invalidRequestArgs: 'অনুরোধে অবৈধ আর্গুমেন্ট পাস করা হয়েছে: {{args}}',
@@ -111,6 +114,7 @@ export const bnBdTranslations: DefaultTranslationsObject = {
     problemUploadingFile: 'ফাইল আপলোড করতে একটি সমস্যা হয়েছে।',
     tokenInvalidOrExpired: 'টোকেন অবৈধ বা মেয়াদ শেষ হয়ে গেছে।',
     tokenNotProvided: 'টোকেন প্রদান করা হয়নি।',
+    unableToCopy: 'কপি করা সম্ভব নয়।',
     unableToDeleteCount: '{{total}} {{label}} এর মধ্যে {{count}} টি মুছতে অক্ষম।',
     unableToReindexCollection:
       '{{collection}} সংগ্রহ পুনরায় সূচিবদ্ধ করতে ত্রুটি হয়েছে। অপারেশন বাতিল করা হয়েছে।',
@@ -242,7 +246,9 @@ export const bnBdTranslations: DefaultTranslationsObject = {
       'এটি বিদ্যমান সূচিগুলি সরিয়ে দেবে এবং সমস্ত সংগ্রহগুলির ডকুমেন্টগুলি পুনরায় সূচিবদ্ধ করবে।',
     copied: 'কপি করা হয়েছে',
     copy: 'কপি করুন',
+    copyField: 'ফিল্ড কপি করুন',
     copying: 'কপি করা হচ্ছে',
+    copyRow: 'সারি কপি করুন',
     copyWarning:
       'আপনি {{label}} {{title}} এর জন্য {{to}} কে {{from}} দ্বারা ওভাররাইট করতে চলেছেন। আপনি কি নিশ্চিত?',
     create: 'তৈরি করুন',
@@ -337,6 +343,8 @@ export const bnBdTranslations: DefaultTranslationsObject = {
     overwriteExistingData: 'বিদ্যমান ফিল্ড ডেটা ওভাররাইট করুন',
     pageNotFound: 'পৃষ্ঠা পাওয়া যায়নি',
     password: 'পাসওয়ার্ড',
+    pasteField: 'ফিল্ড পেস্ট করুন',
+    pasteRow: 'সারি পেস্ট করুন',
     payloadSettings: 'পেলোড সেটিংস',
     perPage: 'প্রতি পৃষ্ঠায়: {{limit}}',
     previous: 'পূর্ববর্তী',

packages/translations/src/languages/bnIn.ts

@@ -90,6 +90,9 @@ export const bnInTranslations: DefaultTranslationsObject = {
     followingFieldsInvalid_one: 'নিম্নলিখিত ক্ষেত্রটি অবৈধ:',
     followingFieldsInvalid_other: 'নিম্নলিখিত ক্ষেত্রগুলি অবৈধ:',
     incorrectCollection: 'ভুল সংগ্রহ',
+    insufficientClipboardPermissions:
+      'ক্লিপবোর্ড অ্যাক্সেস অস্বীকৃত হয়েছে। অনুগ্রহ করে আপনার ক্লিপবোর্ড অনুমতিগুলি পরীক্ষা করুন।',
+    invalidClipboardData: 'অবৈধ ক্লিপবোর্ড ডেটা।',
     invalidFileType: 'অবৈধ ফাইল প্রকার',
     invalidFileTypeValue: 'অবৈধ ফাইল প্রকার: {{value}}',
     invalidRequestArgs: 'অনুরোধে অবৈধ আর্গুমেন্ট পাস করা হয়েছে: {{args}}',
@@ -111,6 +114,7 @@ export const bnInTranslations: DefaultTranslationsObject = {
     problemUploadingFile: 'ফাইল আপলোড করতে একটি সমস্যা হয়েছে।',
     tokenInvalidOrExpired: 'টোকেন অবৈধ বা মেয়াদ শেষ হয়ে গেছে।',
     tokenNotProvided: 'টোকেন প্রদান করা হয়নি।',
+    unableToCopy: 'কপি করতে অক্ষম।',
     unableToDeleteCount: '{{total}} {{label}} এর মধ্যে {{count}} টি মুছতে অক্ষম।',
     unableToReindexCollection:
       '{{collection}} সংগ্রহ পুনরায় সূচিবদ্ধ করতে ত্রুটি হয়েছে। অপারেশন বাতিল করা হয়েছে।',
@@ -242,7 +246,9 @@ export const bnInTranslations: DefaultTranslationsObject = {
       'এটি বিদ্যমান সূচিগুলি সরিয়ে দেবে এবং সমস্ত সংগ্রহগুলির ডকুমেন্টগুলি পুনরায় সূচিবদ্ধ করবে।',
     copied: 'কপি করা হয়েছে',
     copy: 'কপি করুন',
+    copyField: 'ফিল্ড কপি করুন',
     copying: 'কপি করা হচ্ছে',
+    copyRow: 'সারি কপি করুন',
     copyWarning:
       'আপনি {{label}} {{title}} এর জন্য {{to}} কে {{from}} দ্বারা ওভাররাইট করতে চলেছেন। আপনি কি নিশ্চিত?',
     create: 'তৈরি করুন',
@@ -337,6 +343,8 @@ export const bnInTranslations: DefaultTranslationsObject = {
     overwriteExistingData: 'বিদ্যমান ফিল্ড ডেটা ওভাররাইট করুন',
     pageNotFound: 'পৃষ্ঠা পাওয়া যায়নি',
     password: 'পাসওয়ার্ড',
+    pasteField: 'ফিল্ড পেস্ট করুন',
+    pasteRow: 'সারি পেস্ট করুন',
     payloadSettings: 'পেলোড সেটিংস',
     perPage: 'প্রতি পৃষ্ঠায়: {{limit}}',
     previous: 'পূর্ববর্তী',

packages/translations/src/languages/ca.ts

@@ -91,6 +91,9 @@ export const caTranslations: DefaultTranslationsObject = {
     followingFieldsInvalid_one: 'El següent camp no és vàlid:',
     followingFieldsInvalid_other: 'Els següents camps no són vàlids:',
     incorrectCollection: 'Col·lecció incorrecta',
+    insufficientClipboardPermissions:
+      'Accés al porta-retalls denegat. Comproveu els permisos del porta-retalls.',
+    invalidClipboardData: 'Dades del porta-retalls no vàlides.',
     invalidFileType: "Tipus d'arxiu no vàlid",
     invalidFileTypeValue: "Tipus d'arxiu no vàlid: {{value}}",
     invalidRequestArgs: 'Arguments no vàlids en la sol·licitud: {{args}}',
@@ -112,6 +115,7 @@ export const caTranslations: DefaultTranslationsObject = {
     problemUploadingFile: "Hi ha hagut un problema mentre es carregava l'arxiu.",
     tokenInvalidOrExpired: 'El token és invàlid o ha caducat.',
     tokenNotProvided: "No s'ha proporcionat cap token.",
+    unableToCopy: 'No es pot copiar.',
     unableToDeleteCount: "No s'han pogut eliminar {{count}} de {{total}} {{label}}.",
     unableToReindexCollection:
       'Error al reindexar la col·lecció {{collection}}. Operació cancel·lada.',
@@ -241,7 +245,9 @@ export const caTranslations: DefaultTranslationsObject = {
       'Aixo eliminarà els índexs existents i reindexarà els documents de totes les col·leccions.',
     copied: 'Copiat',
     copy: 'Copiar',
+    copyField: 'Copiar camp',
     copying: 'Copiant',
+    copyRow: 'Copiar fila',
     copyWarning:
       'Estas a punt de sobreescriure {{to}} amb {{from}} per {{label}} {{title}}. Estas segur?',
     create: 'Crear',
@@ -336,6 +342,8 @@ export const caTranslations: DefaultTranslationsObject = {
     overwriteExistingData: 'Sobreescriu les dades existents',
     pageNotFound: 'Pàgina no trobada',
     password: 'Contrasenya',
+    pasteField: 'Enganxar camp',
+    pasteRow: 'Enganxar fila',
     payloadSettings: 'configuracio Payload',
     perPage: 'Per pagian: {{limit}}',
     previous: 'Previ',

packages/translations/src/languages/cs.ts

@@ -90,6 +90,9 @@ export const csTranslations: DefaultTranslationsObject = {
     followingFieldsInvalid_one: 'Následující pole je neplatné:',
     followingFieldsInvalid_other: 'Následující pole jsou neplatná:',
     incorrectCollection: 'Nesprávná kolekce',
+    insufficientClipboardPermissions:
+      'Přístup ke schránce byl odepřen. Zkontrolujte oprávnění ke schránce.',
+    invalidClipboardData: 'Neplatná data ve schránce.',
     invalidFileType: 'Neplatný typ souboru',
     invalidFileTypeValue: 'Neplatný typ souboru: {{value}}',
     invalidRequestArgs: 'Neplatné argumenty v požadavku: {{args}}',
@@ -111,6 +114,7 @@ export const csTranslations: DefaultTranslationsObject = {
     problemUploadingFile: 'Při nahrávání souboru došlo k chybě.',
     tokenInvalidOrExpired: 'Token je neplatný nebo vypršel.',
     tokenNotProvided: 'Token není poskytnut.',
+    unableToCopy: 'Nelze zkopírovat.',
     unableToDeleteCount: 'Nelze smazat {{count}} z {{total}} {{label}}',
     unableToReindexCollection:
       'Chyba při přeindexování kolekce {{collection}}. Operace byla přerušena.',
@@ -240,7 +244,9 @@ export const csTranslations: DefaultTranslationsObject = {
       'Tímto budou odstraněny stávající indexy a dokumenty ve všech kolekcích budou znovu zaindexovány.',
     copied: 'Zkopírováno',
     copy: 'Kopírovat',
+    copyField: 'Kopírovat pole',
     copying: 'Kopírování',
+    copyRow: 'Kopírovat řádek',
     copyWarning: 'Chystáte se přepsat {{to}} s {{from}} pro {{label}} {{title}}. Jste si jistý?',
     create: 'Vytvořit',
     created: 'Vytvořeno',
@@ -334,6 +340,8 @@ export const csTranslations: DefaultTranslationsObject = {
     overwriteExistingData: 'Přepsat existující data pole',
     pageNotFound: 'Stránka nenalezena',
     password: 'Heslo',
+    pasteField: 'Vložit pole',
+    pasteRow: 'Vložit řádek',
     payloadSettings: 'Payload nastavení',
     perPage: 'Na stránku: {{limit}}',
     previous: 'Předchozí',