feat: Add image/png to the Clipboard write API

[Artur-]

Summary

• Lets a Vaadin app copy an image to the system clipboard as image/png when a click (or any trigger) fires, alongside the existing text/plain and text/html slots that ClipboardBinding already supports.
• Two image sources are supported: an <img>-rooted component already on the page, or a DownloadHandler that serves bytes from the server.
• Supports image-only writes and multi-format writes that pack text, HTML, and an image into a single ClipboardItem.

Details

• Safari activation, two places to watch. The TS helper hands the canvas-produced Promise<Blob> directly to ClipboardItem without awaiting it, so navigator.clipboard.write is called synchronously inside the user gesture. The DownloadHandler flavour also preloads the bytes via a hidden <img> attached at bind time, on purpose: fetching at click time would push the promise resolution past Safari's transient activation window and the write would abort silently.
• ClipboardContent getters are public on the surface, returning internal Action.Input<?> types. This is the price for WriteToClipboardAction(ClipboardContent) working across package boundaries; Action.Input is already documented "for internal use only" so the leak is contained.
• ImageBlobInput rejects non-<img> sources at bind time rather than letting the canvas converter produce an opaque error in the browser later.
• Tests: unit coverage on the new slot, the multi-format case, and the no-op stand-in for unset slots; IT coverage end-to-end via a 32×32 red PNG generated at view load (data-URL <img> plus the multi-format path) and a distinct blue PNG served by the DownloadHandler case. The IT view is sectioned and labelled so it doubles as a manual smoke-test page.

API Changes: feature/clipboard-image vs origin/main

4 classes affected, 1 class added, 5 methods added, 4 constructors added.

com.vaadin.flow.component.clipboard.ClipboardBinding

// Added
public void writeImage(Component source) // copy component's root <img> as image/png
public void writeImage(Component source, SerializableConsumer<@Nullable String> onCopied, SerializableConsumer<PromiseAction.Error> onError)
public void writeImage(DownloadHandler handler) // serve image bytes via a hidden <img> bound to the handler
public void writeImage(DownloadHandler handler, SerializableConsumer<@Nullable String> onCopied, SerializableConsumer<PromiseAction.Error> onError)

com.vaadin.flow.component.clipboard.ClipboardContent

// Added
public ClipboardContent image(Component source) // set the image/png slot to a component's root <img>
public Action.@Nullable Input<String> getTextInput() // visibility raised from package-private
public Action.@Nullable Input<String> getHtmlInput() // visibility raised from package-private
public Action.@Nullable Input<?> getImageInput() // new slot accessor

com.vaadin.flow.component.trigger.internal.ImageBlobInput

// Added
public class ImageBlobInput extends Action.Input<Object> // internal; renders the source <img> for the clipboard write helper
public ImageBlobInput(Component source) // throws IllegalArgumentException if source's root element is not <img>
public ImageBlobInput(Element source) // throws IllegalArgumentException if source is not <img>
protected JsFunction toJs(Trigger trigger)

com.vaadin.flow.component.trigger.internal.WriteToClipboardAction

// Added
public WriteToClipboardAction(Action.Input<?> imageInput) // dedicated image fire-and-forget
public WriteToClipboardAction(Action.Input<?> imageInput, SerializableConsumer<@Nullable String> onCopied, SerializableConsumer<PromiseAction.Error> onError) // dedicated image observed
public WriteToClipboardAction(ClipboardContent content) // multi-format fire-and-forget
public WriteToClipboardAction(ClipboardContent content, SerializableConsumer<@Nullable String> onCopied, SerializableConsumer<PromiseAction.Error> onError) // multi-format observed

Note: The existing Action.Input-based constructors (text, html) and (text, html, onCopied, onError) keep their main signatures. The 3-arg and 5-arg multi-format input constructors are private and not part of the public surface. WriteToClipboardAction and ImageBlobInput live in com.vaadin.flow.component.trigger.internal, documented "For internal use only. May be renamed or removed in a future release."

[github-actions]

Test Results

 1 434 files  ± 0   1 434 suites  ±0   1h 21m 39s ⏱️ + 1m 3s
10 092 tests +11  10 024 ✅ +11  68 💤 ±0  0 ❌ ±0 
10 564 runs  +11  10 495 ✅ +11  69 💤 ±0  0 ❌ ±0 

Results for commit a4b0cd4. ± Comparison against base commit 6e7a4ec.

♻️ This comment has been updated with latest results.

[mshabarov]

Need to test the docs bot workflow so pushed this forward by myself. If something doesn't seem correct let me know we'll fix later.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

Pull request created: #5633

Generated by Documentation Bot · gpt54 5.6M