@webcoder49/code-input 1.5.0

package/code-input.min.css

@@ -0,0 +1 @@
+code-input{position:relative;top:0;left:0;display:block;overflow:hidden;padding:8px;margin:0!important;width:calc(100% - 16px);height:250px;font-size:normal;font-family:monospace;line-height:1.5;tab-size:2;caret-color:#a9a9a9;white-space:pre}code-input textarea,code-input.code-input_pre-element-styled pre,code-input:not(.code-input_pre-element-styled) pre code{margin:0!important;padding:var(--padding,16px)!important;border:0;width:calc(100% - var(--padding,16px) * 2);height:calc(100% - var(--padding,16px) * 2)}code-input.code-input_pre-element-styled pre code,code-input:not(.code-input_pre-element-styled) pre{margin:0!important;padding:0!important;width:100%;height:100%}code-input pre,code-input pre *,code-input textarea{font-size:inherit!important;font-family:inherit!important;line-height:inherit!important;tab-size:inherit!important}code-input pre,code-input textarea{position:absolute;top:0;left:0}code-input textarea{z-index:1}code-input pre{z-index:0}code-input textarea{color:transparent;background:0 0;caret-color:inherit!important}code-input pre,code-input textarea{overflow:auto!important;white-space:inherit;word-spacing:normal;word-break:normal;word-wrap:normal}code-input textarea{resize:none;outline:0!important}code-input:not(.code-input_registered)::before{content:"Use codeInput.registerTemplate to set up.";display:block;color:grey}

package/code-input.min.js

@@ -0,0 +1 @@
+var codeInput={observedAttributes:["value","name","placeholder","lang","template"],usedTemplates:{},defaultTemplate:void 0,templateQueue:{},plugins:{},Plugin:class{constructor(){console.log("code-input: plugin: Created plugin!"),codeInput.observedAttributes=codeInput.observedAttributes.concat(self.observedAttributes)}beforeHighlight(){}afterHighlight(){}beforeElementsAdded(){}afterElementsAdded(){}attributeChanged(){}observedAttributes=[]},CodeInput:class extends HTMLElement{constructor(){super()}bound_callbacks={};plugin_evt(a,b){for(let c in this.template.plugins){let d=this.template.plugins[c];a in d&&(b===void 0?d[a](this):d[a](this,...b))}}update(a){if(!this.ignoreValueUpdate){this.ignoreValueUpdate=!0,this.value=a,this.ignoreValueUpdate=!1,this.querySelector("textarea").value!=a&&(this.querySelector("textarea").value=a);let b=this.querySelector("pre code");"\n"==a[a.length-1]&&(a+=" "),b.innerHTML=this.escape_html(a),this.plugin_evt("beforeHighlight"),this.template.includeCodeInputInHighlightFunc?this.template.highlight(b,this):this.template.highlight(b),this.plugin_evt("afterHighlight")}}sync_scroll(){let a=this.querySelector("textarea"),b=this.template.preElementStyled?this.querySelector("pre"):this.querySelector("pre code");b.scrollTop=a.scrollTop,b.scrollLeft=a.scrollLeft}escape_html(a){return a.replace(/&/g,"&amp;").replace(/</g,"&lt;")}get_template(){let a;return a=null==this.getAttribute("template")?codeInput.defaultTemplate:this.getAttribute("template"),a in codeInput.usedTemplates?codeInput.usedTemplates[a]:(a in codeInput.templateQueue||(codeInput.templateQueue[a]=[]),void codeInput.templateQueue[a].push(this))}setup(){this.classList.add("code-input_registered"),this.template.preElementStyled&&this.classList.add("code-input_pre-element-styled"),this.plugin_evt("beforeElementsAdded");let a=this.getAttribute("lang"),b=this.getAttribute("placeholder")||this.getAttribute("lang")||"",c=this.value||this.innerHTML||"";this.innerHTML="";let d=document.createElement("textarea");d.placeholder=b,d.value=c,d.setAttribute("spellcheck","false"),this.getAttribute("name")&&d.setAttribute("name",this.getAttribute("name")),d.addEventListener("input",()=>{d.parentElement.update(d.value),d.parentElement.sync_scroll()}),d.addEventListener("scroll",()=>d.parentElement.sync_scroll()),this.append(d);let e=document.createElement("code"),f=document.createElement("pre");f.setAttribute("aria-hidden","true"),f.append(e),this.append(f),this.template.isCode&&a!=null&&""!=a&&e.classList.add("language-"+a),this.plugin_evt("afterElementsAdded"),this.update(c,this)}connectedCallback(){this.template=this.get_template(),this.template!=null&&this.setup()}static get observedAttributes(){return codeInput.observedAttributes}attributeChangedCallback(a,b,c){if(this.isConnected)switch(this.plugin_evt("attributeChanged",[a,b,c]),a){case"value":this.update(c);break;case"name":null!==this.querySelector("textarea")&&this.querySelector("textarea").setAttribute("name",c);break;case"placeholder":this.querySelector("textarea").placeholder=c;break;case"template":this.template=codeInput.usedTemplates[c||codeInput.defaultTemplate],this.template.preElementStyled?this.classList.add("code-input_pre-element-styled"):this.classList.remove("code-input_pre-element-styled"),this.update(this.value);break;case"lang":let a=this.querySelector("pre code"),d=this.querySelector("textarea");if(null!=c&&(c=c.toLowerCase(),a.classList.contains(`language-${c}`)))break;b=b.toLowerCase(),console.log("code-input: Language: REMOVE","language-"+b),a.classList.remove("language-"+b),a.parentElement.classList.remove("language-"+b),a.classList.remove("language-none"),a.parentElement.classList.remove("language-none"),null!=c&&""!=c&&(a.classList.add("language-"+c),console.log("code-input: Language:ADD","language-"+c)),d.placeholder==b&&(d.placeholder=c),this.update(this.value)}}addEventListener(a,b,c=null){let d=b.bind(this);this.bound_callbacks[b]=d,"change"==a?null===c?this.querySelector("textarea").addEventListener("change",d):this.querySelector("textarea").addEventListener("change",d,c):"selectionchange"==a&&(null===c?this.querySelector("textarea").addEventListener("selectionchange",d):this.querySelector("textarea").addEventListener("selectionchange",d,c))}removeEventListener(a,b,c=null){let d=this.bound_callbacks[b];"change"==a?null===c?this.querySelector("textarea").removeEventListener("change",d):this.querySelector("textarea").removeEventListener("change",d,c):"selectionchange"==a&&(null===c?this.querySelector("textarea").removeEventListener("selectionchange",d):this.querySelector("textarea").removeEventListener("selectionchange",d,c))}get value(){return this.getAttribute("value")}set value(a){return this.setAttribute("value",a)}get placeholder(){return this.getAttribute("placeholder")}set placeholder(a){return this.setAttribute("placeholder",a)}pluginData={}},registerTemplate:function(a,b){if(codeInput.usedTemplates[a]=b,a in codeInput.templateQueue){for(let c in codeInput.templateQueue[a])elem=codeInput.templateQueue[a][c],elem.template=b,elem.setup();console.log(`code-input: template: Added existing elements with template ${a}`)}if(null==codeInput.defaultTemplate){if(codeInput.defaultTemplate=a,void 0 in codeInput.templateQueue)for(let a in codeInput.templateQueue[void 0])elem=codeInput.templateQueue[void 0][a],elem.template=b,elem.setup();console.log(`code-input: template: Set template ${a} as default`)}console.log(`code-input: template: Created template ${a}`)},templates:{custom(a=function(){},b=!0,c=!0,d=!1,e=[]){return{highlight:a,includeCodeInputInHighlightFunc:d,preElementStyled:b,isCode:c,plugins:e}},prism(a,b=[]){return{includeCodeInputInHighlightFunc:!1,highlight:a.highlightElement,preElementStyled:!0,isCode:!0,plugins:b}},hljs(a,b=[]){return{includeCodeInputInHighlightFunc:!1,highlight:a.highlightElement,preElementStyled:!1,isCode:!0,plugins:b}},characterLimit(){return{highlight:function(a,b,c=[]){let d=+b.getAttribute("data-character-limit"),e=b.escape_html(b.value.slice(0,d)),f=b.escape_html(b.value.slice(d));a.innerHTML=`${e}<mark class="overflow">${f}</mark>`,0<f.length&&(a.innerHTML+=` <mark class="overflow-msg">${b.getAttribute("data-overflow-msg")||"(Character limit reached)"}</mark>`)},includeCodeInputInHighlightFunc:!0,preElementStyled:!0,isCode:!1,plugins:plugins}},rainbowText(a=["red","orangered","orange","goldenrod","gold","green","darkgreen","navy","blue","magenta"],b="",c=[]){return{highlight:function(a,b){let c=[],d=b.value.split(b.template.delimiter);for(let e=0;e<d.length;e++)c.push(`<span style="color: ${b.template.rainbow_colors[e%b.template.rainbow_colors.length]}">${b.escape_html(d[e])}</span>`);a.innerHTML=c.join(b.template.delimiter)},includeCodeInputInHighlightFunc:!0,preElementStyled:!0,isCode:!1,rainbow_colors:a,delimiter:b,plugins:c}}}};customElements.define("code-input",codeInput.CodeInput);

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@webcoder49/code-input",
+  "version": "1.5.0",
+  "description": "Fully customisable, editable syntax-highlighted textareas.",
+  "browser": "code-input.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WebCoder49/code-input.git"
+  },
+  "keywords": [
+    "front-end",
+    "syntax",
+    "highlight",
+    "textarea",
+    "editable",
+    "web-components"
+  ],
+  "author": {
+    "name": "WebCoder49",
+    "email": "webcoder49.tutorials@gmail.com",
+    "url": "https://webcoder49.github.io/"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/WebCoder49/code-input/issues"
+  },
+  "homepage": "https://github.com/WebCoder49/code-input#readme"
+}

