add copy button

docs/package.json

@@ -14,6 +14,7 @@
     "@mvasilkov/outdent": "^1.0.4",
     "canvas": "^2.6.1",
     "collect.js": "^4.28.6",
+    "copy-to-clipboard": "^3.3.1",
     "d3": "^6.5.0",
     "globby": "^11.0.0",
     "gridsome": "0.7.23",

docs/src/components/Demo/index.vue

@@ -22,6 +22,9 @@
             <!-- eslint-disable-next-line -->
             <prism :language="activeFile.highlight" :highlight="highlight">{{ activeFile.content }}</prism>
           </div>
+          <button class="demo__copy" @click="copy">
+            Copy
+          </button>
         </div>
         <div class="demo__meta">
           <div class="demo__name">
@@ -40,6 +43,7 @@
 </template>
 
 <script>
+import copy from 'copy-to-clipboard'
 import Prism from '~/components/Prism'
 import DemoFrame from '~/components/DemoFrame'
 import DemoMixin from '~/components/DemoMixin'
@@ -75,6 +79,12 @@ export default {
       return `https://github.com/ueberdosis/tiptap-next/tree/main/docs/src/demos/${this.name}`
     },
   },
+
+  methods: {
+    copy() {
+      copy(this.activeFile.content)
+    },
+  },
 }
 </script>
 

docs/src/components/Demo/style.scss

@@ -15,6 +15,7 @@
   }
 
   &__source {
+    position: relative;
     background-color: $colorBlack;
   }
 
@@ -27,7 +28,7 @@
   &__tabs {
     display: flex;
     flex: 1 1 auto;
-    padding: 0 1.25rem 0 1.25rem;
+    padding: 0 3.5rem 0 1.25rem;
     border-bottom: 2px solid rgba($colorWhite, 0.1);
   }
 
@@ -106,4 +107,22 @@
     font-weight: 700;
     margin-bottom: 0.25rem;
   }
+
+  &__copy {
+    position: absolute;
+    top: 0;
+    padding: 0.3rem 1rem;
+    right: 0;
+    font: inherit;
+    font-family: "JetBrainsMono", monospace;
+    font-size: 0.85rem;
+    background: $colorBlack;
+    border: 0;
+    border-radius: 0.4rem;
+    color: rgba($colorWhite, 0.7);
+
+    &:hover {
+      color: $colorWhite;
+    }
+  }
 }