@webcoder49/code-input 2.1.0 → 2.5.0

package/code-input.js

@@ -19,6 +19,7 @@ var codeInput = {
     observedAttributes: [
         "value",
         "placeholder",
+        "language",
         "lang",
         "template"
     ],
@@ -29,7 +30,6 @@ var codeInput = {
      * code-input element.
      */
     textareaSyncAttributes: [
-        "aria-*",
         "value",
         // Form validation - https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation
         "min", "max",
@@ -103,7 +103,7 @@ 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(`code-input: Template for "${templateName}" must be a string.`);
+        if(!(typeof templateName == "string" || templateName instanceof String)) throw TypeError(`code-input: Name of template "${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.`);
@@ -124,7 +124,7 @@ var codeInput = {
                 elem = codeInput.templateNotYetRegisteredQueue[templateName][i];
                 elem.template = template;
                 codeInput.runOnceWindowLoaded((function(elem) { elem.connectedCallback(); }).bind(null, elem), elem);
-                // Bind sets elem in parameter 
+                // Bind sets elem as first parameter of function 
                 // So innerHTML can be read
             }
             console.log(`code-input: template: Added existing elements with template ${templateName}`);
@@ -138,7 +138,7 @@ var codeInput = {
                     elem = codeInput.templateNotYetRegisteredQueue[undefined][i];
                     elem.template = template;
                     codeInput.runOnceWindowLoaded((function(elem) { elem.connectedCallback(); }).bind(null, elem), elem);
-                    // Bind sets elem in parameter 
+                    // Bind sets elem as first parameter of function
                     // So innerHTML can be read
                 }
             }
@@ -158,14 +158,14 @@ var codeInput = {
         /**
          * Constructor to create a custom template instance. Pass this into `codeInput.registerTemplate` to use it.
          * I would strongly recommend using the built-in simpler template `codeInput.templates.prism` or `codeInput.templates.hljs`.
-         * @param {Function} highlight - a callback to highlight the code, that takes an HTML `<code>` element inside a `<pre>` element as a parameter
+         * @param {(codeElement: HTMLCodeElement, codeInput?: codeInput.CodeInput) => void} highlight - a callback to highlight the code, that takes an HTML `<code>` element inside a `<pre>` element as a parameter
          * @param {boolean} preElementStyled - is the `<pre>` element CSS-styled as well as the `<code>` element? If true, `<pre>` element's scrolling is synchronised; if false, `<code>` element's scrolling is synchronised.
          * @param {boolean} isCode - is this for writing code? If true, the code-input's lang HTML attribute can be used, and the `<code>` element will be given the class name 'language-[lang attribute's value]'.
          * @param {boolean} includeCodeInputInHighlightFunc - Setting this to true passes the `<code-input>` element as a second argument to the highlight function.
          * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.Plugin`
-         * @returns template object
+         * @returns {codeInput.Template} template object
          */
-        constructor(highlight = function () { }, preElementStyled = true, isCode = true, includeCodeInputInHighlightFunc = false, plugins = []) {
+        constructor(highlight = function (codeElement) { }, preElementStyled = true, isCode = true, includeCodeInputInHighlightFunc = false, plugins = []) {
             this.highlight = highlight;
             this.preElementStyled = preElementStyled;
             this.isCode = isCode;
@@ -179,7 +179,7 @@ var codeInput = {
          * `<code-input>` element parameter if `this.includeCodeInputInHighlightFunc` is
          * `true`.
          */
-        highlight = function() {};
+        highlight = function(codeElement) {};
 
         /**
          * Is the <pre> element CSS-styled as well as the `<code>` element? 
@@ -226,37 +226,38 @@ var codeInput = {
          * Constructor to create a template that uses Prism.js syntax highlighting (https://prismjs.com/)
          * @param {Object} prism Import Prism.js, then after that import pass the `Prism` object as this parameter.
          * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
-         * @returns template object
+         * @returns {codeInput.Template} template object
          */
         prism(prism, plugins = []) { // Dependency: Prism.js (https://prismjs.com/)
-            return {
-                includeCodeInputInHighlightFunc: false,
-                highlight: prism.highlightElement,
-                preElementStyled: true,
-                isCode: true,
-                plugins: plugins,
-            };
+            return new codeInput.Template(
+                prism.highlightElement, // highlight
+                true, // preElementStyled
+                true, // isCode
+                false, // includeCodeInputInHighlightFunc
+                plugins
+            );
         },
         /**
          * Constructor to create a template that uses highlight.js syntax highlighting (https://highlightjs.org/)
          * @param {Object} hljs Import highlight.js, then after that import pass the `hljs` object as this parameter.
          * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
-         * @returns template object
+         * @returns {codeInput.Template} template object
          */
         hljs(hljs, plugins = []) { // Dependency: Highlight.js (https://highlightjs.org/)
-            return {
-                includeCodeInputInHighlightFunc: false,
-                highlight: hljs.highlightElement,
-                preElementStyled: false,
-                isCode: true,
-                plugins: plugins,
-            };
+            return new codeInput.Template(
+                function(codeElement) {
+                    codeElement.removeAttribute("data-highlighted");
+                    hljs.highlightElement(codeElement);
+                }, // highlight
+                false, // preElementStyled
+                true, // isCode
+                false, // includeCodeInputInHighlightFunc
+                plugins
+            );
         },
 
         /**
-         * Constructor to create a proof-of-concept template that gives a message if too many characters are typed.
-         * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
-         * @returns template object
+         * @deprecated Make your own version of this template if you need it - we think it isn't widely used so will remove it from the next version of code-input.
          */
         characterLimit(plugins) {
             return {
@@ -280,11 +281,7 @@ var codeInput = {
         },
 
         /**
-         * Constructor to create a proof-of-concept template that shows text in a repeating series of colors.
-         * @param {string[]} rainbowColors - An array of CSS colors, in the order each color will be shown
-         * @param {string} delimiter - The character used to split up parts of text where each part is a different colour (e.g. "" = characters, " " = words)
-         * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
-         * @returns template object
+         * @deprecated Make your own version of this template if you need it - we think it isn't widely used so will remove it from the next version of code-input.
          */
         rainbowText(rainbowColors = ["red", "orangered", "orange", "goldenrod", "gold", "green", "darkgreen", "navy", "blue", "magenta"], delimiter = "", plugins = []) {
             return {
@@ -299,20 +296,22 @@ var codeInput = {
                 includeCodeInputInHighlightFunc: true,
                 preElementStyled: true,
                 isCode: false,
+
                 rainbowColors: rainbowColors,
                 delimiter: delimiter,
+
                 plugins: plugins,
             }
         },
 
         /**
-         * @deprecated Please use `codeInput.characterLimit(plugins)`
+         * @deprecated Make your own version of this template if you need it - we think it isn't widely used so will remove it from the next version of code-input.
          */
         character_limit() {
             return this.characterLimit([]);
         },
         /**
-         * @deprecated Please use `codeInput.rainbowText`
+         * @deprecated Make your own version of this template if you need it - we think it isn't widely used so will remove it from the next version of code-input.
          */
         rainbow_text(rainbowColors = ["red", "orangered", "orange", "goldenrod", "gold", "green", "darkgreen", "navy", "blue", "magenta"], delimiter = "", plugins = []) {
             return this.rainbowText(rainbowColors, delimiter, plugins);
@@ -374,17 +373,21 @@ var codeInput = {
             console.log("code-input: plugin: Created plugin");
 
             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);
-                }
+                codeInput.observedAttributes.push(attribute);
             });
         }
 
+        /**
+         * Replace the keys in destination with any source
+         * @param {Object} destination Where to place the translated strings, already filled with the keys pointing to English strings.
+         * @param {Object} source The same keys, or some of them, mapped to translated strings.
+         */
+        addTranslations(destination, source) {
+            for(const key in source) {
+                destination[key] = source[key];
+            }
+        }
+
         /**
          * Runs before code is highlighted.
          * @param {codeInput.CodeInput} codeInput - The codeInput element
@@ -426,10 +429,6 @@ var codeInput = {
         constructor() {
             super(); // Element
         }
-        /**
-        * Store value internally
-        */
-        _value = '';
 
         /**
         * Exposed child textarea element for user to input code in
@@ -439,13 +438,19 @@ var codeInput = {
         * Exposed child pre element where syntax-highlighted code is outputted.
         * Contains this.codeElement as its only child.
         */
-        preElement = null;
+        preElement = null
         /**
         * Exposed child pre element's child code element where syntax-highlighted code is outputted.
         * Has this.preElement as its parent.
         */
         codeElement = null;
 
+        /** 
+         * Exposed non-scrolling element designed to contain dialog boxes etc. that shouldn't scroll
+         * with the code-input element.
+         */
+        dialogContainerElement = null;
+
         /**
         * Form-Associated Custom Element Callbacks
         * https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example
@@ -487,33 +492,37 @@ var codeInput = {
         * the result (pre code) element, then use the template object
         * to syntax-highlight it. */
 
-        /** 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.
+        needsHighlight = false; // Just inputted
+        handleEventsFromTextarea = true; // Turn to false when unusual internal events are called on the textarea
+        originalAriaDescription;
+
+        /**
+         * Highlight the code as soon as possible
          */
-        update(value) {
-            // Prevent this from running multiple times on the same input when "value" attribute is changed, 
-            // by not running when value is already equal to the input of this (implying update has already
-            // 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;
-            }
+        scheduleHighlight() {
+            this.needsHighlight = true;
+        }
 
-            this.ignoreValueUpdate = true;
-            this.value = value;
-            this.ignoreValueUpdate = false;
-            if (this.textareaElement.value != value) this.textareaElement.value = value;
+        /**
+         * Call an animation frame
+         */
+        animateFrame() {
+            // Synchronise the contents of the pre/code and textarea elements
+            if(this.needsHighlight) {
+                this.update();
+                this.needsHighlight = false;
+            }
 
+            window.requestAnimationFrame(this.animateFrame.bind(this));
+        }
 
+        /**
+         * Update the text value to the result element, after the textarea contents have changed.
+         */
+        update() {
             let resultElement = this.codeElement;
-
-            // Handle final newlines
-            if (value[value.length - 1] == "\n") {
-                value += " ";
-            }
+            let value = this.value;
+            value += "\n"; // Placeholder for next line
 
             // Update code
             resultElement.innerHTML = this.escapeHtml(value);
@@ -523,18 +532,47 @@ var codeInput = {
             if (this.template.includeCodeInputInHighlightFunc) this.template.highlight(resultElement, this);
             else this.template.highlight(resultElement);
 
+            this.syncSize();
+
+            // If editing here, scroll to the caret by focusing, though this shouldn't count as a focus event
+            if(this.textareaElement === document.activeElement) {
+                this.handleEventsFromTextarea = false;
+                this.textareaElement.blur();
+                this.textareaElement.focus();
+                this.handleEventsFromTextarea = true;
+            }
+
             this.pluginEvt("afterHighlight");
         }
 
         /**
-         * Synchronise the scrolling of the textarea to the result element.
+         * Set the size of the textarea element to the size of the pre/code element.
          */
-        syncScroll() {
-            let inputElement = this.textareaElement;
-            let resultElement = this.template.preElementStyled ? this.preElement : this.codeElement;
+        syncSize() {
+            // Synchronise the size of the pre/code and textarea elements
+            if(this.template.preElementStyled) {
+                this.style.backgroundColor = getComputedStyle(this.preElement).backgroundColor;
+                this.textareaElement.style.height = getComputedStyle(this.preElement).height;
+                this.textareaElement.style.width = getComputedStyle(this.preElement).width;
+            } else {
+                this.style.backgroundColor = getComputedStyle(this.codeElement).backgroundColor;
+                this.textareaElement.style.height = getComputedStyle(this.codeElement).height;
+                this.textareaElement.style.width = getComputedStyle(this.codeElement).width;
+            }
+        }
 
-            resultElement.scrollTop = inputElement.scrollTop;
-            resultElement.scrollLeft = inputElement.scrollLeft;
+        /**
+         * Show some instructions to the user only if they are using keyboard navigation - for example, a prompt on how to navigate with the keyboard if Tab is repurposed.
+         * @param {string} instructions The instructions to display only if keyboard navigation is being used. If it's blank, no instructions will be shown.
+         * @param {boolean} includeAriaDescriptionFirst Whether to include the aria-description of the code-input element before the keyboard navigation instructions for a screenreader. Keep this as true when the textarea is first focused.
+         */
+        setKeyboardNavInstructions(instructions, includeAriaDescriptionFirst) {
+            this.dialogContainerElement.querySelector(".code-input_keyboard-navigation-instructions").innerText = instructions;
+            if(includeAriaDescriptionFirst) {
+                this.textareaElement.setAttribute("aria-description", this.originalAriaDescription + ". " + instructions);
+            } else {
+                this.textareaElement.setAttribute("aria-description", instructions);
+            }
         }
 
         /**
@@ -592,8 +630,8 @@ var codeInput = {
             this.pluginEvt("beforeElementsAdded");
 
             // First-time attribute sync
-            let lang = this.getAttribute("lang");
-            let placeholder = this.getAttribute("placeholder") || this.getAttribute("lang") || "";
+            let lang = this.getAttribute("language") || this.getAttribute("lang");
+            let placeholder = this.getAttribute("placeholder") || this.getAttribute("language") || this.getAttribute("lang") || "";
             let value = this.unescapeHtml(this.innerHTML) || this.getAttribute("value") || "";
             // Value attribute deprecated, but included for compatibility
 
@@ -607,26 +645,34 @@ var codeInput = {
             }
             textarea.innerHTML = this.innerHTML;
             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);
+            this.setAttribute("tabindex", -1);
+            // Save aria-description so keyboard navigation guidance can be added.
+            this.originalAriaDescription = this.getAttribute("aria-description") || "Code input field";
+
+            // Accessibility - detect when mouse focus to remove focus outline + keyboard navigation guidance that could irritate users.
+            this.addEventListener("mousedown", () => {
+                this.classList.add("code-input_mouse-focused");
+            });
+            textarea.addEventListener("blur", () => {
+                if(this.handleEventsFromTextarea) {
+                    this.classList.remove("code-input_mouse-focused");
+                }
+            });
 
             this.innerHTML = ""; // Clear Content
 
             // Synchronise attributes to textarea
-            codeInput.textareaSyncAttributes.forEach((attribute) => {
-                if (this.hasAttribute(attribute)) {
+            for(let i = 0; i < this.attributes.length; i++) {
+                let attribute = this.attributes[i].name;
+                if (codeInput.textareaSyncAttributes.includes(attribute) || attribute.substring(0, 5) == "aria-") {
                     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());
+            textarea.addEventListener('input', (evt) => { this.value = this.textareaElement.value; });
 
             // Save element internally
             this.textareaElement = textarea;
@@ -636,6 +682,8 @@ var codeInput = {
             let code = document.createElement("code");
             let pre = document.createElement("pre");
             pre.setAttribute("aria-hidden", "true"); // Hide for screen readers
+            pre.setAttribute("tabindex", "-1"); // Hide for keyboard navigation
+            pre.setAttribute("inert", true); // Hide for keyboard navigation
 
             // Save elements internally
             this.preElement = pre;
@@ -645,22 +693,32 @@ var codeInput = {
 
             if (this.template.isCode) {
                 if (lang != undefined && lang != "") {
-                    code.classList.add("language-" + lang);
+                    code.classList.add("language-" + lang.toLowerCase());
                 }
             }
 
-            this.pluginEvt("afterElementsAdded");
+            // dialogContainerElement used to store non-scrolling dialog boxes, etc.
+            let dialogContainerElement = document.createElement("div");
+            dialogContainerElement.classList.add("code-input_dialog-container");
+            this.append(dialogContainerElement);
+            this.dialogContainerElement = dialogContainerElement;
+
+            let keyboardNavigationInstructions = document.createElement("div");
+            keyboardNavigationInstructions.classList.add("code-input_keyboard-navigation-instructions");
+            dialogContainerElement.append(keyboardNavigationInstructions);
 
-            this.update(value);
+            this.pluginEvt("afterElementsAdded");
 
             this.dispatchEvent(new CustomEvent("code-input_load"));
-        }
 
-        /**
-         * @deprecated Please use `codeInput.CodeInput.syncScroll`
-         */
-        sync_scroll() {
-            this.syncScroll();
+            this.value = value;
+            this.animateFrame();
+
+            const resizeObserver = new ResizeObserver((elements) => {
+                // The only element that could be resized is this code-input element.
+                this.syncSize();
+            });
+            resizeObserver.observe(this);
         }
 
         /**
@@ -671,7 +729,7 @@ var codeInput = {
         }
 
         /**
-         * @deprecated Please use `codeInput.CodeInput.escapeHtml`
+         * @deprecated Please use `codeInput.CodeInput.getTemplate`
          */
         get_template() {
             return this.getTemplate();
@@ -715,13 +773,8 @@ var codeInput = {
                         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));
-                    }
+                if (mutation.attributeName.substring(0, 5) == "aria-") {
+                    return this.attributeChangedCallback(mutation.attributeName, mutation.oldValue, super.getAttribute(mutation.attributeName));
                 }
             }
         }
@@ -745,20 +798,17 @@ var codeInput = {
                     case "value":
                         this.value = newValue;
                         break;
-                    case "placeholder":
-                        this.textareaElement.placeholder = newValue;
-                        break;
                     case "template":
                         this.template = codeInput.usedTemplates[newValue || codeInput.defaultTemplate];
                         if (this.template.preElementStyled) this.classList.add("code-input_pre-element-styled");
                         else this.classList.remove("code-input_pre-element-styled");
                         // Syntax Highlight
-                        this.update(this.value);
+                        this.scheduleHighlight();
 
                         break;
 
                     case "lang":
-
+                    case "language":
                         let code = this.codeElement;
                         let mainTextarea = this.textareaElement;
 
@@ -769,13 +819,15 @@ var codeInput = {
                             if (code.classList.contains(`language-${newValue}`)) break; // Already updated
                         }
 
+                        if(oldValue !== null) {
+                            // Case insensitive
+                            oldValue = oldValue.toLowerCase();
 
-                        // Case insensitive
-                        oldValue = oldValue.toLowerCase();
-
-                        // Remove old language class and add new
-                        code.classList.remove("language-" + oldValue); // From codeElement
-                        code.parentElement.classList.remove("language-" + oldValue); // From preElement
+                            // Remove old language class and add new
+                            code.classList.remove("language-" + oldValue); // From codeElement
+                            code.parentElement.classList.remove("language-" + oldValue); // From preElement
+                        }
+                        // Add new language class
                         code.classList.remove("language-none"); // Prism
                         code.parentElement.classList.remove("language-none"); // Prism
 
@@ -785,11 +837,11 @@ var codeInput = {
 
                         if (mainTextarea.placeholder == oldValue) mainTextarea.placeholder = newValue;
 
-                        this.update(this.value);
+                        this.scheduleHighlight();
 
                         break;
                     default:
-                        if (codeInput.textareaSyncAttributes.includes(name)) {
+                        if (codeInput.textareaSyncAttributes.includes(name) || name.substring(0, 5) == "aria-") {
                             if(newValue == null || newValue == undefined) {
                                 this.textareaElement.removeAttribute(name);
                             } else {
@@ -822,24 +874,37 @@ var codeInput = {
          * @override
          */
         addEventListener(type, listener, options = undefined) {
-            let boundCallback = listener.bind(this);
+            // Save a copy of the callback where `this` refers to the code-input element.
+            let boundCallback = function (evt) {
+                if (typeof listener === 'function') {
+                    listener(evt);
+                } else if (listener && listener.handleEvent) {
+                    listener.handleEvent(evt);
+                }
+            }.bind(this);
             this.boundEventCallbacks[listener] = boundCallback;
 
             if (codeInput.textareaSyncEvents.includes(type)) {
+                // Synchronise with textarea, only when handleEventsFromTextarea is true
+                // This callback is modified to only run when the handleEventsFromTextarea is set.
+                let conditionalBoundCallback = function(evt) { if(this.handleEventsFromTextarea) boundCallback(evt); }.bind(this);
+                this.boundEventCallbacks[listener] = conditionalBoundCallback;
+
                 if (options === undefined) {
                     if(this.textareaElement == null) {
                         this.addEventListener("code-input_load", () => { this.textareaElement.addEventListener(type, boundCallback); });
                     } else {
-                        this.textareaElement.addEventListener(type, boundCallback);
+                        this.textareaElement.addEventListener(type, conditionalBoundCallback);
                     }
                 } else {
                     if(this.textareaElement == null) {
                         this.addEventListener("code-input_load", () => { this.textareaElement.addEventListener(type, boundCallback, options); });
                     } else {
-                        this.textareaElement.addEventListener(type, boundCallback, options);
+                        this.textareaElement.addEventListener(type, conditionalBoundCallback, options);
                     }
                 }
             } else {
+                // Synchronise with code-input element
                 if (options === undefined) {
                     super.addEventListener(type, boundCallback);
                 } else {
@@ -851,22 +916,32 @@ var codeInput = {
         /**
          * @override
          */
-        removeEventListener(type, listener, options = null) {
+        removeEventListener(type, listener, options = undefined) {
+            // Save a copy of the callback where `this` refers to the code-input element 
             let boundCallback = this.boundEventCallbacks[listener];
-            if (type == "change") {
-                if (options === null) {
-                    this.textareaElement.removeEventListener("change", boundCallback);
+
+            if (codeInput.textareaSyncEvents.includes(type)) {
+                // Synchronise with textarea
+                if (options === undefined) {
+                    if(this.textareaElement == null) {
+                        this.addEventListener("code-input_load", () => { this.textareaElement.removeEventListener(type, boundCallback); });
+                    } else {
+                        this.textareaElement.removeEventListener(type, boundCallback);
+                    }
                 } else {
-                    this.textareaElement.removeEventListener("change", boundCallback, options);
+                    if(this.textareaElement == null) {
+                        this.addEventListener("code-input_load", () => { this.textareaElement.removeEventListener(type, boundCallback, options); });
+                    } else {
+                        this.textareaElement.removeEventListener(type, boundCallback, options);
+                    }
                 }
-            } else if (type == "selectionchange") {
-                if (options === null) {
-                    this.textareaElement.removeEventListener("selectionchange", boundCallback);
+            } else {
+                // Synchronise with code-input element
+                if (options === undefined) {
+                    super.removeEventListener(type, boundCallback);
                 } else {
-                    this.textareaElement.removeEventListener("selectionchange", boundCallback, options);
+                    super.removeEventListener(type, boundCallback, options);
                 }
-            } else {
-                super.removeEventListener(type, listener, options);
             }
         }
 
@@ -874,7 +949,8 @@ var codeInput = {
          * Get the text contents of the code-input element.
          */
         get value() {
-            return this._value;
+            // Get from editable textarea element
+            return this.textareaElement.value;
         }
         /**
          * Set the text contents of the code-input element.
@@ -884,8 +960,10 @@ var codeInput = {
             if (val === null || val === undefined) {
                 val = "";
             }
-            this._value = val;
-            this.update(val);
+            // Save in editable textarea element
+            this.textareaElement.value = val;
+            // Trigger highlight
+            this.scheduleHighlight();
             return val;
         }
 
@@ -963,74 +1041,21 @@ var codeInput = {
         * 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);
+            this.value = this.initialValue;
         };
     },
 
-    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) {
+        if(document.readyState == "complete") {
             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);