Copy button

Author: 4eb0da

src/routes/posts/+layout.svelte

@@ -34,11 +34,19 @@
         }
     }
 
+    let copyTimeout: number;
     function onCopyClick(event: MouseEvent): void {
-        if (event.target instanceof Element && event.target.closest('.rehype-pretty-copy')) {
-            const code = event.target.closest<HTMLElement>('code');
-            if (code) {
-                navigator.clipboard.writeText(code.textContent);
+        const button = event.target;
+        if (button instanceof Element && button.closest('.code-copy-button')) {
+            const figure = button.closest<HTMLElement>('figure');
+            if (figure) {
+                navigator.clipboard.writeText(figure.textContent);
+
+                button.classList.add('code-copy-button_copied');
+                clearTimeout(copyTimeout);
+                copyTimeout = window.setTimeout(() => {
+                    button.classList.remove('code-copy-button_copied');
+                }, 3000);
             }
         }
     }

src/routes/posts/copied.svg

@@ -76,12 +76,14 @@
         }
     }
 
-    .rehype-pretty-copy {
-        display: none;
+    figure[data-rehype-pretty-code-figure] {
+        position: relative;
+    }
 
+    .code-copy-button {
         position: absolute;
-        top: -.4em;
-        right: -.4em;
+        top: .6em;
+        right: .6em;
 
         width: 24px;
         height: 24px;
@@ -96,11 +98,15 @@
         transition: opacity .3s ease-in-out;
     }
 
-    [data-rehype-pretty-code-figure]:hover .rehype-pretty-copy {
+    .code-copy-button_copied {
+        background-image: url(./copied.svg);
+    }
+
+    [data-rehype-pretty-code-figure]:hover .code-copy-button {
         opacity: .4;
     }
 
-    [data-rehype-pretty-code-figure]:hover .rehype-pretty-copy:hover {
+    [data-rehype-pretty-code-figure]:hover .code-copy-button:hover {
         opacity: .8;
     }
 

src/routes/posts/markdown.css

@@ -6,20 +6,14 @@ import rehypeToc from '@jsdevtools/rehype-toc';
 import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import { createHighlighter } from '@svelte-dev/pretty-code';
-import { transformerCopyButton } from '@rehype-pretty/transformers';
 
-function fixCopyButton() {
+function codeCopyButton() {
 	return {
-		name: 'fix-copy-button',
-		code(node) {
-			for (const it of node.children) {
-				if (it.properties?.class === 'rehype-pretty-copy') {
-					delete it.properties.onclick;
-				}
-			}
-			node.children = node.children.filter(it => it.tagName !== 'style');
+		name: 'code-copy-button',
+		postprocess(node) {
+			return '<div>' + node + '<button class="code-copy-button" title="Копировать"></button></div>';
 		}
-	};
+	}
 }
 
 /**
@@ -173,8 +167,7 @@ const config = {
 				keepBackground: false,
 				bypassInlineCode: true,
 				transformers: [
-					transformerCopyButton(),
-					fixCopyButton()
+					codeCopyButton()
 				]
 			})
 		},