@webcoder49/code-input 2.5.1 → 2.6.2

package/esm/plugins/go-to-line.d.mts

@@ -0,0 +1,29 @@
+// NOTICE: This code is @generated from code outside the esm directory. Please do not edit it to contribute!
+
+import { Plugin, CodeInput } from "../code-input.d.mts";
+  /**
+   * Add basic Go-To-Line (ctrl-G by default) functionality to the code editor.
+   * Files: go-to-line.js / go-to-line.css
+   */
+  export default class GoToLine extends Plugin {
+    /**
+     * Create a go-to-line command plugin to pass into a template
+     * @param {boolean} useCtrlG Should Ctrl+G be overriden for go-to-line functionality? Either way, you can trigger it yourself using (instance of this plugin)`.showPrompt(code-input element)`.
+     * @param {Object} instructionTranslations: user interface string keys mapped to translated versions for localisation. Look at the go-to-line.js source code for the English text.
+     */
+    constructor(useCtrlG?: boolean,
+                instructionTranslations?: {
+                  closeDialog?: string;
+                  input?: string;
+                  guidanceFormat?: string;
+                  guidanceLineRange?: (current:Number, max: Number) => string;
+                  guidanceColumnRange?: (line: Number, current: Number, max: Number) => string;
+                  guidanceValidLine?: (line: Number) => string;
+                  guidanceValidColumn?: (line: Number, column: Number) => string;
+                });
+    /**
+     * Show a search-like dialog prompting line number.
+     * @param {CodeInput} codeInput the `<code-input>` element.
+    */
+    showPrompt(codeInput: CodeInput): void;
+  }

package/esm/plugins/go-to-line.mjs

