From Community to Code: Superside’s Copy/Paste Plugin for Sanity
At Superside, we’ve been on an exciting journey, using the power of Sanity. We’ve witnessed a ton of new features and improvements, such as visual editing, enhanced database search, and an overall improvement in developer experience.
Superside Content Model
Our content model is built on “blocks”. This means that every component you see on superside.com is mirrored as an object in Sanity. These blocks are incredibly flexible and easy to set up, but they posed a unique challenge.
Our content editors faced a significant challenge: they could not copy a single block without copying the entire document. This meant copying each field from a component one by one, a slow and frustrating process.
Finding Inspiration in a Feature Request
Our search for a solution led us to a feature request in Sanity’s repository, that had been unresolved since the end of 2021. This sparked an idea: why not develop the feature ourselves?
The Birth of the Copy/Paste Plugin: An Open-Source Contribution
We saw the potential value of this feature for our project and others, so we decided to develop it ourselves and then release it as an open-source contribution. This decision has since sped up and simplified our editors’ workflow significantly.
Simplicity and Efficiency
The beauty of our plugin lies in its simplicity. If you have type: 'array' which consists of type: 'object' and you want to copy/paste such objects between arrays in different documents, all you need to do is install our plugin and import the new field: defineField(copyPaste)
The core of the plugin is in src/components/CopyPasteInput.tsx. It renders three buttons using Sanity/UI: copy, paste, and… duplicate to multiple pages! We realized that if we had a script for copying and inserting whole blocks, why not have a button, which could paste one component to multiple documents at once?
Copy, Paste, and Duplicate
The process is simple. After clicking Copy, the onCopy function writes the schema of the currently opened block to your localStorage. Then, all you need to do is switch to another document, create an empty version of the block, and click Paste. The plugin takes the JSON from localStorage, replaces all keys inside it to make it unique, and updates the document using the useClient hook. The process for duplicating the object to multiple pages is similar but performed in a cycle.
Try the Copy/Paste Plugin Today
Check out the plugin on the Sanity store and experience the potential crucial speed increase in your work. And while you’re at it, consider checking out Superside. We also can reduce your production cost significantly compared to traditional creative agencies :)
Install the plugin to your Sanity project: Sanity.io Plugins
Contribute to our Github: @superside-oss/sanity-copy-paste
