⚙️ 1.1.0

Author: heppokofrontend

dist/class/HTMLCodeBlockElement.d.ts

@@ -25,19 +25,19 @@ export default class HTMLCodeBlockElement extends HTMLElement {
     get value(): any;
     set value(src: any);
     /**
-     * The name of code block
+     * The accessible name of code block
      * @return - The value of the label attribute
      */
     get label(): any;
     set label(value: any);
     /**
-     * Language Mode
+     * Language name
      * @return - The value of the language attribute
      */
     get language(): any;
     set language(value: any);
     /**
-     * Flag to display the UI
+     * The flag to display the UI
      * @return - With or without controls attribute
      * */
     get controls(): boolean;

dist/class/HTMLCodeBlockElement.js

@@ -14,14 +14,26 @@ class HTMLCodeBlockElement extends HTMLElement {
         throw new TypeError('The syntax highlighting engine is not set to `HTMLCodeBlockElement.highlight`.');
         return { markup: '' };
     };
+    /** Observer to monitor the editing of the content of this element. */
+    #observer = new MutationObserver(() => {
+        this.#observer.disconnect();
+        // Remove elements other than element with `code` as `slot` attribute value.
+        // The content of the `[slot="code"]` element will be passed to next rendering.
+        const slots = this.querySelectorAll('[slot]:not([slot="code"])');
+        for (const slot of slots) {
+            slot.remove();
+        }
+        this.#value = (this.textContent || this.getAttribute('value') || '').replace(/^\n/, '').replace(/\n$/, '');
+        this.#render();
+    });
     /** Slot elements for Shadow DOM content */
     #slots = (() => {
         /**
          * @param name - The value of name attribute for the slot element
          * @param id - The value of id attribute for the slot element
          * @return - The slot element
          */
