2d:null 2e:["$","title",null,{"children":"Clipboard | maddie lim ✨ | Observable"}] 33:[] 31:{"id":"1d73646c08b12404","slug":"clipboard","title":"Clipboard","thumbnail":"4b155d1a5f1516fbf2632c6dc266a1068ffcf59362dd39bcc89ed792c3db9fc2","access_level":"public","create_time":"$D2022-10-08T23:34:10.257Z","update_time":"$D2022-10-30T10:36:50.160Z","view_time":null,"first_public_time":"$D2022-10-08T23:44:54.776Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"408ee840d040526a","login":"maddievision","name":"maddie lim ✨","avatar_url":"https://avatars-next.observableusercontent.com/44fc4f0f8be73321b571127eefd9853a031c5c33e9985648c91e6aa827258ce0","tier":"starter_2024"},"version":90,"publish_version":90,"role":null,"authored":false,"authors":[{"type":"individual","id":"578d96c86967f83d","login":"maddievision","name":"maddie lim ✨","avatar_url":"https://avatars-next.observableusercontent.com/44fc4f0f8be73321b571127eefd9853a031c5c33e9985648c91e6aa827258ce0","tier":null}],"members":[{"type":"individual","id":"578d96c86967f83d","login":"maddievision","name":"maddie lim ✨","avatar_url":"https://avatars-next.observableusercontent.com/44fc4f0f8be73321b571127eefd9853a031c5c33e9985648c91e6aa827258ce0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"3f49c8fe2b95760a","slug":"helpers","title":"Utils","owner":{"id":"408ee840d040526a","login":"maddievision","name":"maddie lim ✨"}},"type":"notebook","body":{"title":"Clipboard","cells":[{"id":0,"value":"# Clipboard","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"Since Observable notebook content runs in an `iframe`, you can’t use the modern navigator Clipboard API directly. However you can still use the old method of overriding the `copy` event on the document (this is deprecated though and may not be around forever).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"## Examples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"im`copy`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"Inputs.button(\"copy\", { reduce: () => copy(\"Hello\") })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"Inputs.button(\"copy\", { reduce: () => copy([\"text/plain\", \"Hello 2\"]) })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"Inputs.button(\"copy with HTML\", {\n reduce: () =>\n copy({\n \"text/html\": `

Hello with HTML

`,\n \"text/plain\": \"Hello with HTML\"\n })\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"im`copyButton`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"copyButton({\n \"text/html\": `

Hello with HTML

`,\n \"text/plain\": \"Hello with HTML\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"## Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"copyButton = (...args) => {\n const button = html``;\n let resetTimeoutHandle = null;\n const lis = () => {\n copy(...args);\n if (resetTimeoutHandle) {\n clearTimeout(resetTimeoutHandle);\n }\n button.innerText = \"done\";\n resetTimeoutHandle = setTimeout(() => {\n button.innerText = \"content_copy\";\n resetTimeoutHandle = null;\n }, 1000);\n };\n button.addEventListener(\"click\", lis);\n invalidation.then(() => {\n if (resetTimeoutHandle) {\n clearTimeout(resetTimeoutHandle);\n }\n button.removeEventListener(lis);\n });\n\n return html`${icons}${button}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"copy = (arg1, arg2) => {\n let data = arg1;\n if (arg2 != null) {\n /** arg2 presence implies arg1, arg2 = mime type, value, respectively */\n data = [[arg1, arg2]];\n } else if (typeof data === \"string\") {\n /** single string argument is implied text/plain string */\n data = [[\"text/plain\", data]];\n } else if (\n Array.isArray(data) &&\n !Array.isArray(data[0]) &&\n data.length === 2\n ) {\n /** two element array is implied [mime type, value] tuple */\n data = [data];\n } else if (!Array.isArray(data) && typeof data === \"object\") {\n /** object is implied mime type => value mapping */\n data = Object.keys(data).map((k) => [k, data[k]]);\n }\n /** otherwise, treat this as an array of [mime type, value] tuples */\n\n return execClipboard((c) => {\n data.forEach(([mime, val]) => {\n c.setData(mime, val);\n });\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"execClipboard = (callback) =>\n new Promise(({ resolve, reject }) => {\n function listener(e) {\n callback(e.clipboardData);\n e.preventDefault();\n resolve();\n }\n document.addEventListener(\"copy\", listener);\n document.execCommand(\"copy\");\n document.removeEventListener(\"copy\", listener);\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"icons = html`\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"import { im } from \"@maddievision/doc-utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"