demo · v140

Paste Prompt

An editor that watches the clipboard and pops a contextual paste hint the instant the user copies something useful into it. The prompt knows whether it's text, HTML, or an image and offers the matching insertion verb. The pattern Notion, Linear and Figma have all hand-rolled, now first-class.

Start typing your post here. When you copy something, a paste hint will appear.

Something was copied 
navigator.clipboard.addEventListener("clipboardchange", async () => {
  const items = await navigator.clipboard.read();
  const types = items.flatMap(i => i.types);

  if (types.includes("image/png")) {
    showHint("Paste image as embed");
  } else if (types.includes("text/plain")) {
    const text = await items[0].getType("text/plain").then(b => b.text());
    showHint(text.match(/^https?:\/\//)
      ? "Paste as link" : "Paste as text");
  }
});

privacy note

The event fires regardless of focus, but the underlying read still requires the "clipboard-read" permission and ignores cross-origin sources unless the user explicitly initiates it. A page can know the clipboard contents changed without knowing what they are.

see also