Remove blur/focus which was causing many bugs

README.md

@@ -64,12 +64,12 @@ The next step is to set up a `template` to link `code-input` to your syntax-high
 
 - *Highlight.js:*
   ```js
-  codeInput.registerTemplate("syntax-highlighted", codeInput.templates.hljs(hljs, [] /* Array of plugins (see below) */));
+  codeInput.registerTemplate("syntax-highlighted", new codeInput.templates.Hljs(hljs, [] /* Array of plugins (see below) */));
   ```
 
 - *Prism.js:*
   ```js
-  codeInput.registerTemplate("syntax-highlighted", codeInput.templates.prism(Prism, [] /* Array of plugins (see below) */));
+  codeInput.registerTemplate("syntax-highlighted", new codeInput.templates.Prism(Prism, [] /* Array of plugins (see below) */));
   ```
 
 - *Custom:*
@@ -106,7 +106,7 @@ The next step is to set up a `template` to link `code-input` to your syntax-high
 <!--...-->
 <script>
   codeInput.registerTemplate("syntax-highlighted", 
-    codeInput.templates.hljs(
+    new codeInput.templates.Hljs(
       hljs, 
       [
         new codeInput.plugins.Autodetect(), 

code-input.d.ts

@@ -345,17 +345,35 @@ export class Template {
  */
 export namespace 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.
-   * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
-   * @returns template object
+   * A template that uses Prism.js syntax highlighting (https://prismjs.com/).
+   */
+  class Prism extends Template {
+    /**
+    * 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
+    */
+    constructor(prism: Object, plugins?: Plugin[])
+  }
+  /**
+   * @deprecated Please use `new codeInput.templates.Prism(...)`
    */
   function prism(prism: Object, plugins?: Plugin[]): Template
   /**
-   * 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
+   * A template that uses highlight.js syntax highlighting (https://highlightjs.org/).
+   */
+  class Hljs extends Template {
+    /**
+    * 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
+    */
+    constructor(hljs: Object, plugins?: Plugin[])
+  }
+  /**
+   * @deprecated Please use `new codeInput.templates.Hljs(...)`
    */
   function hljs(hljs: Object, plugins?: Plugin[]): Template
   /**

code-input.js

@@ -222,38 +222,19 @@ var codeInput = {
      * For adding small pieces of functionality, please see `codeInput.plugins`.
      */
     templates: {
+        // (Source code for class templates after var codeInput = ... so they can extend the codeInput.Template class)
         /**
-         * 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 {codeInput.Template} template object
+         * @deprecated Please use `new codeInput.templates.Prism(...)`
          */
         prism(prism, plugins = []) { // Dependency: Prism.js (https://prismjs.com/)
-            return new codeInput.Template(
-                prism.highlightElement, // highlight
-                true, // preElementStyled
-                true, // isCode
-                false, // includeCodeInputInHighlightFunc
-                plugins
-            );
+            return new codeInput.templates.Prism(prism, 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 {codeInput.Template} template object
+         * @deprecated Please use `new codeInput.templates.Hljs(...)`
          */
         hljs(hljs, plugins = []) { // Dependency: Highlight.js (https://highlightjs.org/)
-            return new codeInput.Template(
-                function(codeElement) {
-                    codeElement.removeAttribute("data-highlighted");
-                    hljs.highlightElement(codeElement);
-                }, // highlight
-                false, // preElementStyled
-                true, // isCode
-                false, // includeCodeInputInHighlightFunc
-                plugins
-            );
+            return new codeInput.templates.Hljs(hljs, plugins);
         },
 
         /**
@@ -318,7 +299,7 @@ var codeInput = {
         },
 
         /**
-         * @deprecated Please use `new codeInput.Template()`
+         * @deprecated Please use `new codeInput.Template(...)`
          */
         custom(highlight = function () { }, preElementStyled = true, isCode = true, includeCodeInputInHighlightFunc = false, plugins = []) {
             return {
@@ -493,7 +474,6 @@ var codeInput = {
         * to syntax-highlight it. */
 
         needsHighlight = false; // Just inputted
-        handleEventsFromTextarea = true; // Turn to false when unusual internal events are called on the textarea
         originalAriaDescription;
 
         /**
@@ -534,14 +514,6 @@ var codeInput = {
 
             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");
         }
 
@@ -657,9 +629,7 @@ var codeInput = {
                 this.classList.add("code-input_mouse-focused");
             });
             textarea.addEventListener("blur", () => {
-                if(this.handleEventsFromTextarea) {
-                    this.classList.remove("code-input_mouse-focused");
-                }
+                this.classList.remove("code-input_mouse-focused");
             });
 
             this.innerHTML = ""; // Clear Content
@@ -885,22 +855,20 @@ var codeInput = {
             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;
+                // Synchronise with textarea
+                this.boundEventCallbacks[listener] = boundCallback;
 
                 if (options === undefined) {
                     if(this.textareaElement == null) {
                         this.addEventListener("code-input_load", () => { this.textareaElement.addEventListener(type, boundCallback); });
                     } else {
-                        this.textareaElement.addEventListener(type, conditionalBoundCallback);
+                        this.textareaElement.addEventListener(type, boundCallback);
                     }
                 } else {
                     if(this.textareaElement == null) {
                         this.addEventListener("code-input_load", () => { this.textareaElement.addEventListener(type, boundCallback, options); });
                     } else {
-                        this.textareaElement.addEventListener(type, conditionalBoundCallback, options);
+                        this.textareaElement.addEventListener(type, boundCallback, options);
                     }
                 }
             } else {
@@ -960,10 +928,12 @@ var codeInput = {
             if (val === null || val === undefined) {
                 val = "";
             }
+
             // Save in editable textarea element
             this.textareaElement.value = val;
             // Trigger highlight
             this.scheduleHighlight();
+
             return val;
         }
 
@@ -1058,4 +1028,59 @@ var codeInput = {
     }
 }
 
+{
+    // Templates are defined here after the codeInput variable is set, because they reference it by extending codeInput.Template.
+
+    // ESM-SUPPORT-START-TEMPLATE-prism Do not (re)move this - it's needed for ESM generation!
+    /**
+    * A template that uses Prism.js syntax highlighting (https://prismjs.com/).
+    */
+    class Prism extends codeInput.Template { // Dependency: Prism.js (https://prismjs.com/)
+        /**
+        * 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 {codeInput.Template} template object
+        */
+        constructor(prism, plugins = []) {
+            super(
+                prism.highlightElement, // highlight
+                true, // preElementStyled
+                true, // isCode
+                false, // includeCodeInputInHighlightFunc
+                plugins
+            );
+        }
+    };
+    // ESM-SUPPORT-END-TEMPLATE-prism Do not (re)move this - it's needed for ESM generation!
+    codeInput.templates.Prism = Prism;
+
+    // ESM-SUPPORT-START-TEMPLATE-hljs Do not (re)move this - it's needed for ESM generation!
+    /**
+     * A template that uses highlight.js syntax highlighting (https://highlightjs.org/).
+     */
+    class Hljs extends codeInput.Template { // Dependency: Highlight.js (https://highlightjs.org/)
+        /**
+         * 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 {codeInput.Template} template object
+         */
+        constructor(hljs, plugins = []) {
+            super(
+                function(codeElement) {
+                    codeElement.removeAttribute("data-highlighted");
+                    hljs.highlightElement(codeElement);
+                }, // highlight
+                false, // preElementStyled
+                true, // isCode
+                false, // includeCodeInputInHighlightFunc
+                plugins
+            );
+        }
+    };
+    // ESM-SUPPORT-END-TEMPLATE-hljs Do not (re)move this - it's needed for ESM generation!
+    codeInput.templates.Hljs = Hljs;
+}
+
 customElements.define("code-input", codeInput.CodeInput);

tests/tester.js

@@ -108,7 +108,7 @@ function waitAsync(milliseconds) {
 function beginTest(isHLJS) {
     let codeInputElem = document.querySelector("code-input");
     if(isHLJS) {
-        codeInput.registerTemplate("code-editor", codeInput.templates.hljs(hljs, [
+        codeInput.registerTemplate("code-editor", new codeInput.templates.Hljs(hljs, [
             new codeInput.plugins.AutoCloseBrackets(), 
             new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd) {
                 if(textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {
@@ -127,7 +127,7 @@ function beginTest(isHLJS) {
             new codeInput.plugins.SpecialChars(true),
         ]));
     } else {
-        codeInput.registerTemplate("code-editor", codeInput.templates.prism(Prism, [
+        codeInput.registerTemplate("code-editor", new codeInput.templates.Prism(Prism, [
             new codeInput.plugins.AutoCloseBrackets(), 
             new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd) {
                 if(textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {