Fix TODO comments and loading

Author: WebCoder49

code-input.d.ts

@@ -5,7 +5,13 @@ export as namespace codeInput;
  * provide custom extra functionality to code-input elements.
  */
 export abstract class Plugin {
-  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: Array<string>)
   /**
    * Runs before code is highlighted.
    * @param {codeInput.CodeInput} codeInput - The codeInput element

code-input.js

@@ -6,7 +6,6 @@
  * **<https://github.com/WebCoder49/code-input>**
  */
 
-// TODO: Stop annoying "glitch" with delaying until load?; Fix input evtListener
 
 var codeInput = {
     /**
@@ -30,7 +29,7 @@ var codeInput = {
      * code-input element.
      */
     textareaSyncAttributes: [
-        "aria-*", // TODO: Check this with PR comment
+        "aria-*",
         "value",
         "name",
         // Form validation - https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation
@@ -108,7 +107,7 @@ var codeInput = {
             for (let i in codeInput.templateNotYetRegisteredQueue[templateName]) {
                 elem = codeInput.templateNotYetRegisteredQueue[templateName][i];
                 elem.template = template;
-                codeInput.runOnceLoaded(() => { elem.setup(); }, elem); // So innerHTML can be read
+                codeInput.runOnceWindowLoaded(() => { elem.setup(); }, elem); // So innerHTML can be read
             }
             console.log(`code-input: template: Added existing elements with template ${templateName}`);
         }
@@ -119,7 +118,7 @@ var codeInput = {
                 for (let i in codeInput.templateNotYetRegisteredQueue[undefined]) {
                     elem = codeInput.templateNotYetRegisteredQueue[undefined][i];
                     elem.template = template;
-                    codeInput.runOnceLoaded(() => { elem.setup(); }, elem); // So innerHTML can be read
+                    codeInput.runOnceWindowLoaded(() => { elem.setup(); }, elem); // So innerHTML can be read
                 }
             }
             console.log(`code-input: template: Set template ${templateName} as default`);
@@ -344,17 +343,23 @@ var codeInput = {
      * 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.forEach((attribute) => {
+            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.regex.push(regexFromWildcard);
+                    codeInput.observedAttributes.regexp.push(regexFromWildcard);
                 }
             });
         }
@@ -387,11 +392,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 = []
     },
 
     /* ------------------------------------
@@ -468,8 +468,14 @@ 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) {
+            if(this.textareaElement == null) {
+                this.addEventListener("code-input_load", () => { this.update(value) }); // Only run when fully loaded
+                return;
+            }
+
             // 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. 
@@ -623,6 +629,8 @@ var codeInput = {
             this.pluginEvt("afterElementsAdded");
 
             this.update(value);
+
+            this.dispatchEvent(new CustomEvent("code-input_load"));
         }
 
         /**
@@ -661,7 +669,7 @@ var codeInput = {
             this.template = this.getTemplate();
             if (this.template != undefined) {
                 this.classList.add("code-input_registered");
-                codeInput.runOnceLoaded(() => { 
+                codeInput.runOnceWindowLoaded(() => { 
                     this.setup();
                     this.classList.add("code-input_loaded");
                 }, this);
@@ -678,6 +686,14 @@ var codeInput = {
                 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)) {
@@ -692,16 +708,8 @@ var codeInput = {
         }
 
         /**
-         * 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);
-        }
-
-        /**
-         * 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
@@ -798,9 +806,17 @@ var codeInput = {
 
             if (codeInput.textareaSyncEvents.includes(type)) {
                 if (options === undefined) {
-                    codeInput.runOnceLoaded(() => { this.textareaElement.addEventListener(type, boundCallback); }, this);
+                    if(this.textareaElement == null) {
+                        this.addEventListener("code-input_load", () => { this.textareaElement.addEventListener(type, boundCallback); });
+                    } else {
+                        this.textareaElement.addEventListener(type, boundCallback);
+                    }
                 } else {
-                    codeInput.runOnceLoaded(() => { this.textareaElement.addEventListener(type, boundCallback, options); }, this);
+                    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) {
@@ -847,6 +863,7 @@ var codeInput = {
             if (val === null || val === undefined) {
                 val = "";
             }
+            this._value = val;
             this.update(val);
             return val;
         }
@@ -978,7 +995,7 @@ var codeInput = {
      * To ensure the DOM is ready, run this callback after the window 
      * has loaded (or now if it has already loaded)
      */
