@webcoder49/code-input 2.0.3 → 2.2.1

package/plugins/find-and-replace.min.js

@@ -0,0 +1 @@
+codeInput.plugins.FindAndReplace=class extends codeInput.Plugin{useCtrlF=!1;useCtrlH=!1;constructor(a=!0,b=!0){super([]),this.useCtrlF=a,this.useCtrlH=b}afterElementsAdded(a){const b=a.textareaElement;this.useCtrlF&&b.addEventListener("keydown",b=>{this.checkCtrlF(a,b)}),this.useCtrlH&&b.addEventListener("keydown",b=>{this.checkCtrlH(a,b)})}afterHighlight(a){a.pluginData.findAndReplace==null||a.pluginData.findAndReplace.dialog==null||a.pluginData.findAndReplace.dialog.classList.contains("code-input_find-and-replace_hidden-dialog")||(a.pluginData.findAndReplace.dialog.findMatchState.rehighlightMatches(),this.updateMatchDescription(a.pluginData.findAndReplace.dialog),0==a.pluginData.findAndReplace.dialog.findMatchState.numMatches&&a.pluginData.findAndReplace.dialog.findInput.classList.add("code-input_find-and-replace_error"))}text2RegExp(a,b,c){return new RegExp(c?a:a.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),b?"g":"gi")}updateMatchDescription(a){a.matchDescription.textContent=0==a.findInput.value.length?"Search for matches in your code.":0>=a.findMatchState.numMatches?"No matches.":1==a.findMatchState.numMatches?"1 match found.":`${a.findMatchState.focusedMatchID+1} of ${a.findMatchState.numMatches} matches.`}updateFindMatches(a){let b=a.findInput.value;setTimeout(()=>{if(b==a.findInput.value){if(a.findMatchState.clearMatches(),0<b.length){try{a.findMatchState.updateMatches(this.text2RegExp(a.findInput.value,a.findCaseSensitiveCheckbox.checked,a.findRegExpCheckbox.checked))}catch(b){if(b instanceof SyntaxError){a.findInput.classList.add("code-input_find-and-replace_error");let c=b.message.split(": ");return void(a.matchDescription.textContent="Error: "+c[c.length-1])}throw b}0<a.findMatchState.numMatches?a.findInput.classList.remove("code-input_find-and-replace_error"):a.findInput.classList.add("code-input_find-and-replace_error")}this.updateMatchDescription(a)}},100)}checkFindPrompt(a,b,c){"Enter"==c.key&&(a.findMatchState.nextMatch(),this.updateMatchDescription(a))}checkReplacePrompt(a,b,c){"Enter"==c.key&&(a.findMatchState.replaceOnce(a.replaceInput.value),this.updateMatchDescription(a))}cancelPrompt(a,b,c){c.preventDefault(),a.textarea.focus(),0<a.findMatchState.numMatches?(b.textareaElement.selectionStart=a.findMatchState.matchStartIndexes[a.findMatchState.focusedMatchID],b.textareaElement.selectionEnd=a.findMatchState.matchEndIndexes[a.findMatchState.focusedMatchID]):(b.textareaElement.selectionStart=a.selectionStart,b.textareaElement.selectionEnd=a.selectionEnd),a.findMatchState.clearMatches(),a.classList.add("code-input_find-and-replace_hidden-dialog")}showPrompt(a,b){if(a.pluginData.findAndReplace==null||a.pluginData.findAndReplace.dialog==null){const c=a.textareaElement,d=document.createElement("div"),e=document.createElement("input"),f=document.createElement("input"),g=document.createElement("input"),h=document.createElement("code"),i=document.createElement("input"),j=document.createElement("details"),k=document.createElement("summary"),l=document.createElement("div"),m=document.createElement("button"),n=document.createElement("button"),o=document.createElement("button"),p=document.createElement("button"),q=document.createElement("span");l.appendChild(m),l.appendChild(n),l.appendChild(o),l.appendChild(p),l.appendChild(q),d.appendChild(l),d.appendChild(e),d.appendChild(g),d.appendChild(f),d.appendChild(h),j.appendChild(k),j.appendChild(i),d.appendChild(j),d.className="code-input_find-and-replace_dialog",e.spellcheck=!1,e.placeholder="Find",f.setAttribute("type","checkbox"),f.title="Match Case Sensitive",f.classList.add("code-input_find-and-replace_case-sensitive-checkbox"),g.setAttribute("type","checkbox"),g.title="Use JavaScript Regular Expression",g.classList.add("code-input_find-and-replace_reg-exp-checkbox"),h.textContent="Search for matches in your code.",h.classList.add("code-input_find-and-replace_match-description"),k.innerText="Replace",i.spellcheck=!1,i.placeholder="Replace with",m.innerText="\u2193",m.title="Find Next Occurence",n.innerText="\u2191",n.title="Find Previous Occurence",o.className="code-input_find-and-replace_button-hidden",o.innerText="Replace",o.title="Replace This Occurence",p.className="code-input_find-and-replace_button-hidden",p.innerText="Replace All",p.title="Replace All Occurences",m.addEventListener("click",a=>{a.preventDefault(),d.findMatchState.nextMatch(),this.updateMatchDescription(d)}),n.addEventListener("click",()=>{event.preventDefault(),d.findMatchState.previousMatch(),this.updateMatchDescription(d)}),o.addEventListener("click",a=>{a.preventDefault(),d.findMatchState.replaceOnce(i.value),o.focus()}),p.addEventListener("click",a=>{a.preventDefault(),d.findMatchState.replaceAll(i.value),p.focus()}),j.addEventListener("toggle",()=>{o.classList.toggle("code-input_find-and-replace_button-hidden"),p.classList.toggle("code-input_find-and-replace_button-hidden")}),d.findMatchState=new codeInput.plugins.FindAndReplace.FindMatchState(a),d.codeInput=a,d.textarea=c,d.findInput=e,d.findCaseSensitiveCheckbox=f,d.findRegExpCheckbox=g,d.matchDescription=h,d.replaceInput=i,d.replaceDropdown=j,this.checkCtrlH&&e.addEventListener("keydown",a=>{a.ctrlKey&&"h"==a.key&&(a.preventDefault(),j.setAttribute("open",!0))}),e.addEventListener("keypress",a=>{"Enter"==a.key&&a.preventDefault()}),i.addEventListener("keypress",a=>{"Enter"==a.key&&a.preventDefault()}),d.addEventListener("keyup",b=>{"Escape"==b.key&&this.cancelPrompt(d,a,b)}),e.addEventListener("keyup",b=>{this.checkFindPrompt(d,a,b)}),e.addEventListener("input",()=>{this.updateFindMatches(d)}),f.addEventListener("click",()=>{this.updateFindMatches(d)}),g.addEventListener("click",()=>{this.updateFindMatches(d)}),i.addEventListener("keyup",b=>{this.checkReplacePrompt(d,a,b),i.focus()}),q.addEventListener("click",b=>{this.cancelPrompt(d,a,b)}),a.dialogContainerElement.appendChild(d),a.pluginData.findAndReplace={dialog:d},e.focus(),b&&j.setAttribute("open",!0),d.selectionStart=a.textareaElement.selectionStart,d.selectionEnd=a.textareaElement.selectionEnd}else a.pluginData.findAndReplace.dialog.classList.remove("code-input_find-and-replace_hidden-dialog"),a.pluginData.findAndReplace.dialog.findInput.focus(),b?a.pluginData.findAndReplace.dialog.replaceDropdown.setAttribute("open",!0):a.pluginData.findAndReplace.dialog.replaceDropdown.removeAttribute("open"),this.updateFindMatches(a.pluginData.findAndReplace.dialog),a.pluginData.findAndReplace.dialog.selectionStart=a.textareaElement.selectionStart,a.pluginData.findAndReplace.dialog.selectionEnd=a.textareaElement.selectionEnd}checkCtrlF(a,b){b.ctrlKey&&"f"==b.key&&(b.preventDefault(),this.showPrompt(a,!1))}checkCtrlH(a,b){b.ctrlKey&&"h"==b.key&&(b.preventDefault(),this.showPrompt(a,!0))}};const CODE_INPUT_FIND_AND_REPLACE_MATCH_BLOCK_SIZE=500;codeInput.plugins.FindAndReplace.FindMatchState=class{codeInput=null;lastValue=null;lastSearchRegexp=null;numMatches=0;focusedMatchID=0;matchStartIndexes=[];matchEndIndexes=[];focusedMatchStartIndex=0;matchBlocksHighlighted=[];constructor(a){this.focusedMatchStartIndex=a.textareaElement.selectionStart,this.codeInput=a}clearMatches(){this.numMatches=0,this.matchStartIndexes=[],this.matchEndIndexes=[];let a=this.codeInput.codeElement.querySelectorAll(".code-input_find-and-replace_temporary-span");for(let b=0;b<a.length;b++)a[b].parentElement.replaceChild(new Text(a[b].textContent),a[b]);let b=this.codeInput.codeElement.querySelectorAll(".code-input_find-and-replace_find-match");for(let a=0;a<b.length;a++)b[a].removeAttribute("data-code-input_find-and-replace_match-id"),b[a].classList.remove("code-input_find-and-replace_find-match"),b[a].classList.remove("code-input_find-and-replace_find-match-focused")}updateMatches(a){var b=Math.floor;this.lastSearchRegexp=a,this.lastValue=this.codeInput.value;let c,d=0;this.matchStartIndexes=[],this.matchEndIndexes=[],this.matchBlocksHighlighted=[];let e=b(this.focusedMatchID/CODE_INPUT_FIND_AND_REPLACE_MATCH_BLOCK_SIZE);for(let b=0;b<e;b++)this.matchBlocksHighlighted.push(!1);for(this.matchBlocksHighlighted.push(!0);null!==(c=a.exec(this.codeInput.value));){let a=c[0];if(0==a.length)throw SyntaxError("Causes an infinite loop");let e=b(d/CODE_INPUT_FIND_AND_REPLACE_MATCH_BLOCK_SIZE);this.matchBlocksHighlighted.length<e&&this.matchBlocksHighlighted.push(!1),this.matchBlocksHighlighted[e]&&this.highlightMatch(d,this.codeInput.codeElement,c.index,c.index+a.length),this.matchStartIndexes.push(c.index),this.matchEndIndexes.push(c.index+a.length),d++}this.numMatches=d,0<this.numMatches&&this.focusMatch()}rehighlightMatches(){this.updateMatches(this.lastSearchRegexp),this.focusMatch()}replaceOnce(a){0<this.numMatches&&a!=this.codeInput.value.substring(0,this.matchStartIndexes[this.focusedMatchID],this.matchEndIndexes[this.focusedMatchID])&&(this.focusedMatchStartIndex+=a.length,this.codeInput.textareaElement.focus(),this.codeInput.textareaElement.selectionStart=this.matchStartIndexes[this.focusedMatchID],this.codeInput.textareaElement.selectionEnd=this.matchEndIndexes[this.focusedMatchID],document.execCommand("insertText",!1,a))}replaceAll(a){const b=a.length;let c=0;for(let d=0;d<this.numMatches;d++)this.codeInput.textareaElement.focus(),this.codeInput.textareaElement.selectionStart=this.matchStartIndexes[d]+c,this.codeInput.textareaElement.selectionEnd=this.matchEndIndexes[d]+c,c+=b-(this.matchEndIndexes[d]-this.matchStartIndexes[d]),document.execCommand("insertText",!1,a)}nextMatch(){this.focusMatch((this.focusedMatchID+1)%this.numMatches)}previousMatch(){this.focusMatch((this.focusedMatchID+this.numMatches-1)%this.numMatches)}focusMatch(a=void 0){if(a===void 0){for(a=0;a<this.matchStartIndexes.length&&this.matchStartIndexes[a]<this.focusedMatchStartIndex;)a++;a>=this.matchStartIndexes.length&&(a=0)}this.focusedMatchStartIndex=this.matchStartIndexes[a],this.focusedMatchID=a;let b=this.codeInput.codeElement.querySelectorAll(".code-input_find-and-replace_find-match-focused");for(let c=0;c<b.length;c++)b[c].classList.remove("code-input_find-and-replace_find-match-focused");let c=Math.floor(a/CODE_INPUT_FIND_AND_REPLACE_MATCH_BLOCK_SIZE);if(!this.matchBlocksHighlighted[c]){this.matchBlocksHighlighted[c]=!0;for(let a=CODE_INPUT_FIND_AND_REPLACE_MATCH_BLOCK_SIZE*c;a<CODE_INPUT_FIND_AND_REPLACE_MATCH_BLOCK_SIZE*(c+1);a++)this.highlightMatch(a,this.codeInput.codeElement,this.matchStartIndexes[a],this.matchEndIndexes[a])}let d=this.codeInput.codeElement.querySelectorAll(`.code-input_find-and-replace_find-match[data-code-input_find-and-replace_match-id="${a}"]`);for(let b=0;b<d.length;b++)d[b].classList.add("code-input_find-and-replace_find-match-focused");0<d.length&&this.codeInput.scrollTo(d[0].offsetLeft-this.codeInput.offsetWidth/2,d[0].offsetTop-this.codeInput.offsetHeight/2)}highlightMatch(a,b,c,d){for(let e=0;e<b.childNodes.length;e++){let f=b.childNodes[e],g=f.textContent,h=!1;if(3==f.nodeType){if(e+1<b.childNodes.length&&3==b.childNodes[e+1].nodeType){b.childNodes[e+1].textContent=f.textContent+b.childNodes[e+1].textContent,b.removeChild(f),e--;continue}h=!0;let a=document.createElement("span");a.textContent=g,a.classList.add("code-input_find-and-replace_temporary-span"),b.replaceChild(a,f),f=a}if(0>=c){if(g.length>=d){if(h){let b=document.createElement("span");b.classList.add("code-input_find-and-replace_find-match"),b.setAttribute("data-code-input_find-and-replace_match-id",a),b.classList.add("code-input_find-and-replace_temporary-span"),b.textContent=g.substring(0,d),"\n"==b.textContent[0]&&b.classList.add("code-input_find-and-replace_start-newline");let c=g.substring(d);return f.textContent=c,f.insertAdjacentElement("beforebegin",b),void e++}return void this.highlightMatch(a,f,0,d)}f.classList.add("code-input_find-and-replace_find-match"),f.setAttribute("data-code-input_find-and-replace_match-id",a),"\n"==f.textContent[0]&&f.classList.add("code-input_find-and-replace_start-newline")}else if(g.length>c){if(!h)this.highlightMatch(a,f,c,d);else if(g.length>d){let b=document.createElement("span");b.classList.add("code-input_find-and-replace_temporary-span"),b.textContent=g.substring(0,c);let h=g.substring(c,d);f.textContent=h,f.classList.add("code-input_find-and-replace_find-match"),f.setAttribute("data-code-input_find-and-replace_match-id",a),"\n"==f.textContent[0]&&f.classList.add("code-input_find-and-replace_start-newline");let i=document.createElement("span");i.classList.add("code-input_find-and-replace_temporary-span"),i.textContent=g.substring(d),f.insertAdjacentElement("beforebegin",b),f.insertAdjacentElement("afterend",i),e++}else{let b=g.substring(0,c);f.textContent=b;let d=document.createElement("span");d.classList.add("code-input_find-and-replace_find-match"),d.setAttribute("data-code-input_find-and-replace_match-id",a),d.classList.add("code-input_find-and-replace_temporary-span"),d.textContent=g.substring(c),"\n"==d.textContent[0]&&d.classList.add("code-input_find-and-replace_start-newline"),f.insertAdjacentElement("afterend",d),e++}if(g.length>d)return}c-=g.length,d-=g.length}}};

