mirror of
https://github.com/AutoMaker-Org/automaker.git
synced 2026-02-01 08:13:37 +00:00
feat: add image paste functionality to DescriptionImageDropZone component
- Implemented handlePaste function to process images from clipboard across all OS. - Updated the component to handle pasted images and prevent default paste behavior. - Enhanced user instructions to include pasting images in the UI. Added a utility function to simulate pasting images in tests, ensuring cross-platform compatibility.
This commit is contained in:
@@ -36,3 +36,47 @@ export async function simulateFileDrop(
|
||||
{ selector: targetSelector, content: fileContent, name: fileName, mime: mimeType }
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Simulate pasting an image from clipboard onto an element
|
||||
* Works across all OS (Windows, Linux, macOS)
|
||||
*/
|
||||
export async function simulateImagePaste(
|
||||
page: Page,
|
||||
targetSelector: string,
|
||||
imageBase64: string,
|
||||
mimeType: string = "image/png"
|
||||
): Promise<void> {
|
||||
await page.evaluate(
|
||||
({ selector, base64, mime }) => {
|
||||
const target = document.querySelector(selector);
|
||||
if (!target) throw new Error(`Element not found: ${selector}`);
|
||||
|
||||
// Convert base64 to Blob
|
||||
const byteCharacters = atob(base64);
|
||||
const byteNumbers = new Array(byteCharacters.length);
|
||||
for (let i = 0; i < byteCharacters.length; i++) {
|
||||
byteNumbers[i] = byteCharacters.charCodeAt(i);
|
||||
}
|
||||
const byteArray = new Uint8Array(byteNumbers);
|
||||
const blob = new Blob([byteArray], { type: mime });
|
||||
|
||||
// Create a File from Blob
|
||||
const file = new File([blob], "pasted-image.png", { type: mime });
|
||||
|
||||
// Create a DataTransfer with clipboard items
|
||||
const dataTransfer = new DataTransfer();
|
||||
dataTransfer.items.add(file);
|
||||
|
||||
// Create ClipboardEvent with the image data
|
||||
const clipboardEvent = new ClipboardEvent("paste", {
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
clipboardData: dataTransfer,
|
||||
});
|
||||
|
||||
target.dispatchEvent(clipboardEvent);
|
||||
},
|
||||
{ selector: targetSelector, base64: imageBase64, mime: mimeType }
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user