@@ -0,0 +1,217 @@
+// NOTICE: This code is @generated from code outside the esm directory. Please do not edit it to contribute!
+
+import { Plugin } from "../code-input.mjs";
+const plugins = {};
+/**
+ * Add basic Go-To-Line (Ctrl+G by default) functionality to the code editor.
+ * Files: go-to-line.js / go-to-line.css
+ */
+"use strict";
+
+plugins.GoToLine = class extends Plugin {
+    useCtrlG = false;
+
+    instructions = {
+        closeDialog: "Close Dialog and Return to Editor",
+        input: "Line:Column / Line no. then Enter",
+        guidanceFormat: "Wrong format. Enter a line number (e.g. 1) or a line number then colon then column number (e.g. 1:3).",
+        guidanceLineRange: (current, max) => `Line number (currently ${current}) should be between 1 and ${max} inclusive.`,
+        guidanceColumnRange: (line, current, max) => `On line ${line}, column number (currently ${current}) should be between 1 and ${max} inclusive.`,
+        guidanceValidLine: (line) => `Press Enter to go to line ${line}.`,
+        guidanceValidColumn: (line, column) => `Press Enter to go to line ${line}, column ${column}.`,
+    };
+
+    /**
+     * Create a go-to-line command plugin to pass into a template
+     * @param {boolean} useCtrlG Should Ctrl+G be overriden for go-to-line functionality? Either way, you can trigger it yourself using (instance of this plugin)`.showPrompt(code-input element)`.
+     * @param {Object} instructionTranslations: user interface string keys mapped to translated versions for localisation. Look at the go-to-line.js source code for the available keys and English text.
+     */
+    constructor(useCtrlG = true, instructionTranslations = {}) {
+        super([]); // No observed attributes
+        this.useCtrlG = useCtrlG;
+        this.addTranslations(this.instructions, instructionTranslations);
+    }
+
+    /* Add keystroke events */
+    afterElementsAdded(codeInput) {
+        const textarea = codeInput.textareaElement;
+        if(this.useCtrlG) {
+            textarea.addEventListener('keydown', (event) => { this.checkCtrlG(codeInput, event); });
+        }
+    }
+
+    /* Called with a dialog box keyup event to check the validity of the line number entered and submit the dialog if Enter is pressed */
+    checkPrompt(dialog, event) {
+        if (event.key == 'Escape') return this.cancelPrompt(dialog, event);
+
+        // Line number(:column number)
+        const lines = dialog.textarea.value.split('\n');
+        const maxLineNo = lines.length;
+        const lineNo = Number(dialog.input.value.split(':')[0]);
+        let columnNo = 0; // Means go to start of indented line
+        let maxColumnNo = 1;
+        const querySplitByColons = dialog.input.value.split(':');
+
+        // Invalid format
+        if(querySplitByColons.length > 2 || !/^[0-9:]*$/.test(dialog.input.value)) {
+            dialog.guidance.textContent = this.instructions.guidanceFormat;
+            return dialog.input.classList.add('code-input_go-to-line_error');
+        }
+
+        // Number(s) present
+        if (dialog.input.value) {
+            if (lineNo < 1 || lineNo > maxLineNo) {
+                // Out-of-range line number
+                dialog.guidance.textContent = this.instructions.guidanceLineRange(lineNo, maxLineNo);
+                return dialog.input.classList.add('code-input_go-to-line_error');
+            } else {
+                // Check if line:column - if so calculate column number
+                if(querySplitByColons.length >= 2) {
+                    columnNo = Number(querySplitByColons[1]);
+                    maxColumnNo = lines[lineNo-1].length+1; // column 1 always works since at start of line
+                }
+                if(columnNo < 0 || columnNo > maxColumnNo) {
+                    dialog.guidance.textContent = this.instructions.guidanceColumnRange(lineNo, columnNo, maxColumnNo);
+                    return dialog.input.classList.add('code-input_go-to-line_error');
+                } else {
+                    if(columnNo === 0) {
+                        // No column specified, or 0 which for backwards compatibility acts
+                        // like none selected
+                        dialog.guidance.textContent = this.instructions.guidanceValidLine(lineNo);
+                    } else {
+                        dialog.guidance.textContent = this.instructions.guidanceValidColumn(lineNo, columnNo);
+                    }
+                    dialog.input.classList.remove('code-input_go-to-line_error');
+                }
+            }
+        } else {
+            // No value
+            dialog.guidance.textContent = "";
+        }
+
+        if (event.key == 'Enter') {
+            this.goTo(dialog.textarea, lineNo, columnNo);
+            this.cancelPrompt(dialog, event);
+        }
+    }
+
+    /* Called with a dialog box keyup event to close and clear the dialog box */    
+    cancelPrompt(dialog, event) {
+        event.preventDefault();
+        dialog.codeInput.handleEventsFromTextarea = false;
+        dialog.textarea.focus();
+        dialog.codeInput.handleEventsFromTextarea = true;
+        dialog.setAttribute("inert", true); // Hide from keyboard navigation when closed.
+        dialog.setAttribute("tabindex", -1); // Hide from keyboard navigation when closed.
+        dialog.setAttribute("aria-hidden", true); // Hide from screen reader when closed.
+
+        // Remove dialog after animation
+        dialog.classList.add('code-input_go-to-line_hidden-dialog');
+        dialog.input.value = "";
+    }
+
+    /**
+     * Show a search-like dialog prompting line number.
+     * @param {codeInput.CodeInput} codeInput the `<code-input>` element.
+    */
+    showPrompt(codeInput) {
+        if(codeInput.pluginData.goToLine == undefined || codeInput.pluginData.goToLine.dialog == undefined) {
+            const textarea = codeInput.textareaElement;
+
+            const dialog = document.createElement('div');
+
+            const input = document.createElement('input');
+
+            // TODO: Make a button element (semantic HTML for accessibility) in next major version
+            const cancel = document.createElement('span');
+            cancel.setAttribute("role", "button");
+            cancel.setAttribute("aria-label", this.instructions.closeDialog);
+            cancel.setAttribute("tabindex", 0); // Visible to keyboard navigation
+            cancel.setAttribute("title", this.instructions.closeDialog);
+
+            const guidance = document.createElement('p');
+            guidance.setAttribute("aria-live", "assertive"); // Screen reader must read the status message.
+            guidance.textContent = "";
+
+            dialog.appendChild(input);
+            dialog.appendChild(cancel);
+            dialog.appendChild(guidance);
+
+            dialog.className = 'code-input_go-to-line_dialog';
+            input.spellcheck = false;
+            input.placeholder = this.instructions.input;
+            dialog.codeInput = codeInput;
+            dialog.textarea = textarea;
+            dialog.input = input;
+            dialog.guidance = guidance;
+
+            input.addEventListener('keypress', (event) => {
+                /* Stop enter from submitting form */
+                if (event.key == 'Enter') event.preventDefault();
+            });
+            
+            input.addEventListener('keyup', (event) => { return this.checkPrompt(dialog, event); });
+            cancel.addEventListener('click', (event) => { this.cancelPrompt(dialog, event); });
+            cancel.addEventListener('keypress', (event) => { if (event.key == "Space" || event.key == "Enter") this.cancelPrompt(dialog, event); });
+
+            codeInput.dialogContainerElement.appendChild(dialog);
+            codeInput.pluginData.goToLine = {dialog: dialog};
+            input.focus();
+        } else {
+            codeInput.pluginData.goToLine.dialog.classList.remove("code-input_go-to-line_hidden-dialog");
+            codeInput.pluginData.goToLine.dialog.removeAttribute("inert"); // Show to keyboard navigation when open.
+            codeInput.pluginData.goToLine.dialog.setAttribute("tabindex", 0); // Show to keyboard navigation when open.
+            codeInput.pluginData.goToLine.dialog.removeAttribute("aria-hidden"); // Show to screen reader when open.
+            codeInput.pluginData.goToLine.dialog.input.focus();
+        }
+    }
+
+    /* Set the cursor on the first non-space char of textarea's nth line, or to the columnNo-numbered character in the line if it's not 0; and scroll it into view */
+    goTo(textarea, lineNo, columnNo = 0) {
+        let fontSize;
+        let lineHeight;
+        let scrollAmount;
+        let topPadding;
+        let cursorPos = -1;
+        let lines = textarea.value.split('\n');
+
+        if (lineNo > 0 && lineNo <= lines.length) {
+            if (textarea.computedStyleMap) {
+                fontSize = textarea.computedStyleMap().get('font-size').value;
+                lineHeight = fontSize * textarea.computedStyleMap().get('line-height').value;
+            } else {
+                fontSize = document.defaultView.getComputedStyle(textarea, null).getPropertyValue('font-size').split('px')[0];
+                lineHeight = document.defaultView.getComputedStyle(textarea, null).getPropertyValue('line-height').split('px')[0];
+            }
+
+            // scroll amount and initial top padding (3 lines above, if possible)
+            scrollAmount = (lineNo > 3 ? lineNo - 3 : 1) * lineHeight;
+            topPadding = (lineHeight - fontSize) / 2;
+
+            if (lineNo > 1) {
+                // cursor positon just after n - 1 full lines
+                cursorPos = lines.slice(0, lineNo - 1).join('\n').length;
+            }
+
+            // scan first non-space char in nth line
+            if (columnNo == 0) {
+                do cursorPos++; while (textarea.value[cursorPos] != '\n' && /\s/.test(textarea.value[cursorPos]));
+            } else {
+                cursorPos += 1 + columnNo - 1;
+            }
+
+            textarea.scrollTop = scrollAmount - topPadding;
+            textarea.setSelectionRange(cursorPos, cursorPos);
+            textarea.click();
+        }
+    }
+
+    /* Event handler for keydown event that makes Ctrl+G open go to line dialog */
+    checkCtrlG(codeInput, event) {
+        if (event.ctrlKey && event.key == 'g') {
+            event.preventDefault();
+            this.showPrompt(codeInput);
+        }
+    }
+}
+export default plugins.GoToLine;

