@webcoder49/code-input 1.5.1 → 2.0.1

package/code-input.js

@@ -5,6 +5,8 @@
  * 
  * **<https://github.com/WebCoder49/code-input>**
  */
+
+
 var codeInput = {
     /**
      * A list of attributes that will trigger the 
@@ -27,6 +29,7 @@ var codeInput = {
      * code-input element.
      */
     textareaSyncAttributes: [
+        "aria-*",
         "value",
         "name",
         // Form validation - https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation
@@ -85,17 +88,19 @@ var codeInput = {
      * @param {Object} template - a Template object instance - see `codeInput.templates`  
      */
     registerTemplate: function (templateName, template) {
-        if(!(typeof templateName == "string" || templateName instanceof String)) throw TypeError(`Template for "${templateName}" must be a string.`);
-        if(!(typeof template.highlight == "function" || template.highlight instanceof Function)) throw TypeError(`Template for "${templateName}" invalid, because the highlight function provided is not a function; it is "${template.highlight}". Please make sure you use one of the constructors in codeInput.templates, and that you provide the correct arguments.`);
-        if(!(typeof template.includeCodeInputInHighlightFunc == "boolean" || template.includeCodeInputInHighlightFunc instanceof Boolean)) throw TypeError(`Template for "${templateName}" invalid, because the includeCodeInputInHighlightFunc value provided is not a true or false; it is "${template.includeCodeInputInHighlightFunc}". Please make sure you use one of the constructors in codeInput.templates, and that you provide the correct arguments.`);
-        if(!(typeof template.preElementStyled == "boolean" || template.preElementStyled instanceof Boolean)) throw TypeError(`Template for "${templateName}" invalid, because the preElementStyled value provided is not a true or false; it is "${template.preElementStyled}". Please make sure you use one of the constructors in codeInput.templates, and that you provide the correct arguments.`);
-        if(!(typeof template.isCode == "boolean" || template.isCode instanceof Boolean)) throw TypeError(`Template for "${templateName}" invalid, because the isCode value provided is not a true or false; it is "${template.isCode}". Please make sure you use one of the constructors in codeInput.templates, and that you provide the correct arguments.`);
-        if(!Array.isArray(template.plugins)) throw TypeError(`Template for "${templateName}" invalid, because the plugin array provided is not an array; it is "${template.plugins}". Please make sure you use one of the constructors in codeInput.templates, and that you provide the correct arguments.`);
+        if(!(typeof templateName == "string" || templateName instanceof String)) throw TypeError(`code-input: Template for "${templateName}" must be a string.`);
+        if(!(typeof template.highlight == "function" || template.highlight instanceof Function)) throw TypeError(`code-input: Template for "${templateName}" invalid, because the highlight function provided is not a function; it is "${template.highlight}". Please make sure you use one of the constructors in codeInput.templates, and that you provide the correct arguments.`);
+        if(!(typeof template.includeCodeInputInHighlightFunc == "boolean" || template.includeCodeInputInHighlightFunc instanceof Boolean)) throw TypeError(`code-input: Template for "${templateName}" invalid, because the includeCodeInputInHighlightFunc value provided is not a true or false; it is "${template.includeCodeInputInHighlightFunc}". Please make sure you use one of the constructors in codeInput.templates, and that you provide the correct arguments.`);
+        if(!(typeof template.preElementStyled == "boolean" || template.preElementStyled instanceof Boolean)) throw TypeError(`code-input: Template for "${templateName}" invalid, because the preElementStyled value provided is not a true or false; it is "${template.preElementStyled}". Please make sure you use one of the constructors in codeInput.templates, and that you provide the correct arguments.`);
+        if(!(typeof template.isCode == "boolean" || template.isCode instanceof Boolean)) throw TypeError(`code-input: Template for "${templateName}" invalid, because the isCode value provided is not a true or false; it is "${template.isCode}". Please make sure you use one of the constructors in codeInput.templates, and that you provide the correct arguments.`);
+        if(!Array.isArray(template.plugins)) throw TypeError(`code-input: Template for "${templateName}" invalid, because the plugin array provided is not an array; it is "${template.plugins}". Please make sure you use one of the constructors in codeInput.templates, and that you provide the correct arguments.`);
+        
         template.plugins.forEach((plugin, i) => {
             if(!(plugin instanceof codeInput.Plugin)) {
-                throw TypeError(`Template for "${templateName}" invalid, because the plugin provided at index ${i} is not valid; it is "${template.plugins[i]}". Please make sure you use one of the constructors in codeInput.templates, and that you provide the correct arguments.`);
+                throw TypeError(`code-input: Template for "${templateName}" invalid, because the plugin provided at index ${i} is not valid; it is "${template.plugins[i]}". Please make sure you use one of the constructors in codeInput.templates, and that you provide the correct arguments.`);
             }
         });
+
         
         codeInput.usedTemplates[templateName] = template;
         // Add waiting code-input elements wanting this template from queue
@@ -103,10 +108,13 @@ var codeInput = {
             for (let i in codeInput.templateNotYetRegisteredQueue[templateName]) {
                 elem = codeInput.templateNotYetRegisteredQueue[templateName][i];
                 elem.template = template;
-                elem.setup();
+                codeInput.runOnceWindowLoaded((function(elem) { elem.connectedCallback(); }).bind(null, elem), elem);
+                // Bind sets elem in parameter 
+                // So innerHTML can be read
             }
             console.log(`code-input: template: Added existing elements with template ${templateName}`);
         }
+
         if (codeInput.defaultTemplate == undefined) {
             codeInput.defaultTemplate = templateName;
             // Add elements with default template from queue
@@ -114,7 +122,9 @@ var codeInput = {
                 for (let i in codeInput.templateNotYetRegisteredQueue[undefined]) {
                     elem = codeInput.templateNotYetRegisteredQueue[undefined][i];
                     elem.template = template;
-                    elem.setup();
+                    codeInput.runOnceWindowLoaded((function(elem) { elem.connectedCallback(); }).bind(null, elem), elem);
+                    // Bind sets elem in parameter 
+                    // So innerHTML can be read
                 }
             }
             console.log(`code-input: template: Set template ${templateName} as default`);
@@ -123,34 +133,80 @@ var codeInput = {
     },
 
     /**
-     * Constructors for creating templates.
-     * Each code-input element has a template attribute that 
-     * tells it which template to use.
-     * Each template contains functions and preferences that 
-     * run the syntax-highlighting and let code-input control 
-     * the highlighting.
-     * For adding small pieces of functionality, please see `codeInput.plugins`.
+     * Please see `codeInput.templates.prism` or `codeInput.templates.hljs`.
+     * Templates are used in `<code-input>` elements and once registered with
+     * `codeInput.registerTemplate` will be in charge of the highlighting
+     * algorithm and settings for all code-inputs with a `template` attribute
+     * matching the registered name.
      */
-    templates: {
+    Template: class {
         /**
          * 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 {Function} 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 as well as the `<code>` element? If true, `<pre>` element's scrolling is synchronised; if false, `<code>` element's scrolling is synchronised.
          * @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.plugins`
+         * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.Plugin`
          * @returns template object
          */
-        custom(highlight = function () { }, preElementStyled = true, isCode = true, includeCodeInputInHighlightFunc = false, plugins = []) {
-            return {
-                highlight: highlight,
-                includeCodeInputInHighlightFunc: includeCodeInputInHighlightFunc,
-                preElementStyled: preElementStyled,
-                isCode: isCode,
-                plugins: plugins,
-            };
-        },
+        constructor(highlight = function () { }, preElementStyled = true, isCode = true, includeCodeInputInHighlightFunc = false, plugins = []) {
+            this.highlight = highlight;
+            this.preElementStyled = preElementStyled;
+            this.isCode = isCode;
+            this.includeCodeInputInHighlightFunc = includeCodeInputInHighlightFunc;
+            this.plugins = plugins;
+        }
+
+        /**
+         * A callback to highlight the code, that takes an HTML `<code>` element 
+         * inside a `<pre>` element as a parameter, and an optional second
+         * `<code-input>` element parameter if `this.includeCodeInputInHighlightFunc` is
+         * `true`.
+         */
+        highlight = function() {};
+
+        /**
+         * 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.
+         */
+        preElementStyled = true;
+
+        /**
+         * 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]'.
+         */
+        isCode = true;
+
+        /**
+         * Setting this to true passes the `<code-input>` element as a 
+         * second argument to the highlight function.
+         */
+        includeCodeInputInHighlightFunc = false;
+
+        /**
+         * An array of plugin objects to add extra features - 
+         * see `codeInput.Plugin`.
+         */
+        plugins = [];
+    },
+
+    /**
+     * For creating a custom template from scratch, please 
+     * use `new codeInput.Template(...)`
+     * 
+     * Shortcut functions for creating templates.
+     * Each code-input element has a template attribute that 
+     * tells it which template to use.
+     * Each template contains functions and preferences that 
+     * run the syntax-highlighting and let code-input control 
+     * the highlighting.
+     * For adding small pieces of functionality, please see `codeInput.plugins`.
+     */
+    templates: {
         /**
          * 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.
@@ -245,7 +301,20 @@ var codeInput = {
          */
         rainbow_text(rainbowColors = ["red", "orangered", "orange", "goldenrod", "gold", "green", "darkgreen", "navy", "blue", "magenta"], delimiter = "", plugins = []) {
             return this.rainbowText(rainbowColors, delimiter, plugins);
-        }
+        },
+        
+        /**
+         * @deprecated Please use `new codeInput.Template()`
+         */
+        custom(highlight = function () { }, preElementStyled = true, isCode = true, includeCodeInputInHighlightFunc = false, plugins = []) {
+            return {
+                highlight: highlight,
+                includeCodeInputInHighlightFunc: includeCodeInputInHighlightFunc,
+                preElementStyled: preElementStyled,
+                isCode: isCode,
+                plugins: plugins,
+            };
+        },
     },
 
     /* ------------------------------------
@@ -253,25 +322,52 @@ var codeInput = {
     *  ------------------------------------ */
 
     /**
+     * Before using any plugin in this namespace, please ensure you import its JavaScript
+     * files (in the plugins folder), or continue to get a more detailed error in the developer
+     * console.
+     * 
      * Where plugins are stored, after they are imported. The plugin
      * file assigns them a space in this object.
      * For adding completely new syntax-highlighting algorithms, please see `codeInput.templates`.
+     * 
      * Key - plugin name
+     * 
      * Value - plugin object
      * @type {Object}
      */
-    plugins: {
-    },
+    plugins: new Proxy({}, {
+        get(plugins, name) {
+            if(plugins[name] == undefined) {
+                throw ReferenceError(`code-input: Plugin '${name}' 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 plugins[name];
+        }
+    }),
 
     /**
      * Plugins are imported from the plugins folder. They will then
      * provide custom extra functionality to code-input elements.
      */
     Plugin: class {
-        constructor() {
+        /**
+         * Create a Plugin
+         * 
+         * @param {Array<string>} observedAttributes - The HTML attributes to watch for this plugin, and report any 
+         * modifications to the `codeInput.Plugin.attributeChanged` method.
+         */
+        constructor(observedAttributes) {
             console.log("code-input: plugin: Created plugin");
 
-            codeInput.observedAttributes = codeInput.observedAttributes.concat(self.observedAttributes);
+            observedAttributes.forEach((attribute) => {
+                // Move plugin attribute to codeInput observed attributes
+                let regexFromWildcard = codeInput.wildcard2regex(attribute);
+                if(regexFromWildcard == null) {
+                    // Not a wildcard
+                    codeInput.observedAttributes.push(attribute);
+                } else {
+                    codeInput.observedAttributes.regexp.push(regexFromWildcard);
+                }
+            });
         }
 
         /**
@@ -302,11 +398,6 @@ var codeInput = {
          * @param {string} newValue - The value of the attribute after it is changed
          */
         attributeChanged(codeInput, name, oldValue, newValue) { }
-        /**
-         * The HTML attributes to watch for this plugin, and report any 
-         * modifications to the `codeInput.Plugin.attributeChanged` method.
-         */
-        observedAttributes = []
     },
 
     /* ------------------------------------
@@ -320,10 +411,35 @@ var codeInput = {
         constructor() {
             super(); // Element
         }
+        /**
+        * Store value internally
+        */
+        _value = '';
+
+        /**
+        * Exposed child textarea element for user to input code in
+        */
+        textareaElement = null;
+        /**
+        * Exposed child pre element where syntax-highlighted code is outputted.
+        * Contains this.codeElement as its only child.
+        */
+        preElement = null;
+        /**
+        * Exposed child pre element's child code element where syntax-highlighted code is outputted.
+        * Has this.preElement as its parent.
+        */
+        codeElement = null;
+
+        /**
+        * Form-Associated Custom Element Callbacks
+        * https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example
+        */
+        static formAssociated = true;
 
         /**
          * When events are transferred to the textarea element, callbacks
-         * are bound to set the this variable to the code-inpute element
+         * are bound to set the this variable to the code-input element
          * rather than the textarea. This allows the callback to be converted
          * to a bound one:
          * Key - Callback not bound
@@ -358,6 +474,7 @@ var codeInput = {
 
         /** Update the text value to the result element, after the textarea contents have changed.
          * @param {string} value - The text value of the code-input element
+         * @param {boolean} originalUpdate - Whether this update originates from the textarea's content; if so, run it first so custom updates override it.
          */
         update(value) {
             // Prevent this from running multiple times on the same input when "value" attribute is changed, 
@@ -365,13 +482,18 @@ var codeInput = {
             // been run). Thank you to peterprvy for this. 
             if (this.ignoreValueUpdate) return;
 
+            if(this.textareaElement == null) {
+                this.addEventListener("code-input_load", () => { this.update(value) }); // Only run when fully loaded
+                return;
+            }
+
             this.ignoreValueUpdate = true;
             this.value = value;
             this.ignoreValueUpdate = false;
-            if (this.querySelector("textarea").value != value) this.querySelector("textarea").value = value;
+            if (this.textareaElement.value != value) this.textareaElement.value = value;
 
 
-            let resultElement = this.querySelector("pre code");
+            let resultElement = this.codeElement;
 
             // Handle final newlines
             if (value[value.length - 1] == "\n") {
@@ -393,8 +515,8 @@ var codeInput = {
          * Synchronise the scrolling of the textarea to the result element.
          */
         syncScroll() {
-            let inputElement = this.querySelector("textarea");
-            let resultElement = this.template.preElementStyled ? this.querySelector("pre") : this.querySelector("pre code");
+            let inputElement = this.textareaElement;
+            let resultElement = this.template.preElementStyled ? this.preElement : this.codeElement;
 
             resultElement.scrollTop = inputElement.scrollTop;
             resultElement.scrollLeft = inputElement.scrollLeft;
@@ -409,6 +531,15 @@ var codeInput = {
             return text.replace(new RegExp("&", "g"), "&amp;").replace(new RegExp("<", "g"), "&lt;"); /* Global RegExp */
         }
 
+        /**
+         * HTML-unescape an arbitrary string.
+         * @param {string} text - The original, HTML-escaped text
+         * @returns {string} - The new, unescaped text
+         */
+        unescapeHtml(text) {
+            return text.replace(new RegExp("&amp;", "g"), "&").replace(new RegExp("&lt;", "g"), "<").replace(new RegExp("&gt;", "g"), ">"); /* Global RegExp */
+        }
+
         /**
          * Get the template object this code-input element is using.
          * @returns {Object} - Template object
@@ -438,6 +569,8 @@ var codeInput = {
          * This will be called once the template has been added.
          */
         setup() {
+            if(this.textareaElement != null) return; // Already set up
+
             this.classList.add("code-input_registered"); // Remove register message
             if (this.template.preElementStyled) this.classList.add("code-input_pre-element-styled");
 
@@ -446,32 +579,52 @@ var codeInput = {
             // First-time attribute sync
             let lang = this.getAttribute("lang");
             let placeholder = this.getAttribute("placeholder") || this.getAttribute("lang") || "";
-            let value = this.value || this.innerHTML || "";
+            let value = this.unescapeHtml(this.innerHTML) || this.getAttribute("value") || "";
+            // Value attribute deprecated, but included for compatibility
 
-            this.innerHTML = ""; // Clear Content
+            this.initialValue = value; // For form reset
 
             // Create textarea
             let textarea = document.createElement("textarea");
             textarea.placeholder = placeholder;
-            textarea.value = value;
+            if(value != "") {
+                textarea.value = value;
+            }
+            textarea.innerHTML = this.innerHTML;
             textarea.setAttribute("spellcheck", "false");
 
+            this.innerHTML = ""; // Clear Content
+
             // Synchronise attributes to textarea
             codeInput.textareaSyncAttributes.forEach((attribute) => {
                 if (this.hasAttribute(attribute)) {
                     textarea.setAttribute(attribute, this.getAttribute(attribute));
                 }
             });
+            codeInput.textareaSyncAttributes.regexp.forEach((reg) =>
+            {
+                for(const attr of this.attributes) {
+                    if (attr.nodeName.match(reg)) {
+                        textarea.setAttribute(attr.nodeName, attr.nodeValue);
+                    }
+                }
+            });
 
             textarea.addEventListener('input', (evt) => { textarea.parentElement.update(textarea.value); textarea.parentElement.sync_scroll(); });
             textarea.addEventListener('scroll', (evt) => textarea.parentElement.sync_scroll());
 
+            // Save element internally
+            this.textareaElement = textarea;
             this.append(textarea);
 
             // Create result element
             let code = document.createElement("code");
             let pre = document.createElement("pre");
             pre.setAttribute("aria-hidden", "true"); // Hide for screen readers
+
+            // Save elements internally
+            this.preElement = pre;
+            this.codeElement = code;
             pre.append(code);
             this.append(pre);
 
@@ -484,6 +637,8 @@ var codeInput = {
             this.pluginEvt("afterElementsAdded");
 
             this.update(value);
+
+            this.dispatchEvent(new CustomEvent("code-input_load"));
         }
 
         /**
@@ -520,20 +675,49 @@ var codeInput = {
          */
         connectedCallback() {
             this.template = this.getTemplate();
-            if (this.template != undefined) this.setup();
+            if (this.template != 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
+            });
         }
 
-        /**
-         * Get the HTML attributes that need to be monitored and reported
-         * to `codeInput.CodeInput.attributeChangedCallback` when modified.
-         */
-        static get observedAttributes() {
-            return codeInput.observedAttributes.concat(codeInput.textareaSyncAttributes);
+        mutationObserverCallback(mutationList, observer) {
+            for (const mutation of mutationList) {
+                if (mutation.type !== 'attributes')
+                    continue;
+
+                /* Check regular attributes */
+                for(let i = 0; i < codeInput.observedAttributes.length; i++) {
+                    if (mutation.attributeName == codeInput.observedAttributes[i]) {
+                        return this.attributeChangedCallback(mutation.attributeName, mutation.oldValue, super.getAttribute(mutation.attributeName));
+                    }
+                }
+
+                /* Check wildcard attributes */
+                for(let i = 0; i < codeInput.observedAttributes.regexp.length; i++) {
+                    const reg = codeInput.observedAttributes.regexp[i];
+                    if (mutation.attributeName.match(reg)) {
+                        return this.attributeChangedCallback(mutation.attributeName, mutation.oldValue, super.getAttribute(mutation.attributeName));
+                    }
+                }
+            }
+        }
+
+        disconnectedCallback() {
+            this.mutationObserver.disconnect();
         }
 
         /**
-         * Triggered when an HTML attribute in `codeInput.CodeInput.observedAttributes`
-         * has been modified.
+         * Triggered when an observed HTML attribute
+         * has been modified (called from `mutationObserverCallback`).
          * @param {string} name - The name of the attribute
          * @param {string} oldValue - The value of the attribute before it was changed
          * @param {string} newValue - The value of the attribute after it is changed
@@ -544,10 +728,10 @@ var codeInput = {
                 switch (name) {
 
                     case "value":
-                        this.update(newValue);
+                        this.value = newValue;
                         break;
                     case "placeholder":
-                        this.querySelector("textarea").placeholder = newValue;
+                        this.textareaElement.placeholder = newValue;
                         break;
                     case "template":
                         this.template = codeInput.usedTemplates[newValue || codeInput.defaultTemplate];
@@ -560,8 +744,8 @@ var codeInput = {
 
                     case "lang":
 
-                        let code = this.querySelector("pre code");
-                        let mainTextarea = this.querySelector("textarea");
+                        let code = this.codeElement;
+                        let mainTextarea = this.textareaElement;
 
                         // Check not already updated
                         if (newValue != null) {
@@ -576,14 +760,14 @@ var codeInput = {
 
                         // Remove old language class and add new
                         console.log("code-input: Language: REMOVE", "language-" + oldValue);
-                        code.classList.remove("language-" + oldValue); // From CODE
-                        code.parentElement.classList.remove("language-" + oldValue); // From PRE
+                        code.classList.remove("language-" + oldValue); // From codeElement
+                        code.parentElement.classList.remove("language-" + oldValue); // From preElement
                         code.classList.remove("language-none"); // Prism
                         code.parentElement.classList.remove("language-none"); // Prism
 
                         if (newValue != undefined && newValue != "") {
                             code.classList.add("language-" + newValue);
-                            console.log("code-input: Language:ADD", "language-" + newValue);
+                            console.log("code-input: Language: ADD", "language-" + newValue);
                         }
 
                         if (mainTextarea.placeholder == oldValue) mainTextarea.placeholder = newValue;
@@ -593,7 +777,21 @@ var codeInput = {
                         break;
                     default:
                         if (codeInput.textareaSyncAttributes.includes(name)) {
-                            this.querySelector("textarea").setAttribute(name, newValue);
+                            if(newValue == null) {
+                                this.textareaElement.removeAttribute(name);
+                            } else {
+                                this.textareaElement.setAttribute(name, newValue);
+                            }
+                        } else {
+                            codeInput.textareaSyncAttributes.regexp.forEach((attribute) => {
+                                if (name.match(attribute)) {
+                                    if(newValue == null) {
+                                        this.textareaElement.removeAttribute(name);
+                                    } else {
+                                        this.textareaElement.setAttribute(name, newValue);
+                                    }
+                                }
+                            });
                         }
                         break;
                 }
@@ -616,9 +814,17 @@ var codeInput = {
 
             if (codeInput.textareaSyncEvents.includes(type)) {
                 if (options === undefined) {
-                    this.querySelector("textarea").addEventListener(type, boundCallback);
+                    if(this.textareaElement == null) {
+                        this.addEventListener("code-input_load", () => { this.textareaElement.addEventListener(type, boundCallback); });
+                    } else {
+                        this.textareaElement.addEventListener(type, boundCallback);
+                    }
                 } else {
-                    this.querySelector("textarea").addEventListener(type, boundCallback, options);
+                    if(this.textareaElement == null) {
+                        this.addEventListener("code-input_load", () => { this.textareaElement.addEventListener(type, boundCallback, options); });
+                    } else {
+                        this.textareaElement.addEventListener(type, boundCallback, options);
+                    }
                 }
             } else {
                 if (options === undefined) {
@@ -636,15 +842,15 @@ var codeInput = {
             let boundCallback = this.boundEventCallbacks[listener];
             if (type == "change") {
                 if (options === null) {
-                    this.querySelector("textarea").removeEventListener("change", boundCallback);
+                    this.textareaElement.removeEventListener("change", boundCallback);
                 } else {
-                    this.querySelector("textarea").removeEventListener("change", boundCallback, options);
+                    this.textareaElement.removeEventListener("change", boundCallback, options);
                 }
             } else if (type == "selectionchange") {
                 if (options === null) {
-                    this.querySelector("textarea").removeEventListener("selectionchange", boundCallback);
+                    this.textareaElement.removeEventListener("selectionchange", boundCallback);
                 } else {
-                    this.querySelector("textarea").removeEventListener("selectionchange", boundCallback, options);
+                    this.textareaElement.removeEventListener("selectionchange", boundCallback, options);
                 }
             } else {
                 super.removeEventListener(type, listener, options);
@@ -655,14 +861,19 @@ var codeInput = {
          * Get the text contents of the code-input element.
          */
         get value() {
-            return this.getAttribute("value");
+            return this._value;
         }
         /**
          * Set the text contents of the code-input element.
          * @param {string} val - New text contents
          */
         set value(val) {
-            return this.setAttribute("value", val);
+            if (val === null || val === undefined) {
+                val = "";
+            }
+            this._value = val;
+            this.update(val);
+            return val;
         }
 
         /**
@@ -687,7 +898,7 @@ var codeInput = {
          * See `HTMLTextAreaElement.validity`
          */
         get validity() {
-            return this.querySelector("textarea").validity;
+            return this.textareaElement.validity;
         }
 
         /**
@@ -698,7 +909,7 @@ var codeInput = {
          * See `HTMLTextAreaElement.validationMessage`
          */
         get validationMessage() {
-            return this.querySelector("textarea").validationMessage;
+            return this.textareaElement.validationMessage;
         }
 
         /**
@@ -708,7 +919,7 @@ var codeInput = {
          * @param error Sets a custom error message that is displayed when a form is submitted.
          */
         setCustomValidity(error) {
-            return this.querySelector("textarea").setCustomValidity(error);
+            return this.textareaElement.setCustomValidity(error);
         }
 
         /**
@@ -718,14 +929,14 @@ var codeInput = {
          * See `HTMLTextAreaElement.checkValidity`
          */
         checkValidity() {
-            return this.querySelector("textarea").checkValidity();
+            return this.textareaElement.checkValidity();
         }
 
         /**
          * See `HTMLTextAreaElement.reportValidity`
          */
         reportValidity() {
-            return this.querySelector("textarea").reportValidity();
+            return this.textareaElement.reportValidity();
         }
 
 
@@ -734,17 +945,19 @@ var codeInput = {
          */
         setAttribute(qualifiedName, value) {
             super.setAttribute(qualifiedName, value); // code-input
-            this.querySelector("textarea").setAttribute(qualifiedName, value); // textarea
+            if(this.textareaElement != null) {
+                this.textareaElement.setAttribute(qualifiedName, value); // textarea
+            }
         }
 
         /**
          * @override
          */
         getAttribute(qualifiedName) {
-            if (this.querySelector("textarea") == null) {
+            if (this.textareaElement == null) {
                 return super.getAttribute(qualifiedName);
             }
-            return this.querySelector("textarea").getAttribute(qualifiedName); // textarea
+            return this.textareaElement.getAttribute(qualifiedName); // textarea
         }
 
         /**
@@ -753,7 +966,79 @@ var codeInput = {
          * Value - object of data to be stored; different plugins may use this differently.
          */
         pluginData = {};
-    }
+
+        /**
+        * Update value on form reset
+        */
+        formResetCallback() {
+            this.update(this.initialValue);
+        };
+    },
+
+    arrayWildcards2regex(list) {
+        for(let i = 0; i < list.length; i++) {
+            const name = list[i];
+            if (name.indexOf("*") < 0)
+                continue;
+
+            list.regexp.push(new RegExp("^" +
+                                name.replace(/[/\-\\^$+?.()|[\]{}]/g, '\\$&')
+                                    .replace("*", ".*")
+                                + "$", "i"));
+            list.splice(i--, 1);
+        };
+    },
+
+    wildcard2regex(wildcard) {
+        if (wildcard.indexOf("*") < 0)
+            return null;
+
+        return new RegExp("^" +
+                wildcard.replace(/[/\-\\^$+?.()|[\]{}]/g, '\\$&')
+                    .replace("*", ".*")
+                + "$", "i");
+    },
+
+    /** 
+     * To ensure the DOM is ready, run this callback after the window 
+     * has loaded (or now if it has already loaded)
+     */
+    runOnceWindowLoaded(callback, codeInputElem) {
+        if(codeInput.windowLoaded) {
+            callback(); // Fully loaded
+        } else {
+            window.addEventListener("load", callback);
+        }
+    },
+    windowLoaded: false
+}
+window.addEventListener("load", function() {
+    codeInput.windowLoaded = true;
+});
+
+
+/**
+ * convert wildcards into regex
+ */
+
+{
+    Object.defineProperty(codeInput.textareaSyncAttributes, 'regexp', {
+        value: [],
+        writable: false,
+        enumerable: false,
+        configurable: false
+    });
+    codeInput.observedAttributes = codeInput.observedAttributes.concat(codeInput.textareaSyncAttributes);
+
+    Object.defineProperty(codeInput.observedAttributes, 'regexp', {
+        value: [],
+        writable: false,
+        enumerable: false,
+        configurable: false
+    });
+
+    codeInput.arrayWildcards2regex(codeInput.textareaSyncAttributes);
+    codeInput.arrayWildcards2regex(codeInput.observedAttributes);
 }
 
-customElements.define("code-input", codeInput.CodeInput);
+customElements.define("code-input", codeInput.CodeInput);