@webcoder49/code-input 2.6.2 → 2.6.3

package/SECURITY.md

@@ -0,0 +1,7 @@
+# Reporting Security Vulnerabilities
+If you find a sensitive security vulnerability
+in the code-input.js library, please
+contact the maintainer Oliver Geer at
+[security@webcoder49.dev](mailto:security@webcoder49.dev),
+using [this optional PGP encryption key and advice](https://oliver.geer.im#email)
+if you know how to do so.

package/code-input.js

@@ -15,12 +15,14 @@
 
 var codeInput = {
     /**
-     * A list of attributes that will trigger the 
-     * `codeInput.CodeInput.attributeChangedCallback` 
+     * A list of attributes that will trigger functionality in the
+     * `codeInput.CodeInput.attributeChangedCallback`
      * when modified in a code-input element. This
      * does not include events, which are handled in
      * `codeInput.CodeInput.addEventListener` and
      * `codeInput.CodeInput.removeEventListener`.
+     *
+     * This does not include those listed in `codeInput.textareaSyncAttributes` that only synchronise with the textarea element.
      */
     observedAttributes: [
         "value",
@@ -133,9 +135,7 @@ var codeInput = {
             for (let i in codeInput.templateNotYetRegisteredQueue[templateName]) {
                 const elem = codeInput.templateNotYetRegisteredQueue[templateName][i];
                 elem.templateObject = template;
-                elem.connectedCallback();
-                // Bind sets elem as first parameter of function 
-                // So innerHTML can be read
+                elem.setup();
             }
         }
 
@@ -146,9 +146,7 @@ var codeInput = {
                 for (let i in codeInput.templateNotYetRegisteredQueue[undefined]) {
                     const elem = codeInput.templateNotYetRegisteredQueue[undefined][i];
                     elem.templateObject = template;
-                    elem.connectedCallback();
-                    // Bind sets elem as first parameter of function
-                    // So innerHTML can be read
+                    elem.setup();
                 }
             }
         }
@@ -611,6 +609,8 @@ var codeInput = {
         setup() {
             if(this.textareaElement != null) return; // Already set up
 
+            this.classList.add("code-input_registered");
+
             this.mutationObserver = new MutationObserver(this.mutationObserverCallback.bind(this));
             this.mutationObserver.observe(this, {
                 attributes: true,
@@ -630,6 +630,8 @@ var codeInput = {
                 let textareaAttributeNames = fallbackTextarea.getAttributeNames();
                 for(let i = 0; i < textareaAttributeNames.length; i++) {
                     const attr = textareaAttributeNames[i];
+                    if(attr == "data-code-input-fallback") continue;
+
                     if(!this.hasAttribute(attr)) {
                         this.setAttribute(attr, fallbackTextarea.getAttribute(attr));
                     }
@@ -655,7 +657,10 @@ var codeInput = {
                 textarea.value = value;
             }
             textarea.innerHTML = this.innerHTML;
-            textarea.setAttribute("spellcheck", "false");
+            if(!this.hasAttribute("spellcheck")) {
+                // For backwards compatibility:
+                textarea.setAttribute("spellcheck", "false");
+            }
             
             // Disable focusing on the code-input element - only allow the textarea to be focusable
             textarea.setAttribute("tabindex", this.getAttribute("tabindex") || 0);
@@ -728,6 +733,8 @@ var codeInput = {
                 this.syncSize();
             });
             resizeObserver.observe(this);
+
+            this.classList.add("code-input_loaded");
         }
 
         /**
@@ -775,9 +782,10 @@ var codeInput = {
             // template property with the string value of the attribute
             this.templateObject = this.getTemplate();
             if (this.templateObject != undefined) {
+                // Template registered before loading
                 this.classList.add("code-input_registered");
-                this.setup();
-                this.classList.add("code-input_loaded");
+                // Children not yet present - wait until they are
+                window.addEventListener("DOMContentLoaded", this.setup.bind(this))
             } 
         }
 
@@ -792,6 +800,11 @@ var codeInput = {
                         return this.attributeChangedCallback(mutation.attributeName, mutation.oldValue, super.getAttribute(mutation.attributeName));
                     }
                 }
+                for(let i = 0; i < codeInput.textareaSyncAttributes.length; i++) {
+                    if (mutation.attributeName == codeInput.textareaSyncAttributes[i]) {
+                        return this.attributeChangedCallback(mutation.attributeName, mutation.oldValue, super.getAttribute(mutation.attributeName));
+                    }
+                }
                 if (mutation.attributeName.substring(0, 5) == "aria-") {
                     return this.attributeChangedCallback(mutation.attributeName, mutation.oldValue, super.getAttribute(mutation.attributeName));
                 }
@@ -962,117 +975,167 @@ var codeInput = {
             }
         }
 
+        //-------------------------------------------
+        //----------- Textarea interface ------------
+        //-------------------------------------------
+        // See https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement
+        // Attributes defined at codeInput.textareaSyncAttributes
+
         /**
-         * Get the text contents of the code-input element.
+         * Get the JavaScript property from the internal textarea
+         * element, given its name and a defaultValue to return
+         * when no textarea is present (undefined to make it throw
+         * an error instead).
+         *
+         * For internal use - treat the code-input element as a
+         * textarea for the standard properties (e.g. document.
+         * querySelector("code-input").defaultValue).
          */
-        get value() {
+        getTextareaProperty(name, defaultValue=undefined) {
             if(this.textareaElement) {
-                // Get from editable textarea element
-                return this.textareaElement.value;
+                return this.textareaElement[name];
             } else {
                 // Unregistered
                 const fallbackTextarea = this.querySelector("textarea[data-code-input-fallback]");
                 if(fallbackTextarea) {
-                    return fallbackTextarea.value;
+                    return fallbackTextarea[name];
                 } else {
-                    return this.innerHTML;
+                    if(defaultValue === undefined) {
+                        throw new Error("Cannot get "+name+" of an unregistered code-input element without a data-code-input-fallback textarea.");
+                    }
+                    return defaultValue;
                 }
             }
         }
         /**
-         * Set the text contents of the code-input element.
-         * @param {string} val - New text contents
+         * Set the JavaScript property of the internal textarea
+         * element, given its name and value.
+         *
+         * If there is no registered or fallback textarea and errorIfCannot is
+         * false, return false (otherwise true); If there is no registered or
+         * fallback textarea and errorIfCannot is true, throw an error.
+         *
+         * For internal use - treat the code-input element as a
+         * textarea for the standard properties (e.g. document.
+         * querySelector("code-input").defaultValue).
          */
-        set value(val) {
-            if (val === null || val === undefined) {
-                val = "";
-            }
+        setTextareaProperty(name, value, errorIfCannot=true) {
             if(this.textareaElement) {
-                // Save in editable textarea element
-                this.textareaElement.value = val;
-                // Trigger highlight
-                this.scheduleHighlight();
+                this.textareaElement[name] = value;
             } else {
                 // Unregistered
                 const fallbackTextarea = this.querySelector("textarea[data-code-input-fallback]");
                 if(fallbackTextarea) {
-                    fallbackTextarea.value = val;
+                    fallbackTextarea[name] = value;
                 } else {
-                    this.innerHTML = val;
+                    if(!errorIfCannot) return false;
+                    throw new Error("Cannot set "+name+" of an unregistered code-input element without a data-code-input-fallback textarea.");
                 }
             }
+            return true;
         }
 
-        // Synchronise blur and focus
-        focus(options={}) {
-            return this.textareaElement.focus(options);
-        }
-        blur(options={}) {
-            return this.textareaElement.blur(options);
+        get autocomplete() { return this.getAttribute("autocomplete"); }
+        set autocomplete(val) { return this.setAttribute("autocomplete", val); }
+        get cols() { return this.getTextareaProperty("cols", Number(this.getAttribute("cols"))); }
+        set cols(val) { this.setAttribute("cols", val); }
+        get defaultValue() { return this.initialValue; }
+        set defaultValue(val) { this.initialValue = val; }
+        get textContent() { return this.initialValue; }
+        set textContent(val) { this.initialValue = val; }
+        get dirName() { return this.getAttribute("dirName") || ""; }
+        set dirName(val) { this.setAttribute("dirname", val); }
+        get disabled() { return this.hasAttribute("disabled"); }
+        set disabled(val) {
+            if(val) {
+                this.setAttribute("disabled", true);
+            } else {
+                this.removeAttribute("disabled");
+            }
         }
-
-        /**
-         * Get the placeholder of the code-input element that appears
-         * when no code has been entered.
-         */
-        get placeholder() {
-            return this.getAttribute("placeholder");
+        get form() { return this.getTextareaProperty("form"); }
+        get labels() { return this.getTextareaProperty("labels"); }
+        get maxLength() {
+            const result = Number(this.getAttribute("maxlength"));
+            if(isNaN(result)) {
+                return -1;
+            }
+            return result;
         }
-        /**
-         * Set the placeholder of the code-input element that appears
-         * when no code has been entered.
-         * @param {string} val - New placeholder
-         */
-        set placeholder(val) {
-            return this.setAttribute("placeholder", val);
+        set maxLength(val) {
+            if(val == -1) {
+                this.removeAttribute("maxlength");
+            } else {
+                this.setAttribute("maxlength", val);
+            }
         }
-
-        /**
-         * Returns a  ValidityState object that represents the validity states of an element.
-         * 
-         * See `HTMLTextAreaElement.validity`
-         */
-        get validity() {
-            return this.textareaElement.validity;
+        get minLength() {
+            const result = Number(this.getAttribute("minlength"));
+            if(isNaN(result)) {
+                return -1;
+            }
+            return result;
         }
-
-        /**
-         * Returns the error message that would be displayed if the user submits the form, or an empty string if no error message. 
-         * It also triggers the standard error message, such as "this is a required field". The result is that the user sees validation 
-         * messages without actually submitting.
-         * 
-         * See `HTMLTextAreaElement.validationMessage`
-         */
-        get validationMessage() {
-            return this.textareaElement.validationMessage;
+        set minLength(val) {
+            if(val == -1) {
+                this.removeAttribute("minlength");
+            } else {
+                this.setAttribute("minlength", val);
+            }
         }
-
-        /**
-         * Sets a custom error message that is displayed when a form is submitted.
-         * 
-         * See `HTMLTextAreaElement.setCustomValidity`
-         * @param error Sets a custom error message that is displayed when a form is submitted.
-         */
-        setCustomValidity(error) {
-            return this.textareaElement.setCustomValidity(error);
+        get name() { return this.getAttribute("name") || ""; }
+        set name(val) { this.setAttribute("name", val); }
+        get placeholder() { return this.getAttribute("placeholder") || ""; }
+        set placeholder(val) { this.setAttribute("placeholder", val); }
+        get readOnly() { return this.hasAttribute("readonly"); }
+        set readOnly(val) {
+            if(val) {
+                this.setAttribute("readonly", true);
+            } else {
+                this.removeAttribute("readonly");
+            }
         }
-
-        /**
-         * Returns whether a form will validate when it is submitted, 
-         * without having to submit it.
-         * 
-         * See `HTMLTextAreaElement.checkValidity`
-         */
-        checkValidity() {
-            return this.textareaElement.checkValidity();
+        get required() { return this.hasAttribute("readonly"); }
+        set required(val) {
+            if(val) {
+                this.setAttribute("readonly", true);
+            } else {
+                this.removeAttribute("readonly");
+            }
         }
-
-        /**
-         * See `HTMLTextAreaElement.reportValidity`
-         */
-        reportValidity() {
-            return this.textareaElement.reportValidity();
+        get rows() { return this.getTextareaProperty("rows", Number(this.getAttribute("rows"))); }
+        set rows(val) { this.setAttribute("rows", val); }
+        get selectionDirection() { return this.getTextareaProperty("selectionDirection"); }
+        set selectionDirection(val) { this.setTextareaProperty("selectionDirection", val); }
+        get selectionEnd() { return this.getTextareaProperty("selectionEnd"); }
+        set selectionEnd(val) { this.setTextareaProperty("selectionEnd", val); }
+        get selectionStart() { return this.getTextareaProperty("selectionStart"); }
+        set selectionStart(val) { this.setTextareaProperty("selectionStart", val); }
+        get textLength() { return this.value.length; }
+        get type() { return "textarea"; } // Mimics textarea
+        get validationMessage() { return this.getTextareaProperty("validationMessage"); }
+        get validity() { return this.getTextareaProperty("validationMessage"); }
+        get value() { return this.getTextareaProperty("value", this.getAttribute("value") || this.innerHTML); }
+        set value(val) {
+            val = val || "";
+            if(this.setTextareaProperty("value", val, false)) {
+                if(this.textareaElement) this.scheduleHighlight();
+            } else {
+                this.innerHTML = val;
+            }
         }
+        get willValidate() { return this.getTextareaProperty("willValidate", this.disabled || this.readOnly); }
+        get wrap() { return this.getAttribute("wrap") || ""; }
+        set wrap(val) { this.setAttribute("wrap", val); }
+
+
+        blur(options={}) { return this.textareaElement.blur(options); }
+        checkValidity() { return this.textareaElement.checkValidity(); }
+        focus(options={}) { return this.textareaElement.focus(options); }
+        reportValidity() { return this.textareaElement.reportValidity(); }
+        setCustomValidity(error) { this.textareaElement.setCustomValidity(error); }
+        setRangeText(replacement, selectionStart=this.selectionStart, selectionEnd=this.selectionEnd, selectMode="preserve") { this.getTextareaProperty("setRangeText")(replacement, selectionStart, selectionEnd, selectMode); }
+        setSelectionRange(selectionStart, selectionEnd, selectionDirection="none") { this.getTextareaProperty("setSelectionRange")(selectionStart, selectionEnd, selectionDirection); }
 
         /**
          * Allows plugins to store data in the scope of a single element.

package/code-input.min.js

@@ -9,4 +9,4 @@
  * @license MIT
  *
  * **<https://code-input-js.org>**
- */"use strict";var codeInput={observedAttributes:["value","placeholder","language","lang","template"],textareaSyncAttributes:["value","min","max","type","pattern","autocomplete","autocorrect","autofocus","cols","dirname","disabled","form","maxlength","minlength","name","placeholder","readonly","required","rows","spellcheck","wrap"],textareaSyncEvents:["change","selectionchange","invalid","input","focus","blur","focusin","focusout"],usedTemplates:{},defaultTemplate:void 0,templateNotYetRegisteredQueue:{},registerTemplate:function(a,b){if(!("string"==typeof a||a instanceof String))throw TypeError(`code-input: Name of template "${a}" must be a string.`);if(!("function"==typeof b.highlight||b.highlight instanceof Function))throw TypeError(`code-input: Template for "${a}" invalid, because the highlight function provided is not a function; it is "${b.highlight}". Please make sure you use one of the constructors in codeInput.templates, and that you provide the correct arguments.`);if(!("boolean"==typeof b.includeCodeInputInHighlightFunc||b.includeCodeInputInHighlightFunc instanceof Boolean))throw TypeError(`code-input: Template for "${a}" invalid, because the includeCodeInputInHighlightFunc value provided is not a true or false; it is "${b.includeCodeInputInHighlightFunc}". Please make sure you use one of the constructors in codeInput.templates, and that you provide the correct arguments.`);if(!("boolean"==typeof b.preElementStyled||b.preElementStyled instanceof Boolean))throw TypeError(`code-input: Template for "${a}" invalid, because the preElementStyled value provided is not a true or false; it is "${b.preElementStyled}". Please make sure you use one of the constructors in codeInput.templates, and that you provide the correct arguments.`);if(!("boolean"==typeof b.isCode||b.isCode instanceof Boolean))throw TypeError(`code-input: Template for "${a}" invalid, because the isCode value provided is not a true or false; it is "${b.isCode}". Please make sure you use one of the constructors in codeInput.templates, and that you provide the correct arguments.`);if(!Array.isArray(b.plugins))throw TypeError(`code-input: Template for "${a}" invalid, because the plugin array provided is not an array; it is "${b.plugins}". Please make sure you use one of the constructors in codeInput.templates, and that you provide the correct arguments.`);if(b.plugins.forEach((c,d)=>{if(!(c instanceof codeInput.Plugin))throw TypeError(`code-input: Template for "${a}" invalid, because the plugin provided at index ${d} is not valid; it is "${b.plugins[d]}". Please make sure you use one of the constructors in codeInput.templates, and that you provide the correct arguments.`)}),codeInput.usedTemplates[a]=b,a in codeInput.templateNotYetRegisteredQueue)for(let c in codeInput.templateNotYetRegisteredQueue[a]){const d=codeInput.templateNotYetRegisteredQueue[a][c];d.templateObject=b,d.connectedCallback()}if(null==codeInput.defaultTemplate&&(codeInput.defaultTemplate=a,void 0 in codeInput.templateNotYetRegisteredQueue))for(let a in codeInput.templateNotYetRegisteredQueue[void 0]){const c=codeInput.templateNotYetRegisteredQueue[void 0][a];c.templateObject=b,c.connectedCallback()}},Template:class{constructor(a=function(){},b=!0,c=!0,d=!1,e=[]){this.highlight=a,this.preElementStyled=b,this.isCode=c,this.includeCodeInputInHighlightFunc=d,this.plugins=e}highlight=function(){};preElementStyled=!0;isCode=!0;includeCodeInputInHighlightFunc=!1;plugins=[]},templates:{prism(a,b=[]){return new codeInput.templates.Prism(a,b)},hljs(a,b=[]){return new codeInput.templates.Hljs(a,b)},characterLimit(a){return{highlight:function(a,b,c=[]){let d=+b.getAttribute("data-character-limit"),e=b.escapeHtml(b.value.slice(0,d)),f=b.escapeHtml(b.value.slice(d));a.innerHTML=`${e}<mark class="overflow">${f}</mark>`,0<f.length&&(a.innerHTML+=` <mark class="overflow-msg">${b.getAttribute("data-overflow-msg")||"(Character limit reached)"}</mark>`)},includeCodeInputInHighlightFunc:!0,preElementStyled:!0,isCode:!1,plugins:a}},rainbowText(a=["red","orangered","orange","goldenrod","gold","green","darkgreen","navy","blue","magenta"],b="",c=[]){return{highlight:function(a,b){let c=[],d=b.value.split(b.template.delimiter);for(let e=0;e<d.length;e++)c.push(`<span style="color: ${b.template.rainbowColors[e%b.template.rainbowColors.length]}">${b.escapeHtml(d[e])}</span>`);a.innerHTML=c.join(b.template.delimiter)},includeCodeInputInHighlightFunc:!0,preElementStyled:!0,isCode:!1,rainbowColors:a,delimiter:b,plugins:c}},character_limit(){return this.characterLimit([])},rainbow_text(a=["red","orangered","orange","goldenrod","gold","green","darkgreen","navy","blue","magenta"],b="",c=[]){return this.rainbowText(a,b,c)},custom(a=function(){},b=!0,c=!0,d=!1,e=[]){return{highlight:a,includeCodeInputInHighlightFunc:d,preElementStyled:b,isCode:c,plugins:e}}},plugins:new Proxy({},{get(a,b){if(a[b]==null)throw ReferenceError(`code-input: Plugin '${b}' is not defined. Please ensure you import the necessary files from the plugins folder in the WebCoder49/code-input repository, in the <head> of your HTML, before the plugin is instatiated.`);return a[b]}}),Plugin:class{constructor(a){a.forEach(a=>{codeInput.observedAttributes.push(a)})}addTranslations(a,b){for(const c in b)a[c]=b[c]}beforeHighlight(){}afterHighlight(){}beforeElementsAdded(){}afterElementsAdded(){}attributeChanged(){}},CodeInput:class extends HTMLElement{constructor(){super()}templateObject=null;textareaElement=null;preElement=null;codeElement=null;dialogContainerElement=null;static formAssociated=!0;boundEventCallbacks={};pluginEvt(a,b){for(let c in this.templateObject.plugins){let d=this.templateObject.plugins[c];a in d&&(b===void 0?d[a](this):d[a](this,...b))}}needsHighlight=!1;originalAriaDescription;scheduleHighlight(){this.needsHighlight=!0}animateFrame(){this.needsHighlight&&(this.update(),this.needsHighlight=!1),window.requestAnimationFrame(this.animateFrame.bind(this))}update(){let a=this.codeElement,b=this.value;b+="\n",a.innerHTML=this.escapeHtml(b),this.pluginEvt("beforeHighlight"),this.templateObject.includeCodeInputInHighlightFunc?this.templateObject.highlight(a,this):this.templateObject.highlight(a),this.syncSize(),this.pluginEvt("afterHighlight")}syncSize(){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):(this.style.backgroundColor=getComputedStyle(this.codeElement).backgroundColor,this.textareaElement.style.height=getComputedStyle(this.codeElement).height,this.textareaElement.style.width=getComputedStyle(this.codeElement).width)}setKeyboardNavInstructions(a,b){this.dialogContainerElement.querySelector(".code-input_keyboard-navigation-instructions").innerText=a,b?this.textareaElement.setAttribute("aria-description",this.originalAriaDescription+". "+a):this.textareaElement.setAttribute("aria-description",a)}escapeHtml(a){return a.replace(/&/g,"&amp;").replace(/</g,"&lt;")}unescapeHtml(a){return a.replace(/&amp;/g,"&").replace(/&lt;/g,"<").replace(/&gt;/g,">")}getTemplate(){let a;return a=null==this.getAttribute("template")?codeInput.defaultTemplate:this.getAttribute("template"),a in codeInput.usedTemplates?codeInput.usedTemplates[a]:(a in codeInput.templateNotYetRegisteredQueue||(codeInput.templateNotYetRegisteredQueue[a]=[]),void codeInput.templateNotYetRegisteredQueue[a].push(this))}setup(){if(null!=this.textareaElement)return;this.mutationObserver=new MutationObserver(this.mutationObserverCallback.bind(this)),this.mutationObserver.observe(this,{attributes:!0,attributeOldValue:!0}),this.classList.add("code-input_registered"),this.templateObject.preElementStyled&&this.classList.add("code-input_pre-element-styled"),this.pluginEvt("beforeElementsAdded");const a=this.querySelector("textarea[data-code-input-fallback]");let b;if(a){let c=a.getAttributeNames();for(let b=0;b<c.length;b++){const d=c[b];this.hasAttribute(d)||this.setAttribute(d,a.getAttribute(d))}b=a.value}else b=this.unescapeHtml(this.innerHTML);b=b||this.getAttribute("value")||"";const c=this.getAttribute("language")||this.getAttribute("lang"),d=this.getAttribute("placeholder")||c||"";this.initialValue=b;const e=document.createElement("textarea");e.placeholder=d,""!=b&&(e.value=b),e.innerHTML=this.innerHTML,e.setAttribute("spellcheck","false"),e.setAttribute("tabindex",this.getAttribute("tabindex")||0),this.setAttribute("tabindex",-1),this.originalAriaDescription=this.getAttribute("aria-description")||"Code input field",this.addEventListener("mousedown",()=>{this.classList.add("code-input_mouse-focused")}),e.addEventListener("blur",()=>{this.classList.remove("code-input_mouse-focused")}),this.innerHTML="";for(let a,b=0;b<this.attributes.length;b++)a=this.attributes[b].name,(codeInput.textareaSyncAttributes.includes(a)||"aria-"==a.substring(0,5))&&e.setAttribute(a,this.getAttribute(a));e.addEventListener("input",()=>{this.value=this.textareaElement.value}),this.textareaElement=e,this.append(e);let f=document.createElement("code"),g=document.createElement("pre");g.setAttribute("aria-hidden","true"),g.setAttribute("tabindex","-1"),g.setAttribute("inert",!0),this.preElement=g,this.codeElement=f,g.append(f),this.append(g),this.templateObject.isCode&&c!=null&&""!=c&&f.classList.add("language-"+c.toLowerCase());let h=document.createElement("div");h.classList.add("code-input_dialog-container"),this.append(h),this.dialogContainerElement=h;let i=document.createElement("div");i.classList.add("code-input_keyboard-navigation-instructions"),h.append(i),this.pluginEvt("afterElementsAdded"),this.dispatchEvent(new CustomEvent("code-input_load")),this.value=b,this.animateFrame();const j=new ResizeObserver(()=>{this.syncSize()});j.observe(this)}escape_html(a){return this.escapeHtml(a)}get_template(){return this.getTemplate()}get template(){return this.templateObject}set template(a){}connectedCallback(){this.templateObject=this.getTemplate(),this.templateObject!=null&&(this.classList.add("code-input_registered"),this.setup(),this.classList.add("code-input_loaded"))}mutationObserverCallback(a){for(const b of a)if("attributes"===b.type){for(let a=0;a<codeInput.observedAttributes.length;a++)if(b.attributeName==codeInput.observedAttributes[a])return this.attributeChangedCallback(b.attributeName,b.oldValue,super.getAttribute(b.attributeName));if("aria-"==b.attributeName.substring(0,5))return this.attributeChangedCallback(b.attributeName,b.oldValue,super.getAttribute(b.attributeName))}}disconnectedCallback(){this.mutationObserver.disconnect()}attributeChangedCallback(a,b,c){if(this.isConnected)switch(this.pluginEvt("attributeChanged",[a,b,c]),a){case"value":this.value=c;break;case"template":this.templateObject=codeInput.usedTemplates[c||codeInput.defaultTemplate],this.templateObject.preElementStyled?this.classList.add("code-input_pre-element-styled"):this.classList.remove("code-input_pre-element-styled"),this.scheduleHighlight();break;case"lang":case"language":let d=this.codeElement,e=this.textareaElement;if(null!=c&&(c=c.toLowerCase(),d.classList.contains(`language-${c}`)))break;null!==b&&(b=b.toLowerCase(),d.classList.remove("language-"+b),d.parentElement.classList.remove("language-"+b)),d.classList.remove("language-none"),d.parentElement.classList.remove("language-none"),null!=c&&""!=c&&d.classList.add("language-"+c),e.placeholder==b&&(e.placeholder=c),this.scheduleHighlight();break;default:codeInput.textareaSyncAttributes.includes(a)||"aria-"==a.substring(0,5)?null==c||null==c?this.textareaElement.removeAttribute(a):this.textareaElement.setAttribute(a,c):codeInput.textareaSyncAttributes.regexp.forEach(b=>{a.match(b)&&(null==c?this.textareaElement.removeAttribute(a):this.textareaElement.setAttribute(a,c))})}}addEventListener(a,b,c=void 0){let d=function(a){"function"==typeof b?b(a):b&&b.handleEvent&&b.handleEvent(a)}.bind(this);this.boundEventCallbacks[b]=d,codeInput.textareaSyncEvents.includes(a)?(this.boundEventCallbacks[b]=d,c===void 0?null==this.textareaElement?this.addEventListener("code-input_load",()=>{this.textareaElement.addEventListener(a,d)}):this.textareaElement.addEventListener(a,d):null==this.textareaElement?this.addEventListener("code-input_load",()=>{this.textareaElement.addEventListener(a,d,c)}):this.textareaElement.addEventListener(a,d,c)):c===void 0?super.addEventListener(a,d):super.addEventListener(a,d,c)}removeEventListener(a,b,c=void 0){let d=this.boundEventCallbacks[b];codeInput.textareaSyncEvents.includes(a)?c===void 0?null==this.textareaElement?this.addEventListener("code-input_load",()=>{this.textareaElement.removeEventListener(a,d)}):this.textareaElement.removeEventListener(a,d):null==this.textareaElement?this.addEventListener("code-input_load",()=>{this.textareaElement.removeEventListener(a,d,c)}):this.textareaElement.removeEventListener(a,d,c):c===void 0?super.removeEventListener(a,d):super.removeEventListener(a,d,c)}get value(){if(this.textareaElement)return this.textareaElement.value;else{const a=this.querySelector("textarea[data-code-input-fallback]");return a?a.value:this.innerHTML}}set value(a){if((null===a||void 0===a)&&(a=""),this.textareaElement)this.textareaElement.value=a,this.scheduleHighlight();else{const b=this.querySelector("textarea[data-code-input-fallback]");b?b.value=a:this.innerHTML=a}}focus(a={}){return this.textareaElement.focus(a)}blur(a={}){return this.textareaElement.blur(a)}get placeholder(){return this.getAttribute("placeholder")}set placeholder(a){return this.setAttribute("placeholder",a)}get validity(){return this.textareaElement.validity}get validationMessage(){return this.textareaElement.validationMessage}setCustomValidity(a){return this.textareaElement.setCustomValidity(a)}checkValidity(){return this.textareaElement.checkValidity()}reportValidity(){return this.textareaElement.reportValidity()}pluginData={};formResetCallback(){this.value=this.initialValue}}};{class a extends codeInput.Template{constructor(a,b=[],c=!0){super(a.highlightElement,c,!0,!1,b)}}codeInput.templates.Prism=a;class b extends codeInput.Template{constructor(a,b=[],c=!1){super(function(b){b.removeAttribute("data-highlighted"),a.highlightElement(b)},c,!0,!1,b)}}codeInput.templates.Hljs=b}customElements.define("code-input",codeInput.CodeInput);
+ */"use strict";var codeInput={observedAttributes:["value","placeholder","language","lang","template"],textareaSyncAttributes:["value","min","max","type","pattern","autocomplete","autocorrect","autofocus","cols","dirname","disabled","form","maxlength","minlength","name","placeholder","readonly","required","rows","spellcheck","wrap"],textareaSyncEvents:["change","selectionchange","invalid","input","focus","blur","focusin","focusout"],usedTemplates:{},defaultTemplate:void 0,templateNotYetRegisteredQueue:{},registerTemplate:function(a,b){if(!("string"==typeof a||a instanceof String))throw TypeError(`code-input: Name of template "${a}" must be a string.`);if(!("function"==typeof b.highlight||b.highlight instanceof Function))throw TypeError(`code-input: Template for "${a}" invalid, because the highlight function provided is not a function; it is "${b.highlight}". Please make sure you use one of the constructors in codeInput.templates, and that you provide the correct arguments.`);if(!("boolean"==typeof b.includeCodeInputInHighlightFunc||b.includeCodeInputInHighlightFunc instanceof Boolean))throw TypeError(`code-input: Template for "${a}" invalid, because the includeCodeInputInHighlightFunc value provided is not a true or false; it is "${b.includeCodeInputInHighlightFunc}". Please make sure you use one of the constructors in codeInput.templates, and that you provide the correct arguments.`);if(!("boolean"==typeof b.preElementStyled||b.preElementStyled instanceof Boolean))throw TypeError(`code-input: Template for "${a}" invalid, because the preElementStyled value provided is not a true or false; it is "${b.preElementStyled}". Please make sure you use one of the constructors in codeInput.templates, and that you provide the correct arguments.`);if(!("boolean"==typeof b.isCode||b.isCode instanceof Boolean))throw TypeError(`code-input: Template for "${a}" invalid, because the isCode value provided is not a true or false; it is "${b.isCode}". Please make sure you use one of the constructors in codeInput.templates, and that you provide the correct arguments.`);if(!Array.isArray(b.plugins))throw TypeError(`code-input: Template for "${a}" invalid, because the plugin array provided is not an array; it is "${b.plugins}". Please make sure you use one of the constructors in codeInput.templates, and that you provide the correct arguments.`);if(b.plugins.forEach((c,d)=>{if(!(c instanceof codeInput.Plugin))throw TypeError(`code-input: Template for "${a}" invalid, because the plugin provided at index ${d} is not valid; it is "${b.plugins[d]}". Please make sure you use one of the constructors in codeInput.templates, and that you provide the correct arguments.`)}),codeInput.usedTemplates[a]=b,a in codeInput.templateNotYetRegisteredQueue)for(let c in codeInput.templateNotYetRegisteredQueue[a]){const d=codeInput.templateNotYetRegisteredQueue[a][c];d.templateObject=b,d.setup()}if(null==codeInput.defaultTemplate&&(codeInput.defaultTemplate=a,void 0 in codeInput.templateNotYetRegisteredQueue))for(let a in codeInput.templateNotYetRegisteredQueue[void 0]){const c=codeInput.templateNotYetRegisteredQueue[void 0][a];c.templateObject=b,c.setup()}},Template:class{constructor(a=function(){},b=!0,c=!0,d=!1,e=[]){this.highlight=a,this.preElementStyled=b,this.isCode=c,this.includeCodeInputInHighlightFunc=d,this.plugins=e}highlight=function(){};preElementStyled=!0;isCode=!0;includeCodeInputInHighlightFunc=!1;plugins=[]},templates:{prism(a,b=[]){return new codeInput.templates.Prism(a,b)},hljs(a,b=[]){return new codeInput.templates.Hljs(a,b)},characterLimit(a){return{highlight:function(a,b,c=[]){let d=+b.getAttribute("data-character-limit"),e=b.escapeHtml(b.value.slice(0,d)),f=b.escapeHtml(b.value.slice(d));a.innerHTML=`${e}<mark class="overflow">${f}</mark>`,0<f.length&&(a.innerHTML+=` <mark class="overflow-msg">${b.getAttribute("data-overflow-msg")||"(Character limit reached)"}</mark>`)},includeCodeInputInHighlightFunc:!0,preElementStyled:!0,isCode:!1,plugins:a}},rainbowText(a=["red","orangered","orange","goldenrod","gold","green","darkgreen","navy","blue","magenta"],b="",c=[]){return{highlight:function(a,b){let c=[],d=b.value.split(b.template.delimiter);for(let e=0;e<d.length;e++)c.push(`<span style="color: ${b.template.rainbowColors[e%b.template.rainbowColors.length]}">${b.escapeHtml(d[e])}</span>`);a.innerHTML=c.join(b.template.delimiter)},includeCodeInputInHighlightFunc:!0,preElementStyled:!0,isCode:!1,rainbowColors:a,delimiter:b,plugins:c}},character_limit(){return this.characterLimit([])},rainbow_text(a=["red","orangered","orange","goldenrod","gold","green","darkgreen","navy","blue","magenta"],b="",c=[]){return this.rainbowText(a,b,c)},custom(a=function(){},b=!0,c=!0,d=!1,e=[]){return{highlight:a,includeCodeInputInHighlightFunc:d,preElementStyled:b,isCode:c,plugins:e}}},plugins:new Proxy({},{get(a,b){if(a[b]==null)throw ReferenceError(`code-input: Plugin '${b}' is not defined. Please ensure you import the necessary files from the plugins folder in the WebCoder49/code-input repository, in the <head> of your HTML, before the plugin is instatiated.`);return a[b]}}),Plugin:class{constructor(a){a.forEach(a=>{codeInput.observedAttributes.push(a)})}addTranslations(a,b){for(const c in b)a[c]=b[c]}beforeHighlight(){}afterHighlight(){}beforeElementsAdded(){}afterElementsAdded(){}attributeChanged(){}},CodeInput:class extends HTMLElement{constructor(){super()}templateObject=null;textareaElement=null;preElement=null;codeElement=null;dialogContainerElement=null;static formAssociated=!0;boundEventCallbacks={};pluginEvt(a,b){for(let c in this.templateObject.plugins){let d=this.templateObject.plugins[c];a in d&&(b===void 0?d[a](this):d[a](this,...b))}}needsHighlight=!1;originalAriaDescription;scheduleHighlight(){this.needsHighlight=!0}animateFrame(){this.needsHighlight&&(this.update(),this.needsHighlight=!1),window.requestAnimationFrame(this.animateFrame.bind(this))}update(){let a=this.codeElement,b=this.value;b+="\n",a.innerHTML=this.escapeHtml(b),this.pluginEvt("beforeHighlight"),this.templateObject.includeCodeInputInHighlightFunc?this.templateObject.highlight(a,this):this.templateObject.highlight(a),this.syncSize(),this.pluginEvt("afterHighlight")}syncSize(){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):(this.style.backgroundColor=getComputedStyle(this.codeElement).backgroundColor,this.textareaElement.style.height=getComputedStyle(this.codeElement).height,this.textareaElement.style.width=getComputedStyle(this.codeElement).width)}setKeyboardNavInstructions(a,b){this.dialogContainerElement.querySelector(".code-input_keyboard-navigation-instructions").innerText=a,b?this.textareaElement.setAttribute("aria-description",this.originalAriaDescription+". "+a):this.textareaElement.setAttribute("aria-description",a)}escapeHtml(a){return a.replace(/&/g,"&amp;").replace(/</g,"&lt;")}unescapeHtml(a){return a.replace(/&amp;/g,"&").replace(/&lt;/g,"<").replace(/&gt;/g,">")}getTemplate(){let a;return a=null==this.getAttribute("template")?codeInput.defaultTemplate:this.getAttribute("template"),a in codeInput.usedTemplates?codeInput.usedTemplates[a]:(a in codeInput.templateNotYetRegisteredQueue||(codeInput.templateNotYetRegisteredQueue[a]=[]),void codeInput.templateNotYetRegisteredQueue[a].push(this))}setup(){if(null!=this.textareaElement)return;this.classList.add("code-input_registered"),this.mutationObserver=new MutationObserver(this.mutationObserverCallback.bind(this)),this.mutationObserver.observe(this,{attributes:!0,attributeOldValue:!0}),this.classList.add("code-input_registered"),this.templateObject.preElementStyled&&this.classList.add("code-input_pre-element-styled"),this.pluginEvt("beforeElementsAdded");const a=this.querySelector("textarea[data-code-input-fallback]");let b;if(a){let c=a.getAttributeNames();for(let b=0;b<c.length;b++){const d=c[b];"data-code-input-fallback"!=d&&(this.hasAttribute(d)||this.setAttribute(d,a.getAttribute(d)))}b=a.value}else b=this.unescapeHtml(this.innerHTML);b=b||this.getAttribute("value")||"";const c=this.getAttribute("language")||this.getAttribute("lang"),d=this.getAttribute("placeholder")||c||"";this.initialValue=b;const e=document.createElement("textarea");e.placeholder=d,""!=b&&(e.value=b),e.innerHTML=this.innerHTML,this.hasAttribute("spellcheck")||e.setAttribute("spellcheck","false"),e.setAttribute("tabindex",this.getAttribute("tabindex")||0),this.setAttribute("tabindex",-1),this.originalAriaDescription=this.getAttribute("aria-description")||"Code input field",this.addEventListener("mousedown",()=>{this.classList.add("code-input_mouse-focused")}),e.addEventListener("blur",()=>{this.classList.remove("code-input_mouse-focused")}),this.innerHTML="";for(let a,b=0;b<this.attributes.length;b++)a=this.attributes[b].name,(codeInput.textareaSyncAttributes.includes(a)||"aria-"==a.substring(0,5))&&e.setAttribute(a,this.getAttribute(a));e.addEventListener("input",()=>{this.value=this.textareaElement.value}),this.textareaElement=e,this.append(e);let f=document.createElement("code"),g=document.createElement("pre");g.setAttribute("aria-hidden","true"),g.setAttribute("tabindex","-1"),g.setAttribute("inert",!0),this.preElement=g,this.codeElement=f,g.append(f),this.append(g),this.templateObject.isCode&&c!=null&&""!=c&&f.classList.add("language-"+c.toLowerCase());let h=document.createElement("div");h.classList.add("code-input_dialog-container"),this.append(h),this.dialogContainerElement=h;let i=document.createElement("div");i.classList.add("code-input_keyboard-navigation-instructions"),h.append(i),this.pluginEvt("afterElementsAdded"),this.dispatchEvent(new CustomEvent("code-input_load")),this.value=b,this.animateFrame();const j=new ResizeObserver(()=>{this.syncSize()});j.observe(this),this.classList.add("code-input_loaded")}escape_html(a){return this.escapeHtml(a)}get_template(){return this.getTemplate()}get template(){return this.templateObject}set template(a){}connectedCallback(){this.templateObject=this.getTemplate(),this.templateObject!=null&&(this.classList.add("code-input_registered"),window.addEventListener("DOMContentLoaded",this.setup.bind(this)))}mutationObserverCallback(a){for(const b of a)if("attributes"===b.type){for(let a=0;a<codeInput.observedAttributes.length;a++)if(b.attributeName==codeInput.observedAttributes[a])return this.attributeChangedCallback(b.attributeName,b.oldValue,super.getAttribute(b.attributeName));for(let a=0;a<codeInput.textareaSyncAttributes.length;a++)if(b.attributeName==codeInput.textareaSyncAttributes[a])return this.attributeChangedCallback(b.attributeName,b.oldValue,super.getAttribute(b.attributeName));if("aria-"==b.attributeName.substring(0,5))return this.attributeChangedCallback(b.attributeName,b.oldValue,super.getAttribute(b.attributeName))}}disconnectedCallback(){this.mutationObserver.disconnect()}attributeChangedCallback(a,b,c){if(this.isConnected)switch(this.pluginEvt("attributeChanged",[a,b,c]),a){case"value":this.value=c;break;case"template":this.templateObject=codeInput.usedTemplates[c||codeInput.defaultTemplate],this.templateObject.preElementStyled?this.classList.add("code-input_pre-element-styled"):this.classList.remove("code-input_pre-element-styled"),this.scheduleHighlight();break;case"lang":case"language":let d=this.codeElement,e=this.textareaElement;if(null!=c&&(c=c.toLowerCase(),d.classList.contains(`language-${c}`)))break;null!==b&&(b=b.toLowerCase(),d.classList.remove("language-"+b),d.parentElement.classList.remove("language-"+b)),d.classList.remove("language-none"),d.parentElement.classList.remove("language-none"),null!=c&&""!=c&&d.classList.add("language-"+c),e.placeholder==b&&(e.placeholder=c),this.scheduleHighlight();break;default:codeInput.textareaSyncAttributes.includes(a)||"aria-"==a.substring(0,5)?null==c||null==c?this.textareaElement.removeAttribute(a):this.textareaElement.setAttribute(a,c):codeInput.textareaSyncAttributes.regexp.forEach(b=>{a.match(b)&&(null==c?this.textareaElement.removeAttribute(a):this.textareaElement.setAttribute(a,c))})}}addEventListener(a,b,c=void 0){let d=function(a){"function"==typeof b?b(a):b&&b.handleEvent&&b.handleEvent(a)}.bind(this);this.boundEventCallbacks[b]=d,codeInput.textareaSyncEvents.includes(a)?(this.boundEventCallbacks[b]=d,c===void 0?null==this.textareaElement?this.addEventListener("code-input_load",()=>{this.textareaElement.addEventListener(a,d)}):this.textareaElement.addEventListener(a,d):null==this.textareaElement?this.addEventListener("code-input_load",()=>{this.textareaElement.addEventListener(a,d,c)}):this.textareaElement.addEventListener(a,d,c)):c===void 0?super.addEventListener(a,d):super.addEventListener(a,d,c)}removeEventListener(a,b,c=void 0){let d=this.boundEventCallbacks[b];codeInput.textareaSyncEvents.includes(a)?c===void 0?null==this.textareaElement?this.addEventListener("code-input_load",()=>{this.textareaElement.removeEventListener(a,d)}):this.textareaElement.removeEventListener(a,d):null==this.textareaElement?this.addEventListener("code-input_load",()=>{this.textareaElement.removeEventListener(a,d,c)}):this.textareaElement.removeEventListener(a,d,c):c===void 0?super.removeEventListener(a,d):super.removeEventListener(a,d,c)}getTextareaProperty(a,b=void 0){if(this.textareaElement)return this.textareaElement[a];else{const c=this.querySelector("textarea[data-code-input-fallback]");if(c)return c[a];if(void 0===b)throw new Error("Cannot get "+a+" of an unregistered code-input element without a data-code-input-fallback textarea.");return b}}setTextareaProperty(a,b,c=!0){if(this.textareaElement)this.textareaElement[a]=b;else{const d=this.querySelector("textarea[data-code-input-fallback]");if(d)d[a]=b;else{if(!c)return(!1);throw new Error("Cannot set "+a+" of an unregistered code-input element without a data-code-input-fallback textarea.")}}return(!0)}get autocomplete(){return this.getAttribute("autocomplete")}set autocomplete(a){return this.setAttribute("autocomplete",a)}get cols(){return this.getTextareaProperty("cols",+this.getAttribute("cols"))}set cols(a){this.setAttribute("cols",a)}get defaultValue(){return this.initialValue}set defaultValue(a){this.initialValue=a}get textContent(){return this.initialValue}set textContent(a){this.initialValue=a}get dirName(){return this.getAttribute("dirName")||""}set dirName(a){this.setAttribute("dirname",a)}get disabled(){return this.hasAttribute("disabled")}set disabled(a){a?this.setAttribute("disabled",!0):this.removeAttribute("disabled")}get form(){return this.getTextareaProperty("form")}get labels(){return this.getTextareaProperty("labels")}get maxLength(){const a=+this.getAttribute("maxlength");return isNaN(a)?-1:a}set maxLength(a){-1==a?this.removeAttribute("maxlength"):this.setAttribute("maxlength",a)}get minLength(){const a=+this.getAttribute("minlength");return isNaN(a)?-1:a}set minLength(a){-1==a?this.removeAttribute("minlength"):this.setAttribute("minlength",a)}get name(){return this.getAttribute("name")||""}set name(a){this.setAttribute("name",a)}get placeholder(){return this.getAttribute("placeholder")||""}set placeholder(a){this.setAttribute("placeholder",a)}get readOnly(){return this.hasAttribute("readonly")}set readOnly(a){a?this.setAttribute("readonly",!0):this.removeAttribute("readonly")}get required(){return this.hasAttribute("readonly")}set required(a){a?this.setAttribute("readonly",!0):this.removeAttribute("readonly")}get rows(){return this.getTextareaProperty("rows",+this.getAttribute("rows"))}set rows(a){this.setAttribute("rows",a)}get selectionDirection(){return this.getTextareaProperty("selectionDirection")}set selectionDirection(a){this.setTextareaProperty("selectionDirection",a)}get selectionEnd(){return this.getTextareaProperty("selectionEnd")}set selectionEnd(a){this.setTextareaProperty("selectionEnd",a)}get selectionStart(){return this.getTextareaProperty("selectionStart")}set selectionStart(a){this.setTextareaProperty("selectionStart",a)}get textLength(){return this.value.length}get type(){return"textarea"}get validationMessage(){return this.getTextareaProperty("validationMessage")}get validity(){return this.getTextareaProperty("validationMessage")}get value(){return this.getTextareaProperty("value",this.getAttribute("value")||this.innerHTML)}set value(a){a=a||"",this.setTextareaProperty("value",a,!1)?this.textareaElement&&this.scheduleHighlight():this.innerHTML=a}get willValidate(){return this.getTextareaProperty("willValidate",this.disabled||this.readOnly)}get wrap(){return this.getAttribute("wrap")||""}set wrap(a){this.setAttribute("wrap",a)}blur(a={}){return this.textareaElement.blur(a)}checkValidity(){return this.textareaElement.checkValidity()}focus(a={}){return this.textareaElement.focus(a)}reportValidity(){return this.textareaElement.reportValidity()}setCustomValidity(a){this.textareaElement.setCustomValidity(a)}setRangeText(a,b=this.selectionStart,c=this.selectionEnd,d="preserve"){this.getTextareaProperty("setRangeText")(a,b,c,d)}setSelectionRange(a,b,c="none"){this.getTextareaProperty("setSelectionRange")(a,b,c)}pluginData={};formResetCallback(){this.value=this.initialValue}}};{class a extends codeInput.Template{constructor(a,b=[],c=!0){super(a.highlightElement,c,!0,!1,b)}}codeInput.templates.Prism=a;class b extends codeInput.Template{constructor(a,b=[],c=!1){super(function(b){b.removeAttribute("data-highlighted"),a.highlightElement(b)},c,!0,!1,b)}}codeInput.templates.Hljs=b}customElements.define("code-input",codeInput.CodeInput);

package/docs/_index.md

@@ -10,7 +10,7 @@ Aiming to be [more <mark>flexible</mark>, <mark>lightweight</mark>,
 [HTML forms](interface/forms), the [`<textarea>` JavaScript interface](interface/js), more languages and
 more use cases.
 
-*code-input.js is free, libre, open source software under the MIT (AKA Expat) license.* **Download it [from the Git repository](https://github.com/WebCoder49/code-input/tree/v2.6.2), [in a ZIP archive](/release/code-input-js-v2.6.2.zip), [in a TAR.GZ archive](/release/code-input-js-v2.6.2.tar.gz), or from `@webcoder49/code-input` on the NPM registry ([Yarn](https://yarnpkg.com/package?name=@webcoder49/code-input), [NPM](https://npmjs.com/package/@webcoder49/code-input), etc.).**
+*code-input.js is free, libre, open source software under the MIT (AKA Expat) license.* **Download it [from the Git repository](https://github.com/WebCoder49/code-input/tree/v2.6.3), [in a ZIP archive](/release/code-input-js-v2.6.3.zip), [in a TAR.GZ archive](/release/code-input-js-v2.6.3.tar.gz), or from `@webcoder49/code-input` on the NPM registry ([Yarn](https://yarnpkg.com/package?name=@webcoder49/code-input), [NPM](https://npmjs.com/package/@webcoder49/code-input), etc.).**
 
 ## Get Started with a Demo
 
@@ -80,6 +80,9 @@ console.log("Hello, World!");</textarea></code-input>
         <script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.6/plugins/indent.min.js"></script>
 
         <!--Register code-input template-->
+        <!--This can be before the code-input element is created, in which case it will defer the registration of all code-input
+        elements until the page is loaded, or after it is created, in which case registration will occur immediately, but not inside
+        code-input elements.-->
         <script>
             codeInput.registerTemplate("syntax-highlighted",
                 new codeInput.templates.Prism(
@@ -137,6 +140,9 @@ console.log("Hello, World!");</textarea></code-input>
         <script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.6/plugins/indent.min.js"></script>
 
         <!--Register code-input template-->
+        <!--This can be before the code-input element is created, in which case it will defer the registration of all code-input
+        elements until the page is loaded, or after it is created, in which case registration will occur immediately, but not inside
+        code-input elements.-->
         <script>
             codeInput.registerTemplate("syntax-highlighted",
                 new codeInput.templates.Hljs(
@@ -182,6 +188,9 @@ console.log("Hello, World!");</textarea></code-input>
         <script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.6/plugins/indent.min.js"></script>
 
         <!--Register code-input template-->
+        <!--This can be before the code-input element is created, in which case it will defer the registration of all code-input
+        elements until the page is loaded, or after it is created, in which case registration will occur immediately, but not inside
+        code-input elements.-->
         <script>
             codeInput.registerTemplate("syntax-highlighted",
                 new codeInput.Template(
@@ -303,6 +312,6 @@ something like [CodeMirror](https://codemirror.net/),
 
 ## Contribute Bug Reports / Code / Docs {#contributing}
 
-🎉 code-input.js is collaboratively developed by many people, which is what keeps it going strong. By version 2.6.0, many have reported bugs and suggestions, and [9 people (see them on GitHub)](https://github.com/WebCoder49/code-input/graphs/contributors) have contributed code or documentation directly. If you have found a bug, would like to help with the code or documentation, or have additional suggestions, for plugins or core functionality, [please look at GitHub](https://github.com/WebCoder49/code-input/tree/main/CONTRIBUTING.md) or [get in touch via email so I can add it for you](mailto:code-input-js@webcoder49.dev)!
+🎉 code-input.js is collaboratively developed by many people, which is what keeps it going strong. By version 2.6.0, many have reported bugs and suggestions, and [9 people (see them on GitHub)](https://github.com/WebCoder49/code-input/graphs/contributors) have contributed code or documentation directly. If you have found a bug, would like to help with the code or documentation, or have additional suggestions, for plugins or core functionality, [please look at GitHub](https://github.com/WebCoder49/code-input/tree/main/CONTRIBUTING.md) or [get in touch via email so I can add it for you](mailto:code-input-js@webcoder49.dev) / [this address for security issues](mailto:security@webcoder49.dev) ([address owner, encryption and privacy info](https://oliver.geer.im/#email))!
 
-*We're looking into mirroring code-input.js onto Codeberg as well as GitHub for more flexibility and freedom - if you have ideas for this please get in touch!*
+*I'm looking into mirroring code-input.js onto Codeberg as well as GitHub for more flexibility and freedom - if you have ideas for this please get in touch!*

package/docs/interface/js/_index.md

@@ -6,6 +6,6 @@ title = '`code-input` vs the `textarea` in JavaScript'
 
 > Contributors: 2025 Oliver Geer
 
-Once registered, `code-input` elements support most of the JavaScript properties and events used with a `textarea` element, because they are built around them. Try swapping out your `textarea` element in your JavaScript application for a `code-input`! If it doesn't work, [submit a bug report](https://github.com/WebCoder49/code-input/issues).
+Once registered, `code-input` elements support the JavaScript properties and events used with a `textarea` element, because they are built around them. Try swapping out your `textarea` element in your JavaScript application for a `code-input`! If it doesn't work, [submit a bug report](https://github.com/WebCoder49/code-input/issues).
 
 If you want to replace a `textarea` with a `code-input` in an application that doesn't need JavaScript, [look here](../forms). We support HTML5 forms, and progressive enhancement so JavaScript isn't needed!

package/esm/code-input.mjs

@@ -17,12 +17,14 @@
 
 var codeInput = {
     /**
-     * A list of attributes that will trigger the 
-     * `codeInput.CodeInput.attributeChangedCallback` 
+     * A list of attributes that will trigger functionality in the
+     * `codeInput.CodeInput.attributeChangedCallback`
      * when modified in a code-input element. This
      * does not include events, which are handled in
      * `codeInput.CodeInput.addEventListener` and
      * `codeInput.CodeInput.removeEventListener`.
+     *
+     * This does not include those listed in `codeInput.textareaSyncAttributes` that only synchronise with the textarea element.
      */
     observedAttributes: [
         "value",
@@ -135,9 +137,7 @@ var codeInput = {
             for (let i in codeInput.templateNotYetRegisteredQueue[templateName]) {
                 const elem = codeInput.templateNotYetRegisteredQueue[templateName][i];
                 elem.templateObject = template;
-                elem.connectedCallback();
-                // Bind sets elem as first parameter of function 
-                // So innerHTML can be read
+                elem.setup();
             }
         }
 
@@ -148,9 +148,7 @@ var codeInput = {
                 for (let i in codeInput.templateNotYetRegisteredQueue[undefined]) {
                     const elem = codeInput.templateNotYetRegisteredQueue[undefined][i];
                     elem.templateObject = template;
-                    elem.connectedCallback();
-                    // Bind sets elem as first parameter of function
-                    // So innerHTML can be read
+                    elem.setup();
                 }
             }
         }
@@ -509,6 +507,8 @@ var codeInput = {
         setup() {
             if(this.textareaElement != null) return; // Already set up
 
+            this.classList.add("code-input_registered");
+
             this.mutationObserver = new MutationObserver(this.mutationObserverCallback.bind(this));
             this.mutationObserver.observe(this, {
                 attributes: true,
@@ -528,6 +528,8 @@ var codeInput = {
                 let textareaAttributeNames = fallbackTextarea.getAttributeNames();
                 for(let i = 0; i < textareaAttributeNames.length; i++) {
                     const attr = textareaAttributeNames[i];
+                    if(attr == "data-code-input-fallback") continue;
+
                     if(!this.hasAttribute(attr)) {
                         this.setAttribute(attr, fallbackTextarea.getAttribute(attr));
                     }
@@ -553,7 +555,10 @@ var codeInput = {
                 textarea.value = value;
             }
             textarea.innerHTML = this.innerHTML;
-            textarea.setAttribute("spellcheck", "false");
+            if(!this.hasAttribute("spellcheck")) {
+                // For backwards compatibility:
+                textarea.setAttribute("spellcheck", "false");
+            }
             
             // Disable focusing on the code-input element - only allow the textarea to be focusable
             textarea.setAttribute("tabindex", this.getAttribute("tabindex") || 0);
@@ -626,6 +631,8 @@ var codeInput = {
                 this.syncSize();
             });
             resizeObserver.observe(this);
+
+            this.classList.add("code-input_loaded");
         }
 
         /**
@@ -673,9 +680,10 @@ var codeInput = {
             // template property with the string value of the attribute
             this.templateObject = this.getTemplate();
             if (this.templateObject != undefined) {
+                // Template registered before loading
                 this.classList.add("code-input_registered");
-                this.setup();
-                this.classList.add("code-input_loaded");
+                // Children not yet present - wait until they are
+                window.addEventListener("DOMContentLoaded", this.setup.bind(this))
             } 
         }
 
@@ -690,6 +698,11 @@ var codeInput = {
                         return this.attributeChangedCallback(mutation.attributeName, mutation.oldValue, super.getAttribute(mutation.attributeName));
                     }
                 }
+                for(let i = 0; i < codeInput.textareaSyncAttributes.length; i++) {
+                    if (mutation.attributeName == codeInput.textareaSyncAttributes[i]) {
+                        return this.attributeChangedCallback(mutation.attributeName, mutation.oldValue, super.getAttribute(mutation.attributeName));
+                    }
+                }
                 if (mutation.attributeName.substring(0, 5) == "aria-") {
                     return this.attributeChangedCallback(mutation.attributeName, mutation.oldValue, super.getAttribute(mutation.attributeName));
                 }
@@ -860,117 +873,167 @@ var codeInput = {
             }
         }
 
+        //-------------------------------------------
+        //----------- Textarea interface ------------
+        //-------------------------------------------
+        // See https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement
+        // Attributes defined at codeInput.textareaSyncAttributes
+
         /**
-         * Get the text contents of the code-input element.
+         * Get the JavaScript property from the internal textarea
+         * element, given its name and a defaultValue to return
+         * when no textarea is present (undefined to make it throw
+         * an error instead).
+         *
+         * For internal use - treat the code-input element as a
+         * textarea for the standard properties (e.g. document.
+         * querySelector("code-input").defaultValue).
          */
-        get value() {
+        getTextareaProperty(name, defaultValue=undefined) {
             if(this.textareaElement) {
-                // Get from editable textarea element
-                return this.textareaElement.value;
+                return this.textareaElement[name];
             } else {
                 // Unregistered
                 const fallbackTextarea = this.querySelector("textarea[data-code-input-fallback]");
                 if(fallbackTextarea) {
-                    return fallbackTextarea.value;
+                    return fallbackTextarea[name];
                 } else {
-                    return this.innerHTML;
+                    if(defaultValue === undefined) {
+                        throw new Error("Cannot get "+name+" of an unregistered code-input element without a data-code-input-fallback textarea.");
+                    }
+                    return defaultValue;
                 }
             }
         }
         /**
-         * Set the text contents of the code-input element.
-         * @param {string} val - New text contents
+         * Set the JavaScript property of the internal textarea
+         * element, given its name and value.
+         *
+         * If there is no registered or fallback textarea and errorIfCannot is
+         * false, return false (otherwise true); If there is no registered or
+         * fallback textarea and errorIfCannot is true, throw an error.
+         *
+         * For internal use - treat the code-input element as a
+         * textarea for the standard properties (e.g. document.
+         * querySelector("code-input").defaultValue).
          */
-        set value(val) {
-            if (val === null || val === undefined) {
-                val = "";
-            }
+        setTextareaProperty(name, value, errorIfCannot=true) {
             if(this.textareaElement) {
-                // Save in editable textarea element
-                this.textareaElement.value = val;
-                // Trigger highlight
-                this.scheduleHighlight();
+                this.textareaElement[name] = value;
             } else {
                 // Unregistered
                 const fallbackTextarea = this.querySelector("textarea[data-code-input-fallback]");
                 if(fallbackTextarea) {
-                    fallbackTextarea.value = val;
+                    fallbackTextarea[name] = value;
                 } else {
-                    this.innerHTML = val;
+                    if(!errorIfCannot) return false;
+                    throw new Error("Cannot set "+name+" of an unregistered code-input element without a data-code-input-fallback textarea.");
                 }
             }
+            return true;
         }
 
-        // Synchronise blur and focus
-        focus(options={}) {
-            return this.textareaElement.focus(options);
-        }
-        blur(options={}) {
-            return this.textareaElement.blur(options);
+        get autocomplete() { return this.getAttribute("autocomplete"); }
+        set autocomplete(val) { return this.setAttribute("autocomplete", val); }
+        get cols() { return this.getTextareaProperty("cols", Number(this.getAttribute("cols"))); }
+        set cols(val) { this.setAttribute("cols", val); }
+        get defaultValue() { return this.initialValue; }
+        set defaultValue(val) { this.initialValue = val; }
+        get textContent() { return this.initialValue; }
+        set textContent(val) { this.initialValue = val; }
+        get dirName() { return this.getAttribute("dirName") || ""; }
+        set dirName(val) { this.setAttribute("dirname", val); }
+        get disabled() { return this.hasAttribute("disabled"); }
+        set disabled(val) {
+            if(val) {
+                this.setAttribute("disabled", true);
+            } else {
+                this.removeAttribute("disabled");
+            }
         }
-
-        /**
-         * Get the placeholder of the code-input element that appears
-         * when no code has been entered.
-         */
-        get placeholder() {
-            return this.getAttribute("placeholder");
+        get form() { return this.getTextareaProperty("form"); }
+        get labels() { return this.getTextareaProperty("labels"); }
+        get maxLength() {
+            const result = Number(this.getAttribute("maxlength"));
+            if(isNaN(result)) {
+                return -1;
+            }
+            return result;
         }
-        /**
-         * Set the placeholder of the code-input element that appears
-         * when no code has been entered.
-         * @param {string} val - New placeholder
-         */
-        set placeholder(val) {
-            return this.setAttribute("placeholder", val);
+        set maxLength(val) {
+            if(val == -1) {
+                this.removeAttribute("maxlength");
+            } else {
+                this.setAttribute("maxlength", val);
+            }
         }
-
-        /**
-         * Returns a  ValidityState object that represents the validity states of an element.
-         * 
-         * See `HTMLTextAreaElement.validity`
-         */
-        get validity() {
-            return this.textareaElement.validity;
+        get minLength() {
+            const result = Number(this.getAttribute("minlength"));
+            if(isNaN(result)) {
+                return -1;
+            }
+            return result;
         }
-
-        /**
-         * Returns the error message that would be displayed if the user submits the form, or an empty string if no error message. 
-         * It also triggers the standard error message, such as "this is a required field". The result is that the user sees validation 
-         * messages without actually submitting.
-         * 
-         * See `HTMLTextAreaElement.validationMessage`
-         */
-        get validationMessage() {
-            return this.textareaElement.validationMessage;
+        set minLength(val) {
+            if(val == -1) {
+                this.removeAttribute("minlength");
+            } else {
+                this.setAttribute("minlength", val);
+            }
         }
-
-        /**
-         * Sets a custom error message that is displayed when a form is submitted.
-         * 
-         * See `HTMLTextAreaElement.setCustomValidity`
-         * @param error Sets a custom error message that is displayed when a form is submitted.
-         */
-        setCustomValidity(error) {
-            return this.textareaElement.setCustomValidity(error);
+        get name() { return this.getAttribute("name") || ""; }
+        set name(val) { this.setAttribute("name", val); }
+        get placeholder() { return this.getAttribute("placeholder") || ""; }
+        set placeholder(val) { this.setAttribute("placeholder", val); }
+        get readOnly() { return this.hasAttribute("readonly"); }
+        set readOnly(val) {
+            if(val) {
+                this.setAttribute("readonly", true);
+            } else {
+                this.removeAttribute("readonly");
+            }
         }
-
-        /**
-         * Returns whether a form will validate when it is submitted, 
-         * without having to submit it.
-         * 
-         * See `HTMLTextAreaElement.checkValidity`
-         */
-        checkValidity() {
-            return this.textareaElement.checkValidity();
+        get required() { return this.hasAttribute("readonly"); }
+        set required(val) {
+            if(val) {
+                this.setAttribute("readonly", true);
+            } else {
+                this.removeAttribute("readonly");
+            }
         }
-
-        /**
-         * See `HTMLTextAreaElement.reportValidity`
-         */
-        reportValidity() {
-            return this.textareaElement.reportValidity();
+        get rows() { return this.getTextareaProperty("rows", Number(this.getAttribute("rows"))); }
+        set rows(val) { this.setAttribute("rows", val); }
+        get selectionDirection() { return this.getTextareaProperty("selectionDirection"); }
+        set selectionDirection(val) { this.setTextareaProperty("selectionDirection", val); }
+        get selectionEnd() { return this.getTextareaProperty("selectionEnd"); }
+        set selectionEnd(val) { this.setTextareaProperty("selectionEnd", val); }
+        get selectionStart() { return this.getTextareaProperty("selectionStart"); }
+        set selectionStart(val) { this.setTextareaProperty("selectionStart", val); }
+        get textLength() { return this.value.length; }
+        get type() { return "textarea"; } // Mimics textarea
+        get validationMessage() { return this.getTextareaProperty("validationMessage"); }
+        get validity() { return this.getTextareaProperty("validationMessage"); }
+        get value() { return this.getTextareaProperty("value", this.getAttribute("value") || this.innerHTML); }
+        set value(val) {
+            val = val || "";
+            if(this.setTextareaProperty("value", val, false)) {
+                if(this.textareaElement) this.scheduleHighlight();
+            } else {
+                this.innerHTML = val;
+            }
         }
+        get willValidate() { return this.getTextareaProperty("willValidate", this.disabled || this.readOnly); }
+        get wrap() { return this.getAttribute("wrap") || ""; }
+        set wrap(val) { this.setAttribute("wrap", val); }
+
+
+        blur(options={}) { return this.textareaElement.blur(options); }
+        checkValidity() { return this.textareaElement.checkValidity(); }
+        focus(options={}) { return this.textareaElement.focus(options); }
+        reportValidity() { return this.textareaElement.reportValidity(); }
+        setCustomValidity(error) { this.textareaElement.setCustomValidity(error); }
+        setRangeText(replacement, selectionStart=this.selectionStart, selectionEnd=this.selectionEnd, selectMode="preserve") { this.getTextareaProperty("setRangeText")(replacement, selectionStart, selectionEnd, selectMode); }
+        setSelectionRange(selectionStart, selectionEnd, selectionDirection="none") { this.getTextareaProperty("setSelectionRange")(selectionStart, selectionEnd, selectionDirection); }
 
         /**
          * Allows plugins to store data in the scope of a single element.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webcoder49/code-input",
-  "version": "2.6.2",
+  "version": "2.6.3",
   "description": "An editable <textarea> that supports *any* syntax highlighting algorithm, for code or something else. Also, added plugins.",
   "browser": "code-input.js",
   "exports": {