@webcoder49/code-input 2.6.0 → 2.6.3

package/esm/plugins/select-token-callbacks.d.mts

@@ -0,0 +1,51 @@
+// NOTICE: This code is @generated from code outside the esm directory. Please do not edit it to contribute!
+
+import { Plugin, CodeInput } from "../code-input.d.mts";
+  /**
+   * Make tokens in the <pre><code> element that are included within the selected text of the <code-input>
+   * gain a CSS export default class while selected, or trigger JavaScript callbacks.
+   * Files: select-token-callbacks.js
+   */
+  class SelectTokenCallbacks extends Plugin {
+    /**
+     * Set up the behaviour of tokens text-selected in the `<code-input>` element, and the exact definition of a token being text-selected.
+     * 
+     * All parameters are optional. If you provide no arguments to the constructor, this will dynamically apply the "code-input_select-token-callbacks_selected" class to selected tokens only, for you to style via CSS.
+     * 
+     * @param {codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks} tokenSelectorCallbacks What to do with text-selected tokens. See docstrings for the TokenSelectorCallbacks class.
+     * @param {boolean} onlyCaretNotSelection If true, tokens will only be marked as selected when no text is selected but rather the caret is inside them (start of selection == end of selection). Default false.
+     * @param {boolean} caretAtStartIsSelected Whether the caret or text selection's end being just before the first character of a token means said token is selected. Default true.
+     * @param {boolean} caretAtEndIsSelected Whether the caret or text selection's start being just after the last character of a token means said token is selected. Default true.
+     * @param {boolean} createSubTokens Whether temporary `<span>` elements should be created inside partially-selected tokens containing just the selected text and given the selected class. Default false.
+     * @param {boolean} partiallySelectedTokensAreSelected Whether tokens for which only some of their text is selected should be treated as selected. Default true.
+     * @param {boolean} parentTokensAreSelected Whether all parent tokens of selected tokens should be treated as selected. Default true.
+     */
+    constructor(tokenSelectorCallbacks?: codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks, onlyCaretNotSelection?: boolean, caretAtStartIsSelected?: boolean, caretAtEndIsSelected?: boolean, createSubTokens?: boolean, partiallySelectedTokensAreSelected?: boolean, parentTokensAreSelected?: boolean);
+  }
+
+  namespace SelectTokenCallbacks {
+    /**
+     * A data structure specifying what should be done with tokens when they are selected, and also allows for previously selected
+     * tokens to be dealt with each time the selection changes. See the constructor and the createClassSynchronisation static method.
+     */
+    class TokenSelectorCallbacks {
+      /**
+       * Pass any callbacks you want to customise the behaviour of selected tokens via JavaScript.
+       * 
+       * (If the behaviour you want is just differently styling selected tokens _via CSS_, you should probably use the createClassSynchronisation static method.) 
+       * @param {(token: HTMLElement) => void} tokenSelectedCallback Runs multiple times when the text selection inside the code-input changes, each time inputting a single (part of the highlighted `<pre><code>`) token element that is selected in the new text selection.
+       * @param {(tokenContainer: HTMLElement) => void} selectChangedCallback Each time the text selection inside the code-input changes, runs once before any tokenSelectedCallback calls, inputting the highlighted `<pre><code>`'s `<code>` element that contains all token elements.
+       */
+      constructor(tokenSelectedCallback: (token: HTMLElement) => void, selectChangedCallback: (tokenContainer: HTMLElement) => void);
+      
+      /**
+       * Use preset callbacks which ensure all tokens in the selected text range in the `<code-input>`, and only such tokens, are given a certain CSS class.
+       * 
+       * (If the behaviour you want requires more complex behaviour or JavaScript, you should use TokenSelectorCallbacks' constructor.) 
+       * 
+       * @param {string} selectedClass The CSS class that will be present on tokens only when they are part of the selected text in the `<code-input>` element. Defaults to "code-input_select-token-callbacks_selected".
+       * @returns {TokenSelectorCallbacks} A new TokenSelectorCallbacks instance that encodes this behaviour.
+       */
+      static createClassSynchronisation(selectedClass?: string): codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks;
+    }
+  }

package/esm/plugins/select-token-callbacks.mjs

