Merge pull request #63 from WebCoder49/cursor-below-view

Cursor below view

Author: WebCoder49

CONTRIBUTING.md

@@ -9,7 +9,7 @@
 ---
 # Ways you could contribute:
 ## 1. I've found a bug but don't know how / don't have time to fix it.
-If you think you've found a bug, please [submit an issue](https://github.com/WebCoder49/code-input/issues) with screenshots, how you found the bug, and copies of the console's logs if an error is in them. Please also mention the template and plugins you used (your `codeInput.registerTemplate(...)` snippet). We'd be more than happy to help you fix it.
+If you think you've found a bug, please [submit an issue](https://github.com/WebCoder49/code-input/issues) with screenshots, how you found the bug, and copies of the console's logs if an error is in them. Please also mention the template and plugins you used (your `codeInput.registerTemplate(...)` snippet). We'd be more than happy to help you fix it. A demo using [CodePen](https://codepen.io/) would be incredibly useful.
 
 ## 2. I have implemented a feature / have thought of a potential feature for the library and think it could be useful for others.
 The best way to implement a feature is as a plugin like those in the `plugins` folder of `code-input`. If you do this, you could contribute it as in point 3 below.

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.css

@@ -83,13 +83,16 @@ code-input:not(.code-input_loaded)::after {
   color: #ccc;
 }
 
-/* Make textarea almost completely transparent */
+/* Make textarea almost completely transparent, except for caret and placeholder */
 
 code-input textarea {
   color: transparent;
   background: transparent;
   caret-color: inherit!important; /* Or choose your favourite color */
 }
+code-input textarea::placeholder {
+  color: lightgrey;
+}
 
 /* Can be scrolled */
 code-input textarea, code-input pre {

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);
   }
 
   /**

code-input.js

@@ -774,15 +774,13 @@ var codeInput = {
                         oldValue = oldValue.toLowerCase();
 
                         // Remove old language class and add new
-                        console.log("code-input: Language: REMOVE", "language-" + oldValue);
                         code.classList.remove("language-" + oldValue); // From codeElement
                         code.parentElement.classList.remove("language-" + oldValue); // From preElement
                         code.classList.remove("language-none"); // Prism
                         code.parentElement.classList.remove("language-none"); // Prism
 
                         if (newValue != undefined && newValue != "") {
                             code.classList.add("language-" + newValue);
-                            console.log("code-input: Language: ADD", "language-" + newValue);
                         }
 
                         if (mainTextarea.placeholder == oldValue) mainTextarea.placeholder = newValue;
@@ -792,8 +790,7 @@ var codeInput = {
                         break;
                     default:
                         if (codeInput.textareaSyncAttributes.includes(name)) {
-                            console.log("sync", name, oldValue, newValue);
-                            if(newValue == null || newValue == undefined) { // TODO: Console.Log to check reaches here with disabled attribute; Fix for disabled attr removal
+                            if(newValue == null || newValue == undefined) {
                                 this.textareaElement.removeAttribute(name);
                             } else {
                                 this.textareaElement.setAttribute(name, newValue);

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/autocomplete.js

@@ -13,7 +13,7 @@ codeInput.plugins.Autocomplete = class extends codeInput.Plugin {
     }
     /* When a key is pressed, or scrolling occurs, update the autocomplete */
     updatePopup(codeInput, onlyScrolled) {
-        let textarea = codeInput.querySelector("textarea");
+        let textarea = codeInput.textareaElement;
         let caretCoords = this.getCaretCoordinates(codeInput, textarea, textarea.selectionEnd, onlyScrolled);
         let popupElem = codeInput.querySelector(".code-input_autocomplete_popup");
         popupElem.style.top = caretCoords.top + "px";
@@ -33,7 +33,7 @@ codeInput.plugins.Autocomplete = class extends codeInput.Plugin {
         testPosElem.classList.add("code-input_autocomplete_testpos");
         codeInput.appendChild(testPosElem); // Styled like first pre, but first pre found to update
 
-        let textarea = codeInput.querySelector("textarea");
+        let textarea = codeInput.textareaElement;
         textarea.addEventListener("keyup", this.updatePopup.bind(this, codeInput, false)); // Override this+args in bind - not just scrolling
         textarea.addEventListener("click", this.updatePopup.bind(this, codeInput, false)); // Override this+args in bind - not just scrolling
         textarea.addEventListener("scroll", this.updatePopup.bind(this, codeInput, true)); // Override this+args in bind - just scrolling

plugins/autodetect.js

@@ -9,15 +9,15 @@ codeInput.plugins.Autodetect = class extends codeInput.Plugin {
     }
     /* Remove previous language class */
     beforeHighlight(codeInput) {
-        let result_element = codeInput.querySelector("pre code");
-        result_element.className = ""; // CODE
-        result_element.parentElement.className = ""; // PRE
+        let resultElement = codeInput.codeElement;
+        resultElement.className = ""; // CODE
+        resultElement.parentElement.className = ""; // PRE
     }
     /* Get new language class and set `lang` attribute */
     afterHighlight(codeInput) {
-        let result_element = codeInput.querySelector("pre code");
-        let lang_class = result_element.className || result_element.parentElement.className;
-        let lang = lang_class.match(/lang(\w|-)*/i)[0]; // Get word starting with lang...; Get outer bracket
+        let resultElement = codeInput.codeElement;
+        let langClass = resultElement.className || resultElement.parentElement.className;
+        let lang = langClass.match(/lang(\w|-)*/i)[0]; // Get word starting with lang...; Get outer bracket
         lang = lang.split("-")[1];
         if(lang == "undefined") {
             codeInput.removeAttribute("lang");

plugins/debounce-update.js

@@ -14,7 +14,6 @@ codeInput.plugins.DebounceUpdate = class extends codeInput.Plugin {
     }
     /* Runs before elements are added into a `code-input`; Params: codeInput element) */
     beforeElementsAdded(codeInput) {
-        console.log(codeInput, "before elements added");
         this.update = codeInput.update.bind(codeInput); // Save previous update func
         codeInput.update = this.updateDebounced.bind(this, codeInput);
     }