| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <html> |
| <style> |
| html, body { |
| margin: 0; |
| font-family: -apple-system; |
| } |
| |
| #source, #destination { |
| width: 100%; |
| margin: 0; |
| } |
| |
| #destination { |
| border: 1px blue green; |
| height: 1024px; |
| } |
| |
| #source { |
| font-size: 150px; |
| white-space: nowrap; |
| height: 200px; |
| } |
| </style> |
| <body> |
| <div id="source">Rich text</div> |
| <div id="destination" contenteditable></div> |
| <pre id="output"></pre> |
| </body> |
| <script> |
| |
| // The contents of this `result` dictionary will contain a map of {event type => {MIME type => data}}. |
| result = {}; |
| |
| function updateResultWithEvent(event) { |
| const eventData = {}; |
| for (const type of event.clipboardData.types) |
| eventData[type] = event.clipboardData.getData(type); |
| result[event.type] = eventData; |
| output.textContent = JSON.stringify(result, null, " "); |
| event.preventDefault(); |
| } |
| |
| function setCustomData(event) { |
| event.clipboardData.setData("text/plain", "ben bitdiddle"); |
| event.clipboardData.setData("foo/🤔👌🙃", "🤔👌🙃"); |
| event.clipboardData.setData("text/html", "<b>年年年</b>"); |
| event.clipboardData.setData("bar/מקור השם עברית", `<i>מקור השם עברית</i>`); |
| event.clipboardData.setData("text/uri-list", "https://www.apple.com"); |
| event.clipboardData.setData("baz/年年年", "https://www.webkit.org"); |
| event.clipboardData.setData("text/rtf", "AAAAAAAAAAA"); |
| event.preventDefault(); |
| } |
| |
| getSelection().setBaseAndExtent(source, 0, source, 1); |
| source.addEventListener("copy", setCustomData); |
| destination.addEventListener("paste", updateResultWithEvent); |
| |
| if (window.testRunner && window.internals) { |
| internals.settings.setCustomPasteboardDataEnabled(true); |
| testRunner.dumpAsText(); |
| testRunner.execCommand("Copy"); |
| destination.focus(); |
| testRunner.execCommand("Paste"); |
| } |
| </script> |
| </html> |
