✨ Add copy button

Author: heppokofrontend

index.html

@@ -24,7 +24,7 @@
 
     footer {
       padding: 20px;
-      margin: 50vh 0 0;
+      margin: 20vh 0 0;
       text-align: center;
       border-top: 1px solid #000;
     }

src/class/HTMLCodeBlockElement.ts

@@ -63,6 +63,7 @@ export default class HTMLCodeBlockElement extends HTMLElement {
     };
   })();
   #a11yName: HTMLElement;
+  #copyButton: HTMLButtonElement;
   #codeBlock: HTMLElement;
   #codeWrap: HTMLPreElement;
   /** Actual value of the accessor `value` */
@@ -88,9 +89,11 @@ export default class HTMLCodeBlockElement extends HTMLElement {
     this.textContent = '';
     this.#a11yName.textContent = this.#label;
     this.#slots.name.hidden = !this.#label;
+    this.#slots.copyButton.hidden = !this.#controls;
     this.#codeBlock.textContent = '';
     this.#codeBlock.insertAdjacentHTML('afterbegin', markup);
     this.append(this.#a11yName);
+    this.append(this.#copyButton);
     this.append(this.#codeWrap);
   }
 
@@ -206,21 +209,8 @@ export default class HTMLCodeBlockElement extends HTMLElement {
     super();
 
     /* -------------------------------------------------------------------------
-     * Setup Shadow DOM contents
+     * Setup DOM contents
      * ---------------------------------------------------------------------- */
-    /**
-     * The container of minimum text that will be read even
-     * if the accessible name (label attribute value) is omitted.
-     */
-    const a11yNamePrefix = (() => {
-      const span = document.createElement('span');
-
-      span.id = 'semantics';
-      span.hidden = true;
-      span.textContent = 'Code Block';
-
-      return span;
-    })()
     /** Container of accessible names (label attribute values). */
     const a11yName = (() => {
       const span = document.createElement('span');
@@ -230,6 +220,14 @@ export default class HTMLCodeBlockElement extends HTMLElement {
 
       return span;
     })();
+    const copyButton = (() => {
+      const button = document.createElement('button');
+
+      button.slot = 'copy-button';
+      button.textContent = 'Copy';
+
+      return button;
+    })();
     const codeElm = (() => {
       const code = document.createElement('code');
 
@@ -246,6 +244,24 @@ export default class HTMLCodeBlockElement extends HTMLElement {
 
       return pre;
     })();
+
+
+    /* -------------------------------------------------------------------------
+     * Setup Shadow DOM contents
+     * ---------------------------------------------------------------------- */
+    /**
+     * The container of minimum text that will be read even
+     * if the accessible name (label attribute value) is omitted.
+     */
+    const a11yNamePrefix = (() => {
+      const span = document.createElement('span');
+
+      span.id = 'semantics';
+      span.hidden = true;
+      span.textContent = 'Code Block';
+
+      return span;
+    })()
     const container = (() => {
       const div = document.createElement('div');
 
@@ -271,6 +287,7 @@ export default class HTMLCodeBlockElement extends HTMLElement {
     this.#language = this.getAttribute('language') || '';
     this.#controls = this.getAttribute('controls') !== null;
     this.#a11yName = a11yName;
+    this.#copyButton = copyButton;
     this.#codeBlock = codeElm;
     this.#codeWrap = preElm;
   }

src/utils/add-style.ts

@@ -15,6 +15,7 @@ style.textContent = `
     position: absolute;
     top: 0;
     left: 0;
+    z-index: 0;
     padding: 0 5px;
     max-width: 90%;
     color: #fff;
@@ -25,6 +26,27 @@ style.textContent = `
     background: #75758a;
     box-sizing: border-box;
   }
+
+  code-block button {
+    all: unset;
+    outline: revert;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 1;
+    padding: 10px;
+    display: block;
+    font-family: inherit;
+    color: #fff;
+    opacity: 0;
+    mix-blend-mode: exclusion;
+  }
+
+  code-block:hover button,
+  code-block button:focus {
+    opacity: 1;
+  }
+
   code-block pre,
   code-block code {
     font-family: inherit;