demo · v149

Sticker Drop

Use a GIF-capable Android keyboard and tap a sticker — it lands inline in the editor. On desktop, use the simulation buttons or drag-and-drop a PNG/GIF from your filesystem to see the same code path handle it.

Simulate IME insert
Tap the editor and insert a sticker / GIF from your Android keyboard, or drag-and-drop an image from anywhere…

the wiring

const editor = document.getElementById("editor");
const objectURLs = new WeakMap();

function rememberObjectURL(el, url) {
  objectURLs.set(el, url);
}

new MutationObserver(records => {
  for (const record of records) {
    for (const node of record.removedNodes) {
      const url = objectURLs.get(node);
      if (url) URL.revokeObjectURL(url);
    }
  }
}).observe(editor, { childList: true, subtree: true });

editor.addEventListener("beforeinput", (e) => {
  if (e.inputType === "insertFromPaste" || e.inputType === "insertFromDrop") {
    const items = e.dataTransfer?.items ?? [];
    for (const item of items) {
      if (item.kind === "file" && item.type.startsWith("image/")) {
        const file = item.getAsFile();
        const img = document.createElement("img");
        img.src = URL.createObjectURL(file);
        rememberObjectURL(img, img.src);
        editor.appendChild(img);
        e.preventDefault();
      }
    }
  }
});

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