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>
This commit is contained in:
@@ -729,7 +729,7 @@ describe('Access Control', () => {
|
||||
await page.locator('#field-unnamedTab').fill('unnamed tab')
|
||||
|
||||
// array field
|
||||
await page.locator('#field-array button').click()
|
||||
await page.locator('#field-array > button').click()
|
||||
await page.locator('#field-array__0__text').fill('array row 0')
|
||||
|
||||
await saveDocAndAssert(page)
|
||||
|
||||
Reference in New Issue
Block a user