@@ -0,0 +1,296 @@
+// NOTICE: This code is @generated from code outside the esm directory. Please do not edit it to contribute!
+
+import { Plugin } from "../code-input.mjs";
+const plugins = {};
+/**
+ * Make tokens in the <pre><code> element that are included within the selected text of the <code-input>
+ * gain a CSS class while selected, or trigger JavaScript callbacks.
+ * Files: select-token-callbacks.js
+ */
+"use strict";
+
+plugins.SelectTokenCallbacks = class extends Plugin {
+    /**
+     * Set up the behaviour of tokens text-selected in the `<code-input>` element, and the exact definition of a token being text-selected.
+     * 
+     * All parameters are optional. If you provide no arguments to the constructor, this will dynamically apply the "code-input_select-token-callbacks_selected" class to selected tokens only, for you to style via CSS.
+     * 
+     * @param {plugins.SelectTokenCallbacks.TokenSelectorCallbacks} tokenSelectorCallbacks What to do with text-selected tokens. See docstrings for the TokenSelectorCallbacks class.
+     * @param {boolean} onlyCaretNotSelection If true, tokens will only be marked as selected when no text is selected but rather the caret is inside them (start of selection == end of selection). Default false.
+     * @param {boolean} caretAtStartIsSelected Whether the caret or text selection's end being just before the first character of a token means said token is selected. Default true.
+     * @param {boolean} caretAtEndIsSelected Whether the caret or text selection's start being just after the last character of a token means said token is selected. Default true.
+     * @param {boolean} createSubTokens Whether temporary `<span>` elements should be created inside partially-selected tokens containing just the selected text and given the selected class. Default false.
+     * @param {boolean} partiallySelectedTokensAreSelected Whether tokens for which only some of their text is selected should be treated as selected. Default true.
+     * @param {boolean} parentTokensAreSelected Whether all parent tokens of selected tokens should be treated as selected. Default true.
+     */
+    constructor(tokenSelectorCallbacks = plugins.SelectTokenCallbacks.TokenSelectorCallbacks.createClassSynchronisation(), onlyCaretNotSelection = false, caretAtStartIsSelected = true, caretAtEndIsSelected = true, createSubTokens = false, partiallySelectedTokensAreSelected = true, parentTokensAreSelected = true) {
+        super([]); // No observed attributes
+
+        this.tokenSelectorCallbacks = tokenSelectorCallbacks;
+        this.onlyCaretNotSelection = onlyCaretNotSelection;
+        this.caretAtStartIsSelected = caretAtStartIsSelected;
+        this.caretAtEndIsSelected = caretAtEndIsSelected;
+        this.createSubTokens = createSubTokens;
+        this.partiallySelectedTokensAreSelected = partiallySelectedTokensAreSelected;
+        this.parentTokensAreSelected = parentTokensAreSelected;
+    }
+    /* Runs after code is highlighted; Params: codeInput element) */
+    afterHighlight(codeInputElement) {
+        this.syncSelection(codeInputElement);
+    }
+    /* Runs after elements are added into a `code-input` (useful for adding events to the textarea); Params: codeInput element) */
+    afterElementsAdded(codeInputElement) {
+        codeInputElement.pluginData.selectTokenCallbacks = {};
+        codeInputElement.pluginData.selectTokenCallbacks.lastSelectionStart = codeInputElement.textareaElement.selectionStart;
+        codeInputElement.pluginData.selectTokenCallbacks.lastSelectionEnd = codeInputElement.textareaElement.selectionEnd;
+        codeInputElement.pluginData.selectTokenCallbacks.selectedTokenState = new plugins.SelectTokenCallbacks.SelectedTokenState(codeInputElement.codeElement, this.tokenSelectorCallbacks, this.onlyCaretNotSelection, this.caretAtStartIsSelected, this.caretAtEndIsSelected, this.createSubTokens, this.partiallySelectedTokensAreSelected, this.parentTokensAreSelected);
+        this.syncSelection(codeInputElement);
+
+        // As of 2024-08, the selectionchange event is only supported on Firefox.
+        codeInputElement.textareaElement.addEventListener("selectionchange", () => {
+            this.checkSelectionChanged(codeInputElement)
+        });
+        // When selectionchange has complete support, the listeners below can be deleted.
+        codeInputElement.textareaElement.addEventListener("select", () => {
+            this.checkSelectionChanged(codeInputElement)
+        });
+        codeInputElement.textareaElement.addEventListener("keypress", () => {
+            this.checkSelectionChanged(codeInputElement)
+        });
+        codeInputElement.textareaElement.addEventListener("mousedown", () => {
+            this.checkSelectionChanged(codeInputElement)
+        });
+    }
+    /* If the text selection has changed, run syncSelection. */
+    checkSelectionChanged(codeInputElement) {
+        if(
+            codeInputElement.textareaElement.selectionStart != codeInputElement.pluginData.selectTokenCallbacks.lastSelectionStart
+            || codeInputElement.textareaElement.selectionEnd != codeInputElement.pluginData.selectTokenCallbacks.lastSelectionEnd
+        ) {
+            this.syncSelection(codeInputElement);
+            codeInputElement.pluginData.selectTokenCallbacks.lastSelectionStart = codeInputElement.textareaElement.selectionStart;
+            codeInputElement.pluginData.selectTokenCallbacks.lastSelectionEnd = codeInputElement.textareaElement.selectionEnd;
+        }
+    }
+    /* Update which elements have the code-input_selected class. */
+    syncSelection(codeInputElement) {
+        codeInputElement.pluginData.selectTokenCallbacks.selectedTokenState.updateSelection(codeInputElement.textareaElement.selectionStart, codeInputElement.textareaElement.selectionEnd)
+    }
+}
+
+/**
+ * A data structure specifying what should be done with tokens when they are selected, and also allows for previously selected
+ * tokens to be dealt with each time the selection changes. See the constructor and the createClassSynchronisation static method.
+ */
+plugins.SelectTokenCallbacks.TokenSelectorCallbacks = class {
+    /**
+     * Pass any callbacks you want to customise the behaviour of selected tokens via JavaScript.
+     * 
+     * (If the behaviour you want is just differently styling selected tokens _via CSS_, you should probably use the createClassSynchronisation static method.) 
+     * @param {(token: HTMLElement) => void} tokenSelectedCallback Runs multiple times when the text selection inside the code-input changes, each time inputting a single (part of the highlighted `<pre><code>`) token element that is selected in the new text selection.
+     * @param {(tokenContainer: HTMLElement) => void} selectChangedCallback Each time the text selection inside the code-input changes, runs once before any tokenSelectedCallback calls, inputting the highlighted `<pre><code>`'s `<code>` element that contains all token elements.
+     */
+    constructor(tokenSelectedCallback, selectChangedCallback) {
+        this.tokenSelectedCallback = tokenSelectedCallback;
+        this.selectChangedCallback = selectChangedCallback;
+    }
+
+    /**
+     * Use preset callbacks which ensure all tokens in the selected text range in the `<code-input>`, and only such tokens, are given a certain CSS class.
+     * 
+     * (If the behaviour you want requires more complex behaviour or JavaScript, you should use TokenSelectorCallbacks' constructor.) 
+     * 
+     * @param {string} selectedClass The CSS class that will be present on tokens only when they are part of the selected text in the `<code-input>` element. Defaults to "code-input_select-token-callbacks_selected".
+     * @returns A new TokenSelectorCallbacks instance that encodes this behaviour.
+     */
+    static createClassSynchronisation(selectedClass = "code-input_select-token-callbacks_selected") {
+        return new plugins.SelectTokenCallbacks.TokenSelectorCallbacks(
+            (token) => {
+                token.classList.add(selectedClass);
+            },
+            (tokenContainer) => {
+                // Remove selected class
+                let selectedClassTokens = tokenContainer.getElementsByClassName(selectedClass);
+                // Use it like a queue, because as elements have their class name removed they are live-removed from the collection.
+                while(selectedClassTokens.length > 0) {
+                    selectedClassTokens[0].classList.remove(selectedClass);
+                }
+            }
+        );
+    }
+}
+
+/* Manages a single <code-input> element's selected tokens, and calling the correct functions on the selected tokens */
+plugins.SelectTokenCallbacks.SelectedTokenState = class {
+    constructor(codeElement, tokenSelectorCallbacks, onlyCaretNotSelection, caretAtStartIsSelected, caretAtEndIsSelected, createSubTokens, partiallySelectedTokensAreSelected, parentTokensAreSelected) {
+        this.tokenContainer = codeElement;
+        this.tokenSelectorCallbacks = tokenSelectorCallbacks;
+        this.onlyCaretNotSelection = onlyCaretNotSelection;
+        this.caretAtStartIsSelected = caretAtStartIsSelected;
+        this.caretAtEndIsSelected = caretAtEndIsSelected;
+        this.createSubTokens = createSubTokens;
+        this.partiallySelectedTokensAreSelected = partiallySelectedTokensAreSelected;
+        this.parentTokensAreSelected = parentTokensAreSelected;
+    }
+
+    /* Change the selected region to a new range from selectionStart to selectionEnd and run
+    the callbacks. */
+    updateSelection(selectionStart, selectionEnd) {
+        this.selectChanged()
+        if(!this.onlyCaretNotSelection || selectionStart == selectionEnd) { // Only deal with selected text if onlyCaretNotSelection is false.
+            this.updateSelectedTokens(this.tokenContainer, selectionStart, selectionEnd)
+        }
+    }
+    /* Runs when the text selection has changed, before any updateSelectedTokens call. */
+    selectChanged() {
+        if(this.createSubTokens) {
+            // Remove generated spans to hold selected partial tokens
+            let tempSpans = this.tokenContainer.getElementsByClassName("code-input_select-token-callbacks_temporary-span");
+            while(tempSpans.length > 0) {
+                // Replace with textContent as Text node
+                // Use it like a queue, because as elements have their class name removed they are live-removed from the collection.
+                tempSpans[0].parentElement.replaceChild(new Text(tempSpans[0].textContent), tempSpans[0]);
+            }
+        }
+
+        this.tokenSelectorCallbacks.selectChangedCallback(this.tokenContainer);
+    }
+
+    /* Do the desired behaviour for selection to all tokens (elements in the currentElement)
+    from startIndex to endIndex in the text. Start from the currentElement as this function is recursive.
+    This code is similar to plugins.FindAndReplace.FindMatchState.highlightMatch*/
+    updateSelectedTokens(currentElement, startIndex, endIndex) {
+        if(endIndex < 0 || endIndex == 0 && !this.caretAtStartIsSelected) {
+            return; // Nothing selected
+        }
+        if(this.parentTokensAreSelected && currentElement !== this.tokenContainer) {
+            this.tokenSelectorCallbacks.tokenSelectedCallback(currentElement); // Parent elements also marked with class / have callback called
+        }
+        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) {
+                // Text node
+                if(this.createSubTokens) {
+                    // Replace with token
+                    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
+                    }
+                    noInnerElements = true;
+    
+                    let replacementElement = document.createElement("span");
+                    replacementElement.textContent = childText;
+                    replacementElement.classList.add("code-input_select-token-callbacks_temporary-span"); // Can remove span later
+                    
+                    currentElement.replaceChild(replacementElement, childElement);
+                    childElement = replacementElement;
+                } else {
+                    // Skip text node
+                    // Make indexes skip the element
+                    startIndex -= childText.length;
+                    endIndex -= childText.length;
+                    continue;
+                }
+            }
+
+            if(startIndex <= 0) {
+                // Started selection
+                if(childText.length > endIndex) {
+                    // Selection ends in childElement
+                    if(this.partiallySelectedTokensAreSelected) {
+                        if(noInnerElements) {
+                            if(this.createSubTokens && startIndex != endIndex) { // Subtoken to create
+                                // Text node - add selection class to first part
+                                let startSpan = document.createElement("span");
+                                this.tokenSelectorCallbacks.tokenSelectedCallback(startSpan); // Selected
+                                startSpan.classList.add("code-input_select-token-callbacks_temporary-span"); // Can remove span later
+                                startSpan.textContent = childText.substring(0, endIndex);
+
+                                let endText = childText.substring(endIndex);
+                                childElement.textContent = endText;
+                                
+                                childElement.insertAdjacentElement('beforebegin', startSpan);
+                                i++; // An extra element has been added
+                            }
+                            if(this.parentTokensAreSelected || !this.createSubTokens) {
+                                this.tokenSelectorCallbacks.tokenSelectedCallback(childElement); // Selected                                
+                            }
+                        } else {
+                            this.updateSelectedTokens(childElement, 0, endIndex);
+                        }
+                    }
+
+                    // Match ended - nothing to do after backtracking
+                    return;
+                } else {
+                    // Match goes through child element
+                    this.tokenSelectorCallbacks.tokenSelectedCallback(childElement); // Selected
+                }
+            } else if(this.caretAtEndIsSelected && childText.length >= startIndex || childText.length > startIndex) {
+                // Match starts in childElement
+                if(this.partiallySelectedTokensAreSelected) {
+                    if(noInnerElements) {
+                        if(this.createSubTokens && startIndex != endIndex) { // Subtoken to create
+                            if(childText.length > endIndex) {
+                                // Match starts and ends in childElement - selection middle part
+                                let startSpan = document.createElement("span");
+                                startSpan.classList.add("code-input_select-token-callbacks_temporary-span"); // Can remove span later
+                                startSpan.textContent = childText.substring(0, startIndex);
+    
+                                let middleText = childText.substring(startIndex, endIndex);
+                                childElement.textContent = middleText;
+                                this.tokenSelectorCallbacks.tokenSelectedCallback(childElement); // Selection
+    
+                                let endSpan = document.createElement("span");
+                                endSpan.classList.add("code-input_select-token-callbacks_temporary-span"); // Can remove span later
+                                endSpan.textContent = childText.substring(endIndex);
+                                
+                                childElement.insertAdjacentElement('beforebegin', startSpan);
+                                childElement.insertAdjacentElement('afterend', endSpan);
+                                i++; // 2 extra elements have been added
+                            } else {
+                                // Match starts in element - highlight last part
+                                let startText = childText.substring(0, startIndex);
+                                childElement.textContent = startText;
+    
+                                let endSpan = document.createElement("span");
+                                this.tokenSelectorCallbacks.tokenSelectedCallback(endSpan); // Selected
+                                endSpan.classList.add("code-input_select-token-callbacks_temporary-span"); // Can remove span later
+                                endSpan.textContent = childText.substring(startIndex);
+    
+                                childElement.insertAdjacentElement('afterend', endSpan);
+                                i++; // An extra element has been added
+                            }
+                        }
+                        if(this.parentTokensAreSelected || !this.createSubTokens) {
+                            this.tokenSelectorCallbacks.tokenSelectedCallback(childElement); // Selected                                
+                        }
+                    } else {
+                        this.updateSelectedTokens(childElement, startIndex, endIndex);
+                    }
+                }
+                
+                if(this.caretAtStartIsSelected) {
+                    if(childText.length > endIndex) {
+                        // Match completely in childElement - nothing to do after backtracking
+                        return;
+                    }
+                } else 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;
+        }
+    }
+}
+export default plugins.SelectTokenCallbacks;