-    runOnceLoaded(callback, codeInputElem) {
+    runOnceWindowLoaded(callback, codeInputElem) {
         if(codeInputElem.textareaElement != null) {
             callback(); // Fully loaded
         } else {

plugins/autocomplete.js

@@ -8,7 +8,7 @@ codeInput.plugins.Autocomplete = class extends codeInput.Plugin {
      * @param {function} updatePopupCallback  a function to display the popup that takes in (popup element, textarea, textarea.selectionEnd).
      */
     constructor(updatePopupCallback) {
-        super();
+        super([]); // No observed attributes
         this.updatePopupCallback = updatePopupCallback;
     }
     /* When a key is pressed, or scrolling occurs, update the autocomplete */
@@ -75,6 +75,5 @@ codeInput.plugins.Autocomplete = class extends codeInput.Plugin {
         }
         return {"top": afterSpan.offsetTop - textarea.scrollTop, "left": afterSpan.offsetLeft - textarea.scrollLeft};
     }
-    observedAttributes = [];
     updatePopupCallback = function() {};
 }

plugins/autodetect.js

@@ -5,7 +5,7 @@
  */
 codeInput.plugins.Autodetect = class extends codeInput.Plugin {
     constructor() {
-        super();
+        super([]); // No observed attributes
     }
     /* Remove previous language class */
     beforeHighlight(codeInput) {
@@ -25,5 +25,4 @@ codeInput.plugins.Autodetect = class extends codeInput.Plugin {
             codeInput.setAttribute("lang", lang);
         }
     }
-    observedAttributes = []
 }

plugins/debounce-update.js

@@ -9,7 +9,7 @@ codeInput.plugins.DebounceUpdate = class extends codeInput.Plugin {
      * @param {Number} delayMs Delay, in ms, to wait until updating the syntax highlighting 
      */
     constructor(delayMs) {
-        super();
+        super([]); // No observed attributes
         this.delayMs = delayMs;
     }
     /* Runs before elements are added into a `code-input`; Params: codeInput element) */

plugins/indent.js

@@ -5,7 +5,7 @@
  */
 codeInput.plugins.Indent = class extends codeInput.Plugin {
     constructor() {
-        super();
+        super([]); // No observed attributes
     }
 
     /* Add keystroke events */

plugins/special-chars.js

@@ -18,7 +18,7 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
      * @param {RegExp} specialCharRegExp The regular expression which matches special characters
      */
     constructor(colorInSpecialChars = false, inheritTextColor = false, specialCharRegExp = /(?!\n)(?!\t)[\u{0000}-\u{001F}]|[\u{007F}-\u{009F}]|[\u{0200}-\u{FFFF}]/ug) { // By default, covers many non-renderable ASCII characters
-        super();
+        super([]); // No observed attributes
 
         this.specialCharRegExp = specialCharRegExp;
         this.colorInSpecialChars = colorInSpecialChars;
@@ -152,7 +152,7 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
         }
     }
 
-    getCharacterWidth(codeInput, char) { // TODO: Check StackOverflow question
+    getCharacterWidth(codeInput, char) {
         // Force zero-width characters
         if(new RegExp("\u00AD|\u02de|[\u0300-\u036F]|[\u0483-\u0489]|\u200b").test(char) ) { return 0 }
         // Non-renderable ASCII characters should all be rendered at same size

plugins/test.js

@@ -10,7 +10,9 @@
  */
 codeInput.plugins.Test = class extends codeInput.Plugin {
     constructor() {
-        super();
+        super(["testattr", "test-*"]); 
+        // Array of observed attributes as parameter
+        // Wildcard "*" matches any text
     }
     /* Runs before code is highlighted; Params: codeInput element) */
     beforeHighlight(codeInput) {
@@ -28,11 +30,8 @@ codeInput.plugins.Test = class extends codeInput.Plugin {
     afterElementsAdded(codeInput) {
         console.log(codeInput, "after elements added");
     }
-    /* Runs when an attribute of a `code-input` is changed (you must add the attribute name to observedAttributes); Params: codeInput element, name attribute name, oldValue previous value of attribute, newValue changed value of attribute) */
+    /* Runs when an observed attribute of a `code-input` is changed (you must add the attribute name in the constructor); Params: codeInput element, name attribute name, oldValue previous value of attribute, newValue changed value of attribute) */
     attributeChanged(codeInput, name, oldValue, newValue) {
-        if(name == "testattr") {
-            console.log(codeInput, "testattr:", oldValue, ">", newValue);
-        }
+        console.log(codeInput, name, ":", oldValue, ">", newValue);
     }
-    observedAttributes = ["testattr"]
 }