1d6ffcb80e
<!-- 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>
Explore the Docs · Community Help · Roadmap · View G2 Reviews
Important
🎉 We've released 3.0! Star this repo or keep an eye on it to follow along.
Payload is the first-ever Next.js native CMS that can install directly in your existing /app folder. It's the start of a new era for headless CMS.
Benefits over a regular CMS
- Deploy anywhere, including serverless on Vercel for free
- Combine your front+backend in the same
/appfolder if you want - Don't sign up for yet another SaaS - Payload is open source
- Query your database in React Server Components
- Both admin and backend are 100% extensible
- No vendor lock-in
- Never touch ancient WP code again
- Build faster, never hit a roadblock
Quickstart
Before beginning to work with Payload, make sure you have all of the required software.
pnpx create-payload-app@latest
If you're new to Payload, you should start with the website template (pnpx create-payload-app@latest -t website). It shows how to do everything - including custom Rich Text blocks, on-demand revalidation, live preview, and more. It comes with a frontend built with Tailwind all in one /app folder.
One-click templates
Jumpstart your next project by starting with a pre-made template. These are production-ready, end-to-end solutions designed to get you to market as fast as possible.
🌐 Website
Build any kind of website, blog, or portfolio from small to enterprise. Comes with a fully functional front-end built with RSCs and Tailwind.
We're constantly adding more templates to our Templates Directory. If you maintain your own template, consider adding the payload-template topic to your GitHub repository for others to find.
✨ Features
- Completely free and open-source
- Next.js native, built to run inside your
/appfolder - Use server components to extend Payload UI
- Query your database directly in server components, no need for REST / GraphQL
- Fully TypeScript with automatic types for your data
- Auth out of the box
- Versions and drafts
- Localization
- Block-based layout builder
- Customizable React admin
- Lexical rich text editor
- Conditional field logic
- Extremely granular Access Control
- Document and field-level hooks for every action Payload provides
- Intensely fast API
- Highly secure thanks to HTTP-only cookies, CSRF protection, and more
🗒️ Documentation
Check out the Payload website to find in-depth documentation for everything that Payload offers.
Migrating from v2 to v3? Check out the 3.0 Migration Guide on how to do it.
🙋 Contributing
If you want to add contributions to this repository, please follow the instructions in contributing.md.
📚 Examples
The Examples Directory is a great resource for learning how to setup Payload in a variety of different ways, but you can also find great examples in our blog and throughout our social media.
If you'd like to run the examples, you can use create-payload-app to create a project from one:
npx create-payload-app --example example_name
You can see more examples at:
🔌 Plugins
Payload is highly extensible and allows you to install or distribute plugins that add or remove functionality. There are both officially-supported and community-supported plugins available. If you maintain your own plugin, consider adding the payload-plugin topic to your GitHub repository for others to find.
🚨 Need help?
There are lots of good conversations and resources in our Github Discussions board and our Discord Server. If you're struggling with something, chances are, someone's already solved what you're up against. 👇
⭐ Like what we're doing? Give us a star
