<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
    <style>
        body, html {
            width: 100%;
            height: 100%;
            font-family: monospace;
        }

        .heading {
            display: block;
            width: 100%;
            border-top: 2px gray dashed;
            margin-top: 20px;
            box-sizing: border-box;
        }
    </style>
    <script>
        function setup()
        {
            document.body.addEventListener("paste", event => {
                dumpAsOutput(event.clipboardData);
                event.preventDefault();
            });
            document.body.addEventListener("drop", event => {
                dumpAsOutput(event.dataTransfer);
                event.preventDefault();
            });
            document.body.addEventListener("beforeinput", event => event.preventDefault());
            document.body.focus();
        }

        function dumpAsOutput(dataTransfer)
        {
            document.body.contentEditable = false;
            types.textContent = dataTransfer.types.join(", ");
            items.textContent = Array.from(dataTransfer.items).map(item => `(${item.kind.toUpperCase()}, ${item.type})`).join(", ");
            files.textContent = Array.from(dataTransfer.files).map(file => `('${file.name}', ${file.type})`).join(", ");
            urlData.textContent = dataTransfer.getData("text/uri-list");
            textData.textContent = dataTransfer.getData("text/plain");
            let markup = dataTransfer.getData("text/html");
            htmlData.insertAdjacentHTML("beforeend", markup);
            rawHTMLData.textContent = markup;
        }

        function reset()
        {
            Array.from(document.getElementsByClassName("output")).map(element => {
                element.innerHTML = "";
            });
            document.body.contentEditable = true;
        }
    </script>
</head>
<body contenteditable onload=setup()>
    <h3 class="heading">Types</h3>
    <div class="output" id="types"></div>

    <h3 class="heading">Items</h3>
    <div class="output" id="items"></div>

    <h3 class="heading">Files</h3>
    <div class="output" id="files"></div>

    <h3 class="heading">text/plain</h3>
    <div class="output" id="textData"></div>

    <h3 class="heading">text/uri-list</h3>
    <div class="output" id="urlData"></div>

    <h3 class="heading">text/html</h3>
    <div class="output" id="htmlData"></div>
    <div class="output" id="rawHTMLData"></div>
</body>
</html>