Allow space-character indentation; clean up; upgrade to v2.1.0

Author: WebCoder49

README.md

@@ -99,7 +99,7 @@ The next step is to set up a `template` to link `code-input` to your syntax-high
       hljs, 
       [
         new codeInput.plugins.Autodetect(), 
-        new codeInput.plugins.Indent()
+        new codeInput.plugins.Indent(true, 2) // 2 spaces indentation
       ]
     )
   );
@@ -119,7 +119,7 @@ Now that you have registered a template, you can use the custom `<code-input>` e
   ```
 
 ## 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.
+If you have any features you would like to add to `code-input` as plugins or core functionality, 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 will be greatly appreciated. You can see [more info in our `CONTRIBUTING.md` file](CONTRIBUTING.md).
 
 
 |[![Contributors](https://contrib.rocks/image?repo=WebCoder49%2Fcode-input)](https://github.com/WebCoder49/code-input/graphs/contributors)|

code-input.d.ts

@@ -116,7 +116,12 @@ export namespace plugins {
    * Files: indent.js
    */
   class Indent extends Plugin {
-    constructor();
+    /**
+     * 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.
+     */
+    constructor(defaultSpaces?: boolean, numSpaces?: Number);
   }
 
   /**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webcoder49/code-input",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "Fully customisable, editable syntax-highlighted textareas.",
   "browser": "code-input.js",
   "scripts": {

plugins/README.md

@@ -1,6 +1,12 @@
 # Code-input: Plugins
 ## List Of Plugins
 
+💡 Do you just want to get a quick editor working? We suggest the [Indent](#indent) and [Prism Line Numbers](#prism-line-numbers) plugins.
+
+**Lots of plugins are very customisable - please see the JavaScript files for parameters and if you want more features let us know via GitHub Issues.**
+
+---
+
 ### Autocomplete
 Display a popup under the caret using the text in the code-input element. This works well with autocomplete suggestions.
 
@@ -23,7 +29,7 @@ Files: [debounce-update.js](./debounce-update.js)
 [🚀 *CodePen Demo*](https://codepen.io/WebCoder49/pen/GRXyxzV)
 
 ### Indent
-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
+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. **Supports tab characters and custom numbers of spaces as indentation.**
 
 Files: [indent.js](./indent.js)
 
@@ -60,7 +66,7 @@ Plugins allow you to add extra features to a template, like [automatic indentati
       hljs, 
       [
         new codeInput.plugins.Autodetect(), 
-        new codeInput.plugins.Indent()
+        new codeInput.plugins.Indent(true, 2) // 2 spaces indentation
       ]
     )
   );

plugins/indent.js

@@ -4,14 +4,33 @@
  * Files: indent.js
  */
 codeInput.plugins.Indent = class extends codeInput.Plugin {
-    constructor() {
+
+    numSpaces;
+    indentation = "\t";
+    indentationNumChars = 1;
+
+    /**
+     * 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.
+     */
+    constructor(defaultSpaces=false, numSpaces=4) {
         super([]); // No observed attributes
+
+        this.numSpaces = numSpaces;
+        if(defaultSpaces) {
+            this.indentation = "";
+            for(let i = 0; i < numSpaces; i++) {
+                this.indentation += " ";
+            }
+            this.indentationNumChars = numSpaces;
+        }
     }
 
     /* Add keystroke events */
     afterElementsAdded(codeInput) {
         let textarea = codeInput.textareaElement;
-        textarea.addEventListener('keydown', (event) => { this.checkTab(codeInput, event); this.checkEnter(codeInput, event); });
+        textarea.addEventListener('keydown', (event) => { this.checkTab(codeInput, event); this.checkEnter(codeInput, event); this.checkBackspace(codeInput, event); });
     }
 
     /* Event handlers */
@@ -23,8 +42,8 @@ codeInput.plugins.Indent = class extends codeInput.Plugin {
         event.preventDefault(); // stop normal
 
         if(!event.shiftKey && inputElement.selectionStart == inputElement.selectionEnd) {
-            // Just place a tab here.
-            document.execCommand("insertText", false, "\t");
+            // Just place a tab/spaces here.
+            document.execCommand("insertText", false, this.indentation);
 
         } else {
             let lines = inputElement.value.split("\n");
@@ -38,31 +57,31 @@ codeInput.plugins.Indent = class extends codeInput.Plugin {
                 || (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][0] == "\t") {
-                            // Remove first tab
+                        if(lines[i].substring(0, this.indentationNumChars) == this.indentation) {
+                            // Remove first indent
                             inputElement.selectionStart = letterI;
-                            inputElement.selectionEnd = letterI+1;
+                            inputElement.selectionEnd = letterI+this.indentationNumChars;
                             document.execCommand("delete", false, "");
 
                             // Change selection
                             if(selectionStartI > letterI) { // Indented outside selection
-                                selectionStartI--;
+                                selectionStartI = Math.max(selectionStartI - this.indentationNumChars, letterI); // Don't move to before indent
                             }
-                            selectionEndI--;
-                            letterI--;
+                            selectionEndI -= this.indentationNumChars;
+                            letterI -= this.indentationNumChars;
                         }
                     } else {
                         // Add tab at start
                         inputElement.selectionStart = letterI;
                         inputElement.selectionEnd = letterI;
-                        document.execCommand("insertText", false, "\t");
+                        document.execCommand("insertText", false, this.indentation);
 
                         // Change selection
                         if(selectionStartI > letterI) { // Indented outside selection
-                            selectionStartI++;
+                            selectionStartI += this.indentationNumChars;
                         }
-                        selectionEndI++;
-                        letterI++;
+                        selectionEndI += this.indentationNumChars;
+                        letterI += this.indentationNumChars;
                     }                    
                 }
 
@@ -101,8 +120,8 @@ codeInput.plugins.Indent = class extends codeInput.Plugin {
 
         // 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++) {
-            if (lines[currentLineI][i] == "\t") {
+        for (let i = 0; i < cursorPosInLine; i += this.indentationNumChars) {
+            if (lines[currentLineI].substring(i, i+this.indentationNumChars) == this.indentation) {
                 numberIndents++;
             } else {
                 break;
@@ -118,7 +137,7 @@ 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
         for (let i = 0; i < numberIndents; i++) {
-            newLine += "\t";
+            newLine += this.indentation;
         }
 
         // save the current cursor position
@@ -127,7 +146,7 @@ codeInput.plugins.Indent = class extends codeInput.Plugin {
         document.execCommand("insertText", false, "\n" + newLine); // Write new line, including auto-indentation
 
         // move cursor to new position
-        inputElement.selectionStart = selectionStartI + numberIndents + 1;  // count the indent level and the newline character
+        inputElement.selectionStart = selectionStartI + numberIndents*this.indentationNumChars + 1;  // count the indent level and the newline character
         inputElement.selectionEnd = inputElement.selectionStart;
 
 
@@ -141,4 +160,19 @@ codeInput.plugins.Indent = class extends codeInput.Plugin {
 
         codeInput.update(inputElement.value);
     }
+
+    checkBackspace(codeInput, event) {
+        if(event.key != "Backspace" || this.indentationNumChars == 1) {
+            return; // Normal backspace
+        }
+
+        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, "");
+        }
+    }
 }