package/plugins/README.md

@@ -0,0 +1,68 @@
+# Code-input: Plugins
+## List Of Plugins
+
+### Autocomplete
+Display a popup under the caret using the text in the code-input element. This works well with autocomplete suggestions.
+
+Files: [autocomplete.js](./autocomplete.js) / [autocomplete.css](./autocomplete.css)
+
+[🚀 *CodePen Demo*](https://codepen.io/WebCoder49/pen/xxapjXB)
+
+### Autodetect
+Autodetect the language live and change the `lang` attribute using the syntax highlighter's autodetect capabilities. Works with highlight.js.
+
+Files: [autodetect.js](./autodetect.js)
+
+[🚀 *CodePen Demo*](https://codepen.io/WebCoder49/pen/eYLyMae)
+
+### Debounce Update
+Debounce the update and highlighting function ([What is Debouncing?](https://medium.com/@jamischarles/what-is-debouncing-2505c0648ff1))
+
+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
+
+Files: [indent.js](./indent.js)
+
+[🚀 *CodePen Demo*](https://codepen.io/WebCoder49/pen/WNgdzar)
+
+### Prism Line Numbers
+Allows code-input elements to be used with the Prism.js line-numbers plugin, as long as the code-input element or a parent element of it has the CSS class `line-numbers`. [Prism.js Plugin Docs](https://prismjs.com/plugins/line-numbers/)
+
+Files: [prism-line-numbers.css](./prism-line-numbers.css) (NO JS FILE)
+
+[🚀 *CodePen Demo*](https://codepen.io/WebCoder49/pen/XWPVrWv)
+
+### Special Chars
+Render special characters and control characters as a symbol
+with their hex code.
+
+Files: [special-chars.js](./special-chars.js) / [special-chars.css](./special-chars.css)
+
+[🚀 *CodePen Demo*](https://codepen.io/WebCoder49/pen/jOeYJbm)
+
+## Using Plugins
+Plugins allow you to add extra features to a template, like [automatic indentation](./indent.js) or [support for highlight.js's language autodetection](./autodetect.js). To use them, just:
+- Import the plugins' JS/CSS files (there may only be one of these; import all of the files that exist) after you have imported `code-input` and before registering the template.
+- If a JavaScript file is present, Place an instance of each plugin in the array of plugins argument when registering, like this:
+```html
+<script src="code-input.js"></script>
+<!--...-->
+<script src="plugins/autodetect.js"></script>
+<script src="plugins/indent.js"></script>
+<!--...-->
+<script>
+  codeInput.registerTemplate("syntax-highlighted", 
+    codeInput.templates.hljs(
+      hljs, 
+      [
+        new codeInput.plugins.Autodetect(), 
+        new codeInput.plugins.Indent()
+      ]
+    )
+  );
+</script>
+```

package/plugins/autocomplete.css

@@ -0,0 +1,15 @@
+/**
+ * Display a popup under the caret using the text in the code-input element. This works well with autocomplete suggestions.
+ * Files: autocomplete.js / autocomplete.css
+ */
+code-input .code-input_autocomplete_popup {
+    display: block;
+    position: absolute;
+    margin-top: 1em; /* Popup shows under the caret */
+    z-index: 100;
+}
+
+
+code-input .code-input_autocomplete_testpos {
+    opacity: 0;
+}

package/plugins/autocomplete.js

@@ -0,0 +1,80 @@
+/**
+ * Display a popup under the caret using the text in the code-input element. This works well with autocomplete suggestions.
+ * Files: autocomplete.js / autocomplete.css
+ */
+codeInput.plugins.Autocomplete = class extends codeInput.Plugin {
+    /**
+     * Pass in a function to display the popup that takes in (popup element, textarea, textarea.selectionEnd).
+     * @param {function} updatePopupCallback  
+     */
+    constructor(updatePopupCallback) {
+        super();
+        this.updatePopupCallback = updatePopupCallback;
+    }
+    /* When a key is pressed, or scrolling occurs, update the autocomplete */
+    updatePopup(codeInput, onlyScrolled) {
+        let textarea = codeInput.querySelector("textarea");
+        let caretCoords = this.getCaretCoordinates(codeInput, textarea, textarea.selectionEnd, onlyScrolled);
+        let popupElem = codeInput.querySelector(".code-input_autocomplete_popup");
+        popupElem.style.top = caretCoords.top + "px";
+        popupElem.style.left = caretCoords.left + "px";
+        
+        if(!onlyScrolled) {
+            this.updatePopupCallback(popupElem, textarea, textarea.selectionEnd);
+        }
+    }
+    /* Runs after elements are added into a `code-input` (useful for adding events to the textarea); Params: codeInput element) */
+    afterElementsAdded(codeInput) {
+        let popupElem = document.createElement("div");
+        popupElem.classList.add("code-input_autocomplete_popup");
+        codeInput.appendChild(popupElem);
+
+        let testPosElem = document.createElement("pre");
+        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");
+        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
+    }
+    /**
+     * Return the coordinates of the caret in a code-input
+     * @param {codeInput.CodeInput} codeInput 
+     * @param {HTMLElement} textarea 
+     * @param {Number} charIndex 
+     * @param {boolean} onlyScrolled True if no edits have been made to the text and the caret hasn't been repositioned 
+     * @returns 
+     */
+    getCaretCoordinates(codeInput, textarea, charIndex, onlyScrolled) {
+        let afterSpan;
+        if(onlyScrolled) {
+            // No edits to text; don't update element - span at index 1 is after span
+            let spans = codeInput.querySelector(".code-input_autocomplete_testpos").querySelectorAll("span");
+            if(spans.length < 2) {
+                // Hasn't saved text in test pre to find pos
+                // Need to regenerate text in test pre
+                return this.getCaretCoordinates(codeInput, textarea, charIndex, false);
+            } 
+            afterSpan = spans[1];
+        } else {
+            /* Inspired by https://github.com/component/textarea-caret-position */
+            let testPosElem = codeInput.querySelector(".code-input_autocomplete_testpos");
+            
+            let beforeSpan = document.createElement("span");
+            beforeSpan.textContent = textarea.value.substring(0, charIndex);
+            afterSpan = document.createElement("span");
+            afterSpan.textContent = "."; // Placeholder
+
+            // Clear test pre - https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild
+            while (testPosElem.firstChild) {
+                testPosElem.removeChild(testPosElem.firstChild);
+            }
+            testPosElem.appendChild(beforeSpan);
+            testPosElem.appendChild(afterSpan);
+        }
+        return {"top": afterSpan.offsetTop - textarea.scrollTop, "left": afterSpan.offsetLeft - textarea.scrollLeft};
+    }
+    observedAttributes = [];
+    updatePopupCallback = function() {};
+}

package/plugins/autocomplete.min.css

@@ -0,0 +1 @@
+code-input .code-input_autocomplete_popup{display:block;position:absolute;margin-top:1em;z-index:100}code-input .code-input_autocomplete_testpos{opacity:0}

package/plugins/autocomplete.min.js

@@ -0,0 +1 @@
+codeInput.plugins.Autocomplete=class extends codeInput.Plugin{constructor(a){super(),this.updatePopupCallback=a}updatePopup(a,b){let c=a.querySelector("textarea"),d=this.getCaretCoordinates(a,c,c.selectionEnd,b),e=a.querySelector(".code-input_autocomplete_popup");e.style.top=d.top+"px",e.style.left=d.left+"px",b||this.updatePopupCallback(e,c,c.selectionEnd)}afterElementsAdded(a){let b=document.createElement("div");b.classList.add("code-input_autocomplete_popup"),a.appendChild(b);let c=document.createElement("pre");c.classList.add("code-input_autocomplete_testpos"),a.appendChild(c);let d=a.querySelector("textarea");d.addEventListener("keyup",this.updatePopup.bind(this,a,!1)),d.addEventListener("click",this.updatePopup.bind(this,a,!1)),d.addEventListener("scroll",this.updatePopup.bind(this,a,!0))}getCaretCoordinates(a,b,c,d){let e;if(d){let d=a.querySelector(".code-input_autocomplete_testpos").querySelectorAll("span");if(2>d.length)return this.getCaretCoordinates(a,b,c,!1);e=d[1]}else{let d=a.querySelector(".code-input_autocomplete_testpos"),f=document.createElement("span");for(f.textContent=b.value.substring(0,c),e=document.createElement("span"),e.textContent=".";d.firstChild;)d.removeChild(d.firstChild);d.appendChild(f),d.appendChild(e)}return{top:e.offsetTop-b.scrollTop,left:e.offsetLeft-b.scrollLeft}}observedAttributes=[];updatePopupCallback=function(){}};

package/plugins/autodetect.js

@@ -0,0 +1,29 @@
+/**
+ * Autodetect the language live and change the `lang` attribute using the syntax highlighter's 
+ * autodetect capabilities. Works with highlight.js.
+ * Files: autodetect.js
+ */
+codeInput.plugins.Autodetect = class extends codeInput.Plugin {
+    constructor() {
+        super();
+    }
+    /* Remove previous language class */
+    beforeHighlight(codeInput) {
+        let result_element = codeInput.querySelector("pre code");
+        result_element.className = ""; // CODE
+        result_element.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
+        lang = lang.split("-")[1];
+        if(lang == "undefined") {
+            codeInput.removeAttribute("lang");
+        } else {
+            codeInput.setAttribute("lang", lang);
+        }
+    }
+    observedAttributes = []
+}

package/plugins/autodetect.min.js

@@ -0,0 +1 @@
+codeInput.plugins.Autodetect=class extends codeInput.Plugin{constructor(){super()}beforeHighlight(a){let b=a.querySelector("pre code");b.className="",b.parentElement.className=""}afterHighlight(a){let b=a.querySelector("pre code"),c=b.className||b.parentElement.className,d=c.match(/lang(\w|-)*/i)[0];d=d.split("-")[1],"undefined"==d?a.removeAttribute("lang"):a.setAttribute("lang",d)}observedAttributes=[]};

package/plugins/debounce-update.js

@@ -0,0 +1,41 @@
+/**
+ * Debounce the update and highlighting function
+ * https://medium.com/@jamischarles/what-is-debouncing-2505c0648ff1
+ * Files: debounce-update.js
+ */
+codeInput.plugins.DebounceUpdate = class extends codeInput.Plugin {
+    /**
+     * Create a debounced update plugin to pass into a template
+     * @param {Number} delayMs Delay, in ms, to wait until updating the syntax highlighting 
+     */
+    constructor(delayMs) {
+        super();
+        this.delayMs = delayMs;
+    }
+    /* 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);
+    }
+
+    /**
+     * Debounce the `update` function
+     */
+    updateDebounced(codeInput, text) {
+        // Editing - cancel prev. timeout
+        if(this.debounceTimeout != null) {
+            window.clearTimeout(this.debounceTimeout);
+        }
+
+        this.debounceTimeout = window.setTimeout(() => {
+            // Closure arrow function can take in variables like `text`
+            this.update(text);
+        }, this.delayMs);
+    }
+
+    // this.`update` function is original function
+
+    debounceTimeout = null; // Timeout until update
+    delayMs = 0; // Time until update
+}

package/plugins/debounce-update.min.js

@@ -0,0 +1 @@
+codeInput.plugins.DebounceUpdate=class extends codeInput.Plugin{constructor(a){super(),this.delayMs=a}beforeElementsAdded(a){console.log(a,"before elements added"),this.update=a.update.bind(a),a.update=this.updateDebounced.bind(this,a)}updateDebounced(a,b){null!=this.debounceTimeout&&window.clearTimeout(this.debounceTimeout),this.debounceTimeout=window.setTimeout(()=>{this.update(b)},this.delayMs)}debounceTimeout=null;delayMs=0};

package/plugins/indent.js

@@ -0,0 +1,154 @@
+/**
+ * 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
+ */
+codeInput.plugins.Indent = class extends codeInput.Plugin {
+    constructor() {
+        super();
+    }
+
+    /* Add keystroke events */
+    afterElementsAdded(codeInput) {
+        let textarea = codeInput.querySelector("textarea");
+        textarea.addEventListener('keydown', (event) => { this.check_tab(codeInput, event); this.check_enter(codeInput, event); });
+    }
+
+    /* Event handlers */
+    check_tab(codeInput, event) {
+        if(event.key != "Tab") {
+            return;
+        }
+        let input_element = codeInput.querySelector("textarea");
+        let code = input_element.value;
+        event.preventDefault(); // stop normal
+        
+        if(!event.shiftKey && input_element.selectionStart == input_element.selectionEnd) {
+            // Just place a tab here.
+            document.execCommand("insertText", false, "\t");
+
+        } else {
+            let lines = input_element.value.split("\n");
+            let letter_i = 0;
+
+            let selection_start = input_element.selectionStart; // where cursor moves after tab - moving forward by 1 indent
+            let selection_end = input_element.selectionEnd; // where cursor moves after tab - moving forward by 1 indent
+
+            let number_indents = 0;
+            let first_line_indents = 0;
+
+            for (let i = 0; i < lines.length; i++) {                
+                // console.log(lines[i], ": start", selection_start, letter_i + lines[i].length + 1, "&& end", selection_end , letter_i + 1)
+                if((selection_start <= letter_i+lines[i].length && selection_end >= letter_i + 1)
+                || (selection_start == selection_end && selection_start <= letter_i+lines[i].length+1 && selection_end >= letter_i)) { // + 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
+                            input_element.selectionStart = letter_i;
+                            input_element.selectionEnd = letter_i+1;
+                            document.execCommand("delete", false, "");
+
+                            // Change selection
+                            if(selection_start > letter_i) { // Indented outside selection
+                                selection_start--;
+                            }
+                            selection_end--;
+                            letter_i--;
+                        }
+                    } else {
+                        // Add tab at start
+                        input_element.selectionStart = letter_i;
+                        input_element.selectionEnd = letter_i;
+                        document.execCommand("insertText", false, "\t");
+
+                        // Change selection
+                        if(selection_start > letter_i) { // Indented outside selection
+                            selection_start++;
+                        }
+                        selection_end++;
+                        letter_i++;
+                    }                    
+                }
+                
+                letter_i += lines[i].length+1; // newline counted
+            }
+            // input_element.value = lines.join("\n");
+
+            // move cursor
+            input_element.selectionStart = selection_start;
+            input_element.selectionEnd = selection_end;
+        }
+
+        codeInput.update(input_element.value);
+    }
+
+    check_enter(codeInput, event) {
+        if(event.key != "Enter") {
+            return;
+        }
+        event.preventDefault(); // stop normal
+
+        let input_element = codeInput.querySelector("textarea");
+        let lines = input_element.value.split("\n");
+        let letter_i = 0;
+        let current_line = lines.length - 1;
+        let new_line = "";
+        let number_indents = 0;
+
+        // find the index of the line our cursor is currently on
+        for (let i = 0; i < lines.length; i++) {
+            letter_i += lines[i].length + 1;
+            if(input_element.selectionEnd <= letter_i) {
+                current_line = i;
+                break;
+            }
+        }
+
+        // count the number of indents the current line starts with (up to our cursor position in the line)
+        let cursor_pos_in_line = lines[current_line].length - (letter_i - input_element.selectionEnd) + 1;
+        for (let i = 0; i < cursor_pos_in_line; i++) {
+            if (lines[current_line][i] == "\t") {
+                number_indents++;
+            } else {
+                break;
+            }
+        }
+
+        // determine the text before and after the cursor and chop the current line at the new line break
+        let text_after_cursor = "";
+        if (cursor_pos_in_line != lines[current_line].length) {
+            text_after_cursor = lines[current_line].substring(cursor_pos_in_line);
+            lines[current_line] = lines[current_line].substring(0, cursor_pos_in_line);
+        }
+
+        // insert our indents and any text from the previous line that might have been after the line break
+        for (let i = 0; i < number_indents; i++) {
+            new_line += "\t";
+        }
+
+        // save the current cursor position
+        let selection_start = input_element.selectionStart;
+        let selection_end = input_element.selectionEnd;
+
+        document.execCommand("insertText", false, "\n" + new_line); // Write new line, including auto-indentation
+
+        // move cursor to new position
+        input_element.selectionStart = selection_start + number_indents + 1;  // count the indent level and the newline character
+        input_element.selectionEnd = selection_start + number_indents + 1;
+
+        codeInput.update(input_element.value);
+
+
+        // Update scrolls
+        input_element.scrollLeft = 0;
+        // Move down 1 line
+        let lineHeight = Number(getComputedStyle(input_element).lineHeight.split(0, -2));
+        // console.log(getComputedStyle(input_element).lineHeight);
+        if(lineHeight == NaN && getComputedStyle(input_element).lineHeight.split(-2) == "px") {
+            input_element.scrollTop += lineHeight;
+        } else {
+            input_element.scrollTop += 20; // px
+        }
+    }
+}

package/plugins/indent.min.js

@@ -0,0 +1 @@
+codeInput.plugins.Indent=class extends codeInput.Plugin{constructor(){super()}afterElementsAdded(a){let b=a.querySelector("textarea");b.addEventListener("keydown",b=>{this.check_tab(a,b),this.check_enter(a,b)})}check_tab(a,b){if("Tab"!=b.key)return;let c=a.querySelector("textarea"),d=c.value;if(b.preventDefault(),!b.shiftKey&&c.selectionStart==c.selectionEnd)document.execCommand("insertText",!1,"\t");else{let a=c.value.split("\n"),d=0,e=c.selectionStart,f=c.selectionEnd;for(let g=0;g<a.length;g++)(e<=d+a[g].length&&f>=d+1||e==f&&e<=d+a[g].length+1&&f>=d)&&(b.shiftKey?"\t"==a[g][0]&&(c.selectionStart=d,c.selectionEnd=d+1,document.execCommand("delete",!1,""),e>d&&e--,f--,d--):(c.selectionStart=d,c.selectionEnd=d,document.execCommand("insertText",!1,"\t"),e>d&&e++,f++,d++)),d+=a[g].length+1;c.selectionStart=e,c.selectionEnd=f}a.update(c.value)}check_enter(a,b){if("Enter"!=b.key)return;b.preventDefault();let c=a.querySelector("textarea"),d=c.value.split("\n"),e=0,f=d.length-1,g="",h=0;for(let g=0;g<d.length;g++)if(e+=d[g].length+1,c.selectionEnd<=e){f=g;break}let j=d[f].length-(e-c.selectionEnd)+1;for(let c=0;c<j&&"\t"==d[f][c];c++)h++;let k="";j!=d[f].length&&(k=d[f].substring(j),d[f]=d[f].substring(0,j));for(let c=0;c<h;c++)g+="\t";let l=c.selectionStart;document.execCommand("insertText",!1,"\n"+g),c.selectionStart=l+h+1,c.selectionEnd=l+h+1,a.update(c.value),c.scrollLeft=0;let m=+getComputedStyle(c).lineHeight.split(0,-2);c.scrollTop+=m==NaN&&"px"==getComputedStyle(c).lineHeight.split(-2)?m:20}};

package/plugins/prism-line-numbers.css

@@ -0,0 +1,20 @@
+/**
+ * Allows code-input elements to be used with the Prism.js line-numbers plugin, as long as the code-input element 
+ * or a parent element of it has the CSS class `line-numbers`.
+ * https://prismjs.com/plugins/line-numbers/
+ * Files: prism-line-numbers.css
+ */
+/* Update padding to match line-numbers plugin */
+code-input.line-numbers textarea, code-input.line-numbers.code-input_pre-element-styled pre,
+.line-numbers code-input textarea, .line-numbers code-input.code-input_pre-element-styled pre {
+  padding-top: 1em!important;
+  padding-bottom: 1em!important;
+  padding-right: 1em!important;
+  padding-left: 3.8em!important;
+}
+
+/* Remove unnecessary, interfering padding values */
+code-input.line-numbers, code-input.line-numbers.code-input_pre-element-styled code,
+.line-numbers code-input, .line-numbers code-input.code-input_pre-element-styled code{
+  padding: 0;
+}

package/plugins/prism-line-numbers.min.css

@@ -0,0 +1 @@
+.line-numbers code-input textarea,.line-numbers code-input.code-input_pre-element-styled pre,code-input.line-numbers textarea,code-input.line-numbers.code-input_pre-element-styled pre{padding-top:1em!important;padding-bottom:1em!important;padding-right:1em!important;padding-left:3.8em!important}.line-numbers code-input,.line-numbers code-input.code-input_pre-element-styled code,code-input.line-numbers,code-input.line-numbers.code-input_pre-element-styled code{padding:0}

package/plugins/special-chars.css

@@ -0,0 +1,98 @@
+/**
+ * Render special characters and control characters as a symbol with their hex code.
+ * Files: special-chars.js, special-chars.css
+ */
+
+/* Main styling */
+
+:root, body { /* Font for hex chars */
+    --code-input_special-chars_0: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABtJREFUGFdjZGBgYPj///9/RhCAMcA0bg6yHgAPmh/6BoxTcQAAAABJRU5ErkJgggAA');
+    --code-input_special-chars_1: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABZJREFUGFdjZGBgYPj///9/RhAggwMAitIUBr9U6sYAAAAASUVORK5CYII=');
+    --code-input_special-chars_2: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB9JREFUGFdj/P///38GKGCEMUCCjCgyYBFGRrAKFBkAuLYT9kYcIu0AAAAASUVORK5CYII=');
+    --code-input_special-chars_3: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABhJREFUGFdj/P///38GKGCEMUCCjMTJAACYiBPyG8sfAgAAAABJRU5ErkJggg==');
+    --code-input_special-chars_4: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdj/P///39GRkZGMI3BYYACRhgDrAKZAwAYxhvyz0DRIQAAAABJRU5ErkJggg==');
+    --code-input_special-chars_5: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACJJREFUGFdj/P///38GKGAEcRgZGRlBfDAHLgNjgFUgywAAuR4T9hxJl2YAAAAASUVORK5CYII=');
+    --code-input_special-chars_6: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACBJREFUGFdj/P///38GKGAEcRgZGRlBfDAHQwasAlkGABcdF/Y4yco2AAAAAElFTkSuQmCC');
+    --code-input_special-chars_7: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABZJREFUGFdj/P///38GKGCEMUCCRHIAWMgT8kue3bQAAAAASUVORK5CYII=');
+    --code-input_special-chars_8: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABlJREFUGFdj/P///38GKGAEcRgZGSE0cTIAvHcb8v+mIfAAAAAASUVORK5CYII=');
+    --code-input_special-chars_9: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB9JREFUGFdj/P///38GKGAEcRgZGSE0igxMCVgGmQMAPqcX8hWL1K0AAAAASUVORK5CYII=');
+    --code-input_special-chars_A: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACBJREFUGFdjZGBgYPj///9/RhCAMcA0iADJggCmDEw5ALdxH/aGuYHqAAAAAElFTkSuQmCC');
+    --code-input_special-chars_B: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABlJREFUGFdj/P///38GBgYGRhAAceA0cTIAvc0b/vRDnVoAAAAASUVORK5CYII=');
+    --code-input_special-chars_C: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdjZGBgYPj///9/EM0IYjAyMjIS4CDrAQC57hP+uLwvFQAAAABJRU5ErkJggg==');
+    --code-input_special-chars_D: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABtJREFUGFdj/P///38GBgYGRhAAceA0fg5MDwAveh/6ToN9VwAAAABJRU5ErkJggg==');
+    --code-input_special-chars_E: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABxJREFUGFdj/P///38GKGAEcRgZGRlBfDCHsAwA2UwT+mVIH1MAAAAASUVORK5CYII=');
+    --code-input_special-chars_F: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdj/P///38GKGAEcRgZGRlBfDAHtwxMGQDZZhP+BnB1kwAAAABJRU5ErkJggg==');
+}
+
+.code-input_special-char_container { /* pre element */
+    font-size: 20px;
+}
+
+.code-input_special-char {
+    display: inline-block;
+    position: relative;
+    top: 0;
+    left: 0;
+    height: 1em;
+    /* width: set by JS */
+    overflow: hidden;
+    text-decoration: none;
+    text-shadow: none;
+    vertical-align: middle;
+    outline: 0.1px solid currentColor;
+
+    --hex-0: var(
+    --code-input_special-chars_0);
+    --hex-1: var(
+    --code-input_special-chars_0);
+    --hex-2: var(
+    --code-input_special-chars_0);
+    --hex-3: var(
+    --code-input_special-chars_0);
+}
+
+/* Default - Two bytes - 4 hex chars */
+
+.code-input_special-char::before {
+    margin-left: 50%;
+    transform: translate(-50%, 0);
+    content: " ";
+    
+    background-color: var(--code-input_special-char_color, currentColor);
+    image-rendering: pixelated;
+    display: inline-block;
+    width: calc(100%-2px);
+    height: 100%;
+
+    mask-image: var(--hex-0), var(--hex-1), var(--hex-2), var(--hex-3);
+    mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
+    mask-size: 40%, 40%, 40%, 40%;
+    mask-position: 10% 10%, 90% 10%, 10% 90%, 90% 90%;
+
+    -webkit-mask-image: var(--hex-0), var(--hex-1), var(--hex-2), var(--hex-3);
+    -webkit-mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
+    -webkit-mask-size: min(40%, 0.25em), min(40%, 0.25em), min(40%, 0.25em), min(40%, 0.25em);
+    -webkit-mask-position: 10% 10%, min(90%, 0.5em) 10%, 10% 90%, min(90%, 0.5em) 90%;
+}
+
+.code-input_special-char_zero-width {
+    z-index: 1;
+    width: 1em;
+    margin-left: -0.5em;
+    margin-right: -0.5em;
+    position: relative;
+
+    opacity: 0.75;
+}
+
+/* One byte - 2 hex chars */
+.code-input_special-char_one-byte::before {
+    height: 1.5em;
+    top: -1em;
+    content: attr(data-hex2);
+}
+.code-input_special-char_one-byte::after {
+    height: 1.5em;
+    bottom: -1em;
+    content: attr(data-hex3);
+}