@webcoder49/code-input 2.1.0 → 2.2.1

package/plugins/find-and-replace.js

@@ -0,0 +1,652 @@
+/**
+ * Add Find-and-Replace (Ctrl+F for find, Ctrl+H for replace by default) functionality to the code editor.
+ * Files: find-and-replace.js / find-and-replace.css
+ */
+codeInput.plugins.FindAndReplace = class extends codeInput.Plugin {
+    useCtrlF = false;
+    useCtrlH = false;
+
+    /**
+     * 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)`.
+     */
+    constructor(useCtrlF = true, useCtrlH = true) {
+        super([]); // No observed attributes
+        this.useCtrlF = useCtrlF;
+        this.useCtrlH = useCtrlH;
+    }
+
+    /* Add keystroke events */
+    afterElementsAdded(codeInput) {
+        const textarea = codeInput.textareaElement;
+        if(this.useCtrlF) {
+            textarea.addEventListener('keydown', (event) => { this.checkCtrlF(codeInput, event); });
+        }
+        if(this.useCtrlH) {
+            textarea.addEventListener('keydown', (event) => { this.checkCtrlH(codeInput, event); });
+        }
+    }
+
+    /* After highlight, retry match highlighting */
+    afterHighlight(codeInput) {
+        if(codeInput.pluginData.findAndReplace != undefined && codeInput.pluginData.findAndReplace.dialog != undefined) {
+            if(!codeInput.pluginData.findAndReplace.dialog.classList.contains("code-input_find-and-replace_hidden-dialog")) {
+                // Code updated and dialog open - re-highlight find matches
+                codeInput.pluginData.findAndReplace.dialog.findMatchState.rehighlightMatches();
+                this.updateMatchDescription(codeInput.pluginData.findAndReplace.dialog);
+
+                if(codeInput.pluginData.findAndReplace.dialog.findMatchState.numMatches == 0) {
+                    // No more matches after editing
+                    codeInput.pluginData.findAndReplace.dialog.findInput.classList.add('code-input_find-and-replace_error');
+                }
+            }
+        }
+    }
+
+    /* Get a Regular Expression to match a specific piece of text, by escaping the text: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions */
+    text2RegExp(string, caseSensitive, stringIsRegexp) {
+        // "i" flag means case-"i"nsensitive
+        return new RegExp(stringIsRegexp ? string : string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), caseSensitive ? "g" : "gi"); // $& means the whole matched string
+    }
+
+    /* Update the dialog description to show the find matches */
+    updateMatchDescription(dialog) {
+        // 1-indexed
+        if(dialog.findInput.value.length == 0) {
+            dialog.matchDescription.textContent = "Search for matches in your code.";
+        } else if(dialog.findMatchState.numMatches <= 0) {
+            dialog.matchDescription.textContent = "No matches.";
+        } else if(dialog.findMatchState.numMatches == 1) {
+            dialog.matchDescription.textContent = "1 match found.";
+        } else {
+            dialog.matchDescription.textContent = `${dialog.findMatchState.focusedMatchID+1} of ${dialog.findMatchState.numMatches} matches.`;
+        }
+    }
+
+    /* Called with a find input keyup event to find all matches in the code and focus the next match if Enter is pressed */
+    updateFindMatches(dialog) {
+        // Update matches for find functionality; debounce it to prevent delay with single-character search
+        let oldValue = dialog.findInput.value;
+        setTimeout(() => {
+            if(oldValue == dialog.findInput.value) {
+                // Stopped typing
+                dialog.findMatchState.clearMatches();
+                if(oldValue.length > 0) {
+                    try {
+                        dialog.findMatchState.updateMatches(this.text2RegExp(dialog.findInput.value, dialog.findCaseSensitiveCheckbox.checked, dialog.findRegExpCheckbox.checked));
+                    } catch (err) {
+                        if(err instanceof SyntaxError) {
+                            // Syntax error due to malformed RegExp
+                            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.
+                            return;
+                        } else {
+                            throw err;
+                        }
+                    }
+
+                    if(dialog.findMatchState.numMatches > 0) {
+                        dialog.findInput.classList.remove('code-input_find-and-replace_error');
+                    } else {
+                        // No matches - error
+                        dialog.findInput.classList.add('code-input_find-and-replace_error');
+                    }
+                }
+                this.updateMatchDescription(dialog);
+            }
+        }, 100);
+    }
+
+    /* Deal with Enter and Escape being pressed in the find field */
+    checkFindPrompt(dialog, codeInput, event) {
+        if (event.key == 'Enter') {
+            // Find next match
+            dialog.findMatchState.nextMatch();
+            this.updateMatchDescription(dialog);
+        }
+    }
+
+    /* Deal with Enter and Escape being pressed in the replace field */
+    checkReplacePrompt(dialog, codeInput, event) {
+        if (event.key == 'Enter') {
+            // Replace focused match
+            dialog.findMatchState.replaceOnce(dialog.replaceInput.value);
+            this.updateMatchDescription(dialog);
+        }
+    }
+
+    /* Called with a dialog box keyup event to close and clear the dialog box */    
+    cancelPrompt(dialog, codeInput, event) {
+        event.preventDefault();
+        
+        // Reset original selection in code-input
+        dialog.textarea.focus();
+        if(dialog.findMatchState.numMatches > 0) {
+            // Select focused match
+            codeInput.textareaElement.selectionStart = dialog.findMatchState.matchStartIndexes[dialog.findMatchState.focusedMatchID];
+            codeInput.textareaElement.selectionEnd = dialog.findMatchState.matchEndIndexes[dialog.findMatchState.focusedMatchID];
+        } else {
+            // Select text selected before
+            codeInput.textareaElement.selectionStart = dialog.selectionStart;
+            codeInput.textareaElement.selectionEnd = dialog.selectionEnd;    
+        }
+
+        dialog.findMatchState.clearMatches();
+        
+        // Remove dialog after animation
+        dialog.classList.add('code-input_find-and-replace_hidden-dialog');
+    }
+
+    /**
+     * Show a find-and-replace dialog.
+     * @param {codeInput.CodeInput} codeInputElement the `<code-input>` element.
+     * @param {boolean} replacePartExpanded whether the replace part of the find-and-replace dialog should be expanded
+    */
+    showPrompt(codeInputElement, replacePartExpanded) {
+        if(codeInputElement.pluginData.findAndReplace == undefined || codeInputElement.pluginData.findAndReplace.dialog == undefined) {
+            const textarea = codeInputElement.textareaElement;
+
+            const dialog = document.createElement('div');
+            const findInput = document.createElement('input');
+            const findCaseSensitiveCheckbox = document.createElement('input');
+            const findRegExpCheckbox = document.createElement('input');
+            const matchDescription = document.createElement('code');
+
+            const replaceInput = document.createElement('input');
+            const replaceDropdown = document.createElement('details');
+            const replaceSummary = document.createElement('summary');
+
+            const buttonContainer = document.createElement('div');
+            const findNextButton = document.createElement('button');
+            const findPreviousButton = document.createElement('button');
+            const replaceButton = document.createElement('button');
+            const replaceAllButton = document.createElement('button');
+            const cancel = document.createElement('span');
+
+            buttonContainer.appendChild(findNextButton);
+            buttonContainer.appendChild(findPreviousButton);
+            buttonContainer.appendChild(replaceButton);
+            buttonContainer.appendChild(replaceAllButton);
+            buttonContainer.appendChild(cancel);
+            dialog.appendChild(buttonContainer);
+
+            dialog.appendChild(findInput);
+            dialog.appendChild(findRegExpCheckbox);
+            dialog.appendChild(findCaseSensitiveCheckbox);
+            dialog.appendChild(matchDescription);
+            replaceDropdown.appendChild(replaceSummary);
+            replaceDropdown.appendChild(replaceInput);
+
+            dialog.appendChild(replaceDropdown);
+
+            dialog.className = 'code-input_find-and-replace_dialog';
+            findInput.spellcheck = false;
+            findInput.placeholder = "Find";
+            findCaseSensitiveCheckbox.setAttribute("type", "checkbox");
+            findCaseSensitiveCheckbox.title = "Match Case Sensitive";
+            findCaseSensitiveCheckbox.classList.add("code-input_find-and-replace_case-sensitive-checkbox");
+            findRegExpCheckbox.setAttribute("type", "checkbox");
+            findRegExpCheckbox.title = "Use JavaScript Regular Expression";
+            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";
+            replaceInput.spellcheck = false;
+            replaceInput.placeholder = "Replace with";
+            findNextButton.innerText = "↓";
+            findNextButton.title = "Find Next Occurence";
+            findPreviousButton.innerText = "↑";
+            findPreviousButton.title = "Find Previous Occurence";
+            replaceButton.className = 'code-input_find-and-replace_button-hidden';
+            replaceButton.innerText = "Replace";
+            replaceButton.title = "Replace This Occurence";
+            replaceAllButton.className = 'code-input_find-and-replace_button-hidden';
+            replaceAllButton.innerText = "Replace All";
+            replaceAllButton.title = "Replace All Occurences";
+
+            findNextButton.addEventListener("click", (event) => {
+                // Stop form submit
+                event.preventDefault();
+
+                dialog.findMatchState.nextMatch();
+                this.updateMatchDescription(dialog);
+            });
+            findPreviousButton.addEventListener("click", () => {
+                // Stop form submit
+                event.preventDefault();
+
+                dialog.findMatchState.previousMatch();
+                this.updateMatchDescription(dialog);
+            });
+            replaceButton.addEventListener("click", (event) => {
+                // Stop form submit
+                event.preventDefault();
+
+                dialog.findMatchState.replaceOnce(replaceInput.value);
+                replaceButton.focus();
+            });
+            replaceAllButton.addEventListener("click", (event) => {
+                // Stop form submit
+                event.preventDefault();
+
+                dialog.findMatchState.replaceAll(replaceInput.value);
+                replaceAllButton.focus();
+            });
+
+            replaceDropdown.addEventListener("toggle", () => {
+                // When replace dropdown opened show replace buttons
+                replaceButton.classList.toggle("code-input_find-and-replace_button-hidden");
+                replaceAllButton.classList.toggle("code-input_find-and-replace_button-hidden");
+            });
+
+            // To store the state of find-and-replace functionality
+            dialog.findMatchState = new codeInput.plugins.FindAndReplace.FindMatchState(codeInputElement);
+
+            dialog.codeInput = codeInputElement;
+            dialog.textarea = textarea;
+            dialog.findInput = findInput;
+            dialog.findCaseSensitiveCheckbox = findCaseSensitiveCheckbox;
+            dialog.findRegExpCheckbox = findRegExpCheckbox;
+            dialog.matchDescription = matchDescription;
+            dialog.replaceInput = replaceInput;
+            dialog.replaceDropdown = replaceDropdown;
+
+            if(this.checkCtrlH) {
+                findInput.addEventListener('keydown', (event) => {
+                    /* Open replace part on Ctrl+H */
+                    if (event.ctrlKey && event.key == 'h') {
+                        event.preventDefault();
+                        replaceDropdown.setAttribute("open", true);
+                    }
+                });
+            }
+
+            findInput.addEventListener('keypress', (event) => {
+                /* Stop enter from submitting form */
+                if (event.key == 'Enter') event.preventDefault();
+            });
+            replaceInput.addEventListener('keypress', (event) => {
+                /* Stop enter from submitting form */
+                if (event.key == 'Enter') event.preventDefault();
+            });
+
+            dialog.addEventListener('keyup', (event) => {
+                /* Close prompt on Enter pressed */
+                if (event.key == 'Escape') this.cancelPrompt(dialog, codeInputElement, event);
+            });
+            
+            findInput.addEventListener('keyup', (event) => { this.checkFindPrompt(dialog, codeInputElement, event); });
+            findInput.addEventListener('input', (event) => { this.updateFindMatches(dialog); });
+            findCaseSensitiveCheckbox.addEventListener('click', (event) => { this.updateFindMatches(dialog); });
+            findRegExpCheckbox.addEventListener('click', (event) => { this.updateFindMatches(dialog); });
+
+            replaceInput.addEventListener('keyup', (event) => { 
+                this.checkReplacePrompt(dialog, codeInputElement, event);
+                replaceInput.focus();
+            });
+            cancel.addEventListener('click', (event) => { this.cancelPrompt(dialog, codeInputElement, event); });
+
+            codeInputElement.dialogContainerElement.appendChild(dialog);
+            codeInputElement.pluginData.findAndReplace = {dialog: dialog};
+            findInput.focus();
+
+            if(replacePartExpanded) {
+                replaceDropdown.setAttribute("open", true);
+            }
+
+            // Save selection position
+            dialog.selectionStart = codeInputElement.textareaElement.selectionStart;
+            dialog.selectionEnd = codeInputElement.textareaElement.selectionEnd;
+        } else {
+            // Re-open dialog
+            codeInputElement.pluginData.findAndReplace.dialog.classList.remove("code-input_find-and-replace_hidden-dialog");
+            codeInputElement.pluginData.findAndReplace.dialog.findInput.focus();
+            if(replacePartExpanded) {
+                codeInputElement.pluginData.findAndReplace.dialog.replaceDropdown.setAttribute("open", true);
+            } else {
+                codeInputElement.pluginData.findAndReplace.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;
+        }
+    }
+
+    /* Event handler for keydown event that makes Ctrl+F open find dialog */
+    checkCtrlF(codeInput, event) {
+        if (event.ctrlKey && event.key == 'f') {
+            event.preventDefault();
+            this.showPrompt(codeInput, false);
+        }
+    }
+
+    /* Event handler for keydown event that makes Ctrl+H open find+replace dialog */
+    checkCtrlH(codeInput, event) {
+        if (event.ctrlKey && event.key == 'h') {
+            event.preventDefault();
+            this.showPrompt(codeInput, true);
+        }
+    }
+}
+
+// Number of matches to highlight at once, for efficiency reasons
+const CODE_INPUT_FIND_AND_REPLACE_MATCH_BLOCK_SIZE = 500;
+
+/* This class stores the state of find and replace in a specific code-input element */
+codeInput.plugins.FindAndReplace.FindMatchState = class {
+    codeInput = null;
+    lastValue = null; // of codeInput, so know when to update matches
+    lastSearchRegexp = null; // to be able to update matches
+    numMatches = 0;
+    focusedMatchID = 0;
+    matchStartIndexes = []; // For each match in order
+    matchEndIndexes = []; // For each match in order
+    focusedMatchStartIndex = 0;
+    
+    matchBlocksHighlighted = []; // Each block represents a CODE_INPUT_FIND_AND_REPLACE_MATCH_BLOCK_SIZE number of matches (up to it for the last), and is highlighted separately to prevent excessive delay.
+
+    constructor(codeInputElement) {
+        this.focusedMatchStartIndex = codeInputElement.textareaElement.selectionStart;
+        this.codeInput = codeInputElement;
+    }
+
+    /* Clear the find matches, often to prepare for new matches to be added. */
+    clearMatches() {
+        // Delete match information saved here
+        this.numMatches = 0;
+        this.matchStartIndexes = []; 
+        this.matchEndIndexes = []; 
+
+        // Remove generated spans to hold matches
+        let tempSpans = this.codeInput.codeElement.querySelectorAll(".code-input_find-and-replace_temporary-span");
+        for(let i = 0; i < tempSpans.length; i++) {
+            // Replace with textContent as Text node
+            tempSpans[i].parentElement.replaceChild(new Text(tempSpans[i].textContent), tempSpans[i]);
+        }
+
+        // Remove old matches
+        let oldMatches = this.codeInput.codeElement.querySelectorAll(".code-input_find-and-replace_find-match");
+        for(let i = 0; i < oldMatches.length; i++) {
+            oldMatches[i].removeAttribute("data-code-input_find-and-replace_match-id"); // No match ID
+            oldMatches[i].classList.remove("code-input_find-and-replace_find-match"); // No highlighting
+            oldMatches[i].classList.remove("code-input_find-and-replace_find-match-focused"); // No focused highlighting
+        }        
+    }
+
+    /* Refresh the matches of find functionality with a new search term Regular Expression. */
+    updateMatches(searchRegexp) {
+        this.lastSearchRegexp = searchRegexp;
+        this.lastValue = this.codeInput.value;
+        // Add matches
+        let matchID = 0;
+        let match; // Search result
+        this.matchStartIndexes = [];
+        this.matchEndIndexes = [];
+        this.matchBlocksHighlighted = [];
+
+        // Make all match blocks be not highlighted except for currently focused
+        let focusedMatchBlock = Math.floor(this.focusedMatchID / CODE_INPUT_FIND_AND_REPLACE_MATCH_BLOCK_SIZE);
+        for(let i = 0; i < focusedMatchBlock; i++) {
+            this.matchBlocksHighlighted.push(false);
+        }
+        this.matchBlocksHighlighted.push(true);
+
+        while ((match = searchRegexp.exec(this.codeInput.value)) !== null) {
+            let matchText = match[0];
+            if(matchText.length == 0) {
+                throw SyntaxError("Causes an infinite loop");
+            }
+
+            // Add next match block if needed
+            let currentMatchBlock = Math.floor(matchID / CODE_INPUT_FIND_AND_REPLACE_MATCH_BLOCK_SIZE);
+            if(this.matchBlocksHighlighted.length < currentMatchBlock) {
+                this.matchBlocksHighlighted.push(false);
+            }
+
+            if(this.matchBlocksHighlighted[currentMatchBlock]) {
+                this.highlightMatch(matchID, this.codeInput.codeElement, match.index, match.index + matchText.length);
+            }
+            this.matchStartIndexes.push(match.index);
+            this.matchEndIndexes.push(match.index + matchText.length);
+            matchID++;
+        }
+        this.numMatches = matchID;
+
+        if(this.numMatches > 0) {
+            this.focusMatch();
+        }
+    }
+
+    /* Highlight all currently found matches again if there are any matches */
+    rehighlightMatches() {
+        this.updateMatches(this.lastSearchRegexp);
+        this.focusMatch();
+    }
+
+    /* Replace one match with the replacementText given */
+    replaceOnce(replacementText) {
+        if(this.numMatches > 0 && replacementText != this.codeInput.value.substring(0, this.matchStartIndexes[this.focusedMatchID], this.matchEndIndexes[this.focusedMatchID])) {
+            // Go to next match
+            this.focusedMatchStartIndex += replacementText.length;
+
+            // Select the match
+            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);
+        }
+    }
+
+    /* Replace all matches with the replacementText given */
+    replaceAll(replacementText) {
+        const replacementNumChars = replacementText.length;
+        let numCharsAdded = 0; // So can adjust match positions
+
+        for(let i = 0; i < this.numMatches; i++) {
+            // Replace each match
+            
+            // Select the match, taking into account characters added before
+            this.codeInput.textareaElement.focus();
+            this.codeInput.textareaElement.selectionStart = this.matchStartIndexes[i] + numCharsAdded;
+            this.codeInput.textareaElement.selectionEnd = this.matchEndIndexes[i] + numCharsAdded;
+
+            numCharsAdded += replacementNumChars - (this.matchEndIndexes[i] - this.matchStartIndexes[i]);
+
+            // Replace it with the replacement text
+            document.execCommand("insertText", false, replacementText);
+        }
+    }
+
+    /* Focus on the next match found in the find results */
+    nextMatch() {
+        this.focusMatch((this.focusedMatchID + 1) % this.numMatches);
+    }
+
+    /* Focus on the previous match found in the find results */
+    previousMatch() {
+        this.focusMatch((this.focusedMatchID + this.numMatches - 1) % this.numMatches);
+    }
+
+    /* Change the focused match to the match with ID matchID. */
+    focusMatch(matchID = undefined) {
+        if(matchID === undefined) {
+            // Focus on first match after focusedMatchStartIndex
+            matchID = 0;
+            while(matchID < this.matchStartIndexes.length && this.matchStartIndexes[matchID] < this.focusedMatchStartIndex) {
+                matchID++;
+            }
+            if(matchID >= this.matchStartIndexes.length) {
+                // After last match, move back to first match
+                matchID = 0;
+            }
+        }
+        
+        // Save focusedMatchStartIndex so if code changed match stays at same place
+        this.focusedMatchStartIndex = this.matchStartIndexes[matchID];
+        this.focusedMatchID = matchID;
+
+        // Delete old focus
+        let oldFocused = this.codeInput.codeElement.querySelectorAll(".code-input_find-and-replace_find-match-focused");
+        for(let i = 0; i < oldFocused.length; i++) {
+            oldFocused[i].classList.remove("code-input_find-and-replace_find-match-focused");
+        }
+
+        // Highlight match block if needed
+        let highlightedMatchBlock = Math.floor(matchID / CODE_INPUT_FIND_AND_REPLACE_MATCH_BLOCK_SIZE);
+        if(!this.matchBlocksHighlighted[highlightedMatchBlock]) {
+            this.matchBlocksHighlighted[highlightedMatchBlock] = true;
+            for(let i = CODE_INPUT_FIND_AND_REPLACE_MATCH_BLOCK_SIZE*highlightedMatchBlock; i < CODE_INPUT_FIND_AND_REPLACE_MATCH_BLOCK_SIZE*(highlightedMatchBlock+1); i++) {
+                // Highlight match
+                this.highlightMatch(i, this.codeInput.codeElement, this.matchStartIndexes[i], this.matchEndIndexes[i])
+            }
+        }
+
+        // Add new focus
+        let newFocused = this.codeInput.codeElement.querySelectorAll(`.code-input_find-and-replace_find-match[data-code-input_find-and-replace_match-id="${matchID}"]`);
+        for(let i = 0; i < newFocused.length; i++) {
+            newFocused[i].classList.add("code-input_find-and-replace_find-match-focused");
+        }
+        
+        if(newFocused.length > 0) {
+            this.codeInput.scrollTo(newFocused[0].offsetLeft - this.codeInput.offsetWidth / 2, newFocused[0].offsetTop - this.codeInput.offsetHeight / 2); // So focused match in centre of screen
+        }
+    }
+
+    /* 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. */
+    highlightMatch(matchID, currentElement, startIndex, endIndex) {
+        for(let i = 0; i < currentElement.childNodes.length; i++) {
+            let childElement = currentElement.childNodes[i];
+            let childText = childElement.textContent;
+
+            let noInnerElements = false;
+            if(childElement.nodeType == 3) {
+                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
+                    currentElement.removeChild(childElement); // Delete this node
+                    i--; // As an element removed
+                    continue; // Move to next node
+                }
+                // Text node - replace with span
+                noInnerElements = true;
+
+                let replacementElement = document.createElement("span");
+                replacementElement.textContent = childText;
+                replacementElement.classList.add("code-input_find-and-replace_temporary-span"); // Can remove
+                
+                currentElement.replaceChild(replacementElement, childElement);
+                childElement = replacementElement;
+            }
+
+            if(startIndex <= 0) {
+                // Started highlight
+                if(childText.length >= endIndex) {
+                    // Match ends in childElement
+                    if(noInnerElements) {
+                        // Text node - highlight first part
+                        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.textContent = childText.substring(0, endIndex);
+                        if(startSpan.textContent[0] == "\n") {
+                            // Newline at start - make clear
+                            startSpan.classList.add("code-input_find-and-replace_start-newline");
+                        }
+
+                        let endText = childText.substring(endIndex);
+                        childElement.textContent = endText;
+                        
+                        childElement.insertAdjacentElement('beforebegin', startSpan);
+                        i++; // An extra element has been added
+                        return;
+                    } else {
+                        this.highlightMatch(matchID, childElement, 0, endIndex);
+                    }
+
+                    // Match ended - nothing to do after backtracking
+                    return;
+                } else {
+                    // Match goes through child element
+                    childElement.classList.add("code-input_find-and-replace_find-match"); // Highlighted
+                    childElement.setAttribute("data-code-input_find-and-replace_match-id", matchID);
+                    if(childElement.textContent[0] == "\n") {
+                        // Newline at start - make clear
+                        childElement.classList.add("code-input_find-and-replace_start-newline");
+                    }
+                }
+            } else if(childText.length > startIndex) {
+                // Match starts in childElement
+                if(noInnerElements) {
+                    if(childText.length > endIndex) {
+                        // 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.textContent = childText.substring(0, startIndex);
+
+                        let middleText = childText.substring(startIndex, endIndex);
+                        childElement.textContent = middleText;
+                        childElement.classList.add("code-input_find-and-replace_find-match"); // Highlighted
+                        childElement.setAttribute("data-code-input_find-and-replace_match-id", matchID);
+                        if(childElement.textContent[0] == "\n") {
+                            // Newline at start - make clear
+                            childElement.classList.add("code-input_find-and-replace_start-newline");
+                        }
+
+                        let endSpan = document.createElement("span");
+                        endSpan.classList.add("code-input_find-and-replace_temporary-span"); // Can remove
+                        endSpan.textContent = childText.substring(endIndex);
+                        
+                        childElement.insertAdjacentElement('beforebegin', startSpan);
+                        childElement.insertAdjacentElement('afterend', endSpan);
+                        i++; // 2 extra elements have been added
+                    } else {
+                        // Text node - highlight last part
+                        let startText = childText.substring(0, startIndex);
+                        childElement.textContent = startText;
+
+                        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.textContent = childText.substring(startIndex);
+                        if(endSpan.textContent[0] == "\n") {
+                            // Newline at start - make clear
+                            endSpan.classList.add("code-input_find-and-replace_start-newline");
+                        }
+
+                        childElement.insertAdjacentElement('afterend', endSpan);
+                        i++; // An extra element has been added
+                    }
+                } else {
+                    this.highlightMatch(matchID, childElement, startIndex, endIndex);
+                }
+                
+                if(childText.length > endIndex) {
+                    // Match completely in childElement - nothing to do after backtracking
+                    return;
+                }
+            }
+
+            // Make indexes skip the element
+            startIndex -= childText.length;
+            endIndex -= childText.length;
+        }
+    }
+}

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

@@ -0,0 +1 @@
+.code-input_find-and-replace_find-match{color:inherit;text-shadow:none!important;background-color:#ff0!important}.code-input_find-and-replace_find-match-focused,.code-input_find-and-replace_find-match-focused *{background-color:#f80!important;color:#000!important}.code-input_find-and-replace_start-newline::before{content:"⤶"}@keyframes code-input_find-and-replace_roll-in{0%{opacity:0;transform:translateY(-34px)}100%{opacity:1;transform:translateY(0)}}@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:#fff;border-radius:6px;box-shadow:0 .2em 1em .2em rgba(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:0}.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:#ddd;text-align:center;color:#000;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:#bbb}.code-input_find-and-replace_dialog input[type=checkbox]:checked{background-color:#222;color:#fff}.code-input_find-and-replace_match-description{display:block;color:#444}.code-input_find-and-replace_dialog button,.code-input_find-and-replace_dialog details summary{cursor:pointer}.code-input_find-and-replace_dialog button.code-input_find-and-replace_button-hidden{opacity:0;pointer-events:none}.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:#000;opacity:.6}.code-input_find-and-replace_dialog span:before{content:"\00d7"}.code-input_find-and-replace_dialog span:hover{opacity:.8;background-color:#00000018}