package/esm/plugins/indent.d.mts

@@ -0,0 +1,22 @@
+// NOTICE: This code is @generated from code outside the esm directory. Please do not edit it to contribute!
+
+import { Plugin, CodeInput } from "../code-input.d.mts";
+  /**
+   * Adds indentation using the `Tab` key, and auto-indents after a newline, as well as making it 
+   * possible to indent/unindent multiple lines using Tab/Shift+Tab
+   * Files: indent.js
+   */
+  export default class Indent extends Plugin {
+    /**
+     * Create an indentation plugin to pass into a template
+     * @param {boolean} defaultSpaces Should the Tab key enter spaces rather than tabs? Defaults to false.
+     * @param {Number} numSpaces How many spaces is each tab character worth? Defaults to 4.
+     * @param {Object} bracketPairs Opening brackets mapped to closing brackets, default and example {"(": ")", "[": "]", "{": "}"}. All brackets must only be one character, and this can be left as null to remove bracket-based indentation behaviour.
+     * @param {boolean} escTabToChangeFocus Whether pressing the Escape key before (Shift+)Tab should make this keypress focus on a different element (Tab's default behaviour). You should always either enable this or use this plugin's disableTabIndentation and enableTabIndentation methods linked to other keyboard shortcuts, for accessibility.
+     * @param {Object} instructionTranslations: user interface string keys mapped to translated versions for localisation. Look at the go-to-line.js source code for the English text.
+     */
+    constructor(defaultSpaces?: boolean, numSpaces?: Number, bracketPairs?: Object, escTabToChangeFocus?: boolean, instructionTwranslations?: {
+      tabForIndentation?: string;
+      tabForNavigation?: string;
+    });
+  }