-        const mkslot = (name, id) => {
+        const mkslot = (name, id = '') => {
             const slot = document.createElement('slot');
             slot.name = name;
             if (id) {
@@ -35,6 +47,22 @@ class HTMLCodeBlockElement extends HTMLElement {
             code: mkslot('code'),
         };
     })();
+    /**
+     * True when rendered at least once.
+     * The purpose of this flag is to available the operation the following usage.
+     *
+     * Specifically, this is the case where an element is rendered
+     * on the screen without ever using the value property.
+     *
+     * ```js
+     * const cb = document.createElement('code-block');
+     *
+     * cb.language = 'json';
+     * cb.textContent = '{"a": 100}';
+     * document.body.prepend(cb);
+     * ```
+     */
+    #rendered = false;
     /** Pure DOM content */
     #a11yName;
     /** Pure DOM content */
@@ -93,6 +121,7 @@ class HTMLCodeBlockElement extends HTMLElement {
         if (!this.parentNode) {
             return;
         }
+        this.#observer.disconnect();
         const src = (() => {
             if (/[^\n]\n$/.test(this.#value)) {
                 return `${this.#value}\n`;
@@ -113,6 +142,9 @@ class HTMLCodeBlockElement extends HTMLElement {
         this.append(this.#a11yName);
         this.append(this.#copyButton);
         this.append(this.#codeWrap);
+        this.#observer.observe(this, {
+            childList: true,
+        });
     };
     /** @return - Syntax Highlighted Source Code */
     get value() {
@@ -123,13 +155,19 @@ class HTMLCodeBlockElement extends HTMLElement {
         this.#render();
     }
     /**
-     * The name of code block
+     * The accessible name of code block
      * @return - The value of the label attribute
      */
     get label() {
         return this.#label;
     }
     set label(value) {
+        if (this.#label === value ||
+            (this.#label === '' &&
+                this.getAttribute('label') === null &&
+                value === null)) {
+            return;
+        }
         if (value === null) {
             this.#label = '';
             this.removeAttribute('label');
@@ -141,13 +179,19 @@ class HTMLCodeBlockElement extends HTMLElement {
         this.#render();
     }
     /**
-     * Language Mode
+     * Language name
      * @return - The value of the language attribute
      */
     get language() {
         return this.#language;
     }
     set language(value) {
+        if (this.#language === value ||
+            (this.#language === '' &&
+                this.getAttribute('language') === null &&
+                value === null)) {
+            return;
+        }
         if (value === null) {
             this.#language = '';
             this.removeAttribute('language');
@@ -159,13 +203,16 @@ class HTMLCodeBlockElement extends HTMLElement {
         this.#render();
     }
     /**
-     * Flag to display the UI
+     * The flag to display the UI
      * @return - With or without controls attribute
      * */
     get controls() {
         return this.#controls;
     }
     set controls(value) {
+        if (this.#controls === value) {
+            return;
+        }
         this.#controls = value;
         if (this.#controls) {
             this.setAttribute('controls', '');
@@ -200,6 +247,11 @@ class HTMLCodeBlockElement extends HTMLElement {
         }
     }
     connectedCallback() {
+        if (this.#rendered === false &&
+            this.#value === '') {
+            this.#value = this.textContent || '';
+        }
+        this.#rendered = true;
         this.#render();
     }
     constructor() {

dist/index.all.js

@@ -1,10 +1,13 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HTMLCodeBlockElement = void 0;
-const highlight_js_1 = require("highlight.js");
-const HTMLCodeBlockElement_1 = require("./class/HTMLCodeBlockElement");
+const HTMLCodeBlockElement_1 = __importDefault(require("./class/HTMLCodeBlockElement"));
 const highlight_1 = require("./utils/highlight");
 require("./utils/add-style");
-HTMLCodeBlockElement_1.default.highlight = highlight_1.mkHighlightCallback(highlight_js_1.default);
+const hljs = require('highlight.js');
+HTMLCodeBlockElement_1.default.highlight = highlight_1.mkHighlightCallback(hljs);
 customElements.define('code-block', HTMLCodeBlockElement_1.default);
 exports.HTMLCodeBlockElement = HTMLCodeBlockElement_1.default;

dist/index.common.js

@@ -1,10 +1,13 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HTMLCodeBlockElement = void 0;
-const common_1 = require("highlight.js/lib/common");
-const HTMLCodeBlockElement_1 = require("./class/HTMLCodeBlockElement");
+const HTMLCodeBlockElement_1 = __importDefault(require("./class/HTMLCodeBlockElement"));
 const highlight_1 = require("./utils/highlight");
 require("./utils/add-style");
-HTMLCodeBlockElement_1.default.highlight = highlight_1.mkHighlightCallback(common_1.default);
+const hljs = require('highlight.js/lib/common');
+HTMLCodeBlockElement_1.default.highlight = highlight_1.mkHighlightCallback(hljs);
 customElements.define('code-block', HTMLCodeBlockElement_1.default);
 exports.HTMLCodeBlockElement = HTMLCodeBlockElement_1.default;

dist/index.core.js

@@ -1,10 +1,13 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HTMLCodeBlockElement = void 0;
-const core_1 = require("highlight.js/lib/core");
-const HTMLCodeBlockElement_1 = require("./class/HTMLCodeBlockElement");
+const HTMLCodeBlockElement_1 = __importDefault(require("./class/HTMLCodeBlockElement"));
 const highlight_1 = require("./utils/highlight");
 require("./utils/add-style");
-HTMLCodeBlockElement_1.default.highlight = highlight_1.mkHighlightCallback(core_1.default);
+const hljs = require('highlight.js/lib/core');
+HTMLCodeBlockElement_1.default.highlight = highlight_1.mkHighlightCallback(hljs);
 customElements.define('code-block', HTMLCodeBlockElement_1.default);
 exports.HTMLCodeBlockElement = HTMLCodeBlockElement_1.default;

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": "1.0.7",
+  "version": "1.1.0",
   "author": "heppokofrontend",
   "bugs": {
     "url": "https://github.com/heppokofrontend/html-code-block-element/issues"