|
// Note this doesn't work as a bookmark, you need the bookmark (minified) version |
|
javascript: window.navigator.clipboard |
|
.readText() |
|
.then((data) => { |
|
return window.navigator.clipboard |
|
.writeText( |
|
data |
|
// Replace `class=` with `className=` |
|
.replace(/class=/g, "className=") |
|
|
|
// Replace all attributes starting with @. |
|
// |
|
// E.g.: `@click.stop` -> `data-todo-at-stop` |
|
.replace( |
|
/ @([^"]*)=/g, |
|
(_all, group) => ` data-todo-at-${group.replace(/[.:]/g, "-")}=` |
|
) |
|
|
|
// Replaces all attributes starting with x-. |
|
// |
|
// E.g.: `x-transition:enter` -> `data-todo-x-transition-enter` |
|
.replace( |
|
/ x-([^ "]*)/g, |
|
(_all, group) => ` data-todo-x-${group.replace(/[.:]/g, "-")}` |
|
) |
|
|
|
// Replace html comments with JSX comments |
|
.replace(/<!--/g, "{/*") |
|
.replace(/-->/g, "*/}") |
|
|
|
// Replace `tabindex="0"` with `tabIndex={0}` |
|
.replace(/tabindex="([^"]*)"/g, "tabIndex={$1}") |
|
|
|
// Replace `datetime` with `dateTime` for <time /> |
|
.replace(/datetime=/g, "dateTime=") |
|
|
|
// Replace `clip-rule` with `clipRule` in svg's |
|
.replace(/clip-rule=/g, "clipRule=") |
|
|
|
// Replace `fill-rule` with `fillRule` in svg's |
|
.replace(/fill-rule=/g, "fillRule=") |
|
|
|
// Replace `stroke-linecap` with `strokeLinecap` in svg's |
|
.replace(/stroke-linecap=/g, "strokeLinecap=") |
|
|
|
// Replace `stroke-width` with `strokeWidth` in svg's |
|
.replace(/stroke-width=/g, "strokeWidth=") |
|
|
|
// Replace `stroke-linejoin` with `strokeLinejoin` in svg's |
|
.replace(/stroke-linejoin=/g, "strokeLinejoin=") |
|
|
|
// Replace `for` with `htmlFor` in forms |
|
.replace(/for=/g, "htmlFor=") |
|
|
|
// Replace all attributes starting with :. |
|
// |
|
// E.g.`:class="{ 'hidden': open, 'inline-flex': !open` -> |
|
// `data-todo-colon-class="{ 'hidden': open, 'inline-flex': !open }"` |
|
.replace(/ :(.*)=/g, " data-todo-colon-$1=") |
|
|
|
// Replace `href="#"` with `href="/"` (Otherwise Create React App complains) |
|
.replace(/href="#"/g, 'href="/"') |
|
|
|
// Replace relative src paths with absolute src paths. |
|
.replace(/src="\//g, 'src="https://tailwindui.com/') |
|
|
|
// Drop scripts ¯\_(ツ)_/¯ |
|
.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "") |
|
|
|
// Ensure img, input and hr tags are self closed |
|
.replace(/<(img|input|hr)([^>]*)>/g, "<$1$2 />") |
|
|
|
// Ensure we rewrite the style string to an object |
|
.replace(/style="([^"]*)"/g, (_, style) => { |
|
return `style={{${style |
|
.split(";") |
|
.filter((pair) => pair.trim().length) |
|
.map((pair) => pair.split(":").map((part) => part.trim())) |
|
.map(([key, value]) => |
|
[ |
|
key.replace(/-(\w)/g, (_, v) => v.toUpperCase()), |
|
JSON.stringify( |
|
value.match(/\d*px/) ? parseFloat(value) : value |
|
), |
|
].join(": ") |
|
) |
|
.join(", ")}}}`; |
|
}) |
|
|
|
// Trim the whitespace! |
|
.trim() |
|
) |
|
.then(() => { |
|
alert("Copied to clipboard!"); |
|
}); |
|
}) |
|
.catch((err) => { |
|
console.log("[TAILWIND UI - Example -> React] Error:", err); |
|
alert("Bummer! Something went wrong... (psst, see devtools)"); |
|
}); |
Hey thanks this is extremely useful :)