package/plugins/go-to-line.css

@@ -0,0 +1,77 @@
+@keyframes code-input_go-to-line_roll-in {
+    0% {opacity: 0; transform: translateY(-34px);}
+    100% {opacity: 1; transform: translateY(0px);}
+}
+
+@keyframes code-input_go-to-line_roll-out {
+    0% {opacity: 1; transform: translateY(0px);}
+    100% {opacity: 0; transform: translateY(-34px);}
+}
+
+.code-input_go-to-line_dialog {
+  position: absolute;
+  top: 0; right: 14px;
+  height: 28px;
+  padding: 6px;
+  padding-top: 8px;
+  border: solid 1px #00000044;
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: 0 .2em 1em .2em rgba(0, 0, 0, 0.16);
+}
+
+.code-input_go-to-line_dialog:not(.code-input_go-to-line_hidden-dialog) {
+  animation: code-input_go-to-line_roll-in .2s;
+  opacity: 1;
+  pointer-events: all;
+}
+
+.code-input_go-to-line_dialog.code-input_go-to-line_hidden-dialog {
+  animation: code-input_go-to-line_roll-out .2s;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.code-input_go-to-line_dialog input::placeholder {
+  font-size: 80%;
+}
+
+.code-input_go-to-line_dialog input {
+  position: relative;
+  width: 240px; height: 32px; top: -3px;
+  font-size: large;
+  color: #000000aa;
+  border: 0;
+}
+
+.code-input_go-to-line_dialog input.code-input_go-to-line_error {
+  color: #ff0000aa;
+}
+
+.code-input_go-to-line_dialog input:focus {
+  outline: none;
+}
+
+/* Cancel icon */
+.code-input_go-to-line_dialog span {
+  display: inline-block;
+  width: 24px;
+  line-height: 24px;
+  font-family: system-ui;
+  font-size: 22px;
+  font-weight: 500;
+  text-align: center;
+  border-radius: 50%;
+  color: black;
+  opacity: 0.6;
+  vertical-align: top;
+}
+
+.code-input_go-to-line_dialog span:before {
+  content: "\00d7";
+}
+
+.code-input_go-to-line_dialog span:hover {
+  opacity: .8;
+  background-color: #00000018;
+}

package/plugins/go-to-line.js

@@ -0,0 +1,157 @@
+/**
+ * Add basic Go-To-Line (Ctrl+G by default) functionality to the code editor.
+ * Files: go-to-line.js / go-to-line.css
+ */
+codeInput.plugins.GoToLine = class extends codeInput.Plugin {
+    useCtrlG = false;
+
+    /**
+     * 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? If not, you can trigger it yourself using (instance of this plugin)`.showPrompt(code-input element)`.
+     */
+    constructor(useCtrlG = true) {
+        super([]); // No observed attributes
+        this.useCtrlG = useCtrlG;
+    }
+
+    /* 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) {
+        // 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(':');
+        if(querySplitByColons.length > 2) return dialog.input.classList.add('code-input_go-to-line_error');
+
+        if (event.key == 'Escape') return this.cancelPrompt(dialog, event);
+
+        if (dialog.input.value) {
+            if (!/^[0-9:]*$/.test(dialog.input.value) || lineNo < 1 || lineNo > maxLineNo) {
+                return dialog.input.classList.add('code-input_go-to-line_error');
+            } else {
+                // Check if line:column
+                if(querySplitByColons.length >= 2) {
+                    columnNo = Number(querySplitByColons[1]);
+                    maxColumnNo = lines[lineNo-1].length;
+                }
+                if(columnNo < 0 || columnNo > maxColumnNo) {
+                    return dialog.input.classList.add('code-input_go-to-line_error');
+                } else {
+                    dialog.input.classList.remove('code-input_go-to-line_error');
+                }
+            }
+        }
+
+        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.textarea.focus();
+
+        // 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');
+            const cancel = document.createElement('span');
+
+            dialog.appendChild(input);
+            dialog.appendChild(cancel);
+
+            dialog.className = 'code-input_go-to-line_dialog';
+            input.spellcheck = false;
+            input.placeholder = "Line:Column / Line no. then Enter";
+            dialog.codeInput = codeInput;
+            dialog.textarea = textarea;
+            dialog.input = input;
+
+            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); });
+
+            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.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);
+        }
+    }
+}

package/plugins/go-to-line.min.css

@@ -0,0 +1 @@
+@keyframes code-input_go-to-line_roll-in{0%{opacity:0;transform:translateY(-34px)}100%{opacity:1;transform:translateY(0)}}@keyframes code-input_go-to-line_roll-out{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-34px)}}.code-input_go-to-line_dialog{position:absolute;top:0;right:14px;height:28px;padding:6px;padding-top:8px;border:solid 1px #00000044;background-color:#fff;border-radius:6px;box-shadow:0 .2em 1em .2em rgba(0,0,0,.16)}.code-input_go-to-line_dialog:not(.code-input_go-to-line_hidden-dialog){animation:code-input_go-to-line_roll-in .2s;opacity:1;pointer-events:all}.code-input_go-to-line_dialog.code-input_go-to-line_hidden-dialog{animation:code-input_go-to-line_roll-out .2s;opacity:0;pointer-events:none}.code-input_go-to-line_dialog input::placeholder{font-size:80%}.code-input_go-to-line_dialog input{position:relative;width:240px;height:32px;top:-3px;font-size:large;color:#000000aa;border:0}.code-input_go-to-line_dialog input.code-input_go-to-line_error{color:#ff0000aa}.code-input_go-to-line_dialog input:focus{outline:0}.code-input_go-to-line_dialog span{display:inline-block;width:24px;line-height:24px;font-family:system-ui;font-size:22px;font-weight:500;text-align:center;border-radius:50%;color:#000;opacity:.6;vertical-align:top}.code-input_go-to-line_dialog span:before{content:"\00d7"}.code-input_go-to-line_dialog span:hover{opacity:.8;background-color:#00000018}

package/plugins/go-to-line.min.js

@@ -0,0 +1 @@
+codeInput.plugins.GoToLine=class extends codeInput.Plugin{useCtrlG=!1;constructor(a=!0){super([]),this.useCtrlG=a}afterElementsAdded(a){const b=a.textareaElement;this.useCtrlG&&b.addEventListener("keydown",b=>{this.checkCtrlG(a,b)})}checkPrompt(a,b){const c=a.textarea.value.split("\n"),d=c.length,e=+a.input.value.split(":")[0];let f=0,g=1;const h=a.input.value.split(":");if(2<h.length)return a.input.classList.add("code-input_go-to-line_error");if("Escape"==b.key)return this.cancelPrompt(a,b);if(a.input.value){if(!/^[0-9:]*$/.test(a.input.value)||1>e||e>d)return a.input.classList.add("code-input_go-to-line_error");if(2<=h.length&&(f=+h[1],g=c[e-1].length),0>f||f>g)return a.input.classList.add("code-input_go-to-line_error");a.input.classList.remove("code-input_go-to-line_error")}"Enter"==b.key&&(this.goTo(a.textarea,e,f),this.cancelPrompt(a,b))}cancelPrompt(a,b){b.preventDefault(),a.textarea.focus(),a.classList.add("code-input_go-to-line_hidden-dialog"),a.input.value=""}showPrompt(a){if(a.pluginData.goToLine==null||a.pluginData.goToLine.dialog==null){const b=a.textareaElement,c=document.createElement("div"),d=document.createElement("input"),e=document.createElement("span");c.appendChild(d),c.appendChild(e),c.className="code-input_go-to-line_dialog",d.spellcheck=!1,d.placeholder="Line:Column / Line no. then Enter",c.codeInput=a,c.textarea=b,c.input=d,d.addEventListener("keypress",a=>{"Enter"==a.key&&a.preventDefault()}),d.addEventListener("keyup",a=>this.checkPrompt(c,a)),e.addEventListener("click",a=>{this.cancelPrompt(c,a)}),a.dialogContainerElement.appendChild(c),a.pluginData.goToLine={dialog:c},d.focus()}else a.pluginData.goToLine.dialog.classList.remove("code-input_go-to-line_hidden-dialog"),a.pluginData.goToLine.dialog.input.focus()}goTo(a,b,c=0){let d,e,f,g,h=-1,i=a.value.split("\n");if(0<b&&b<=i.length){if(a.computedStyleMap?(d=a.computedStyleMap().get("font-size").value,e=d*a.computedStyleMap().get("line-height").value):(d=document.defaultView.getComputedStyle(a,null).getPropertyValue("font-size").split("px")[0],e=document.defaultView.getComputedStyle(a,null).getPropertyValue("line-height").split("px")[0]),f=(3<b?b-3:1)*e,g=(e-d)/2,1<b&&(h=i.slice(0,b-1).join("\n").length),0==c)do h++;while("\n"!=a.value[h]&&/\s/.test(a.value[h]));else h+=1+c-1;a.scrollTop=f-g,a.setSelectionRange(h,h),a.click()}}checkCtrlG(a,b){b.ctrlKey&&"g"==b.key&&(b.preventDefault(),this.showPrompt(a))}};

package/plugins/indent.js

@@ -1,154 +1,238 @@
 /**
- * Adds indentation using the `Tab` key, and auto-indents after a newline, as well as making it 
+ * 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
  */
 codeInput.plugins.Indent = class extends codeInput.Plugin {
-    constructor() {
+
+    bracketPairs = {}; // No bracket-auto-indentation used when {}
+    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.
+     * @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.
+     */
+    constructor(defaultSpaces=false, numSpaces=4, bracketPairs={"(": ")", "[": "]", "{": "}"}) {
         super([]); // No observed attributes
+
+        this.bracketPairs = bracketPairs;
+        if(defaultSpaces) {
+            this.indentation = "";
+            for(let i = 0; i < numSpaces; i++) {
+                this.indentation += " ";
+            }
+            this.indentationNumChars = numSpaces;
+        }
     }
 
     /* Add keystroke events */
     afterElementsAdded(codeInput) {
-        let textarea = codeInput.querySelector("textarea");
-        textarea.addEventListener('keydown', (event) => { this.check_tab(codeInput, event); this.check_enter(codeInput, event); });
+        let textarea = codeInput.textareaElement;
+        textarea.addEventListener('keydown', (event) => { this.checkTab(codeInput, event); this.checkEnter(codeInput, event); this.checkBackspace(codeInput, event); });
+        textarea.addEventListener('beforeinput', (event) => { this.checkCloseBracket(codeInput, event); });
     }
 
-    /* Event handlers */
-    check_tab(codeInput, event) {
+    /* Deal with the Tab key causing indentation, and Tab+Selection indenting / Shift+Tab+Selection unindenting lines */
+    checkTab(codeInput, event) {
         if(event.key != "Tab") {
             return;
         }
-        let input_element = codeInput.querySelector("textarea");
-        let code = input_element.value;
+        let inputElement = codeInput.textareaElement;
         event.preventDefault(); // stop normal
         
-        if(!event.shiftKey && input_element.selectionStart == input_element.selectionEnd) {
-            // Just place a tab here.
-            document.execCommand("insertText", false, "\t");
+        if(!event.shiftKey && inputElement.selectionStart == inputElement.selectionEnd) {
+            // Just place a tab/spaces here.
+            document.execCommand("insertText", false, this.indentation);
 
         } else {
-            let lines = input_element.value.split("\n");
-            let letter_i = 0;
+            let lines = inputElement.value.split("\n");
+            let letterI = 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 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
 
-            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
+            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][0] == "\t") {
-                            // Remove first tab
-                            input_element.selectionStart = letter_i;
-                            input_element.selectionEnd = letter_i+1;
+                        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(selection_start > letter_i) { // Indented outside selection
-                                selection_start--;
+                            if(selectionStartI > letterI) { // Indented outside selection
+                                selectionStartI = Math.max(selectionStartI - this.indentationNumChars, letterI); // Don't move to before indent
                             }
-                            selection_end--;
-                            letter_i--;
+                            selectionEndI -= this.indentationNumChars;
+                            letterI -= this.indentationNumChars;
                         }
                     } else {
                         // Add tab at start
-                        input_element.selectionStart = letter_i;
-                        input_element.selectionEnd = letter_i;
-                        document.execCommand("insertText", false, "\t");
+                        inputElement.selectionStart = letterI;
+                        inputElement.selectionEnd = letterI;
+                        document.execCommand("insertText", false, this.indentation);
 
                         // Change selection
-                        if(selection_start > letter_i) { // Indented outside selection
-                            selection_start++;
+                        if(selectionStartI > letterI) { // Indented outside selection
+                            selectionStartI += this.indentationNumChars;
                         }
-                        selection_end++;
-                        letter_i++;
+                        selectionEndI += this.indentationNumChars;
+                        letterI += this.indentationNumChars;
                     }                    
                 }
                 
-                letter_i += lines[i].length+1; // newline counted
+                letterI += lines[i].length+1; // newline counted
             }
-            // input_element.value = lines.join("\n");
 
             // move cursor
-            input_element.selectionStart = selection_start;
-            input_element.selectionEnd = selection_end;
+            inputElement.selectionStart = selectionStartI;
+            inputElement.selectionEnd = selectionEndI;
         }
 
-        codeInput.update(input_element.value);
+        codeInput.value = inputElement.value;
     }
 
-    check_enter(codeInput, event) {
+    /* Deal with new lines retaining indentation */
+    checkEnter(codeInput, event) {
         if(event.key != "Enter") {
             return;
         }
-        event.preventDefault(); // stop normal
+        event.preventDefault(); // Stop normal \n only
 
-        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;
+        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++) {
-            letter_i += lines[i].length + 1;
-            if(input_element.selectionEnd <= letter_i) {
-                current_line = 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 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++;
+        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 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);
+        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
-        for (let i = 0; i < number_indents; i++) {
-            new_line += "\t";
+        for (let i = 0; i < numberIndents; i++) {
+            newLine += this.indentation;
         }
 
         // save the current cursor position
-        let selection_start = input_element.selectionStart;
-        let selection_end = input_element.selectionEnd;
+        let selectionStartI = inputElement.selectionStart;
 
-        document.execCommand("insertText", false, "\n" + new_line); // Write new line, including auto-indentation
+        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
 
         // 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;
+        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.update(input_element.value);
+        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(event.key != "Backspace" || this.indentationNumChars == 1) {
+            return; // Normal backspace when indentation of 1
+        }
 
-        // 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
+        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, "");
+                }
+            }
         }
     }
 }

