Web Custom Formats: The latest addition for JavaScript Clipboard API
Web Custom Formats for JavaScript Clipboard API
Web Custom Formats are a new addition to the JavaScript Clipboard API. They allow users to copy and paste data from the web into other applications or systems. Thus, they can be useful if you want your users to access content on different websites in an easy way without having to switch between applications every time. This article will discuss the Web Custom Formats and their importance.
What is JavaScript Clipboard API?
Initially, the JavaScript program document.exeCommand was used to access the Windows clipboard. However, the API has been replaced by the JavaScript Clipboard API due to various security and performance issues. The main advantage of the API is that it can respond to the multiple commands coming from the website, such as copy, paste, and cut. It can also handle the read-write capabilities of the system.
The readText()and writeText() methods of the Clipboard API are quick alternatives to the more general read() and write() methods. They support fewer browsers but can copy and paste any data, even binary pictures.
Blob data which is commonly returned by a fetch() or canvas.toBlob() method is needed for copying. This is given to a constructor for a ClipboardItem so that it can be copied to the clipboard.
It is advisable to add the Clipboard API gradually so that your application only includes cut, copy, and paste capabilities when that capability is available.
JavaScript Clipboard API with Web Custom Formats
The JavaScript Clipboard API previously only supported text/plain, text/html, and image/png as MIME types that could be copied and pasted from the system clipboard. The browser often does this sanitization to, for instance, eliminate embedded script components or javascript: links from an HTML string or to stop PNG decompression bomb assaults.
However, in some circumstances, it may be preferable to support unclean content on the clipboard:
- Instances when the application handles the sanitization process.
- Situations in which the copied and pasted data must be identical.
In these circumstances, the JavaScript Clipboard API now supports web custom formats, enabling developers to copy any data.
What are Web Custom Formats?
Web Custom formats let you define new data types in your app by using them with JSON.stringify(). For example, let's say we wanted our users to be able to select multiple files from their browsers rather than having to choose each one individually. Websites use a standardized web custom format to read and write any unsanitized payloads, as well as a small subset of OS-specific formats for supporting legacy programs.
The browser consistently distorts the clipboard format name to signify that the content originates from the web, allowing native apps to choose to accept the unclean content.
The main advantage of using this format is that it enables developers and designers to efficiently work with websites with rich media, such as videos or images. In addition, all these elements can be copied directly into another application without first being converted into text form by default.
Writing Web Custom Formats
The only difference between writing web custom formats to the clipboard and writing sanitized forms is that you must prepend the string web (together with the trailing space) to the blob's MIME type.
const [jpegBlob, gifBlob] = await Promise.all([
fetch('image.jpg').then((response) => response.blob()),
fetch('image.gif').then((response) => response.blob()),
]);
try {
const clipboardItem = new ClipboardItem({
[web ${jpegBlob.type} ]: jpegBlob,
[web ${gifBlob.type} ]: gifBlob,
});
await navigator.clipboard.write([clipboardItem]);
} catch (err) {
console.error(err.name, err.message);
}The above code snippet fetches the remote JPEG and GIF images and obtains their blob representations.
The actual types of the blobs (image/jpeg and image/gif, respectively) are prefixed with the term webso that they become web image/jpeg and web image/gif, respectively.
Reading Web Custom Formats
Reading web custom formats from the clipboard is similar to reading sanitized forms, much like writing. The only difference is now the app needs to search for clipboard objects whose type begins with the string web. Let's look at some examples:
try {
const clipboardItems = await navigator.clipboard.read();
for (const clipboardItem of clipboardItems) {
for (const type of clipboardItem.types) {
if (!type.startsWith('web ')) {
continue;
}
const blob = await clipboardItem.getType(type);
}
}
} catch (err) {
console.error(err.name, err.message);
}Initially, inside the try block, it will iterate over all the clipboard items and discard if any types of formats are not related to Web custom formats. So after that, the sanitization happens to the blob object if you need and you can process it into your web application.
Web custom formats are interoperable with platform-specific apps. Since they would anticipateimage/jpegconventional platform-specific programs do not understand web custom formats like web image/jpeg. If concerned app developers determine that opt-in support for these formats is necessary for their consumers, they should gradually add them to their apps.
Writing custom data formats into the clipboard isn’t as simple as it sounds.
Web Custom Formats are a standard. They are an API that allows you to write custom data formats into the clipboard. It means your users can save their files in these formats and then paste them into their application without worrying about what format they’re keeping them in or how they are saving them.
Clipboard API’s purpose is not to allow users to create their file formats but to copy content from one source directly onto another source’s temporary storage space — a process called pasting, which stands for paste. It doesn’t matter if those sources are websites or applications, whether they use HTML5, Flash, JavaScript syntax, or something like XML.
Conclusion
The clipboard API is a great way to create custom HTML Format Strings that can be copied and pasted into other applications. Web applications can read and write custom, unsanitized, web-originated payloads from the clipboard using a standardized web custom format thanks to the async Clipboard API’s web custom formats. However, if you want to get more advanced, there are things to consider before making changes to your codebase.
Build Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
