⚙️ Build

Author: heppokofrontend

dist/class/HTMLCodeBlockElement.js

@@ -47,6 +47,7 @@ class HTMLCodeBlockElement extends HTMLElement {
         };
     })();
     #a11yName;
+    #copyButton;
     #codeBlock;
     #codeWrap;
     /** Actual value of the accessor `value` */
@@ -70,9 +71,11 @@ 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);
     };
     /** @returns - Syntax Highlighted Source Code */
@@ -167,26 +170,21 @@ class HTMLCodeBlockElement extends HTMLElement {
     constructor() {
         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');
             span.slot = 'name';
             span.textContent = this.getAttribute('label') || '';
             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');
             code.tabIndex = 0;
@@ -199,6 +197,20 @@ class HTMLCodeBlockElement extends HTMLElement {
             pre.append(codeElm);
             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');
             div.append(...Object.values(this.#slots));
@@ -219,6 +231,7 @@ 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;
     }

dist/utils/add-style.js

@@ -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,25 @@ style.textContent = `
     background: #75758a;
     box-sizing: border-box;
   }
+
+  code-block button {
+    all: unset;
+    outline: revert;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 1;
+    display: block;
+    color: #fff;
+    opacity: 0;
+    mix-blend-mode: exclusion;
+  }
+
+  code-block:hover button,
+  code-block:not(:hover) button:focus {
+    opacity: 1;
+  }
+
   code-block pre,
   code-block code {
     font-family: inherit;