package/esm/plugins/indent.mjs

@@ -0,0 +1,359 @@
+// NOTICE: This code is @generated from code outside the esm directory. Please do not edit it to contribute!
+
+import { Plugin } from "../code-input.mjs";
+const plugins = {};
+/**
+ * Add indentation using the `Tab` key, and auto-indents after a newline, as well as making it 
+ * possible to indent/unindent multiple lines using Tab/Shift+Tab
+ * Files: indent.js
+ */
+"use strict";
+
+plugins.Indent = class extends Plugin {
+
+    bracketPairs = {}; // No bracket-auto-indentation used when {}
+    indentation = "\t";
+    indentationNumChars = 1;
+    tabIndentationEnabled = true; // Can be disabled for accessibility reasons to allow keyboard navigation
+    escTabToChangeFocus = true;
+    escJustPressed = false; // Becomes true when Escape key is pressed and false when another key is pressed
+
+    instructions = {
+        tabForIndentation: "Tab and Shift-Tab currently for indentation. Press Esc to enable keyboard navigation.",
+        tabForNavigation: "Tab and Shift-Tab currently for keyboard navigation. Type to return to indentation.",
+    };
+
+    /**
+     * Create an indentation plugin to pass into a template
+     * @param {boolean} defaultSpaces Should the Tab key enter spaces rather than tabs? Defaults to false.
+     * @param {Number} numSpaces How many spaces is each tab character worth? Defaults to 4.
+     * @param {Object} bracketPairs Opening brackets mapped to closing brackets, default and example {"(": ")", "[": "]", "{": "}"}. All brackets must only be one character, and this can be left as null to remove bracket-based indentation behaviour.
+     * @param {boolean} escTabToChangeFocus Whether pressing the Escape key before Tab and Shift-Tab should make this keypress focus on a different element (Tab's default behaviour). You should always either enable this or use this plugin's disableTabIndentation and enableTabIndentation methods linked to other keyboard shortcuts, for accessibility.
+     * @param {Object} instructionTranslations: user interface string keys mapped to translated versions for localisation. Look at the go-to-line.js source code for the available keys and English text.
+     */
+    constructor(defaultSpaces=false, numSpaces=4, bracketPairs={"(": ")", "[": "]", "{": "}"}, escTabToChangeFocus=true, instructionTranslations = {}) {
+        super([]); // No observed attributes
+
+        this.bracketPairs = bracketPairs;
+        if(defaultSpaces) {
+            this.indentation = "";
+            for(let i = 0; i < numSpaces; i++) {
+                this.indentation += " ";
+            }
+            this.indentationNumChars = numSpaces;
+        }
+
+        this.escTabToChangeFocus = true;
+
+        this.addTranslations(this.instructions, instructionTranslations);
+    }
+
+    /**
+     * Make the Tab key 
+     */
+    disableTabIndentation() {
+        this.tabIndentationEnabled = false;
+    }
+
+    enableTabIndentation() {
+        this.tabIndentationEnabled = true;
+    }
+
+    /* Add keystroke events, and get the width of the indentation in pixels. */
+    afterElementsAdded(codeInput) {
+
+        let textarea = codeInput.textareaElement;
+        textarea.addEventListener('focus', (event) => { if(this.escTabToChangeFocus) codeInput.setKeyboardNavInstructions(this.instructions.tabForIndentation, true); })
+        textarea.addEventListener('keydown', (event) => { this.checkTab(codeInput, event); this.checkEnter(codeInput, event); this.checkBackspace(codeInput, event); });
+        textarea.addEventListener('beforeinput', (event) => { this.checkCloseBracket(codeInput, event); });
+
+        // Get the width of the indentation in pixels
+        let testIndentationWidthPre = document.createElement("pre");
+        testIndentationWidthPre.setAttribute("aria-hidden", "true"); // Hide for screen readers
+        let testIndentationWidthSpan = document.createElement("span");
+        if(codeInput.templateObject.preElementStyled) {
+            testIndentationWidthPre.appendChild(testIndentationWidthSpan);
+            testIndentationWidthPre.classList.add("code-input_autocomplete_test-indentation-width");
+            codeInput.appendChild(testIndentationWidthPre); // Styled like first pre, but first pre found to update
+        } else {
+            let testIndentationWidthCode = document.createElement("code");
+            testIndentationWidthCode.appendChild(testIndentationWidthSpan);
+            testIndentationWidthCode.classList.add("code-input_autocomplete_test-indentation-width");
+            testIndentationWidthPre.appendChild(testIndentationWidthCode);
+            codeInput.appendChild(testIndentationWidthPre); // Styled like first pre, but first pre found to update
+        }
+
+        testIndentationWidthSpan.innerHTML = codeInput.escapeHtml(this.indentation);
+        let indentationWidthPx = testIndentationWidthSpan.offsetWidth;
+        codeInput.removeChild(testIndentationWidthPre);
+
+        codeInput.pluginData.indent = {automatedKeypresses: false, indentationWidthPx: indentationWidthPx};
+    }
+
+    /* Deal with the Tab key causing indentation, and Tab+Selection indenting / Shift+Tab+Selection unindenting lines, and the mechanism through which Tab can be used to switch focus instead (accessibility). */
+    checkTab(codeInput, event) {
+        if(codeInput.pluginData.indent.automatedKeypresses) return;
+        if(!this.tabIndentationEnabled) return;
+        if(this.escTabToChangeFocus) {
+            // Accessibility - allow Tab for keyboard navigation when Esc pressed right before it.
+            if(event.key == "Escape") {
+                this.escJustPressed = true;
+                codeInput.setKeyboardNavInstructions(this.instructions.tabForNavigation, false);
+                return;
+            } else if(event.key != "Tab") {
+                if(event.key == "Shift") {
+                    return; // Shift+Tab after Esc should still be keyboard navigation
+                }
+                codeInput.setKeyboardNavInstructions(this.instructions.tabForIndentation, false);
+                this.escJustPressed = false;
+                return;
+            }
+
+            if(!this.enableTabIndentation || this.escJustPressed) {
+                codeInput.setKeyboardNavInstructions("", false);
+                this.escJustPressed = false;
+                return;
+            }
+        } else if(event.key != "Tab") {
+            return;
+        }
+
+        let inputElement = codeInput.textareaElement;
+        event.preventDefault(); // stop normal
+        
+        if(!event.shiftKey && inputElement.selectionStart == inputElement.selectionEnd) {
+            // Just place a tab/spaces here.
+            // automatedKeypresses property to prevent keypresses being captured
+            // by this plugin during automated input as some browsers
+            // (e.g. GNOME Web) do.
+            codeInput.pluginData.indent.automatedKeypresses = true;
+            document.execCommand("insertText", false, this.indentation);
+            codeInput.pluginData.indent.automatedKeypresses = false;
+
+        } else {
+            let lines = inputElement.value.split("\n");
+            let letterI = 0;
+
+            let selectionStartI = inputElement.selectionStart; // where cursor moves after tab - moving forward by 1 indent
+            let selectionEndI = inputElement.selectionEnd; // where cursor moves after tab - moving forward by 1 indent
+
+            for (let i = 0; i < lines.length; i++) {
+                if((selectionStartI <= letterI+lines[i].length && selectionEndI >= letterI + 1)
+                || (selectionStartI == selectionEndI && selectionStartI <= letterI+lines[i].length+1 && selectionEndI >= letterI)) { // + 1 so newlines counted
+                    // Starts before or at last char and ends after or at first char
+                    if(event.shiftKey) {
+                        if(lines[i].substring(0, this.indentationNumChars) == this.indentation) {
+                            // Remove first indent
+                            inputElement.selectionStart = letterI;
+                            inputElement.selectionEnd = letterI+this.indentationNumChars;
+                            document.execCommand("delete", false, "");
+
+                            // Change selection
+                            if(selectionStartI > letterI) { // Indented outside selection
+                                selectionStartI = Math.max(selectionStartI - this.indentationNumChars, letterI); // Don't move to before indent
+                            }
+                            selectionEndI -= this.indentationNumChars;
+                            letterI -= this.indentationNumChars;
+                        }
+                    } else {
+                        // Add tab at start
+                        inputElement.selectionStart = letterI;
+                        inputElement.selectionEnd = letterI;
+                        // automatedKeypresses property to prevent keypresses being captured
+                        // by this plugin during automated input as some browsers
+                        // (e.g. GNOME Web) do.
+                        codeInput.pluginData.indent.f = true;
+                        document.execCommand("insertText", false, this.indentation);
+                        codeInput.pluginData.indent.automatedKeypresses = false;
+
+                        // Change selection
+                        if(selectionStartI > letterI) { // Indented outside selection
+                            selectionStartI += this.indentationNumChars;
+                        }
+                        selectionEndI += this.indentationNumChars;
+                        letterI += this.indentationNumChars;
+                    }                    
+                }
+                
+                letterI += lines[i].length+1; // newline counted
+            }
+
+            // move cursor
+            inputElement.selectionStart = selectionStartI;
+            inputElement.selectionEnd = selectionEndI;
+
+            // move scroll position to follow code
+            const textDirection = getComputedStyle(codeInput).direction;
+            if(textDirection == "rtl") {
+                if(event.shiftKey) {
+                    // Scroll right
+                    codeInput.scrollBy(codeInput.pluginData.indent.indentationWidthPx, 0);
+                } else {
+                    // Scroll left
+                    codeInput.scrollBy(-codeInput.pluginData.indent.indentationWidthPx, 0);
+                }
+            } else {
+                if(event.shiftKey) {
+                    // Scroll left
+                    codeInput.scrollBy(-codeInput.pluginData.indent.indentationWidthPx, 0);
+                } else {
+                    // Scroll right
+                    codeInput.scrollBy(codeInput.pluginData.indent.indentationWidthPx, 0);
+                }
+            }
+        }
+
+        codeInput.value = inputElement.value;
+    }
+
+    /* Deal with new lines retaining indentation */
+    checkEnter(codeInput, event) {
+        if(codeInput.pluginData.indent.automatedKeypresses) return;
+        if(event.key != "Enter") {
+            return;
+        }
+        event.preventDefault(); // Stop normal \n only
+
+        let inputElement = codeInput.textareaElement;
+        let lines = inputElement.value.split("\n");
+        let letterI = 0;
+        let currentLineI = lines.length - 1;
+        let newLine = "";
+        let numberIndents = 0;
+
+        // find the index of the line our cursor is currently on
+        for (let i = 0; i < lines.length; i++) {
+            letterI += lines[i].length + 1;
+            if(inputElement.selectionEnd < letterI) {
+                currentLineI = i;
+                break;
+            }
+        }
+
+        // count the number of indents the current line starts with (up to our cursor position in the line)
+        let cursorPosInLine = lines[currentLineI].length - (letterI - inputElement.selectionEnd) + 1;
+        for (let i = 0; i < cursorPosInLine; i += this.indentationNumChars) {
+            if (lines[currentLineI].substring(i, i+this.indentationNumChars) == this.indentation) {
+                numberIndents++;
+            } else {
+                break;
+            }
+        }
+
+        // determine the text before and after the cursor and chop the current line at the new line break
+        let textAfterCursor = "";
+        if (cursorPosInLine != lines[currentLineI].length) {
+            textAfterCursor = lines[currentLineI].substring(cursorPosInLine);
+            lines[currentLineI] = lines[currentLineI].substring(0, cursorPosInLine);
+        }
+
+        let bracketThreeLinesTriggered = false;
+        let furtherIndentation = "";
+        if(this.bracketPairs != null) {
+            for(let openingBracket in this.bracketPairs) {
+                if(lines[currentLineI][lines[currentLineI].length-1] == openingBracket) {
+                    let closingBracket = this.bracketPairs[openingBracket];
+                    if(textAfterCursor.length > 0 && textAfterCursor[0] == closingBracket) {
+                        // Create new line and then put textAfterCursor on yet another line: 
+                        // {
+                        //   |CARET|
+                        // }
+                        bracketThreeLinesTriggered = true;
+                        for (let i = 0; i < numberIndents+1; i++) {
+                            furtherIndentation += this.indentation;
+                        }
+                    } else {
+                        // Just create new line: 
+                        // {
+                        //   |CARET|
+                        numberIndents++;
+                    }
+                    break;
+                } else {
+                    // Check whether brackets cause unindent
+                    let closingBracket = this.bracketPairs[openingBracket];
+                    if(textAfterCursor.length > 0 && textAfterCursor[0] == closingBracket) {
+                        numberIndents--;
+                        break;
+                    }
+                }
+            }
+        }
+
+        // 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;
+        }
+
+        // save the current cursor position
+        let selectionStartI = inputElement.selectionStart;
+
+        // automatedKeypresses property to prevent keypresses being captured
+        // by this plugin during automated input as some browsers
+        // (e.g. GNOME Web) do.
+        codeInput.pluginData.indent.automatedKeypresses = true;
+        if(bracketThreeLinesTriggered) {
+            document.execCommand("insertText", false, "\n" + furtherIndentation); // Write indented line
+            numberIndents += 1; // Reflects the new indent
+        }
+        document.execCommand("insertText", false, "\n" + newLine); // Write new line, including auto-indentation
+        codeInput.pluginData.indent.automatedKeypresses = false;
+
+        // move cursor to new position
+        inputElement.selectionStart = selectionStartI + numberIndents*this.indentationNumChars + 1;  // count the indent level and the newline character
+        inputElement.selectionEnd = inputElement.selectionStart;
+
+        
+        // Scroll down to cursor if necessary
+        let paddingTop = Number(getComputedStyle(inputElement).paddingTop.replace("px", "")); 
+        let lineHeight = Number(getComputedStyle(inputElement).lineHeight.replace("px", "")); 
+        let inputHeight = Number(getComputedStyle(codeInput).height.replace("px", ""));
+        if(currentLineI*lineHeight + lineHeight*2 + paddingTop >= inputElement.scrollTop + inputHeight) { // Cursor too far down
+            codeInput.scrollBy(0, Number(getComputedStyle(inputElement).lineHeight.replace("px", "")));
+        }
+
+        codeInput.value = inputElement.value;
+    }
+
+    /* Deal with one 'tab' of spaces-based-indentation being deleted by each backspace, rather than one space */
+    checkBackspace(codeInput, event) {
+        if(codeInput.pluginData.indent.automatedKeypresses) return;
+        if(event.key != "Backspace" || this.indentationNumChars == 1) {
+            return; // Normal backspace when indentation of 1
+        }
+
+        let inputElement = codeInput.textareaElement;
+
+        if(inputElement.selectionStart == inputElement.selectionEnd && codeInput.value.substring(inputElement.selectionStart - this.indentationNumChars, inputElement.selectionStart) == this.indentation) {
+            // Indentation before cursor = delete it
+            inputElement.selectionStart -= this.indentationNumChars;
+            event.preventDefault();
+            document.execCommand("delete", false, "");
+        }
+    }
+
+    /* Deal with the typing of closing brackets causing a decrease in indentation */
+    checkCloseBracket(codeInput, event) {
+        if(codeInput.textareaElement.selectionStart != codeInput.textareaElement.selectionEnd) {
+            return;
+        }
+
+        for(let openingBracket in this.bracketPairs) {
+            let closingBracket = this.bracketPairs[openingBracket];
+            if(event.data == closingBracket) {
+                // Closing bracket unindents line
+                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, "");
+                    // event.preventDefault();
+                }
+            }
+        }
+    }
+}
+export default plugins.Indent;