I'm using an HTML DIV in Content Editable mode. From Javascript, given a valid image URL in a string, how can I convert that into something that I can push onto the clipboard so that when I paste into the Content Editable DIV with CTRL+V keystroke, it pastes the image itself and not the plain text string?
async function writeClipImg(url) {
try {
const data = await fetch(url);
const blob = await data.blob();
await navigator.clipboard.write([new ClipboardItem({
[blob.type]: blob
})]);
console.log('Fetched image copied.');
} catch (err) {
console.error(err.name, err.message);
}
}
//function from https://developer.mozilla.org/en-US/docs/Web/API/ClipboardItem
let text; //get somehow the text of the div
if (text.indexOf('://') != -1) { //check 'https://' (typic url substring) is there at the text
//only the https care - you can write this for http://, file:///, data etc.
let link = text.slice(text.indexOf('https://'), text.indexOf(' ', text.indexOf('https://')))
//its only get the first link
writeClipImg(link)
}