@webcoder49/code-input 2.1.0 → 2.2.1

package/package.json

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

package/plugins/README.md

@@ -7,6 +7,14 @@
 
 ---
 
+### Auto-Close Brackets
+Automatically close pairs of brackets/quotes/other syntaxes in code, but also optionally choose the brackets this
+is activated for.
+
+Files: [auto-close-brackets.js](./auto-close-brackets.js)
+
+[🚀 *CodePen Demo*](https://codepen.io/WebCoder49/pen/qBgGGKR)
+
 ### Autocomplete
 Display a popup under the caret using the text in the code-input element. This works well with autocomplete suggestions.
 
@@ -21,22 +29,29 @@ 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))
+### Find and Replace
+Add Find-and-Replace (Ctrl+F for find, Ctrl+H for replace by default, or when JavaScript triggers it) functionality to the code editor.
+
+Files: [find-and-replace.js](./find-and-replace.js) / [find-and-replace.css](./find-and-replace.css)
+
+[🚀 *CodePen Demo*](https://codepen.io/WebCoder49/pen/oNVVBBz)
+
+### Go To Line
+Add a feature to go to a specific line when a line number is given (or column as well, in the format line no:column no) that appears when (optionally) Ctrl+G is pressed or when JavaScript triggers it.
 
-Files: [debounce-update.js](./debounce-update.js)
+Files: [go-to-line.js](./go-to-line.js) / [go-to-line.css](./go-to-line.css)
 
-[🚀 *CodePen Demo*](https://codepen.io/WebCoder49/pen/GRXyxzV)
+[🚀 *CodePen Demo*](https://codepen.io/WebCoder49/pen/YzBMOXP)
 
 ### 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. **Supports tab characters and custom numbers of spaces as indentation.**
+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. **Supports tab characters and custom numbers of spaces as indentation, as well as (optionally) brackets typed affecting indentation.**
 
 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/)
+Allow 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)
 

package/plugins/auto-close-brackets.js

@@ -0,0 +1,61 @@
+/**
+ * Automatically close pairs of brackets/quotes/other syntaxes in code, but also optionally choose the brackets this
+ * is activated for.
+ * Files: auto-close-brackets.js
+ */
+codeInput.plugins.AutoCloseBrackets = class extends codeInput.Plugin {
+    bracketPairs = [];
+    bracketsOpenedStack = []; // Each item [closing bracket string, opening bracket location] Innermost at right so can know which brackets should be ignored when retyped
+
+    /**
+     * Create an auto-close brackets plugin to pass into a template
+     * @param {Object} bracketPairs Opening brackets mapped to closing brackets, default and example {"(": ")", "[": "]", "{": "}", '"': '"'}. All brackets must only be one character.
+     */
+    constructor(bracketPairs={"(": ")", "[": "]", "{": "}", '"': '"'}) {
+        super([]); // No observed attributes
+
+        this.bracketPairs = bracketPairs;
+    }
+
+    /* Add keystroke events */
+    afterElementsAdded(codeInput) {
+        codeInput.textareaElement.addEventListener('keydown', (event) => { this.checkBackspace(codeInput, event) });
+        codeInput.textareaElement.addEventListener('beforeinput', (event) => { this.checkBrackets(codeInput, event); });
+    }
+
+    /* Deal with the automatic creation of closing bracket when opening brackets are typed, and the ability to "retype" a closing
+    bracket where one has already been placed. */
+    checkBrackets(codeInput, event) {
+        if(event.data == codeInput.textareaElement.value[codeInput.textareaElement.selectionStart]) {
+            // Check if a closing bracket is typed
+            for(let openingBracket in this.bracketPairs) {
+                let closingBracket = this.bracketPairs[openingBracket];
+                if(event.data == closingBracket) {
+                    // "Retype" a closing bracket, i.e. just move caret
+                    codeInput.textareaElement.selectionStart = codeInput.textareaElement.selectionEnd += 1;
+                    event.preventDefault();
+                    break;
+                }
+            }
+        } else if(event.data in this.bracketPairs) {
+            // Opening bracket typed; Create bracket pair
+            let closingBracket = this.bracketPairs[event.data];
+            // Insert the closing bracket
+            document.execCommand("insertText", false, closingBracket);
+            // Move caret before the inserted closing bracket
+            codeInput.textareaElement.selectionStart = codeInput.textareaElement.selectionEnd -= 1;
+        }
+    }
+
+    /* Deal with cases where a backspace deleting an opening bracket deletes the closing bracket straight after it as well */
+    checkBackspace(codeInput, event) {
+        if(event.key == "Backspace" && codeInput.textareaElement.selectionStart == codeInput.textareaElement.selectionEnd) {
+            let closingBracket = this.bracketPairs[codeInput.textareaElement.value[codeInput.textareaElement.selectionStart-1]];
+            if(closingBracket != undefined && codeInput.textareaElement.value[codeInput.textareaElement.selectionStart] == closingBracket) {
+                // Opening bracket being deleted so delete closing bracket as well
+                codeInput.textareaElement.selectionEnd = codeInput.textareaElement.selectionStart + 1;
+                codeInput.textareaElement.selectionStart -= 1;
+            }
+        }
+    }
+}

package/plugins/auto-close-brackets.min.js

@@ -0,0 +1 @@
+codeInput.plugins.AutoCloseBrackets=class extends codeInput.Plugin{bracketPairs=[];bracketsOpenedStack=[];constructor(a={"(":")","[":"]","{":"}",'"':"\""}){super([]),this.bracketPairs=a}afterElementsAdded(a){a.textareaElement.addEventListener("keydown",b=>{this.checkBackspace(a,b)}),a.textareaElement.addEventListener("beforeinput",b=>{this.checkBrackets(a,b)})}checkBrackets(a,b){if(b.data==a.textareaElement.value[a.textareaElement.selectionStart])for(let c in this.bracketPairs){let d=this.bracketPairs[c];if(b.data==d){a.textareaElement.selectionStart=a.textareaElement.selectionEnd+=1,b.preventDefault();break}}else if(b.data in this.bracketPairs){let c=this.bracketPairs[b.data];document.execCommand("insertText",!1,c),a.textareaElement.selectionStart=a.textareaElement.selectionEnd-=1}}checkBackspace(a,b){if("Backspace"==b.key&&a.textareaElement.selectionStart==a.textareaElement.selectionEnd){let b=this.bracketPairs[a.textareaElement.value[a.textareaElement.selectionStart-1]];b!=null&&a.textareaElement.value[a.textareaElement.selectionStart]==b&&(a.textareaElement.selectionEnd=a.textareaElement.selectionStart+1,a.textareaElement.selectionStart-=1)}}};

package/plugins/autocomplete.js

@@ -4,14 +4,14 @@
  */
 codeInput.plugins.Autocomplete = class extends codeInput.Plugin {
     /**
-     * Pass in a function to display the popup that takes in (popup element, textarea, textarea.selectionEnd).
+     * Pass in a function to create a plugin that displays the popup that takes in (popup element, textarea, textarea.selectionEnd).
      * @param {function} updatePopupCallback  a function to display the popup that takes in (popup element, textarea, textarea.selectionEnd).
      */
     constructor(updatePopupCallback) {
         super([]); // No observed attributes
         this.updatePopupCallback = updatePopupCallback;
     }
-    /* When a key is pressed, or scrolling occurs, update the autocomplete */
+    /* When a key is pressed, or scrolling occurs, update the popup position */
     updatePopup(codeInput, onlyScrolled) {
         let textarea = codeInput.textareaElement;
         let caretCoords = this.getCaretCoordinates(codeInput, textarea, textarea.selectionEnd, onlyScrolled);
@@ -23,20 +23,27 @@ codeInput.plugins.Autocomplete = class extends codeInput.Plugin {
             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) */
+    /* Create the popup 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 testPosPre = document.createElement("pre");
+        testPosPre.setAttribute("aria-hidden", "true"); // Hide for screen readers
+        if(codeInput.template.preElementStyled) {
+            testPosPre.classList.add("code-input_autocomplete_testpos");
+            codeInput.appendChild(testPosPre); // Styled like first pre, but first pre found to update    
+        } else {
+            let testPosCode = document.createElement("code");
+            testPosCode.classList.add("code-input_autocomplete_testpos");
+            testPosPre.appendChild(testPosCode);
+            codeInput.appendChild(testPosPre); // Styled like first pre, but first pre found to update
+        }
+        
         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
+        textarea.addEventListener("input", () => { this.updatePopup(codeInput, false)});
+        textarea.addEventListener("click", () => { this.updatePopup(codeInput, false)});
     }
     /**
      * Return the coordinates of the caret in a code-input
@@ -44,7 +51,7 @@ codeInput.plugins.Autocomplete = class extends codeInput.Plugin {
      * @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 
+     * @returns {Object} {"top": CSS top value in pixels, "left": CSS left value in pixels}
      */
     getCaretCoordinates(codeInput, textarea, charIndex, onlyScrolled) {
         let afterSpan;

package/plugins/autocomplete.min.js

@@ -1 +1 @@
-codeInput.plugins.Autocomplete=class extends codeInput.Plugin{constructor(a){super([]),this.updatePopupCallback=a}updatePopup(a,b){let c=a.textareaElement,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.textareaElement;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}}updatePopupCallback=function(){}};
+codeInput.plugins.Autocomplete=class extends codeInput.Plugin{constructor(a){super([]),this.updatePopupCallback=a}updatePopup(a,b){let c=a.textareaElement,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");if(c.setAttribute("aria-hidden","true"),a.template.preElementStyled)c.classList.add("code-input_autocomplete_testpos"),a.appendChild(c);else{let b=document.createElement("code");b.classList.add("code-input_autocomplete_testpos"),c.appendChild(b),a.appendChild(c)}let d=a.textareaElement;d.addEventListener("input",()=>{this.updatePopup(a,!1)}),d.addEventListener("click",()=>{this.updatePopup(a,!1)})}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}}updatePopupCallback=function(){}};

package/plugins/autodetect.js

@@ -13,16 +13,16 @@ codeInput.plugins.Autodetect = class extends codeInput.Plugin {
         resultElement.className = ""; // CODE
         resultElement.parentElement.className = ""; // PRE
     }
-    /* Get new language class and set `lang` attribute */
+    /* Get new language class and set `language` attribute */
     afterHighlight(codeInput) {
-        let resultElement = codeInput.codeElement;
-        let langClass = resultElement.className || resultElement.parentElement.className;
+        let langClass = codeInput.codeElement.className || codeInput.preElement.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("language");
             codeInput.removeAttribute("lang");
         } else {
-            codeInput.setAttribute("lang", lang);
+            codeInput.setAttribute("language", lang);
         }
     }
 }

package/plugins/autodetect.min.js

@@ -1 +1 @@
-codeInput.plugins.Autodetect=class extends codeInput.Plugin{constructor(){super([])}beforeHighlight(a){let b=a.codeElement;b.className="",b.parentElement.className=""}afterHighlight(a){let b=a.codeElement,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)}};
+codeInput.plugins.Autodetect=class extends codeInput.Plugin{constructor(){super([])}beforeHighlight(a){let b=a.codeElement;b.className="",b.parentElement.className=""}afterHighlight(a){let b=a.codeElement.className||a.preElement.className,c=b.match(/lang(\w|-)*/i)[0];c=c.split("-")[1],"undefined"==c?(a.removeAttribute("language"),a.removeAttribute("lang")):a.setAttribute("language",c)}};

package/plugins/find-and-replace.css

@@ -0,0 +1,145 @@
+/* Find functionality matches */
+.code-input_find-and-replace_find-match {
+  color: inherit;
+  text-shadow: none!important;
+  background-color: #ffff00!important;
+}
+.code-input_find-and-replace_find-match-focused, .code-input_find-and-replace_find-match-focused * {
+  background-color: #ff8800!important;
+  color: black!important;
+}
+.code-input_find-and-replace_start-newline::before {
+  content: "⤶";
+}
+
+/* Find-and-replace dialog */
+
+@keyframes code-input_find-and-replace_roll-in {
+    0% {opacity: 0; transform: translateY(-34px);}
+    100% {opacity: 1; transform: translateY(0px);}
+}
+
+@keyframes code-input_find-and-replace_roll-out {
+    0% {opacity: 1;top: 0;}
+    100% {opacity: 0;top: -34px;}
+}
+
+.code-input_find-and-replace_dialog {
+  position: absolute;
+  top: 0;
+  right: 14px;
+  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_find-and-replace_dialog:not(.code-input_find-and-replace_hidden-dialog) {
+  animation: code-input_find-and-replace_roll-in .2s;
+  opacity: 1;
+  pointer-events: all;
+}
+
+.code-input_find-and-replace_dialog.code-input_find-and-replace_hidden-dialog {
+  animation: code-input_find-and-replace_roll-out .2s;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.code-input_find-and-replace_dialog input::placeholder {
+  font-size: 80%;
+}
+
+.code-input_find-and-replace_dialog input {
+  position: relative;
+  width: 240px; height: 32px; top: -3px;
+  font-size: large;
+  color: #000000aa;
+  border: 0;
+}
+
+.code-input_find-and-replace_dialog input:hover {
+  outline: none;
+}
+
+.code-input_find-and-replace_dialog input.code-input_find-and-replace_error {
+  color: #ff0000aa;
+}
+
+.code-input_find-and-replace_dialog button, .code-input_find-and-replace_dialog input[type="checkbox"] {
+  display: inline-block;
+  line-height: 24px;
+  font-size: 22px;
+  cursor: pointer;
+  appearance: none;
+  width: min-content;
+  
+  margin: 5px;
+  padding: 5px;
+  border: 0;
+  background-color: #dddddd;
+  
+  text-align: center;
+  color: black;
+  vertical-align: top;
+}
+
+.code-input_find-and-replace_dialog input[type="checkbox"].code-input_find-and-replace_case-sensitive-checkbox::before {
+  content: "Aa";
+}
+.code-input_find-and-replace_dialog input[type="checkbox"].code-input_find-and-replace_reg-exp-checkbox::before {
+  content: ".*";
+}
+
+.code-input_find-and-replace_dialog button:hover, .code-input_find-and-replace_dialog input[type="checkbox"]:hover {
+  background-color: #bbbbbb;
+}
+
+.code-input_find-and-replace_dialog input[type="checkbox"]:checked {
+  background-color: #222222;
+  color: white;
+}
+
+.code-input_find-and-replace_match-description {
+  display: block; /* So not on same line as other */
+  color: #444444;
+}
+
+.code-input_find-and-replace_dialog details summary, .code-input_find-and-replace_dialog button {
+  cursor: pointer;
+}
+
+
+.code-input_find-and-replace_dialog button.code-input_find-and-replace_button-hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Cancel icon */
+.code-input_find-and-replace_dialog span {
+  display: block;
+  float: right;
+  margin: 5px;
+  padding: 5px;
+
+  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;
+}
+
+.code-input_find-and-replace_dialog span:before {
+  content: "\00d7";
+}
+
+.code-input_find-and-replace_dialog span:hover {
+  opacity: .8;
+  background-color: #00000018;
+}