package/plugins/indent.min.js

@@ -1 +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,m=c.selectionEnd;document.execCommand("insertText",!1,"\n"+g),c.selectionStart=l+h+1,c.selectionEnd=l+h+1,a.update(c.value),c.scrollLeft=0;let n=+getComputedStyle(c).lineHeight.split(0,-2);c.scrollTop+=n==NaN&&"px"==getComputedStyle(c).lineHeight.split(-2)?n:20}};
+codeInput.plugins.Indent=class extends codeInput.Plugin{bracketPairs={};indentation="\t";indentationNumChars=1;constructor(a=!1,b=4,c={"(":")","[":"]","{":"}"}){if(super([]),this.bracketPairs=c,a){this.indentation="";for(let a=0;a<b;a++)this.indentation+=" ";this.indentationNumChars=b}}afterElementsAdded(a){let b=a.textareaElement;b.addEventListener("keydown",b=>{this.checkTab(a,b),this.checkEnter(a,b),this.checkBackspace(a,b)}),b.addEventListener("beforeinput",b=>{this.checkCloseBracket(a,b)})}checkTab(a,b){var c=Math.max;if("Tab"==b.key){let d=a.textareaElement;if(b.preventDefault(),!b.shiftKey&&d.selectionStart==d.selectionEnd)document.execCommand("insertText",!1,this.indentation);else{let a=d.value.split("\n"),e=0,f=d.selectionStart,g=d.selectionEnd;for(let h=0;h<a.length;h++)(f<=e+a[h].length&&g>=e+1||f==g&&f<=e+a[h].length+1&&g>=e)&&(b.shiftKey?a[h].substring(0,this.indentationNumChars)==this.indentation&&(d.selectionStart=e,d.selectionEnd=e+this.indentationNumChars,document.execCommand("delete",!1,""),f>e&&(f=c(f-this.indentationNumChars,e)),g-=this.indentationNumChars,e-=this.indentationNumChars):(d.selectionStart=e,d.selectionEnd=e,document.execCommand("insertText",!1,this.indentation),f>e&&(f+=this.indentationNumChars),g+=this.indentationNumChars,e+=this.indentationNumChars)),e+=a[h].length+1;d.selectionStart=f,d.selectionEnd=g}a.value=d.value}}checkEnter(a,b){if("Enter"!=b.key)return;b.preventDefault();let c=a.textareaElement,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&&d[f].substring(c,c+this.indentationNumChars)==this.indentation;c+=this.indentationNumChars)h++;let k="";j!=d[f].length&&(k=d[f].substring(j),d[f]=d[f].substring(0,j));let l=!1,m="";if(null!=this.bracketPairs)for(let a in this.bracketPairs)if(d[f][d[f].length-1]==a){let b=this.bracketPairs[a];if(0<k.length&&k[0]==b){l=!0;for(let a=0;a<h+1;a++)m+=this.indentation}else h++;break}else{let b=this.bracketPairs[a];if(0<k.length&&k[0]==b){h--;break}}for(let c=0;c<h;c++)g+=this.indentation;let n=c.selectionStart;l&&(document.execCommand("insertText",!1,"\n"+m),h+=1),document.execCommand("insertText",!1,"\n"+g),c.selectionStart=n+h*this.indentationNumChars+1,c.selectionEnd=c.selectionStart;let o=+getComputedStyle(c).paddingTop.replace("px",""),p=+getComputedStyle(c).lineHeight.replace("px",""),q=+getComputedStyle(a).height.replace("px","");f*p+2*p+o>=c.scrollTop+q&&a.scrollBy(0,+getComputedStyle(c).lineHeight.replace("px","")),a.value=c.value}checkBackspace(a,b){if("Backspace"==b.key&&1!=this.indentationNumChars){let c=a.textareaElement;c.selectionStart==c.selectionEnd&&a.value.substring(c.selectionStart-this.indentationNumChars,c.selectionStart)==this.indentation&&(c.selectionStart-=this.indentationNumChars,b.preventDefault(),document.execCommand("delete",!1,""))}}checkCloseBracket(a,b){if(a.textareaElement.selectionStart==a.textareaElement.selectionEnd)for(let c in this.bracketPairs){let d=this.bracketPairs[c];b.data==d&&a.value.substring(a.textareaElement.selectionStart-this.indentationNumChars,a.textareaElement.selectionStart)==this.indentation&&(a.textareaElement.selectionStart-=this.indentationNumChars,document.execCommand("delete",!1,""))}}};

package/plugins/special-chars.css

@@ -24,10 +24,6 @@
     --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;