add: click to copy

Hetari · Hetari · commit 567df7e9b6e2 · 2024-10-05T19:59:12.000+03:00
diff --git a/src/App.vue b/src/App.vue
@@ -2,7 +2,7 @@
   <h1 class="">Vuejs Code Block UI Component</h1>
 
   <CodeBlock
-    theme="ultramin"
+    theme="dracula"
     :code="code"
     language="python"
     :numbered="true"
diff --git a/src/components/code-block/CodeBlock.vue b/src/components/code-block/CodeBlock.vue
@@ -20,7 +20,9 @@
             alt="" />
           <span>{{ props.fileName }}</span>
         </div>
-        <div class="actions">
+        <div
+          @click="copyCodeToClipboard(props.code)"
+          class="actions">
           <button
             type="button"
             class="copy-button">
@@ -79,14 +81,12 @@
     codeBlockInstance
   } from './types';
   import { useCodeBlock } from './use-code-block';
-  import { parseCodeIntoLines } from '../utils';
-
+  import { copyCodeToClipboard, parseCodeIntoLines } from '../utils';
   import { addThemeToCodeBlock, themes } from '../themes';
 
   const props = defineProps(codeBlockProps());
 
   const codeBlock: Ref<HTMLDivElement | null> = ref(null);
-
   const code = computed(() => parseCodeIntoLines(props.code, props.language));
   const currentTheme = computed(() => themes[props.theme]);
 
@@ -133,9 +133,6 @@
     gap: 0.5rem;
     padding: 0.5rem 1.5rem;
     padding-left: 0.25rem;
-
-    /* align-items: center;
-    border-bottom: 1px solid #7dd3fc; */
   }
 
   .vuejs-code-block pre .header .file-name p {
@@ -154,6 +151,8 @@
     padding: 0;
     cursor: pointer;
     color: #64748b;
+    background: rgba(127.5, 127.5, 127.5, 0.15);
+    border-radius: 0.5rem;
     transition: color 150ms ease-in-out;
   }
 
diff --git a/src/components/utils.ts b/src/components/utils.ts
@@ -39,3 +39,7 @@ export function parseCodeIntoLines(
     .map((line) => line.replace(/\s+$/, ''))
     .filter((line) => line.length > 0 || line === '');
 }
+
+export function copyCodeToClipboard(code: string) {
+  window.navigator.clipboard.writeText(code);
+}

Original file line number	Diff line number	Diff line change
`@@ -39,3 +39,7 @@ export function parseCodeIntoLines(`
`39`	`39`	`.map((line) => line.replace(/\s+$/, ''))`
`40`	`40`	`.filter((line) => line.length > 0 \|\| line === '');`
`41`	`41`	`}`
	`42`	`+`
	`43`	`+export function copyCodeToClipboard(code: string) {`
	`44`	`+ window.navigator.clipboard.writeText(code);`
	`45`	`+}`