Make events transferred to handlers that were trusted in the past still trusted; Allow textarea

events to sync to fallback textarea for graceful degradation

Author: WebCoder49

code-input.js

@@ -727,7 +727,7 @@ var codeInput = {
             // Save element internally
             this.textareaElement = textarea;
             this.append(textarea);
-            this.setupTextareaSyncEvents();
+            this.setupTextareaSyncEvents(this.textareaElement);
 
             // Create result element
             let code = document.createElement("code");
@@ -839,7 +839,24 @@ var codeInput = {
                 } else {
                     this.setup();
                 }
-            } 
+            }
+
+            // Graceful degradation: make events still work without template being
+            // registered
+            if (document.readyState === 'loading') {
+                // Children not yet present - wait until they are
+                window.addEventListener("DOMContentLoaded", () => {
+                    const fallbackTextarea = this.querySelector("textarea[data-code-input-fallback]");
+                    if(fallbackTextarea) {
+                        this.setupTextareaSyncEvents(fallbackTextarea);
+                    }
+                })
+            } else {
+                const fallbackTextarea = this.querySelector("textarea[data-code-input-fallback]");
+                if(fallbackTextarea) {
+                    this.setupTextareaSyncEvents(fallbackTextarea);
+                }
+            }
         }
 
         mutationObserverCallback(mutationList, observer) {
@@ -959,20 +976,116 @@ var codeInput = {
         // Event listener added to pass to code-input element
 
         /**
-         * Capture all events from textareaSyncEvents triggered on the textarea element
-         * and pass them to the code-input element.
+         * Capture all events from textareaSyncEvents triggered on the given textarea
+         * element and pass them to the code-input element.
          */
-        setupTextareaSyncEvents() {
+        setupTextareaSyncEvents(textarea) {
             for(let i = 0; i < codeInput.textareaSyncEvents.length; i++) {
                 const evtName = codeInput.textareaSyncEvents[i];
-                this.textareaElement.addEventListener(evtName, (evt) => {
+                textarea.addEventListener(evtName, (evt) => {
                     if(!evt.bubbles) { // Don't duplicate the callback
                         this.dispatchEvent(new evt.constructor(evt.type, evt)); // Thanks to
                     }
                 });
             }
         }
 
+        // addEventListener and removeEventListener overrides are still used
+        // for backwards compatibility - unlike the solution above, they keep
+        // the event's isTrusted as true.
+        /**
+         * @override
+         */
+        addEventListener(type, listener, options = undefined) {
+            // 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
+                this.boundEventCallbacks[listener] = boundCallback;
+
+                if (options === undefined) {
+                    if(this.textareaElement == null) {
+                        // Unregistered
+                        const fallbackTextarea = this.querySelector("textarea[data-code-input-fallback]");
+                        if(fallbackTextarea) {
+                            fallbackTextarea.addEventListener(type, boundCallback);
+                        }
+                        this.addEventListener("code-input_load", () => { this.textareaElement.addEventListener(type, boundCallback); });
+                    } else {
+                        this.textareaElement.addEventListener(type, boundCallback);
+                    }
+                } else {
+                    if(this.textareaElement == null) {
+                        // Unregistered
+                        const fallbackTextarea = this.querySelector("textarea[data-code-input-fallback]");
+                        if(fallbackTextarea) {
+                            fallbackTextarea.addEventListener(type, boundCallback, options);
+                        }
+                        this.addEventListener("code-input_load", () => { this.textareaElement.addEventListener(type, boundCallback, options); });
+                    } else {
+                        this.textareaElement.addEventListener(type, boundCallback, options);
+                    }
+                }
+            } else {
+                // Synchronise with code-input element
+                if (options === undefined) {
+                    super.addEventListener(type, boundCallback);
+                } else {
+                    super.addEventListener(type, boundCallback, options);
+                }
+            }
+        }
+
+        /**
+         * @override
+         */
+        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 (codeInput.textareaSyncEvents.includes(type)) {
+                // Synchronise with textarea
+                if (options === undefined) {
+                    if(this.textareaElement == null) {
+                        // Unregistered
+                        const fallbackTextarea = this.querySelector("textarea[data-code-input-fallback]");
+                        if(fallbackTextarea) {
+                            fallbackTextarea.removeEventListener(type, boundCallback);
+                        }
+                        this.addEventListener("code-input_load", () => { this.textareaElement.removeEventListener(type, boundCallback); });
+                    } else {
+                        this.textareaElement.removeEventListener(type, boundCallback);
+                    }
+                } else {
+                    if(this.textareaElement == null) {
+                        // Unregistered
+                        const fallbackTextarea = this.querySelector("textarea[data-code-input-fallback]");
+                        if(fallbackTextarea) {
+                            fallbackTextarea.removeEventListener(type, boundCallback, options);
+                        }
+                        this.addEventListener("code-input_load", () => { this.textareaElement.removeEventListener(type, boundCallback, options); });
+                    } else {
+                        this.textareaElement.removeEventListener(type, boundCallback, options);
+                    }
+                }
+            } else {
+                // Synchronise with code-input element
+                if (options === undefined) {
+                    super.removeEventListener(type, boundCallback);
+                } else {
+                    super.removeEventListener(type, boundCallback, options);
+                }
+            }
+        }
+
         /**
          * Get the JavaScript property from the internal textarea
          * element, given its name and a defaultValue to return