Start working on event handling

Author: WebCoder49

README.md

@@ -105,9 +105,10 @@ Now that you have registered a template, you can use the custom `<code-input>` e
   ```
   *or*
   ```HTML
-  <code-input lang="HTML" placeholder="Type code here" value="<a href='https://github.com/WebCoder49/code-input'>code-input</a>" template="syntax-highlighted" onchange="console.log('Your code is', this.value)"></code-input>
+  <code-input lang="HTML" placeholder="Type code here" value="<a href='https://github.com/WebCoder49/code-input'>code-input</a>" template="syntax-highlighted" oninput="console.log('Your code is', this.value)"></code-input>
   ```
 </details>
+> ❕To use the event when text is changed in a `coed-input` element, use `oninput` rather than `onchange`.
 
 ## Contributing
 If you have any features you would like to add to `code-input`, or have found any bugs, please [open an issue](https://github.com/WebCoder49/code-input/issues) or [fork and submit a pull request](https://github.com/WebCoder49/code-input/fork)! All contributions to this open-source project would be greatly appreciated.

code-input.js

@@ -3,13 +3,34 @@
 // Based on a CSS-Tricks Post
 
 var codeInput = {
+    observedAttributes: [
+        "value", 
+        "placeholder", 
+        "lang", 
+        "template",
+        "onchange",
+        "onselectionchange"
+    ],
+    // Attributes to monitor - needs to be global and static
+    
+    last_events: {}, // Last events applied; removed when changed so can be added to textarea, etc.
+    /* Templates */
     usedTemplates: {
     },
     defaultTemplate: undefined,
     templateQueue: {}, // lists of elements for each unrecognised template
+    
+    /* Plugins */
     plugins: { // Import a plugin from the plugins folder and it will be saved here.
     },
     Plugin: class {
+        constructor() {
+            console.log("code-input: plugin: Created plugin!");
+            
+            // Add attributes
+            codeInput.observedAttributes = codeInput.observedAttributes.concat(self.observedAttributes);
+        }
+
         /* Runs before code is highlighted; Params: codeInput element) */
         beforeHighlight(codeInput) {}
         /* Runs after code is highlighted; Params: codeInput element) */
@@ -22,6 +43,8 @@ var codeInput = {
         attributeChanged(codeInput, name, oldValue, newValue) {}
         observedAttributes = []
     },
+    
+    /* Main */
     CodeInput: class extends HTMLElement { // Create code input element
         constructor() {
             super(); // Element
@@ -146,6 +169,18 @@ var codeInput = {
 
             this.plugin_evt("afterElementsAdded");
 
+            // Events
+            textarea = this.querySelector("textarea");
+            // Add event listeners, bound so `this` can be referenced
+            if(this.onchange) {
+                textarea.addEventListener("change", this.onchange.bind(this));
+                this.onchange = undefined; // Prevent duplicate
+            }
+            if(this.onselectionchange) {
+                textarea.addEventListener("selectionchange", this.onselectionchange.bind(this));
+                this.onselectionchange = undefined; // Prevent duplicate
+            }
+
             /* Add code from value attribute - useful for loading from backend */
             this.update(value, this);
         }
@@ -156,14 +191,8 @@ var codeInput = {
             this.template = this.get_template();
             if(this.template != undefined) this.setup();
         }
-        get observedAttributes() {
-            let attrs =  ["value", "placeholder", "lang", "template"]; // Attributes to monitor
-            
-            /* Add from plugins */
-            for (let plugin in this.template.plugins) {
-                attrs = attrs.concat(plugin.observedAttributes);
-            }
-            return attrs;
+        static get observedAttributes() {         
+            return codeInput.observedAttributes;
         }
 
         attributeChangedCallback(name, oldValue, newValue) {
@@ -188,33 +217,66 @@ var codeInput = {
                         else this.classList.remove("code-input_pre-element-styled");
                         // Syntax Highlight
                         this.update(this.value);
+
+                        break;
 
                     case "lang":
                         let code = this.querySelector("pre code");
-                        let textarea = this.querySelector("textarea");
+                        let main_textarea = this.querySelector("textarea");
 
                         // Case insensitive
                         oldValue = oldValue.toLowerCase();
                         newValue = newValue.toLowerCase();
 
                         // Remove old language class and add new
-                        console.log("REMOVE", "language-" + oldValue);
+                        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-none"); // Prism
                         code.parentElement.classList.remove("language-none"); // Prism
 
                         if(newValue != undefined && newValue != "") {
                             code.classList.add("language-" + newValue);
-                            console.log("ADD", "language-" + newValue);
+                            console.log("code-input: Language:ADD", "language-" + newValue);
                         }
 
-                        if(textarea.placeholder == oldValue) textarea.placeholder = newValue;
+                        if(main_textarea.placeholder == oldValue) main_textarea.placeholder = newValue;
 
                         this.update(this.value);
-                    
-                    default:
-                        this.plugin_evt("attributeChanged", [name, oldValue, newValue]); // Plugin event
+
+                        break;
+
+                    // Events
+                    case "onchange":
+                        {
+                            // Doesn't exist
+                            let textarea = this.querySelector("textarea")
+                            if(oldValue) {
+                                textarea.removeEventListener("change", this.last_events["change"]);
+                            }
+                            if(newValue) {
+                                this.last_events["change"] = newValue.bind(this);
+                                textarea.addEventListener("change", this.last_events["change"]);
+                                this.onchange = undefined; // Prevent duplicate
+                            }
+                        }
+                        break;
+                    case "onselectionchange":
+                        {
+                            // Doesn't exist
+                            let textarea = this.querySelector("textarea")
+                            if(oldValue) {
+                                textarea.removeEventListener("selectionchange", this.last_events["selectionchange"]);
+                            }
+                            if(newValue) {
+                                this.last_events["selectionchange"] = newValue.bind(this);
+                                textarea.addEventListener("selectionchange", this.last_events["selectionchange"]);
+                                this.onselectionchange = undefined; // Prevent duplicate
+                            }
+                        }
+                        break;
+
+                    this.plugin_evt("attributeChanged", [name, oldValue, newValue]); // Plugin event
                 }
             }
 
@@ -235,6 +297,7 @@ var codeInput = {
             return this.setAttribute("placeholder", val);
         }
     },
+    
     registerTemplate: function(template_name, template) {
         // Set default class
         codeInput.usedTemplates[template_name] = template;
@@ -245,6 +308,7 @@ var codeInput = {
                 elem.template = template;
                 elem.setup();
             }
+            console.log(`code-input: template: Added existing elements with template ${template_name}`);
         }
         if(codeInput.defaultTemplate == undefined) {
             codeInput.defaultTemplate = template_name;
@@ -256,7 +320,9 @@ var codeInput = {
                     elem.setup();
                 }
             }
+            console.log(`code-input: template: Set template ${template_name} as default`);
         }
+        console.log(`code-input: template: Created template ${template_name}`);
     },
     templates: {
         custom(highlight=function() {}, preElementStyled=true, isCode=true, includeCodeInputInHighlightFunc=false, plugins=[]) {

plugins/autodetect.js

@@ -3,6 +3,9 @@
  * autodetect capabilities. Works with highlight.js.
  */
 codeInput.plugins.Autodetect = class extends codeInput.Plugin {
+    constructor() {
+        super();
+    }
     /* Remove previous language class */
     beforeHighlight(codeInput) {
         let result_element = codeInput.querySelector("pre code");