Fix AutoCloseBrackets and Indent across WebKit and others (Fixes #131, Fixes #138)

Author: WebCoder49

plugins/auto-close-brackets.js

@@ -21,12 +21,14 @@ codeInput.plugins.AutoCloseBrackets = class extends codeInput.Plugin {
     afterElementsAdded(codeInput) {
         codeInput.pluginData.autoCloseBrackets = { automatedKeypresses: false};
         codeInput.textareaElement.addEventListener('keydown', (event) => { this.checkBackspace(codeInput, event); });
-        codeInput.textareaElement.addEventListener('beforeinput', (event) => { this.checkBrackets(codeInput, event); });
+        codeInput.textareaElement.addEventListener('beforeinput', (event) => { this.checkClosingBracket(codeInput, event); });
+        codeInput.textareaElement.addEventListener('input', (event) => { this.checkOpeningBracket(codeInput, event); });
     }
 
-    /* Deal with the automatic creation of closing bracket when opening brackets are typed, and the ability to "retype" a closing
-    bracket where one has already been placed. */
-    checkBrackets(codeInput, event) {
+    /* Deal with the ability to "retype" a closing bracket where one has already
+    been placed. Runs before input so newly typing a closing bracket can be
+    prevented.*/
+    checkClosingBracket(codeInput, event) {
         if(codeInput.pluginData.autoCloseBrackets.automatedKeypresses) return;
         if(event.data == codeInput.textareaElement.value[codeInput.textareaElement.selectionStart]) {
             // Check if a closing bracket is typed
@@ -39,7 +41,13 @@ codeInput.plugins.AutoCloseBrackets = class extends codeInput.Plugin {
                     break;
                 }
             }
-        } else if(event.data in this.bracketPairs) {
+        }
+    }
+
+    /* Deal with the automatic creation of closing bracket when opening brackets are typed. Runs after input for consistency between browsers. */
+    checkOpeningBracket(codeInput, event) {
+        if(codeInput.pluginData.autoCloseBrackets.automatedKeypresses) return;
+        if(event.data in this.bracketPairs) {
             // Opening bracket typed; Create bracket pair
             let closingBracket = this.bracketPairs[event.data];
             // Insert the closing bracket

plugins/indent.js

@@ -275,6 +275,10 @@ codeInput.plugins.Indent = class extends codeInput.Plugin {
         }
 
         // insert our indents and any text from the previous line that might have been after the line break
+        // negative indents shouldn't exist and would only break future calculations.
+        if(numberIndents < 0) {
+            numberIndents = 0;
+        }
         for (let i = 0; i < numberIndents; i++) {
             newLine += this.indentation;
         }
@@ -339,7 +343,8 @@ codeInput.plugins.Indent = class extends codeInput.Plugin {
                 if(codeInput.value.substring(codeInput.textareaElement.selectionStart - this.indentationNumChars, codeInput.textareaElement.selectionStart) == this.indentation) {
                     // Indentation before cursor = delete it
                     codeInput.textareaElement.selectionStart -= this.indentationNumChars;
-                    document.execCommand("delete", false, "");
+                    // document.execCommand("delete", false, "");
+                    // event.preventDefault();
                 }
             }
         }

tests/tester.js

@@ -59,6 +59,7 @@ function testAddingText(group, textarea, action, correctOutput, correctLengthToS
 /* Assuming the textarea is focused, add the given text to it, emitting 'input' and 'beforeinput' keyboard events (and 'keydown'/'keyup' Enter on newlines, if enterEvents is true) which plugins can handle */
 function addText(textarea, text, enterEvents=false) {
     for(let i = 0; i < text.length; i++) {
+        const selectionStartBefore = textarea.selectionStart;
         if(enterEvents && text[i] == "\n") {
             textarea.dispatchEvent(new KeyboardEvent("keydown", { "key": "Enter" }));
             textarea.dispatchEvent(new KeyboardEvent("keyup", { "key": "Enter" }));
@@ -162,22 +163,27 @@ function startLoad(codeInputElem, isHLJS) {
 }
 
 /* Make input events work and be trusted in the inputElement - thanks for this SO answer: https://stackoverflow.com/a/49519772/21785620 */
-function allowInputEvents(inputElement) {
+function allowInputEvents(inputElement, codeInputElement=undefined) {
     inputElement.addEventListener('input', function(e){
         if(!e.isTrusted){
             e.preventDefault();
             // Manually trigger
+            // Prevent auto-close-brackets plugin recapturing the event
+            // Needed because this interception is hacky.
+            // TODO: Potentially plugin-agnostic way, probably automatedKeypresses var in core, won't be needed much but may be helpful extra feature.
+            if(codeInputElement !== undefined) codeInputElement.pluginData.autoCloseBrackets.automatedKeypresses = true;
             document.execCommand("insertText", false, e.data);
+            if(codeInputElement !== undefined) codeInputElement.pluginData.autoCloseBrackets.automatedKeypresses = false;
         }
     }, false);
 }
 
 /* Start the tests using the textarea inside the code-input element and whether highlight.js is being used (as the Autodetect plugin only works with highlight.js, for example) */
 async function startTests(textarea, isHLJS) {
     textarea.focus();
-    allowInputEvents(textarea);
 
     codeInputElement = textarea.parentElement;
+    allowInputEvents(textarea, codeInputElement);
 
     /*--- Tests for core functionality ---*/
 
@@ -438,7 +444,7 @@ console.log("I've got another line!", 2 &lt; 3, "should be true.");
     findInput.focus();
     allowInputEvents(findInput);
     addText(findInput, "hello");
-    await waitAsync(150); // Wait for highlighting so matches update
+    await waitAsync(200); // Wait for highlighting so matches update
 
     replaceInput.value = "hi";
     replaceAllButton.click();
@@ -590,4 +596,4 @@ console.log("I've got another line!", 2 &lt; 3, "should be true.");
         document.querySelector("h2").style.backgroundColor = "lightgreen";
         document.querySelector("h2").textContent = "All Tests have Passed.";
     }
-}
+}