⚙️ 0.2.0

Author: heppokofrontend

dist/class/HTMLCodeBlockElement.js

@@ -58,6 +58,23 @@ class HTMLCodeBlockElement extends HTMLElement {
     #language = '';
     /** Actual value of the accessor `controls` */
     #controls = false;
+    /** Click event handler of copy button */
+    #onClickButton = (() => {
+        let key = -1;
+        const textarea = document.createElement('textarea');
+        return () => {
+            clearTimeout(key);
+            textarea.value = this.#value.replace(/\n$/, '');
+            document.body.append(textarea);
+            textarea.select();
+            document.execCommand('copy');
+            textarea.remove();
+            this.#copyButton.textContent = 'Copied!';
+            key = window.setTimeout(() => {
+                this.#copyButton.textContent = 'Copy';
+            }, 1500);
+        };
+    })();
     /** Outputs the resulting syntax-highlighted markup to the DOM. */
     #render = function () {
         if (!this.parentNode) {
@@ -130,7 +147,6 @@ class HTMLCodeBlockElement extends HTMLElement {
         return this.#controls;
     }
     set controls(value) {
-        // TODO: コピーボタンの表示切り替え
         this.#controls = value;
         if (this.#controls) {
             this.setAttribute('controls', '');
@@ -181,8 +197,11 @@ class HTMLCodeBlockElement extends HTMLElement {
         })();
         const copyButton = (() => {
             const button = document.createElement('button');
+            button.type = 'button';
             button.slot = 'copy-button';
             button.textContent = 'Copy';
+            button.setAttribute('aria-live', 'polite');
+            button.addEventListener('click', this.#onClickButton);
             return button;
         })();
         const codeElm = (() => {
@@ -226,7 +245,7 @@ class HTMLCodeBlockElement extends HTMLElement {
         /* -------------------------------------------------------------------------
          * Hard private props initialize
          * ---------------------------------------------------------------------- */
-        this.#value = (this.textContent || '').replace(/^\n/, '').replace(/\n$/, '');
+        this.#value = (this.textContent || '').replace(/^\n/, '').replace(/\n\n$/, '');
         this.#label = a11yName.textContent || '';
         this.#language = this.getAttribute('language') || '';
         this.#controls = this.getAttribute('controls') !== null;

dist/utils/add-style.js

@@ -31,17 +31,19 @@ style.textContent = `
     all: unset;
     outline: revert;
     position: absolute;
-    right: 10px;
-    top: 10px;
+    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:not(:hover) button:focus {
+  code-block button:focus {
     opacity: 1;
   }
 

lib/html-code-block-element.all.min.js

@@ -1,7 +1,7 @@
 {
   "name": "@heppokofrontend/html-code-block-element",
   "description": "Code block custom element with syntax highlighting and copy button.",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "author": "heppokofrontend",
   "bugs": {
     "url": "https://github.com/heppokofrontend/html-code-block-element/issues"