feat: add copy button to code block

Author: alsolovyev

src/backend/views/pages/blocks/code.twig

@@ -1,4 +1,12 @@
 <div class="block-code">
-  <div class="block-code__content">{{ code|escape }}</div>
+  <div class="block-code__wrapper">
+    <div class="block-code__content">{{ code | escape }}</div>
+  </div>
+  {%
+    include 'components/copy-button.twig' with {
+      ariaLabel: 'Copy Code to Clipboard',
+      class: 'block-code__copy-button',
+      textToCopy: code | escape,
+    }
+  %}
 </div>
-

src/frontend/styles/components/page.pcss

@@ -149,8 +149,18 @@
  * ==================
  */
 .block-code {
-  @apply --text-code-block;
-  @apply --squircle;
+  position: relative;
+
+  &:hover {
+    .block-code__copy-button {
+      opacity: 1;
+    }
+  }
+
+  &__wrapper {
+    @apply --text-code-block;
+    @apply --squircle;
+  }
 
   &__content {
     display: inline-block !important;
@@ -169,6 +179,13 @@
     }
   }
 
+  &__copy-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    opacity: 0;
+  }
+
   .hljs-params {
     color: var(--color-code-params);
   }