package/esm/plugins/special-chars.d.mts

@@ -0,0 +1,25 @@
+// NOTICE: This code is @generated from code outside the esm directory. Please do not edit it to contribute!
+
+import { Plugin, CodeInput } from "../code-input.d.mts";
+  /**
+   * Render special characters and control characters as a symbol with their hex code.
+   * Files: special-chars.js, special-chars.css
+   *
+   * WARNING:
+   *
+   * This plugin is currently unstable when used with other plugins,
+   * Unicode characters, or highlight.js. I hope to fix much of this by
+   * major version 3, and if you could help that would be amazing!
+   *
+   * See https://github.com/WebCoder49/code-input/issues?q=is%3Aissue%20state%3Aopen%20specialchars
+   */
+  export default class SpecialChars extends Plugin {
+    /**
+     * Create a special characters plugin instance.
+     * Default = covers many non-renderable ASCII characters.
+     * @param {Boolean} colorInSpecialChars Whether or not to give special characters custom background colors based on their hex code. Defaults to false.
+     * @param {Boolean} inheritTextColor If true, forces the color of the hex code to inherit from syntax highlighting. If false, the base color of the `pre code` element is used to give contrast to the small characters. Defaults to false.
+     * @param {RegExp} specialCharRegExp The regular expression which matches special characters. Defaults to many non-renderable ASCII characters (which characters are renderable depends on the browser and OS).
+     */
+    constructor(colorInSpecialChars?: boolean, inheritTextColor?: boolean, specialCharRegExp?: RegExp);
+  }

