@webcoder49/code-input 2.2.1 → 2.5.0

package/plugins/find-and-replace.js

@@ -6,15 +6,40 @@ codeInput.plugins.FindAndReplace = class extends codeInput.Plugin {
     useCtrlF = false;
     useCtrlH = false;
 
+    findMatchesOnValueChange = true; // Needed so the program can insert text to the find value and thus add it to Ctrl+Z without highlighting matches.
+
+    instructions = {
+        start: "Search for matches in your code.",
+        none: "No matches",
+        oneFound: "1 match found.",
+        matchIndex: (index, count) => `${index} of ${count} matches.`,
+        error: (message) => `Error: ${message}`,
+        infiniteLoopError: "Causes an infinite loop",
+        closeDialog: "Close Dialog and Return to Editor",
+        findPlaceholder: "Find",
+        findCaseSensitive: "Match Case Sensitive",
+        findRegExp: "Use JavaScript Regular Expression",
+        replaceTitle: "Replace",
+        replacePlaceholder: "Replace with",
+        findNext: "Find Next Occurrence",
+        findPrevious: "Find Previous Occurrence",
+        replaceActionShort: "Replace",
+        replaceAction: "Replace This Occurrence",
+        replaceAllActionShort: "Replace All",
+        replaceAllAction: "Replace All Occurrences"
+    };
+
     /**
      * Create a find-and-replace command plugin to pass into a template
      * @param {boolean} useCtrlF Should Ctrl+F be overriden for find-and-replace find functionality? If not, you can trigger it yourself using (instance of this plugin)`.showPrompt(code-input element, false)`.
      * @param {boolean} useCtrlH Should Ctrl+H be overriden for find-and-replace replace functionality? If not, you can trigger it yourself using (instance of this plugin)`.showPrompt(code-input element, true)`.
+     * @param {Object} instructionTranslations: user interface string keys mapped to translated versions for localisation. Look at the find-and-replace.js source code for the English text and available keys.
      */
-    constructor(useCtrlF = true, useCtrlH = true) {
+    constructor(useCtrlF = true, useCtrlH = true, instructionTranslations = {}) {
         super([]); // No observed attributes
         this.useCtrlF = useCtrlF;
         this.useCtrlH = useCtrlH;
+        this.addTranslations(this.instructions, instructionTranslations);
     }
 
     /* Add keystroke events */
@@ -54,13 +79,13 @@ codeInput.plugins.FindAndReplace = class extends codeInput.Plugin {
     updateMatchDescription(dialog) {
         // 1-indexed
         if(dialog.findInput.value.length == 0) {
-            dialog.matchDescription.textContent = "Search for matches in your code.";
+            dialog.matchDescription.textContent = this.instructions.start;
         } else if(dialog.findMatchState.numMatches <= 0) {
-            dialog.matchDescription.textContent = "No matches.";
+            dialog.matchDescription.textContent = this.instructions.none;
         } else if(dialog.findMatchState.numMatches == 1) {
-            dialog.matchDescription.textContent = "1 match found.";
+            dialog.matchDescription.textContent = this.instructions.oneFound;
         } else {
-            dialog.matchDescription.textContent = `${dialog.findMatchState.focusedMatchID+1} of ${dialog.findMatchState.numMatches} matches.`;
+            dialog.matchDescription.textContent = this.instructions.matchIndex(dialog.findMatchState.focusedMatchID+1, dialog.findMatchState.numMatches);
         }
     }
 
@@ -81,7 +106,7 @@ codeInput.plugins.FindAndReplace = class extends codeInput.Plugin {
                             dialog.findInput.classList.add('code-input_find-and-replace_error');
                             // Only show last part of error message
                             let messageParts = err.message.split(": ");
-                            dialog.matchDescription.textContent = "Error: " + messageParts[messageParts.length-1]; // Show only last part of error.
+                            dialog.matchDescription.textContent = this.instructions.error(messageParts[messageParts.length-1]); // Show only last part of error.
                             return;
                         } else {
                             throw err;
@@ -100,7 +125,7 @@ codeInput.plugins.FindAndReplace = class extends codeInput.Plugin {
         }, 100);
     }
 
-    /* Deal with Enter and Escape being pressed in the find field */
+    /* Deal with Enter being pressed in the find field */
     checkFindPrompt(dialog, codeInput, event) {
         if (event.key == 'Enter') {
             // Find next match
@@ -109,11 +134,12 @@ codeInput.plugins.FindAndReplace = class extends codeInput.Plugin {
         }
     }
 
-    /* Deal with Enter and Escape being pressed in the replace field */
+    /* Deal with Enter being pressed in the replace field */
     checkReplacePrompt(dialog, codeInput, event) {
         if (event.key == 'Enter') {
             // Replace focused match
             dialog.findMatchState.replaceOnce(dialog.replaceInput.value);
+            dialog.replaceInput.focus();
             this.updateMatchDescription(dialog);
         }
     }
@@ -121,9 +147,21 @@ codeInput.plugins.FindAndReplace = class extends codeInput.Plugin {
     /* Called with a dialog box keyup event to close and clear the dialog box */    
     cancelPrompt(dialog, codeInput, event) {
         event.preventDefault();
-        
+
+        // Add current value of find/replace to Ctrl+Z stack.
+        this.findMatchesOnValueChange = false;
+        dialog.findInput.focus();
+        dialog.findInput.selectionStart = 0;
+        dialog.findInput.selectionEnd = dialog.findInput.value.length;
+        document.execCommand("insertText", false, dialog.findInput.value);
+        this.findMatchesOnValueChange = true;
+
         // Reset original selection in code-input
         dialog.textarea.focus();
+        dialog.setAttribute("inert", true); // Hide from keyboard navigation when closed.
+        dialog.setAttribute("tabindex", -1); // Hide from keyboard navigation when closed.
+        dialog.setAttribute("aria-hidden", true); // Hide from screen reader when closed.
+
         if(dialog.findMatchState.numMatches > 0) {
             // Select focused match
             codeInput.textareaElement.selectionStart = dialog.findMatchState.matchStartIndexes[dialog.findMatchState.focusedMatchID];
@@ -146,14 +184,16 @@ codeInput.plugins.FindAndReplace = class extends codeInput.Plugin {
      * @param {boolean} replacePartExpanded whether the replace part of the find-and-replace dialog should be expanded
     */
     showPrompt(codeInputElement, replacePartExpanded) {
+        let dialog;
         if(codeInputElement.pluginData.findAndReplace == undefined || codeInputElement.pluginData.findAndReplace.dialog == undefined) {
             const textarea = codeInputElement.textareaElement;
 
-            const dialog = document.createElement('div');
+            dialog = document.createElement('div');
             const findInput = document.createElement('input');
             const findCaseSensitiveCheckbox = document.createElement('input');
             const findRegExpCheckbox = document.createElement('input');
             const matchDescription = document.createElement('code');
+            matchDescription.setAttribute("aria-live", "assertive"); // Screen reader must read the number of matches found.
 
             const replaceInput = document.createElement('input');
             const replaceDropdown = document.createElement('details');
@@ -165,6 +205,8 @@ codeInput.plugins.FindAndReplace = class extends codeInput.Plugin {
             const replaceButton = document.createElement('button');
             const replaceAllButton = document.createElement('button');
             const cancel = document.createElement('span');
+            cancel.setAttribute("tabindex", 0); // Visible to keyboard navigation
+            cancel.setAttribute("title", this.instructions.closeDialog);
 
             buttonContainer.appendChild(findNextButton);
             buttonContainer.appendChild(findPreviousButton);
@@ -184,31 +226,39 @@ codeInput.plugins.FindAndReplace = class extends codeInput.Plugin {
 
             dialog.className = 'code-input_find-and-replace_dialog';
             findInput.spellcheck = false;
-            findInput.placeholder = "Find";
+            findInput.placeholder = this.instructions.findPlaceholder;
             findCaseSensitiveCheckbox.setAttribute("type", "checkbox");
-            findCaseSensitiveCheckbox.title = "Match Case Sensitive";
+            findCaseSensitiveCheckbox.title = this.instructions.findCaseSensitive;
             findCaseSensitiveCheckbox.classList.add("code-input_find-and-replace_case-sensitive-checkbox");
             findRegExpCheckbox.setAttribute("type", "checkbox");
-            findRegExpCheckbox.title = "Use JavaScript Regular Expression";
+            findRegExpCheckbox.title = this.instructions.findRegExp;
             findRegExpCheckbox.classList.add("code-input_find-and-replace_reg-exp-checkbox");
 
             matchDescription.textContent = "Search for matches in your code.";
             matchDescription.classList.add("code-input_find-and-replace_match-description");
             
 
-            replaceSummary.innerText = "Replace";
+            replaceSummary.innerText = this.instructions.replaceTitle;
             replaceInput.spellcheck = false;
-            replaceInput.placeholder = "Replace with";
+            replaceInput.placeholder = this.instructions.replacePlaceholder;
             findNextButton.innerText = "↓";
-            findNextButton.title = "Find Next Occurence";
+            findNextButton.title = this.instructions.findNext;
             findPreviousButton.innerText = "↑";
-            findPreviousButton.title = "Find Previous Occurence";
+            findPreviousButton.title = this.instructions.findPrevious;
             replaceButton.className = 'code-input_find-and-replace_button-hidden';
-            replaceButton.innerText = "Replace";
-            replaceButton.title = "Replace This Occurence";
+            replaceButton.innerText = this.instructions.replaceActionShort;
+            replaceButton.title = this.instructions.replaceAction;
+            replaceButton.addEventListener("focus", () => {
+                // Show replace section
+                replaceDropdown.setAttribute("open", true);
+            });
             replaceAllButton.className = 'code-input_find-and-replace_button-hidden';
-            replaceAllButton.innerText = "Replace All";
-            replaceAllButton.title = "Replace All Occurences";
+            replaceAllButton.innerText = this.instructions.replaceAllActionShort;
+            replaceAllButton.title = this.instructions.replaceAllAction;
+            replaceAllButton.addEventListener("focus", () => {
+                // Show replace section
+                replaceDropdown.setAttribute("open", true);
+            });
 
             findNextButton.addEventListener("click", (event) => {
                 // Stop form submit
@@ -229,7 +279,7 @@ codeInput.plugins.FindAndReplace = class extends codeInput.Plugin {
                 event.preventDefault();
 
                 dialog.findMatchState.replaceOnce(replaceInput.value);
-                replaceButton.focus();
+                dialog.focus();
             });
             replaceAllButton.addEventListener("click", (event) => {
                 // Stop form submit
@@ -275,6 +325,16 @@ codeInput.plugins.FindAndReplace = class extends codeInput.Plugin {
                 /* Stop enter from submitting form */
                 if (event.key == 'Enter') event.preventDefault();
             });
+            replaceInput.addEventListener('input', (event) => {
+                // Ctrl+Z can trigger this. If the dialog/replace dropdown aren't open, open them!
+                if(dialog.classList.contains("code-input_find-and-replace_hidden-dialog")) {
+                    // Show prompt
+                    this.showPrompt(dialog.codeInput, true);
+                } else if(!dialog.replaceDropdown.hasAttribute("open")) {
+                    // Open dropdown
+                    dialog.replaceDropdown.setAttribute("open", true);
+                }
+            });
 
             dialog.addEventListener('keyup', (event) => {
                 /* Close prompt on Enter pressed */
@@ -282,7 +342,13 @@ codeInput.plugins.FindAndReplace = class extends codeInput.Plugin {
             });
             
             findInput.addEventListener('keyup', (event) => { this.checkFindPrompt(dialog, codeInputElement, event); });
-            findInput.addEventListener('input', (event) => { this.updateFindMatches(dialog); });
+            findInput.addEventListener('input', (event) => { 
+                if(this.findMatchesOnValueChange) this.updateFindMatches(dialog);
+                // Ctrl+Z can trigger this. If the dialog isn't open, open it!
+                if(dialog.classList.contains("code-input_find-and-replace_hidden-dialog")) {
+                    this.showPrompt(dialog.codeInput, false);
+                }
+            });
             findCaseSensitiveCheckbox.addEventListener('click', (event) => { this.updateFindMatches(dialog); });
             findRegExpCheckbox.addEventListener('click', (event) => { this.updateFindMatches(dialog); });
 
@@ -291,6 +357,7 @@ codeInput.plugins.FindAndReplace = class extends codeInput.Plugin {
                 replaceInput.focus();
             });
             cancel.addEventListener('click', (event) => { this.cancelPrompt(dialog, codeInputElement, event); });
+            cancel.addEventListener('keypress', (event) => { if (event.key == "Space" || event.key == "Enter") this.cancelPrompt(dialog, codeInputElement, event); });
 
             codeInputElement.dialogContainerElement.appendChild(dialog);
             codeInputElement.pluginData.findAndReplace = {dialog: dialog};
@@ -303,24 +370,45 @@ codeInput.plugins.FindAndReplace = class extends codeInput.Plugin {
             // Save selection position
             dialog.selectionStart = codeInputElement.textareaElement.selectionStart;
             dialog.selectionEnd = codeInputElement.textareaElement.selectionEnd;
+
+            if(dialog.selectionStart < dialog.selectionEnd) {
+                // Copy selected text to Find input
+                let textToFind = codeInputElement.textareaElement.value.substring(dialog.selectionStart, dialog.selectionEnd);
+                dialog.findInput.focus();
+                dialog.findInput.selectionStart = 0;
+                dialog.findInput.selectionEnd = dialog.findInput.value.length;
+                document.execCommand("insertText", false, textToFind);
+            }
         } else {
+            dialog = codeInputElement.pluginData.findAndReplace.dialog;
             // Re-open dialog
-            codeInputElement.pluginData.findAndReplace.dialog.classList.remove("code-input_find-and-replace_hidden-dialog");
-            codeInputElement.pluginData.findAndReplace.dialog.findInput.focus();
+            dialog.classList.remove("code-input_find-and-replace_hidden-dialog");
+            dialog.removeAttribute("inert"); // Show to keyboard navigation when open.
+            dialog.setAttribute("tabindex", 0); // Show to keyboard navigation when open.
+            dialog.removeAttribute("aria-hidden"); // Show to screen reader when open.
+            dialog.findInput.focus();
             if(replacePartExpanded) {
-                codeInputElement.pluginData.findAndReplace.dialog.replaceDropdown.setAttribute("open", true);
+                dialog.replaceDropdown.setAttribute("open", true);
             } else {
-                codeInputElement.pluginData.findAndReplace.dialog.replaceDropdown.removeAttribute("open");
+                dialog.replaceDropdown.removeAttribute("open");
             }
+        }
 
-            
-            // Highlight matches
-            this.updateFindMatches(codeInputElement.pluginData.findAndReplace.dialog);
-            
-            // Save selection position
-            codeInputElement.pluginData.findAndReplace.dialog.selectionStart = codeInputElement.textareaElement.selectionStart;
-            codeInputElement.pluginData.findAndReplace.dialog.selectionEnd = codeInputElement.textareaElement.selectionEnd;
+        // Save selection position
+        dialog.selectionStart = codeInputElement.textareaElement.selectionStart;
+        dialog.selectionEnd = codeInputElement.textareaElement.selectionEnd;
+
+        if(dialog.selectionStart < dialog.selectionEnd) {
+            // Copy selected text to Find input
+            let textToFind = codeInputElement.textareaElement.value.substring(dialog.selectionStart, dialog.selectionEnd);
+            dialog.findInput.focus();
+            dialog.findInput.selectionStart = 0;
+            dialog.findInput.selectionEnd = dialog.findInput.value.length;
+            document.execCommand("insertText", false, textToFind);
         }
+        
+        // Highlight matches
+        this.updateFindMatches(dialog);
     }
 
     /* Event handler for keydown event that makes Ctrl+F open find dialog */
@@ -405,7 +493,7 @@ codeInput.plugins.FindAndReplace.FindMatchState = class {
         while ((match = searchRegexp.exec(this.codeInput.value)) !== null) {
             let matchText = match[0];
             if(matchText.length == 0) {
-                throw SyntaxError("Causes an infinite loop");
+                throw SyntaxError(this.instructions.infiniteLoopError);
             }
 
             // Add next match block if needed
@@ -441,12 +529,14 @@ codeInput.plugins.FindAndReplace.FindMatchState = class {
             this.focusedMatchStartIndex += replacementText.length;
 
             // Select the match
+            this.codeInput.handleEventsFromTextarea = false;
             this.codeInput.textareaElement.focus();
             this.codeInput.textareaElement.selectionStart = this.matchStartIndexes[this.focusedMatchID];
             this.codeInput.textareaElement.selectionEnd = this.matchEndIndexes[this.focusedMatchID];
 
             // Replace it with the replacement text
             document.execCommand("insertText", false, replacementText);
+            this.codeInput.handleEventsFromTextarea = true;
         }
     }
 
@@ -459,6 +549,7 @@ codeInput.plugins.FindAndReplace.FindMatchState = class {
             // Replace each match
             
             // Select the match, taking into account characters added before
+            this.codeInput.handleEventsFromTextarea = false;
             this.codeInput.textareaElement.focus();
             this.codeInput.textareaElement.selectionStart = this.matchStartIndexes[i] + numCharsAdded;
             this.codeInput.textareaElement.selectionEnd = this.matchEndIndexes[i] + numCharsAdded;
@@ -467,6 +558,7 @@ codeInput.plugins.FindAndReplace.FindMatchState = class {
 
             // Replace it with the replacement text
             document.execCommand("insertText", false, replacementText);
+            this.codeInput.handleEventsFromTextarea = true;
         }
     }
 
@@ -527,7 +619,8 @@ codeInput.plugins.FindAndReplace.FindMatchState = class {
 
     /* Highlight a match from the find functionality given its start and end indexes in the text. 
     Start from the currentElement as this function is recursive. Use the matchID in the class name
-    of the match so different matches can be identified. */
+    of the match so different matches can be identified.
+    This code is similar to codeInput.plugins.SelectTokenCallbacks.SelectedTokenState.updateSelectedTokens*/
     highlightMatch(matchID, currentElement, startIndex, endIndex) {
         for(let i = 0; i < currentElement.childNodes.length; i++) {
             let childElement = currentElement.childNodes[i];
@@ -535,6 +628,7 @@ codeInput.plugins.FindAndReplace.FindMatchState = class {
 
             let noInnerElements = false;
             if(childElement.nodeType == 3) {
+                // Text node
                 if(i + 1 < currentElement.childNodes.length && currentElement.childNodes[i+1].nodeType == 3) {
                     // Can merge with next text node
                     currentElement.childNodes[i+1].textContent = childElement.textContent + currentElement.childNodes[i+1].textContent; // Merge textContent with next node
@@ -547,7 +641,7 @@ codeInput.plugins.FindAndReplace.FindMatchState = class {
 
                 let replacementElement = document.createElement("span");
                 replacementElement.textContent = childText;
-                replacementElement.classList.add("code-input_find-and-replace_temporary-span"); // Can remove
+                replacementElement.classList.add("code-input_find-and-replace_temporary-span"); // Can remove span later
                 
                 currentElement.replaceChild(replacementElement, childElement);
                 childElement = replacementElement;
@@ -562,7 +656,7 @@ codeInput.plugins.FindAndReplace.FindMatchState = class {
                         let startSpan = document.createElement("span");
                         startSpan.classList.add("code-input_find-and-replace_find-match"); // Highlighted
                         startSpan.setAttribute("data-code-input_find-and-replace_match-id", matchID);
-                        startSpan.classList.add("code-input_find-and-replace_temporary-span"); // Can remove
+                        startSpan.classList.add("code-input_find-and-replace_temporary-span"); // Can remove span later
                         startSpan.textContent = childText.substring(0, endIndex);
                         if(startSpan.textContent[0] == "\n") {
                             // Newline at start - make clear
@@ -597,7 +691,7 @@ codeInput.plugins.FindAndReplace.FindMatchState = class {
                         // Match starts and ends in childElement - highlight middle part
                         // Text node - highlight last part
                         let startSpan = document.createElement("span");
-                        startSpan.classList.add("code-input_find-and-replace_temporary-span"); // Can remove
+                        startSpan.classList.add("code-input_find-and-replace_temporary-span"); // Can remove span later
                         startSpan.textContent = childText.substring(0, startIndex);
 
                         let middleText = childText.substring(startIndex, endIndex);
@@ -610,7 +704,7 @@ codeInput.plugins.FindAndReplace.FindMatchState = class {
                         }
 
                         let endSpan = document.createElement("span");
-                        endSpan.classList.add("code-input_find-and-replace_temporary-span"); // Can remove
+                        endSpan.classList.add("code-input_find-and-replace_temporary-span"); // Can remove span later
                         endSpan.textContent = childText.substring(endIndex);
                         
                         childElement.insertAdjacentElement('beforebegin', startSpan);
@@ -624,7 +718,7 @@ codeInput.plugins.FindAndReplace.FindMatchState = class {
                         let endSpan = document.createElement("span");
                         endSpan.classList.add("code-input_find-and-replace_find-match"); // Highlighted
                         endSpan.setAttribute("data-code-input_find-and-replace_match-id", matchID);
-                        endSpan.classList.add("code-input_find-and-replace_temporary-span"); // Can remove
+                        endSpan.classList.add("code-input_find-and-replace_temporary-span"); // Can remove span later
                         endSpan.textContent = childText.substring(startIndex);
                         if(endSpan.textContent[0] == "\n") {
                             // Newline at start - make clear
@@ -649,4 +743,4 @@ codeInput.plugins.FindAndReplace.FindMatchState = class {
             endIndex -= childText.length;
         }
     }
-}
+}

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

@@ -1 +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}}};
+codeInput.plugins.FindAndReplace=class extends codeInput.Plugin{useCtrlF=!1;useCtrlH=!1;findMatchesOnValueChange=!0;instructions={start:"Search for matches in your code.",none:"No matches",oneFound:"1 match found.",matchIndex:(a,b)=>`${a} of ${b} matches.`,error:a=>`Error: ${a}`,infiniteLoopError:"Causes an infinite loop",closeDialog:"Close Dialog and Return to Editor",findPlaceholder:"Find",findCaseSensitive:"Match Case Sensitive",findRegExp:"Use JavaScript Regular Expression",replaceTitle:"Replace",replacePlaceholder:"Replace with",findNext:"Find Next Occurrence",findPrevious:"Find Previous Occurrence",replaceActionShort:"Replace",replaceAction:"Replace This Occurrence",replaceAllActionShort:"Replace All",replaceAllAction:"Replace All Occurrences"};constructor(a=!0,b=!0,c={}){super([]),this.useCtrlF=a,this.useCtrlH=b,this.addTranslations(this.instructions,c)}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?this.instructions.start:0>=a.findMatchState.numMatches?this.instructions.none:1==a.findMatchState.numMatches?this.instructions.oneFound:this.instructions.matchIndex(a.findMatchState.focusedMatchID+1,a.findMatchState.numMatches)}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=this.instructions.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),a.replaceInput.focus(),this.updateMatchDescription(a))}cancelPrompt(a,b,c){c.preventDefault(),this.findMatchesOnValueChange=!1,a.findInput.focus(),a.findInput.selectionStart=0,a.findInput.selectionEnd=a.findInput.value.length,document.execCommand("insertText",!1,a.findInput.value),this.findMatchesOnValueChange=!0,a.textarea.focus(),a.setAttribute("inert",!0),a.setAttribute("tabindex",-1),a.setAttribute("aria-hidden",!0),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){let c;if(null==a.pluginData.findAndReplace||null==a.pluginData.findAndReplace.dialog){const d=a.textareaElement;c=document.createElement("div");const e=document.createElement("input"),f=document.createElement("input"),g=document.createElement("input"),h=document.createElement("code");h.setAttribute("aria-live","assertive");const 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");if(q.setAttribute("tabindex",0),q.setAttribute("title",this.instructions.closeDialog),l.appendChild(m),l.appendChild(n),l.appendChild(o),l.appendChild(p),l.appendChild(q),c.appendChild(l),c.appendChild(e),c.appendChild(g),c.appendChild(f),c.appendChild(h),j.appendChild(k),j.appendChild(i),c.appendChild(j),c.className="code-input_find-and-replace_dialog",e.spellcheck=!1,e.placeholder=this.instructions.findPlaceholder,f.setAttribute("type","checkbox"),f.title=this.instructions.findCaseSensitive,f.classList.add("code-input_find-and-replace_case-sensitive-checkbox"),g.setAttribute("type","checkbox"),g.title=this.instructions.findRegExp,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=this.instructions.replaceTitle,i.spellcheck=!1,i.placeholder=this.instructions.replacePlaceholder,m.innerText="\u2193",m.title=this.instructions.findNext,n.innerText="\u2191",n.title=this.instructions.findPrevious,o.className="code-input_find-and-replace_button-hidden",o.innerText=this.instructions.replaceActionShort,o.title=this.instructions.replaceAction,o.addEventListener("focus",()=>{j.setAttribute("open",!0)}),p.className="code-input_find-and-replace_button-hidden",p.innerText=this.instructions.replaceAllActionShort,p.title=this.instructions.replaceAllAction,p.addEventListener("focus",()=>{j.setAttribute("open",!0)}),m.addEventListener("click",a=>{a.preventDefault(),c.findMatchState.nextMatch(),this.updateMatchDescription(c)}),n.addEventListener("click",()=>{event.preventDefault(),c.findMatchState.previousMatch(),this.updateMatchDescription(c)}),o.addEventListener("click",a=>{a.preventDefault(),c.findMatchState.replaceOnce(i.value),c.focus()}),p.addEventListener("click",a=>{a.preventDefault(),c.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")}),c.findMatchState=new codeInput.plugins.FindAndReplace.FindMatchState(a),c.codeInput=a,c.textarea=d,c.findInput=e,c.findCaseSensitiveCheckbox=f,c.findRegExpCheckbox=g,c.matchDescription=h,c.replaceInput=i,c.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()}),i.addEventListener("input",()=>{c.classList.contains("code-input_find-and-replace_hidden-dialog")?this.showPrompt(c.codeInput,!0):!c.replaceDropdown.hasAttribute("open")&&c.replaceDropdown.setAttribute("open",!0)}),c.addEventListener("keyup",b=>{"Escape"==b.key&&this.cancelPrompt(c,a,b)}),e.addEventListener("keyup",b=>{this.checkFindPrompt(c,a,b)}),e.addEventListener("input",()=>{this.findMatchesOnValueChange&&this.updateFindMatches(c),c.classList.contains("code-input_find-and-replace_hidden-dialog")&&this.showPrompt(c.codeInput,!1)}),f.addEventListener("click",()=>{this.updateFindMatches(c)}),g.addEventListener("click",()=>{this.updateFindMatches(c)}),i.addEventListener("keyup",b=>{this.checkReplacePrompt(c,a,b),i.focus()}),q.addEventListener("click",b=>{this.cancelPrompt(c,a,b)}),q.addEventListener("keypress",b=>{("Space"==b.key||"Enter"==b.key)&&this.cancelPrompt(c,a,b)}),a.dialogContainerElement.appendChild(c),a.pluginData.findAndReplace={dialog:c},e.focus(),b&&j.setAttribute("open",!0),c.selectionStart=a.textareaElement.selectionStart,c.selectionEnd=a.textareaElement.selectionEnd,c.selectionStart<c.selectionEnd){let b=a.textareaElement.value.substring(c.selectionStart,c.selectionEnd);c.findInput.focus(),c.findInput.selectionStart=0,c.findInput.selectionEnd=c.findInput.value.length,document.execCommand("insertText",!1,b)}}else c=a.pluginData.findAndReplace.dialog,c.classList.remove("code-input_find-and-replace_hidden-dialog"),c.removeAttribute("inert"),c.setAttribute("tabindex",0),c.removeAttribute("aria-hidden"),c.findInput.focus(),b?c.replaceDropdown.setAttribute("open",!0):c.replaceDropdown.removeAttribute("open");if(c.selectionStart=a.textareaElement.selectionStart,c.selectionEnd=a.textareaElement.selectionEnd,c.selectionStart<c.selectionEnd){let b=a.textareaElement.value.substring(c.selectionStart,c.selectionEnd);c.findInput.focus(),c.findInput.selectionStart=0,c.findInput.selectionEnd=c.findInput.value.length,document.execCommand("insertText",!1,b)}this.updateFindMatches(c)}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(this.instructions.infiniteLoopError);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.handleEventsFromTextarea=!1,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),this.codeInput.handleEventsFromTextarea=!0)}replaceAll(a){const b=a.length;let c=0;for(let d=0;d<this.numMatches;d++)this.codeInput.handleEventsFromTextarea=!1,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),this.codeInput.handleEventsFromTextarea=!0}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.js

@@ -5,13 +5,20 @@
 codeInput.plugins.GoToLine = class extends codeInput.Plugin {
     useCtrlG = false;
 
+    instructions = {
+        closeDialog: "Close Dialog and Return to Editor",
+        input: "Line:Column / Line no. then Enter",
+    };
+
     /**
      * 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)`.
+     * @param {Object} instructionTranslations: user interface string keys mapped to translated versions for localisation. Look at the go-to-line.js source code for the available keys and English text.
      */
-    constructor(useCtrlG = true) {
+    constructor(useCtrlG = true, instructionTranslations = {}) {
         super([]); // No observed attributes
         this.useCtrlG = useCtrlG;
+        this.addTranslations(this.instructions, instructionTranslations);
     }
 
     /* Add keystroke events */
@@ -61,7 +68,12 @@ codeInput.plugins.GoToLine = class extends codeInput.Plugin {
     /* Called with a dialog box keyup event to close and clear the dialog box */    
     cancelPrompt(dialog, event) {
         event.preventDefault();
+        dialog.codeInput.handleEventsFromTextarea = false;
         dialog.textarea.focus();
+        dialog.codeInput.handleEventsFromTextarea = true;
+        dialog.setAttribute("inert", true); // Hide from keyboard navigation when closed.
+        dialog.setAttribute("tabindex", -1); // Hide from keyboard navigation when closed.
+        dialog.setAttribute("aria-hidden", true); // Hide from screen reader when closed.
 
         // Remove dialog after animation
         dialog.classList.add('code-input_go-to-line_hidden-dialog');
@@ -79,13 +91,15 @@ codeInput.plugins.GoToLine = class extends codeInput.Plugin {
             const dialog = document.createElement('div');
             const input = document.createElement('input');
             const cancel = document.createElement('span');
+            cancel.setAttribute("tabindex", 0); // Visible to keyboard navigation
+            cancel.setAttribute("title", this.instructions.closeDialog);
 
             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";
+            input.placeholder = this.instructions.input;
             dialog.codeInput = codeInput;
             dialog.textarea = textarea;
             dialog.input = input;
@@ -97,12 +111,16 @@ codeInput.plugins.GoToLine = class extends codeInput.Plugin {
             
             input.addEventListener('keyup', (event) => { return this.checkPrompt(dialog, event); });
             cancel.addEventListener('click', (event) => { this.cancelPrompt(dialog, event); });
+            cancel.addEventListener('keypress', (event) => { if (event.key == "Space" || event.key == "Enter") 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.removeAttribute("inert"); // Show to keyboard navigation when open.
+            codeInput.pluginData.goToLine.dialog.setAttribute("tabindex", 0); // Show to keyboard navigation when open.
+            codeInput.pluginData.goToLine.dialog.removeAttribute("aria-hidden"); // Show to screen reader when open.
             codeInput.pluginData.goToLine.dialog.input.focus();
         }
     }

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

@@ -1 +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))}};
+codeInput.plugins.GoToLine=class extends codeInput.Plugin{useCtrlG=!1;instructions={closeDialog:"Close Dialog and Return to Editor",input:"Line:Column / Line no. then Enter"};constructor(a=!0,b={}){super([]),this.useCtrlG=a,this.addTranslations(this.instructions,b)}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.codeInput.handleEventsFromTextarea=!1,a.textarea.focus(),a.codeInput.handleEventsFromTextarea=!0,a.setAttribute("inert",!0),a.setAttribute("tabindex",-1),a.setAttribute("aria-hidden",!0),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");e.setAttribute("tabindex",0),e.setAttribute("title",this.instructions.closeDialog),c.appendChild(d),c.appendChild(e),c.className="code-input_go-to-line_dialog",d.spellcheck=!1,d.placeholder=this.instructions.input,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)}),e.addEventListener("keypress",a=>{("Space"==a.key||"Enter"==a.key)&&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.removeAttribute("inert"),a.pluginData.goToLine.dialog.setAttribute("tabindex",0),a.pluginData.goToLine.dialog.removeAttribute("aria-hidden"),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))}};