Started speeding up updates using requestAnimationFrame; Ctrl+F fix still iffy

Author: WebCoder49

code-input.css

@@ -9,8 +9,7 @@ code-input {
   top: 0;
   left: 0;
   display: block;
-  /* Only scroll inside elems */
-  overflow: hidden;
+  overflow: auto;
 
   /* Normal inline styles */
   margin: 8px;
@@ -24,22 +23,33 @@ code-input {
   caret-color: darkgrey;
   white-space: pre;
   padding: 0!important; /* Use --padding */
+
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: auto;
 }
 
-code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, code-input.code-input_pre-element-styled pre {
-  /* Both elements need the same text and space styling so they are directly on top of each other */
+
+code-input:not(.code-input_loaded) {
   margin: 0px!important;
+  margin-bottom: calc(-1 * var(--padding, 16px))!important;
   padding: var(--padding, 16px)!important;
   border: 0;
-  width: calc(100% - var(--padding, 16px) * 2);
-  height: calc(100% - var(--padding, 16px) * 2);
 }
 
-code-input:not(.code-input_loaded) {
+code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, code-input.code-input_pre-element-styled pre {
+  /* Both elements need the same text and space styling so they are directly on top of each other */
   margin: 0px!important;
-  margin-bottom: calc(-1 * var(--padding, 16px))!important;
   padding: var(--padding, 16px)!important;
   border: 0;
+  width: calc(100% - var(--padding, 16px) * 2);
+  min-height: calc(100% - var(--padding, 16px) * 2);
+  
+  overflow: hidden;
+  resize: none;
+
+  grid-row: 1 2;
+  grid-column: 1 2;
 }
 
 code-input:not(.code-input_pre-element-styled) pre, code-input.code-input_pre-element-styled pre code {
@@ -96,8 +106,6 @@ code-input textarea::placeholder {
 
 /* Can be scrolled */
 code-input textarea, code-input pre {
-  overflow: auto!important;
-
   white-space: inherit;
   word-spacing: normal;
   word-break: normal;

code-input.js

@@ -513,30 +513,49 @@ 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
+        needsDisableDuplicateSearching = false; // Just highlighted
+
+        /**
+         * Highlight the code ASAP
          */
-        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;
+        }
+
+        /**
+         * Call an animation frame
+         */
+        animateFrame() {
+            // Sync size
+            this.textareaElement.style.height = getComputedStyle(this.preElement).height;
+            this.textareaElement.style.width = getComputedStyle(this.preElement).width;
+
+            // Sync content
+            if(this.needsHighlight) {
+                console.log("Update");
+                this.update();
+                this.needsHighlight = false;
+                this.needsDisableDuplicateSearching = true;
+            }
+            if(this.needsDisableDuplicateSearching && this.codeElement.querySelector("*") != null) {
+                // Has been highlighted
+                this.resultElementDisableSearching();
+                this.needsDisableDuplicateSearching = false;
             }
 
-            this.ignoreValueUpdate = true;
-            this.value = value;
-            this.ignoreValueUpdate = false;
-            if (this.textareaElement.value != value) this.textareaElement.value = value;
+            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;
+            let value = this.value;
 
             // Handle final newlines
-            if (value[value.length - 1] == "\n") {
+            if (value[value.length - 1] == "\n" || value.length == 0) {
                 value += " ";
             }
 
@@ -549,37 +568,6 @@ var codeInput = {
             else this.template.highlight(resultElement);
 
             this.pluginEvt("afterHighlight");
-
-            if(this.template.autoDisableDuplicateSearching) {
-                if(this.codeElement.querySelector("*") === null) {
-                    // Fix for tries-to-disable-searching-before-highlighting-possible bug:
-                    // Wait until user interaction so can expect
-                    // highlight before disabling searching
-                    let listenerKeydown = window.addEventListener("keydown", () => {
-                        this.resultElementDisableSearching();
-                        window.removeEventListener("keydown", listenerKeydown);
-                        window.removeEventListener("mousemove", listenerMousemove);
-                    });
-                    let listenerMousemove = window.addEventListener("mousemove", () => {
-                        this.resultElementDisableSearching();
-                        window.removeEventListener("keydown", listenerKeydown);
-                        window.removeEventListener("mousemove", listenerMousemove);
-                    });
-                } else {
-                    this.resultElementDisableSearching();
-                }
-            }
-        }
-
-        /**
-         * Synchronise the scrolling of the textarea to the result element.
-         */
-        syncScroll() {
-            let inputElement = this.textareaElement;
-            let resultElement = this.template.preElementStyled ? this.preElement : this.codeElement;
-
-            resultElement.scrollTop = inputElement.scrollTop;
-            resultElement.scrollLeft = inputElement.scrollLeft;
         }
 
         /**
@@ -694,8 +682,7 @@ var codeInput = {
                 }
             });
 
-            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;
@@ -720,16 +707,10 @@ var codeInput = {
 
             this.pluginEvt("afterElementsAdded");
 
-            this.update(value);
-
             this.dispatchEvent(new CustomEvent("code-input_load"));
-        }
 
-        /**
-         * @deprecated Please use `codeInput.CodeInput.syncScroll`
-         */
-        sync_scroll() {
-            this.syncScroll();
+            this.value = value;
+            this.animateFrame();
         }
 
         /**
@@ -822,7 +803,7 @@ var codeInput = {
                         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.needsHighlight = true;
 
                         break;
 
@@ -854,7 +835,7 @@ var codeInput = {
 
                         if (mainTextarea.placeholder == oldValue) mainTextarea.placeholder = newValue;
 
-                        this.update(this.value);
+                        this.needsHighlight = true;
 
                         break;
                     default:
@@ -954,7 +935,7 @@ var codeInput = {
                 val = "";
             }
             this._value = val;
-            this.update(val);
+            this.needsHighlight = true;
             return val;
         }
 
@@ -1032,7 +1013,7 @@ var codeInput = {
         * Update value on form reset
         */
         formResetCallback() {
-            this.update(this.initialValue);
+            this.value = this.initialValue;
         };
     },
 

plugins/debounce-update.js

@@ -29,7 +29,7 @@ codeInput.plugins.DebounceUpdate = class extends codeInput.Plugin {
 
         this.debounceTimeout = window.setTimeout(() => {
             // Closure arrow function can take in variables like `text`
-            this.update(text);
+            codeInput.value = text;
         }, this.delayMs);
     }
 

plugins/indent.js

@@ -97,7 +97,7 @@ codeInput.plugins.Indent = class extends codeInput.Plugin {
             inputElement.selectionEnd = selectionEndI;
         }
 
-        codeInput.update(inputElement.value);
+        codeInput.value = inputElement.value;
     }
 
     checkEnter(codeInput, event) {
@@ -196,10 +196,10 @@ codeInput.plugins.Indent = class extends codeInput.Plugin {
         let lineHeight = Number(getComputedStyle(inputElement).lineHeight.replace("px", "")); 
         let inputHeight = Number(getComputedStyle(inputElement).height.replace("px", ""));
         if(currentLineI*lineHeight + lineHeight*2 + paddingTop >= inputElement.scrollTop + inputHeight) { // Cursor too far down
-            inputElement.scrollBy(0, Number(getComputedStyle(inputElement).lineHeight.replace("px", "")))
+            codeInput.scrollBy(0, Number(getComputedStyle(inputElement).lineHeight.replace("px", "")));
         }
 
-        codeInput.update(inputElement.value);
+        codeInput.value = inputElement.value;
     }
 
     checkBackspace(codeInput, event) {

plugins/special-chars.js

@@ -39,7 +39,7 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
     /* Runs after elements are added into a `code-input` (useful for adding events to the textarea); Params: codeInput element) */
     afterElementsAdded(codeInput) {
         // For some reason, special chars aren't synced the first time - TODO is there a cleaner way to do this?
-        setTimeout(() => { codeInput.update(codeInput.value); }, 100);
+        setTimeout(() => { codeInput.value = codeInput.value + ""; }, 100);
     }
 
     /* Runs after code is highlighted; Params: codeInput element) */