package/esm/plugins/special-chars.mjs

@@ -0,0 +1,207 @@
+// NOTICE: This code is @generated from code outside the esm directory. Please do not edit it to contribute!
+
+import { Plugin } from "../code-input.mjs";
+const plugins = {};
+/**
+ * Render special characters and control characters as a symbol with their hex code.
+ * Files: special-chars.js, special-chars.css
+ *
+ * WARNING:
+ *
+ * This plugin is currently unstable when used with other plugins,
+ * Unicode characters, or highlight.js. I hope to fix much of this by
+ * major version 3, and if you could help that would be amazing!
+ *
+ * See https://github.com/WebCoder49/code-input/issues?q=is%3Aissue%20state%3Aopen%20specialchars
+ */
+"use strict";
+
+plugins.SpecialChars = class extends Plugin {
+    specialCharRegExp;
+
+    cachedColors; // ascii number > [background color, text color]
+    cachedWidths; // character > character width
+    canvasContext;
+
+    /**
+     * Create a special characters plugin instance.
+     * Default = covers many non-renderable ASCII characters.
+     * @param {Boolean} colorInSpecialChars Whether or not to give special characters custom background colors based on their hex code. Defaults to false.
+     * @param {Boolean} inheritTextColor If true, forces the color of the hex code to inherit from syntax highlighting. If false, the base color of the `pre code` element is used to give contrast to the small characters. Defaults to false.
+     * @param {RegExp} specialCharRegExp The regular expression which matches special characters. Defaults to many non-renderable ASCII characters (which characters are renderable depends on the browser and OS).
+     */
+    constructor(colorInSpecialChars = false, inheritTextColor = false, specialCharRegExp = /(?!\n)(?!\t)[\u{0000}-\u{001F}]|[\u{007F}-\u{009F}]|[\u{0200}-\u{FFFF}]/ug) { // By default, covers many non-renderable ASCII characters
+        super([]); // No observed attributes
+        
+        this.specialCharRegExp = specialCharRegExp;
+        this.colorInSpecialChars = colorInSpecialChars;
+        this.inheritTextColor = inheritTextColor;
+
+        this.cachedColors = {};
+        this.cachedWidths = {};
+
+        let canvas = document.createElement("canvas");
+        this.canvasContext = canvas.getContext("2d");
+    }
+
+    /* Initially render special characters as the highlighting algorithm may automatically highlight and remove them */
+    afterElementsAdded(codeInput) {
+        setTimeout(() => { codeInput.value = codeInput.value; }, 100);
+    }
+
+    /* After highlighting, render special characters as their stylised hexadecimal equivalents */
+    afterHighlight(codeInput) {      
+        let resultElement = codeInput.codeElement;
+
+        // Reset data each highlight so can change if font size, etc. changes
+        codeInput.pluginData.specialChars = {};
+        codeInput.pluginData.specialChars.contrastColor = window.getComputedStyle(resultElement).color;
+
+        this.recursivelyReplaceText(codeInput, resultElement);
+
+        this.lastFont = window.getComputedStyle(codeInput.textareaElement).font;
+    }
+
+    /* Search for special characters in an element and replace them with their stylised hexadecimal equivalents */
+    recursivelyReplaceText(codeInput, element) {
+        for(let i = 0; i < element.childNodes.length; i++) {
+
+            let nextNode = element.childNodes[i];
+            if(nextNode.nodeType == 3) {
+                // Text node - Replace in here
+                let oldValue = nextNode.nodeValue;
+
+                this.specialCharRegExp.lastIndex = 0;
+                let searchResult = this.specialCharRegExp.exec(oldValue);
+                if(searchResult != null) {
+                    let charIndex = searchResult.index; // Start as returns end
+
+                    nextNode = nextNode.splitText(charIndex+1).previousSibling;
+                    
+                    if(charIndex > 0) {
+                        nextNode = nextNode.splitText(charIndex); // Keep characters before the special character in a different span
+                    }
+
+                    if(nextNode.textContent != "") {
+                        let replacementElement = this.getStylisedSpecialChar(codeInput, nextNode.textContent);
+                        // This next node will become the i+1th node so automatically iterated to
+                        nextNode.parentNode.insertBefore(replacementElement, nextNode);
+                        nextNode.textContent = "";
+                    }
+                }
+            } else if(nextNode.nodeType == 1) {
+                if(nextNode.className != "code-input_special-char" && nextNode.nodeValue != "") {
+                    // Element - recurse
+                    this.recursivelyReplaceText(codeInput, nextNode);
+                }
+            }
+        }
+    }
+
+    /* Get the stylised hexadecimal representation HTML element for a given special character */
+    getStylisedSpecialChar(codeInput, matchChar) {
+        let hexCode = matchChar.codePointAt(0);
+
+        let colors;
+        if(this.colorInSpecialChars) colors = this.getCharacterColors(hexCode);
+
+        hexCode = hexCode.toString(16);
+        hexCode = ("0000" + hexCode).substring(hexCode.length); // So 2 chars with leading 0
+        hexCode = hexCode.toUpperCase();
+
+        let charWidth = this.getCharacterWidthEm(codeInput, matchChar);
+
+        // Create element with hex code
+        let result = document.createElement("span");
+        result.textContent = matchChar;
+        result.classList.add("code-input_special-char");
+        result.style.setProperty("--hex-0",  "var(--code-input_special-chars_" + hexCode[0] + ")");
+        result.style.setProperty("--hex-1",  "var(--code-input_special-chars_" + hexCode[1] + ")");
+        result.style.setProperty("--hex-2",  "var(--code-input_special-chars_" + hexCode[2] + ")");
+        result.style.setProperty("--hex-3",  "var(--code-input_special-chars_" + hexCode[3] + ")");
+        
+        // Handle zero-width chars
+        if(charWidth == 0) result.classList.add("code-input_special-char_zero-width");
+        else result.style.width = charWidth + "em";
+
+        if(this.colorInSpecialChars) {
+            result.style.backgroundColor = "#" + colors[0];
+            result.style.setProperty("--code-input_special-char_color", colors[1]);
+        } else if(!this.inheritTextColor) {
+            result.style.setProperty("--code-input_special-char_color", codeInput.pluginData.specialChars.contrastColor);
+        }
+        return result;
+    }
+    
+    /* Get the colors a stylised representation of a given character must be shown in; lazy load and return [background color, text color] */
+    getCharacterColors(asciiCode) {
+        let textColor;
+        if(!(asciiCode in this.cachedColors)) {
+            // Get background color
+            let asciiHex = asciiCode.toString(16);
+            let backgroundColor = "";
+            for(let i = 0; i < asciiHex.length; i++) {
+                backgroundColor += asciiHex[i] + asciiHex[i];
+            }
+            backgroundColor = ("000000" + backgroundColor).substring(backgroundColor.length); // So valid HEX color with 6 characters
+
+            // Get most suitable text color - white or black depending on background brightness
+            let colorBrightness = 0;
+            const luminanceCoefficients = [0.299, 0.587, 0.114];
+            for(let i = 0; i < 6; i += 2) {
+                colorBrightness += parseInt(backgroundColor.substring(i, i+2), 16) * luminanceCoefficients[i/2];
+            }
+            // Calculate darkness
+            textColor = colorBrightness < 128 ? "white" : "black";
+
+            this.cachedColors[asciiCode] = [backgroundColor, textColor];
+            return [backgroundColor, textColor];
+        } else {
+            return this.cachedColors[asciiCode];
+        }
+    }
+
+    /* Get the width of a character in em (relative to font size), for use in creation of the stylised hexadecimal representation with the same width */
+    getCharacterWidthEm(codeInput, char) {
+        // Force zero-width characters
+        if(new RegExp("\u00AD|\u02DE|[\u0300-\u036F]|[\u0483-\u0489]|[\u200B-\u200D]|\uFEFF").test(char) ) { return 0 }
+        // Non-renderable ASCII characters should all be rendered at same size
+        if(char != "\u0096" && new RegExp("[\u{0000}-\u{001F}]|[\u{007F}-\u{009F}]", "g").test(char)) {
+            let fallbackWidth = this.getCharacterWidthEm(codeInput, "\u0096");
+            return fallbackWidth;
+        }
+
+        let font = getComputedStyle(codeInput.textareaElement).fontFamily + " " + getComputedStyle(codeInput.textareaElement).fontStretch + " " + getComputedStyle(codeInput.textareaElement).fontStyle + " " + getComputedStyle(codeInput.textareaElement).fontVariant + " " + getComputedStyle(codeInput.textareaElement).fontWeight + " " + getComputedStyle(codeInput.textareaElement).lineHeight; // Font without size
+
+        // Lazy-load width of each character
+        if(this.cachedWidths[font] == undefined) {
+            this.cachedWidths[font] = {};
+        }
+        if(this.cachedWidths[font][char] != undefined) { // Use cached width
+            return this.cachedWidths[font][char];
+        }
+
+        // Ensure font the same - 20px font size is where this algorithm works
+        this.canvasContext.font = getComputedStyle(codeInput.textareaElement).font.replace(getComputedStyle(codeInput.textareaElement).fontSize, "20px");
+
+        // Try to get width from canvas
+        let width = this.canvasContext.measureText(char).width/20; // From px to em (=proportion of font-size)
+        if(width > 1) {
+            width /= 2; // Fix double-width-in-canvas Firefox bug
+        } else if(width == 0 && char != "\u0096") {
+            let fallbackWidth = this.getCharacterWidthEm(codeInput, "\u0096");
+            return fallbackWidth; // In Firefox some control chars don't render, but all control chars are the same width
+        }
+
+        // Firefox will never make smaller than size at 20px
+        if(navigator.userAgent.includes("Mozilla") && !navigator.userAgent.includes("Chrome") && !navigator.userAgent.includes("Safari")) {
+            let fontSize = Number(getComputedStyle(codeInput.textareaElement).fontSize.substring(0, getComputedStyle(codeInput.textareaElement).fontSize.length-2)); // Remove 20, make px
+            if(fontSize < 20) width *= 20 / fontSize;
+        }
+
+        this.cachedWidths[font][char] = width;
+
+        return width;
+    }
+}
+export default plugins.SpecialChars;

