demo · v143
Drop attributor
Drag a research snippet from the palette into the editor. beforeinput records the incoming payload for contrast, then the v143 input.dataTransfer read exposes the cited source URL and lets the editor convert the inserted text into a properly attributed block quote.
This is what citation-aware editors (Notion, Obsidian, Coda) need but had to hack with drop / dragend guesswork before: the final input event now carries the same transfer data as the interceptable beforeinput event.
Palette — drag any chip into the editor
quote
"The internet sees censorship as damage and routes around it."
cite: John Gilmore, 1993
quote
"The best way to predict the future is to invent it."
cite: Alan Kay
quote
"Worse is better."
cite: R. P. Gabriel, 1991
quote
"Make it work, make it right, make it fast."
cite: Kent Beck
Drop any quote chip here. Watch input.dataTransfer carry the citation through.
InputEvent log
What you're seeing
- Each chip is a
draggableelement. Itsdragstartsets thetext/plainand a customapplication/x-attributionMIME with the cite. - On drop, the editor's
beforeinputfires withinputType === "insertFromDrop"and logs the transfer types that were visible before the edit landed. - Chrome 143 adds the important second half: the resulting
inputevent now exposesevent.dataTransfer.getData("application/x-attribution"). - When the
input-side custom MIME is present, the demo replaces the inserted plain text with a proper<blockquote>and cite. If it is null, the plain insertion remains and the log marks the pre-v143 path.
editor.addEventListener("beforeinput", (e) => {
if (e.inputType !== "insertFromDrop") return;
logBeforeInput(e.dataTransfer); // beforeinput had this first
});
editor.addEventListener("input", (e) => {
if (e.inputType !== "insertFromDrop") return;
const cite = e.dataTransfer?.getData("application/x-attribution");
if (cite) replaceDroppedTextWithQuote(e.dataTransfer.getData("text/plain"), cite);
});