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;
+    }
+  }
 }

yarn.lock

@@ -4648,6 +4648,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-to-clipboard@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-compat@^3.6.5, core-js-compat@^3.8.1, core-js-compat@^3.9.0:
   version "3.9.1"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.9.1.tgz#4e572acfe90aff69d76d8c37759d21a5c59bb455"
@@ -14095,6 +14102,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"