package/esm/plugins/test.d.mts

@@ -0,0 +1,16 @@
+// NOTICE: This code is @generated from code outside the esm directory. Please do not edit it to contribute!
+
+import { Plugin, CodeInput } from "../code-input.d.mts";
+  /**
+   * JavaScript example of a plugin, which brings extra,
+   * non-central optional functionality to code-input.
+   * Instances of plugins can be passed in in an array
+   * to the `plugins` argument when registering a template,
+   * for example like this:
+   * ```javascript
+   * codeInput.registerTemplate("syntax-highlighted", codeInput.templates.hljs(hljs, [new codeInput.plugins.Test()]));
+   * ```
+   */
+  export default class Test extends Plugin {
+    constructor();
+  }

package/esm/plugins/test.mjs

@@ -0,0 +1,56 @@
+// NOTICE: This code is @generated from code outside the esm directory. Please do not edit it to contribute!
+
+import { Plugin } from "../code-input.mjs";
+const plugins = {};
+/**
+ * Copy this to create a plugin, which brings extra,
+ * non-central optional functionality to code-input.
+ * Instances of plugins can be passed in in an array
+ * to the `plugins` argument when registering a template,
+ * for example like this:
+ * ```javascript
+ * codeInput.registerTemplate("syntax-highlighted", codeInput.templates.hljs(hljs, [new plugins.Test()]));
+ * ```
+ */
+"use strict";
+
+plugins.Test = class extends Plugin {
+    instructions = {
+        beforeHighlight: "before highlight",
+        afterHighlight: "after highlight",
+        beforeElementsAdded: "before elements added",
+        afterElementsAdded: "after elements added",
+        attributeChanged: (name, oldValue, newValue) => `${name}: '${oldValue}'>'${newValue}'`
+    };
+
+    constructor(instructionTranslations = {}) {
+        super(["testattr"]); 
+        // Array of observed attributes as parameter
+
+        // instructionTranslations, instructions, and the addTranslations
+        // call need not be present if this plugin uses no localisable
+        // text.
+        this.addTranslations(this.instructions, instructionTranslations);
+    }
+    /* Runs before code is highlighted; Params: codeInput element) */
+    beforeHighlight(codeInput) {
+        console.log(codeInput, this.instructions.beforeHighlight);
+    }
+    /* Runs after code is highlighted; Params: codeInput element) */
+    afterHighlight(codeInput) {
+        console.log(codeInput, this.instructions.afterHighlight);
+    }
+    /* Runs before elements are added into a `code-input`; Params: codeInput element) */
+    beforeElementsAdded(codeInput) {
+        console.log(codeInput, this.instructions.beforeElementsAdded);
+    }
+    /* Runs after elements are added into a `code-input` (useful for adding events to the textarea); Params: codeInput element) */
+    afterElementsAdded(codeInput) {
+        console.log(codeInput, this.instructions.afterElementsAdded);
+    }
+    /* Runs when an observed attribute of a `code-input` is changed (you must add the attribute name in the constructor); Params: codeInput element, name attribute name, oldValue previous value of attribute, newValue changed value of attribute) */
+    attributeChanged(codeInput, name, oldValue, newValue) {
+        console.log(codeInput, this.instructions.attriibuteChanged(name, oldValue, newValue));
+    }
+}
+export default plugins.Test;