ClipboardItem data DOMString support usage document

Author: sambandaru

ClipboardAPI/clipboarditem-with-string-data.md

@@ -0,0 +1,34 @@
+# How to create ClipboardItem with string data
+**Last updated: October, 2024**
+
+ClipboardItem constructor extends support to string data. ClipboardItem data can now be a blob, a string, or a promise that resolves to either a blob or a string. This enhancement allows web authors to directly write text data to the clipboard as a string, without needing to create a blob.
+
+The feature is available in Chromium-based browsers in M132 or later behind the flag `ClipboardItemWithDOMStringSupport`
+
+1. Download Microsoft Edge ([Canary Channel](https://www.microsoftedgeinsider.com/en-us/download/canary)).
+2. Launch Edge with the command line flag `--enable-blink-features=ClipboardItemWithDOMStringSupport`.
+
+Here is an example of writing a ClipboardItem where text data is passed directly as string. 
+
+## Example
+
+```javascript
+async function writeToClipboard() {
+  try {
+    const text_string = "Hello World";
+    const html_string = "<h1>Hello World</h1>";
+    const image_blob = await fetch("/url/to/an/image").blob();
+    
+    const data = new ClipboardItem({ 
+      "text/plain": text_string, 
+      "text/html": html_string,
+      "image/png": image_blob
+    });
+
+    await navigator.clipboard.write([data]);
+    console.log('Data copied to clipboard');
+  } catch (e) {
+    console.error(e.message);
+  }
+}
+```