@webcoder49/code-input 2.5.0 → 2.6.0

package/code-input.js

@@ -1,10 +1,16 @@
 /**
  * **code-input** is a library which lets you create custom HTML `<code-input>`
  * elements that act like `<textarea>` elements but support syntax-highlighted
- * code, implemented using any typical syntax highlighting library. [MIT-Licensed]
- * 
- * **<https://github.com/WebCoder49/code-input>**
+ * code, implemented using any typical syntax highlighting library.
+ *
+ * License of whole library for bundlers:
+ *
+ * Copyright 2021-2025 Oliver Geer and contributors
+ * @license MIT
+ *
+ * **<https://code-input-js.org>**
  */
+"use strict";
 
 
 var codeInput = {
@@ -64,7 +70,11 @@ var codeInput = {
         "change",
         "selectionchange",
         "invalid",
-        "input"
+        "input",
+        "focus",
+        "blur",
+        "focusin",
+        "focusout"
     ],
 
     /* ------------------------------------
@@ -121,13 +131,12 @@ var codeInput = {
         // Add waiting code-input elements wanting this template from queue
         if (templateName in codeInput.templateNotYetRegisteredQueue) {
             for (let i in codeInput.templateNotYetRegisteredQueue[templateName]) {
-                elem = codeInput.templateNotYetRegisteredQueue[templateName][i];
-                elem.template = template;
-                codeInput.runOnceWindowLoaded((function(elem) { elem.connectedCallback(); }).bind(null, elem), elem);
+                const elem = codeInput.templateNotYetRegisteredQueue[templateName][i];
+                elem.templateObject = template;
+                elem.connectedCallback();
                 // Bind sets elem as first parameter of function 
                 // So innerHTML can be read
             }
-            console.log(`code-input: template: Added existing elements with template ${templateName}`);
         }
 
         if (codeInput.defaultTemplate == undefined) {
@@ -135,16 +144,14 @@ var codeInput = {
             // Add elements with default template from queue
             if (undefined in codeInput.templateNotYetRegisteredQueue) {
                 for (let i in codeInput.templateNotYetRegisteredQueue[undefined]) {
-                    elem = codeInput.templateNotYetRegisteredQueue[undefined][i];
-                    elem.template = template;
-                    codeInput.runOnceWindowLoaded((function(elem) { elem.connectedCallback(); }).bind(null, elem), elem);
+                    const elem = codeInput.templateNotYetRegisteredQueue[undefined][i];
+                    elem.templateObject = template;
+                    elem.connectedCallback();
                     // Bind sets elem as first parameter of function
                     // So innerHTML can be read
                 }
             }
-            console.log(`code-input: template: Set template ${templateName} as default`);
         }
-        console.log(`code-input: template: Created template ${templateName}`);
     },
 
     /**
@@ -159,7 +166,7 @@ var codeInput = {
          * Constructor to create a custom template instance. Pass this into `codeInput.registerTemplate` to use it.
          * I would strongly recommend using the built-in simpler template `codeInput.templates.prism` or `codeInput.templates.hljs`.
          * @param {(codeElement: HTMLCodeElement, codeInput?: codeInput.CodeInput) => void} highlight - a callback to highlight the code, that takes an HTML `<code>` element inside a `<pre>` element as a parameter
-         * @param {boolean} preElementStyled - is the `<pre>` element CSS-styled as well as the `<code>` element? If true, `<pre>` element's scrolling is synchronised; if false, `<code>` element's scrolling is synchronised.
+         * @param {boolean} preElementStyled - is the `<pre>` element CSS-styled (if so set to true), or the `<code>` element (false)?
          * @param {boolean} isCode - is this for writing code? If true, the code-input's lang HTML attribute can be used, and the `<code>` element will be given the class name 'language-[lang attribute's value]'.
          * @param {boolean} includeCodeInputInHighlightFunc - Setting this to true passes the `<code-input>` element as a second argument to the highlight function.
          * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.Plugin`
@@ -209,6 +216,7 @@ var codeInput = {
         plugins = [];
     },
 
+    // ESM-SUPPORT-START-TEMPLATES-BLOCK-1 Do not (re)move this - it's needed for ESM generation!
     /**
      * For creating a custom template from scratch, please 
      * use `new codeInput.Template(...)`
@@ -222,38 +230,19 @@ var codeInput = {
      * For adding small pieces of functionality, please see `codeInput.plugins`.
      */
     templates: {
+        // (Source code for class templates after var codeInput = ... so they can extend the codeInput.Template class)
         /**
-         * Constructor to create a template that uses Prism.js syntax highlighting (https://prismjs.com/)
-         * @param {Object} prism Import Prism.js, then after that import pass the `Prism` object as this parameter.
-         * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
-         * @returns {codeInput.Template} template object
+         * @deprecated Please use `new codeInput.templates.Prism(...)`
          */
         prism(prism, plugins = []) { // Dependency: Prism.js (https://prismjs.com/)
-            return new codeInput.Template(
-                prism.highlightElement, // highlight
-                true, // preElementStyled
-                true, // isCode
-                false, // includeCodeInputInHighlightFunc
-                plugins
-            );
+            return new codeInput.templates.Prism(prism, plugins);
         },
+
         /**
-         * Constructor to create a template that uses highlight.js syntax highlighting (https://highlightjs.org/)
-         * @param {Object} hljs Import highlight.js, then after that import pass the `hljs` object as this parameter.
-         * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
-         * @returns {codeInput.Template} template object
+         * @deprecated Please use `new codeInput.templates.Hljs(...)`
          */
         hljs(hljs, plugins = []) { // Dependency: Highlight.js (https://highlightjs.org/)
-            return new codeInput.Template(
-                function(codeElement) {
-                    codeElement.removeAttribute("data-highlighted");
-                    hljs.highlightElement(codeElement);
-                }, // highlight
-                false, // preElementStyled
-                true, // isCode
-                false, // includeCodeInputInHighlightFunc
-                plugins
-            );
+            return new codeInput.templates.Hljs(hljs, plugins);
         },
 
         /**
@@ -318,7 +307,7 @@ var codeInput = {
         },
         
         /**
-         * @deprecated Please use `new codeInput.Template()`
+         * @deprecated Please use `new codeInput.Template(...)`
          */
         custom(highlight = function () { }, preElementStyled = true, isCode = true, includeCodeInputInHighlightFunc = false, plugins = []) {
             return {
@@ -330,6 +319,7 @@ var codeInput = {
             };
         },
     },
+    // ESM-SUPPORT-END-TEMPLATES-BLOCK-1 Do not (re)move this - it's needed for ESM generation!
 
     /* ------------------------------------
     *  ------------Plugins-----------------
@@ -370,7 +360,6 @@ var codeInput = {
          * modifications to the `codeInput.Plugin.attributeChanged` method.
          */
         constructor(observedAttributes) {
-            console.log("code-input: plugin: Created plugin");
 
             observedAttributes.forEach((attribute) => {
                 codeInput.observedAttributes.push(attribute);
@@ -378,9 +367,9 @@ var codeInput = {
         }
 
         /**
-         * Replace the keys in destination with any source
+         * Replace the values in destination with those from source where the keys match, in-place.
          * @param {Object} destination Where to place the translated strings, already filled with the keys pointing to English strings.
-         * @param {Object} source The same keys, or some of them, mapped to translated strings.
+         * @param {Object} source The same keys, or some of them, mapped to translated strings. Keys not present here will retain the values they are maapped to in destination.
          */
         addTranslations(destination, source) {
             for(const key in source) {
@@ -423,13 +412,20 @@ var codeInput = {
     *  ------------------------------------ */
 
     /**
-     * A code-input element.
+     * A `<code-input>` element, an instance of an `HTMLElement`, and the result
+     * of `document.createElement("code-input")`. Attributes are only set when
+     * the element's template has been registered, and before this are null.
      */
     CodeInput: class extends HTMLElement {
         constructor() {
             super(); // Element
         }
 
+        /**
+         * When the code-input's template is registered, this contains its codeInput.Template object.
+         * Should be treated as read-only by external code.
+         */
+        templateObject = null;
         /**
         * Exposed child textarea element for user to input code in
         */
@@ -446,8 +442,8 @@ var codeInput = {
         codeElement = null;
 
         /** 
-         * Exposed non-scrolling element designed to contain dialog boxes etc. that shouldn't scroll
-         * with the code-input element.
+         * Exposed non-scrolling element designed to contain dialog boxes etc. from plugins,
+         * that shouldn't scroll with the code-input element.
          */
         dialogContainerElement = null;
 
@@ -472,8 +468,8 @@ var codeInput = {
          * @param {Array} args - the arguments to pass into the event callback in the template after the code-input element. Normally left empty
         */
         pluginEvt(eventName, args) {
-            for (let i in this.template.plugins) {
-                let plugin = this.template.plugins[i];
+            for (let i in this.templateObject.plugins) {
+                let plugin = this.templateObject.plugins[i];
                 if (eventName in plugin) {
                     if (args === undefined) {
                         plugin[eventName](this);
@@ -493,7 +489,6 @@ var codeInput = {
         * to syntax-highlight it. */
 
         needsHighlight = false; // Just inputted
-        handleEventsFromTextarea = true; // Turn to false when unusual internal events are called on the textarea
         originalAriaDescription;
 
         /**
@@ -529,19 +524,11 @@ var codeInput = {
             this.pluginEvt("beforeHighlight");
 
             // Syntax Highlight
-            if (this.template.includeCodeInputInHighlightFunc) this.template.highlight(resultElement, this);
-            else this.template.highlight(resultElement);
+            if (this.templateObject.includeCodeInputInHighlightFunc) this.templateObject.highlight(resultElement, this);
+            else this.templateObject.highlight(resultElement);
 
             this.syncSize();
 
-            // If editing here, scroll to the caret by focusing, though this shouldn't count as a focus event
-            if(this.textareaElement === document.activeElement) {
-                this.handleEventsFromTextarea = false;
-                this.textareaElement.blur();
-                this.textareaElement.focus();
-                this.handleEventsFromTextarea = true;
-            }
-
             this.pluginEvt("afterHighlight");
         }
 
@@ -550,7 +537,7 @@ var codeInput = {
          */
         syncSize() {
             // Synchronise the size of the pre/code and textarea elements
-            if(this.template.preElementStyled) {
+            if(this.templateObject.preElementStyled) {
                 this.style.backgroundColor = getComputedStyle(this.preElement).backgroundColor;
                 this.textareaElement.style.height = getComputedStyle(this.preElement).height;
                 this.textareaElement.style.width = getComputedStyle(this.preElement).width;
@@ -624,21 +611,45 @@ var codeInput = {
         setup() {
             if(this.textareaElement != null) return; // Already set up
 
+            this.mutationObserver = new MutationObserver(this.mutationObserverCallback.bind(this));
+            this.mutationObserver.observe(this, {
+                attributes: true,
+                attributeOldValue: true
+            });
+
             this.classList.add("code-input_registered"); // Remove register message
-            if (this.template.preElementStyled) this.classList.add("code-input_pre-element-styled");
+            if (this.templateObject.preElementStyled) this.classList.add("code-input_pre-element-styled");
 
             this.pluginEvt("beforeElementsAdded");
 
+            const fallbackTextarea = this.querySelector("textarea[data-code-input-fallback]");
+            let value;
+            if(fallbackTextarea) {
+                // Fallback textarea exists
+                // Sync attributes; existing code-input attributes take priority
+                let textareaAttributeNames = fallbackTextarea.getAttributeNames();
+                for(let i = 0; i < textareaAttributeNames.length; i++) {
+                    const attr = textareaAttributeNames[i];
+                    if(!this.hasAttribute(attr)) {
+                        this.setAttribute(attr, fallbackTextarea.getAttribute(attr));
+                    }
+                }
+                // Sync value
+                value = fallbackTextarea.value;
+            } else {
+                value = this.unescapeHtml(this.innerHTML);
+            }
+            value = value || this.getAttribute("value") || "";
+
             // First-time attribute sync
-            let lang = this.getAttribute("language") || this.getAttribute("lang");
-            let placeholder = this.getAttribute("placeholder") || this.getAttribute("language") || this.getAttribute("lang") || "";
-            let value = this.unescapeHtml(this.innerHTML) || this.getAttribute("value") || "";
-            // Value attribute deprecated, but included for compatibility
+            const lang = this.getAttribute("language") || this.getAttribute("lang");
+            const placeholder = this.getAttribute("placeholder") || lang || "";
+
 
             this.initialValue = value; // For form reset
 
             // Create textarea
-            let textarea = document.createElement("textarea");
+            const textarea = document.createElement("textarea");
             textarea.placeholder = placeholder;
             if(value != "") {
                 textarea.value = value;
@@ -657,9 +668,7 @@ var codeInput = {
                 this.classList.add("code-input_mouse-focused");
             });
             textarea.addEventListener("blur", () => {
-                if(this.handleEventsFromTextarea) {
-                    this.classList.remove("code-input_mouse-focused");
-                }
+                this.classList.remove("code-input_mouse-focused");
             });
 
             this.innerHTML = ""; // Clear Content
@@ -691,7 +700,7 @@ var codeInput = {
             pre.append(code);
             this.append(pre);
 
-            if (this.template.isCode) {
+            if (this.templateObject.isCode) {
                 if (lang != undefined && lang != "") {
                     code.classList.add("language-" + lang.toLowerCase());
                 }
@@ -722,19 +731,34 @@ var codeInput = {
         }
 
         /**
-         * @deprecated Please use `codeInput.CodeInput.escapeHtml`
+         * @deprecated This shouldn't have been accessed as part of the library's public interface (to enable more flexibility in backwards-compatible versions), but is still here just in case it was.
          */
         escape_html(text) {
             return this.escapeHtml(text);
         }
 
         /**
-         * @deprecated Please use `codeInput.CodeInput.getTemplate`
+         * @deprecated This shouldn't have been accessed as part of the library's public interface (to enable more flexibility in backwards-compatible versions), but is still here just in case it was.
          */
         get_template() {
             return this.getTemplate();
         }
 
+        /**
+         * @deprecated Present for backwards compatibility; use CodeInput.templateObject.
+         */
+        get template() {
+            return this.templateObject;
+        }
+
+        /**
+         * @deprecated The Vue framework may try to set the template
+         * property to the value of the template attribute, a string.
+         * This should not happen. Intentional use of this should
+         * also not happen since templates are changed by changing
+         * the template attribute to the name of one registered.
+         */
+        set template(value) { }
 
         /* ------------------------------------
         *  -----------Callbacks----------------
@@ -747,19 +771,14 @@ var codeInput = {
          * find its template and set up the element.
          */
         connectedCallback() {
-            this.template = this.getTemplate();
-            if (this.template != undefined) {
+            // Stored in templateObject because some frameworks will override
+            // template property with the string value of the attribute
+            this.templateObject = this.getTemplate();
+            if (this.templateObject != undefined) {
                 this.classList.add("code-input_registered");
-                codeInput.runOnceWindowLoaded(() => { 
-                    this.setup();
-                    this.classList.add("code-input_loaded");
-                }, this);
-            }
-            this.mutationObserver = new MutationObserver(this.mutationObserverCallback.bind(this));
-            this.mutationObserver.observe(this, {
-                attributes: true,
-                attributeOldValue: true
-            });
+                this.setup();
+                this.classList.add("code-input_loaded");
+            } 
         }
 
         mutationObserverCallback(mutationList, observer) {
@@ -799,8 +818,8 @@ var codeInput = {
                         this.value = newValue;
                         break;
                     case "template":
-                        this.template = codeInput.usedTemplates[newValue || codeInput.defaultTemplate];
-                        if (this.template.preElementStyled) this.classList.add("code-input_pre-element-styled");
+                        this.templateObject = codeInput.usedTemplates[newValue || codeInput.defaultTemplate];
+                        if (this.templateObject.preElementStyled) this.classList.add("code-input_pre-element-styled");
                         else this.classList.remove("code-input_pre-element-styled");
                         // Syntax Highlight
                         this.scheduleHighlight();
@@ -885,22 +904,20 @@ var codeInput = {
             this.boundEventCallbacks[listener] = boundCallback;
 
             if (codeInput.textareaSyncEvents.includes(type)) {
-                // Synchronise with textarea, only when handleEventsFromTextarea is true
-                // This callback is modified to only run when the handleEventsFromTextarea is set.
-                let conditionalBoundCallback = function(evt) { if(this.handleEventsFromTextarea) boundCallback(evt); }.bind(this);
-                this.boundEventCallbacks[listener] = conditionalBoundCallback;
+                // Synchronise with textarea
+                this.boundEventCallbacks[listener] = boundCallback;
 
                 if (options === undefined) {
                     if(this.textareaElement == null) {
                         this.addEventListener("code-input_load", () => { this.textareaElement.addEventListener(type, boundCallback); });
                     } else {
-                        this.textareaElement.addEventListener(type, conditionalBoundCallback);
+                        this.textareaElement.addEventListener(type, boundCallback);
                     }
                 } else {
                     if(this.textareaElement == null) {
                         this.addEventListener("code-input_load", () => { this.textareaElement.addEventListener(type, boundCallback, options); });
                     } else {
-                        this.textareaElement.addEventListener(type, conditionalBoundCallback, options);
+                        this.textareaElement.addEventListener(type, boundCallback, options);
                     }
                 }
             } else {
@@ -949,8 +966,18 @@ var codeInput = {
          * Get the text contents of the code-input element.
          */
         get value() {
-            // Get from editable textarea element
-            return this.textareaElement.value;
+            if(this.textareaElement) {
+                // Get from editable textarea element
+                return this.textareaElement.value;
+            } else {
+                // Unregistered
+                const fallbackTextarea = this.querySelector("textarea[data-code-input-fallback]");
+                if(fallbackTextarea) {
+                    return fallbackTextarea.value;
+                } else {
+                    return this.innerHTML;
+                }
+            }
         }
         /**
          * Set the text contents of the code-input element.
@@ -960,11 +987,28 @@ var codeInput = {
             if (val === null || val === undefined) {
                 val = "";
             }
-            // Save in editable textarea element
-            this.textareaElement.value = val;
-            // Trigger highlight
-            this.scheduleHighlight();
-            return val;
+            if(this.textareaElement) {
+                // Save in editable textarea element
+                this.textareaElement.value = val;
+                // Trigger highlight
+                this.scheduleHighlight();
+            } else {
+                // Unregistered
+                const fallbackTextarea = this.querySelector("textarea[data-code-input-fallback]");
+                if(fallbackTextarea) {
+                    fallbackTextarea.value = val;
+                } else {
+                    this.innerHTML = val;
+                }
+            }
+        }
+
+        // Synchronise blur and focus
+        focus(options={}) {
+            return this.textareaElement.focus(options);
+        }
+        blur(options={}) {
+            return this.textareaElement.blur(options);
         }
 
         /**
@@ -1032,7 +1076,7 @@ var codeInput = {
 
         /**
          * Allows plugins to store data in the scope of a single element.
-         * Key - name of the plugin
+         * Key - name of the plugin, in camelCase
          * Value - object of data to be stored; different plugins may use this differently.
          */
         pluginData = {};
@@ -1043,19 +1087,66 @@ var codeInput = {
         formResetCallback() {
             this.value = this.initialValue;
         };
-    },
+    }
+}
 
-    /** 
-     * To ensure the DOM is ready, run this callback after the window 
-     * has loaded (or now if it has already loaded)
+// ESM-SUPPORT-START-TEMPLATES-BLOCK-2 Do not (re)move this - it's needed for ESM generation!
+{
+    // Templates are defined here after the codeInput variable is set, because they reference it by extending codeInput.Template.
+
+    // ESM-SUPPORT-START-TEMPLATE-prism Do not (re)move this - it's needed for ESM generation!
+    /**
+    * A template that uses Prism.js syntax highlighting (https://prismjs.com/).
+    */
+    class Prism extends codeInput.Template { // Dependency: Prism.js (https://prismjs.com/)
+        /**
+        * Constructor to create a template that uses Prism.js syntax highlighting (https://prismjs.com/)
+        * @param {Object} prism Import Prism.js, then after that import pass the `Prism` object as this parameter.
+        * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
+        * @param {boolean} preElementStyled - Defaults to true, which should be right for most themes. If the styling is broken, change to false. (See `codeInput.Template` constructor's definition.)
+        * @returns {codeInput.Template} template object
+        */
+        constructor(prism, plugins = [], preElementStyled = true) {
+            super(
+                prism.highlightElement, // highlight
+                preElementStyled, // preElementStyled
+                true, // isCode
+                false, // includeCodeInputInHighlightFunc
+                plugins
+            );
+        }
+    };
+    // ESM-SUPPORT-END-TEMPLATE-prism Do not (re)move this - it's needed for ESM generation!
+    codeInput.templates.Prism = Prism;
+
+    // ESM-SUPPORT-START-TEMPLATE-hljs Do not (re)move this - it's needed for ESM generation!
+    /**
+     * A template that uses highlight.js syntax highlighting (https://highlightjs.org/).
      */
-    runOnceWindowLoaded(callback, codeInputElem) {
-        if(document.readyState == "complete") {
-            callback(); // Fully loaded
-        } else {
-            window.addEventListener("load", callback);
+    class Hljs extends codeInput.Template { // Dependency: Highlight.js (https://highlightjs.org/)
+        /**
+         * Constructor to create a template that uses highlight.js syntax highlighting (https://highlightjs.org/)
+         * @param {Object} hljs Import highlight.js, then after that import pass the `hljs` object as this parameter.
+         * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
+         * @param {boolean} preElementStyled - Defaults to false, which should be right for most themes. If the styling is broken, change to true. (See `codeInput.Template` constructor's definition.)
+         * @returns {codeInput.Template} template object
+         */
+        constructor(hljs, plugins = [], preElementStyled = false) {
+            super(
+                function(codeElement) {
+                    codeElement.removeAttribute("data-highlighted");
+                    hljs.highlightElement(codeElement);
+                }, // highlight
+                preElementStyled, // preElementStyled
+                true, // isCode
+                false, // includeCodeInputInHighlightFunc
+                plugins
+            );
         }
-    }
+    };
+    // ESM-SUPPORT-END-TEMPLATE-hljs Do not (re)move this - it's needed for ESM generation!
+    codeInput.templates.Hljs = Hljs;
 }
+// ESM-SUPPORT-END-TEMPLATES-BLOCK-2 Do not (re)move this - it's needed for ESM generation!
 
 customElements.define("code-input", codeInput.CodeInput);

package/code-input.min.css

@@ -1 +1 @@
-code-input{display:block;overflow-y:auto;overflow-x:auto;position:relative;top:0;left:0;margin:8px;--padding:16px;height:250px;font-size:inherit;font-family:monospace;line-height:1.5;tab-size:2;caret-color:#a9a9a9;white-space:pre;padding:0!important;display:grid;grid-template-columns:100%;grid-template-rows:100%}code-input:not(.code-input_loaded){padding:var(--padding,16px)!important}code-input textarea,code-input.code-input_pre-element-styled pre,code-input:not(.code-input_pre-element-styled) pre code{margin:0!important;padding:var(--padding,16px)!important;border:0;min-width:calc(100% - var(--padding) * 2);min-height:calc(100% - var(--padding) * 2);overflow:hidden;resize:none;grid-row:1;grid-column:1;display:block}code-input.code-input_pre-element-styled pre,code-input:not(.code-input_pre-element-styled) pre code{height:max-content;width:max-content}code-input.code-input_pre-element-styled pre code,code-input:not(.code-input_pre-element-styled) pre{margin:0!important;padding:0!important;width:100%;height:100%}code-input pre,code-input pre *,code-input textarea{font-size:inherit!important;font-family:inherit!important;line-height:inherit!important;tab-size:inherit!important;text-align:inherit!important}code-input textarea[dir=auto]+pre{unicode-bidi:plaintext}code-input textarea[dir=ltr]+pre{direction:ltr}code-input textarea[dir=rtl]+pre{direction:rtl}code-input pre,code-input textarea{grid-column:1;grid-row:1}code-input textarea{z-index:1}code-input pre{z-index:0}code-input textarea{color:transparent;background:0 0;caret-color:inherit!important}code-input textarea::placeholder{color:#d3d3d3}code-input pre,code-input textarea{white-space:inherit;word-spacing:normal;word-break:normal;word-wrap:normal}code-input textarea{resize:none;outline:0!important}code-input:has(textarea:focus):not(.code-input_mouse-focused){outline:2px solid #000}code-input:not(.code-input_registered){overflow:hidden;display:block;box-sizing:border-box}code-input:not(.code-input_registered)::after{content:"Use codeInput.registerTemplate to set up.";display:block;position:absolute;bottom:var(--padding);left:var(--padding);width:calc(100% - 2 * var(--padding));border-top:1px solid grey;outline:var(--padding) solid #fff;background-color:#fff}code-input:not(.code-input_loaded) pre,code-input:not(.code-input_loaded) textarea{opacity:0}code-input .code-input_dialog-container{z-index:2;position:sticky;grid-row:1;grid-column:1;top:0;left:0;margin:0;padding:0;width:100%;height:0;text-align:inherit}[dir=rtl] code-input .code-input_dialog-container,code-input[dir=rtl] .code-input_dialog-container{left:unset;right:0}code-input .code-input_dialog-container .code-input_keyboard-navigation-instructions{top:0;left:0;display:block;position:absolute;background-color:#000;color:#fff;padding:2px;padding-left:10px;margin:0;text-wrap:balance;overflow:hidden;text-overflow:ellipsis;width:calc(100% - 12px);max-height:3em}code-input:has(pre[dir=rtl]) .code-input_dialog-container .code-input_keyboard-navigation-instructions{left:unset;right:0}code-input .code-input_dialog-container .code-input_keyboard-navigation-instructions:empty,code-input.code-input_mouse-focused .code-input_dialog-container .code-input_keyboard-navigation-instructions,code-input:not(:has(textarea:focus)) .code-input_dialog-container .code-input_keyboard-navigation-instructions{display:none}code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused) textarea,code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre,code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused):not(.code-input_pre-element-styled) pre code{padding-top:calc(var(--padding) + 3em)!important}
+code-input{display:block;overflow-y:auto;overflow-x:auto;position:relative;top:0;left:0;color:#000;background-color:#fff;margin:8px;--padding:16px;height:250px;font-size:inherit;font-family:monospace;line-height:1.5;tab-size:2;caret-color:#a9a9a9;white-space:pre;padding:0!important;display:grid;grid-template-columns:100%;grid-template-rows:100%}code-input:not(.code-input_loaded){padding:var(--padding,16px)!important}code-input textarea,code-input.code-input_pre-element-styled pre,code-input:not(.code-input_pre-element-styled) pre code{margin:0!important;padding:var(--padding,16px)!important;border:0;min-width:calc(100% - var(--padding,16px) * 2);min-height:calc(100% - var(--padding,16px) * 2);box-sizing:content-box;overflow:hidden;resize:none;grid-row:1;grid-column:1;display:block}code-input.code-input_pre-element-styled pre,code-input:not(.code-input_pre-element-styled) pre code{height:max-content;width:max-content}code-input.code-input_pre-element-styled pre code,code-input:not(.code-input_pre-element-styled) pre{margin:0!important;padding:0!important;border:0!important}code-input pre,code-input pre *,code-input textarea{font-size:inherit!important;font-family:inherit!important;line-height:inherit!important;tab-size:inherit!important;text-align:inherit!important}code-input textarea[dir=auto]+pre{unicode-bidi:plaintext}code-input textarea[dir=ltr]+pre{direction:ltr}code-input textarea[dir=rtl]+pre{direction:rtl}code-input pre,code-input textarea{grid-column:1;grid-row:1}code-input textarea:not([data-code-input-fallback]){z-index:1}code-input pre{z-index:0}code-input textarea:not([data-code-input-fallback]){color:transparent;background:0 0;caret-color:inherit!important}code-input textarea::placeholder{color:#d3d3d3}code-input pre,code-input textarea{white-space:inherit;word-spacing:normal;word-break:normal;word-wrap:normal}code-input textarea{resize:none;outline:0!important}code-input:has(textarea:focus):not(.code-input_mouse-focused){outline:2px solid currentColor}code-input:not(.code-input_registered){overflow:hidden;display:block;box-sizing:border-box}code-input:not(.code-input_registered)::after{content:"No highlighting. JavaScript support is disabled or insufficient, or codeInput.registerTemplate has not been called.";display:block;position:absolute;bottom:0;left:var(--padding,16px);width:calc(100% - 2 * var(--padding,16px));overflow-x:auto;border-top:1px solid currentColor;outline-top:0;background-color:inherit;color:inherit;margin:0;padding:0;height:2em}code-input:not(.code-input_registered) textarea{min-height:calc(100% - var(--padding,16px) * 2 - 2em)}code-input:not(.code-input_loaded) pre,code-input:not(.code-input_loaded) textarea:not([data-code-input-fallback]){opacity:0}code-input .code-input_dialog-container{z-index:2;position:sticky;grid-row:1;grid-column:1;top:0;left:0;margin:0;padding:0;height:0;width:100%;text-align:inherit}code-input.code-input_pre-element-styled .code-input_dialog-container{width:calc(100% + 2 * var(--padding,16px))}[dir=rtl] code-input .code-input_dialog-container,code-input[dir=rtl] .code-input_dialog-container{left:unset;right:0}code-input .code-input_dialog-container .code-input_keyboard-navigation-instructions{top:0;left:0;display:block;position:absolute;top:0;left:0;background-color:#000;color:#fff;padding:2px;margin:0;text-wrap:balance;overflow:hidden;text-overflow:ellipsis;width:100%;box-sizing:border-box;max-height:3em}code-input .code-input_dialog-container .code-input_keyboard-navigation-instructions:empty,code-input.code-input_mouse-focused .code-input_dialog-container .code-input_keyboard-navigation-instructions,code-input:not(:has(textarea:not([data-code-input-fallback]):focus)) .code-input_dialog-container .code-input_keyboard-navigation-instructions{display:none}code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused) textarea,code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre,code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused):not(.code-input_pre-element-styled) pre code{padding-top:calc(var(--padding,16px) + 3em)!important}code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused) textarea,code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre,code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused):not(.code-input_pre-element-styled) pre code{min-height:calc(100% - var(--padding,16px) * 2 - 3em)}code-input textarea[data-code-input-fallback]{overflow:auto;background-color:inherit;color:inherit;height:max-content}