@webcoder49/code-input 2.1.0 → 2.5.0

package/plugins/select-token-callbacks.js

@@ -0,0 +1,289 @@
+/**
+ * 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
+ */
+codeInput.plugins.SelectTokenCallbacks = class extends codeInput.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.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 codeInput.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.
+ */
+codeInput.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 codeInput.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 */
+codeInput.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 codeInput.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;
+        }
+    }
+}

package/plugins/select-token-callbacks.min.js

@@ -0,0 +1 @@
+codeInput.plugins.SelectTokenCallbacks=class extends codeInput.Plugin{constructor(a=codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks.createClassSynchronisation(),b=!1,c=!0,d=!0,e=!1,f=!0,g=!0){super([]),this.tokenSelectorCallbacks=a,this.onlyCaretNotSelection=b,this.caretAtStartIsSelected=c,this.caretAtEndIsSelected=d,this.createSubTokens=e,this.partiallySelectedTokensAreSelected=f,this.parentTokensAreSelected=g}afterHighlight(a){this.syncSelection(a)}afterElementsAdded(a){a.pluginData.selectTokenCallbacks={},a.pluginData.selectTokenCallbacks.lastSelectionStart=a.textareaElement.selectionStart,a.pluginData.selectTokenCallbacks.lastSelectionEnd=a.textareaElement.selectionEnd,a.pluginData.selectTokenCallbacks.selectedTokenState=new codeInput.plugins.SelectTokenCallbacks.SelectedTokenState(a.codeElement,this.tokenSelectorCallbacks,this.onlyCaretNotSelection,this.caretAtStartIsSelected,this.caretAtEndIsSelected,this.createSubTokens,this.partiallySelectedTokensAreSelected,this.parentTokensAreSelected),this.syncSelection(a),a.textareaElement.addEventListener("selectionchange",()=>{this.checkSelectionChanged(a)}),a.textareaElement.addEventListener("select",()=>{this.checkSelectionChanged(a)}),a.textareaElement.addEventListener("keypress",()=>{this.checkSelectionChanged(a)}),a.textareaElement.addEventListener("mousedown",()=>{this.checkSelectionChanged(a)})}checkSelectionChanged(a){(a.textareaElement.selectionStart!=a.pluginData.selectTokenCallbacks.lastSelectionStart||a.textareaElement.selectionEnd!=a.pluginData.selectTokenCallbacks.lastSelectionEnd)&&(this.syncSelection(a),a.pluginData.selectTokenCallbacks.lastSelectionStart=a.textareaElement.selectionStart,a.pluginData.selectTokenCallbacks.lastSelectionEnd=a.textareaElement.selectionEnd)}syncSelection(a){a.pluginData.selectTokenCallbacks.selectedTokenState.updateSelection(a.textareaElement.selectionStart,a.textareaElement.selectionEnd)}},codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks=class{constructor(a,b){this.tokenSelectedCallback=a,this.selectChangedCallback=b}static createClassSynchronisation(a="code-input_select-token-callbacks_selected"){return new codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks(b=>{b.classList.add(a)},b=>{for(let c=b.getElementsByClassName(a);0<c.length;)c[0].classList.remove(a)})}},codeInput.plugins.SelectTokenCallbacks.SelectedTokenState=class{constructor(a,b,c,d,e,f,g,h){this.tokenContainer=a,this.tokenSelectorCallbacks=b,this.onlyCaretNotSelection=c,this.caretAtStartIsSelected=d,this.caretAtEndIsSelected=e,this.createSubTokens=f,this.partiallySelectedTokensAreSelected=g,this.parentTokensAreSelected=h}updateSelection(a,b){this.selectChanged(),this.onlyCaretNotSelection&&a!=b||this.updateSelectedTokens(this.tokenContainer,a,b)}selectChanged(){if(this.createSubTokens)for(let a=this.tokenContainer.getElementsByClassName("code-input_select-token-callbacks_temporary-span");0<a.length;)a[0].parentElement.replaceChild(new Text(a[0].textContent),a[0]);this.tokenSelectorCallbacks.selectChangedCallback(this.tokenContainer)}updateSelectedTokens(a,b,c){if(!(0>c)&&(0!=c||this.caretAtStartIsSelected)){this.parentTokensAreSelected&&a!==this.tokenContainer&&this.tokenSelectorCallbacks.tokenSelectedCallback(a);for(let d=0;d<a.childNodes.length;d++){let e=a.childNodes[d],f=e.textContent,g=!1;if(3==e.nodeType)if(this.createSubTokens){if(d+1<a.childNodes.length&&3==a.childNodes[d+1].nodeType){a.childNodes[d+1].textContent=e.textContent+a.childNodes[d+1].textContent,a.removeChild(e),d--;continue}g=!0;let b=document.createElement("span");b.textContent=f,b.classList.add("code-input_select-token-callbacks_temporary-span"),a.replaceChild(b,e),e=b}else{b-=f.length,c-=f.length;continue}if(0>=b){if(f.length>c){if(this.partiallySelectedTokensAreSelected)if(g){if(this.createSubTokens&&b!=c){let a=document.createElement("span");this.tokenSelectorCallbacks.tokenSelectedCallback(a),a.classList.add("code-input_select-token-callbacks_temporary-span"),a.textContent=f.substring(0,c);let b=f.substring(c);e.textContent=b,e.insertAdjacentElement("beforebegin",a),d++}(this.parentTokensAreSelected||!this.createSubTokens)&&this.tokenSelectorCallbacks.tokenSelectedCallback(e)}else this.updateSelectedTokens(e,0,c);return}this.tokenSelectorCallbacks.tokenSelectedCallback(e)}else if(this.caretAtEndIsSelected&&f.length>=b||f.length>b){if(this.partiallySelectedTokensAreSelected)if(g){if(this.createSubTokens&&b!=c)if(f.length>c){let a=document.createElement("span");a.classList.add("code-input_select-token-callbacks_temporary-span"),a.textContent=f.substring(0,b);let g=f.substring(b,c);e.textContent=g,this.tokenSelectorCallbacks.tokenSelectedCallback(e);let h=document.createElement("span");h.classList.add("code-input_select-token-callbacks_temporary-span"),h.textContent=f.substring(c),e.insertAdjacentElement("beforebegin",a),e.insertAdjacentElement("afterend",h),d++}else{let a=f.substring(0,b);e.textContent=a;let c=document.createElement("span");this.tokenSelectorCallbacks.tokenSelectedCallback(c),c.classList.add("code-input_select-token-callbacks_temporary-span"),c.textContent=f.substring(b),e.insertAdjacentElement("afterend",c),d++}(this.parentTokensAreSelected||!this.createSubTokens)&&this.tokenSelectorCallbacks.tokenSelectedCallback(e)}else this.updateSelectedTokens(e,b,c);if(this.caretAtStartIsSelected){if(f.length>c)return;}else if(f.length>=c)return}b-=f.length,c-=f.length}}}};

package/plugins/special-chars.css

@@ -24,10 +24,6 @@
     --code-input_special-chars_F: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdj/P///38GKGAEcRgZGRlBfDAHtwxMGQDZZhP+BnB1kwAAAABJRU5ErkJggg==');
 }
 
-.code-input_special-char_container { /* pre element */
-    font-size: 20px;
-}
-
 .code-input_special-char {
     display: inline-block;
     position: relative;
@@ -66,7 +62,7 @@
 
     mask-image: var(--hex-0), var(--hex-1), var(--hex-2), var(--hex-3);
     mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
-    mask-size: 40%, 40%, 40%, 40%;
+    mask-size: min(40%, 0.25em), min(40%, 0.25em), min(40%, 0.25em), min(40%, 0.25em);
     mask-position: 10% 10%, 90% 10%, 10% 90%, 90% 90%;
 
     -webkit-mask-image: var(--hex-0), var(--hex-1), var(--hex-2), var(--hex-3);

package/plugins/special-chars.js

@@ -7,14 +7,14 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
     specialCharRegExp;
 
     cachedColors; // ascii number > [background color, text color]
-    cachedWidths; // font > {character > character width}
+    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
-     * @param {Boolean} inheritTextColor If `colorInSpecialChars` is false, forces the color of the hex code to inherit from syntax highlighting. Otherwise, the base colour of the `pre code` element is used to give contrast to the small characters.
+     * @param {Boolean} inheritTextColor If `inheritTextColor` is false, forces the color of the hex code to inherit from syntax highlighting. Otherwise, the base color of the `pre code` element is used to give contrast to the small characters.
      * @param {RegExp} specialCharRegExp The regular expression which matches special characters
      */
     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
@@ -31,37 +31,31 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
         this.canvasContext = canvas.getContext("2d");
     }
 
-    /* Runs before elements are added into a `code-input`; Params: codeInput element) */
-    beforeElementsAdded(codeInput) {
-        codeInput.classList.add("code-input_special-char_container");
-    }
-
-    /* Runs after elements are added into a `code-input` (useful for adding events to the textarea); Params: codeInput element) */
+    /* Initially render special characters as the highlighting algorithm may automatically highlight and remove them */
     afterElementsAdded(codeInput) {
-        // For some reason, special chars aren't synced the first time - TODO is there a cleaner way to do this?
-        setTimeout(() => { codeInput.update(codeInput.value); }, 100);
+        setTimeout(() => { codeInput.value = codeInput.value; }, 100);
     }
 
-    /* Runs after code is highlighted; Params: codeInput element) */
+    /* After highlighting, render special characters as their stylised hexadecimal equivalents */
     afterHighlight(codeInput) {      
-        let result_element = codeInput.querySelector("pre code");
+        let resultElement = codeInput.codeElement;
 
         // Reset data each highlight so can change if font size, etc. changes
         codeInput.pluginData.specialChars = {};
-        codeInput.pluginData.specialChars.textarea = codeInput.getElementsByTagName("textarea")[0];
-        codeInput.pluginData.specialChars.contrastColor = window.getComputedStyle(result_element).color;
+        codeInput.pluginData.specialChars.contrastColor = window.getComputedStyle(resultElement).color;
 
-        this.recursivelyReplaceText(codeInput, result_element);
+        this.recursivelyReplaceText(codeInput, resultElement);
 
-        this.lastFont = window.getComputedStyle(codeInput.pluginData.specialChars.textarea).font;
+        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.nodeName == "#text" && nextNode.nodeValue != "") {
-                // Replace in here
+            if(nextNode.nodeType == 3) {
+                // Text node - Replace in here
                 let oldValue = nextNode.nodeValue;
 
                 this.specialCharRegExp.lastIndex = 0;
@@ -72,11 +66,12 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
                     nextNode = nextNode.splitText(charIndex+1).previousSibling;
                     
                     if(charIndex > 0) {
-                        nextNode = nextNode.splitText(charIndex); // Keep those before in difft. span
+                        nextNode = nextNode.splitText(charIndex); // Keep characters before the special character in a different span
                     }
 
                     if(nextNode.textContent != "") {
-                        let replacementElement = this.specialCharReplacer(codeInput, 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 = "";
                     }
@@ -90,29 +85,30 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
         }
     }
 
-    specialCharReplacer(codeInput, match_char) {
-        let hex_code = match_char.codePointAt(0);
+    /* 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.getCharacterColor(hex_code);
+        if(this.colorInSpecialChars) colors = this.getCharacterColors(hexCode);
 
-        hex_code = hex_code.toString(16);
-        hex_code = ("0000" + hex_code).substring(hex_code.length); // So 2 chars with leading 0
-        hex_code = hex_code.toUpperCase();
+        hexCode = hexCode.toString(16);
+        hexCode = ("0000" + hexCode).substring(hexCode.length); // So 2 chars with leading 0
+        hexCode = hexCode.toUpperCase();
 
-        let char_width = this.getCharacterWidth(codeInput, match_char);
+        let charWidth = this.getCharacterWidthEm(codeInput, matchChar);
 
         // Create element with hex code
         let result = document.createElement("span");
         result.classList.add("code-input_special-char");
-        result.style.setProperty("--hex-0",  "var(--code-input_special-chars_" + hex_code[0] + ")");
-        result.style.setProperty("--hex-1",  "var(--code-input_special-chars_" + hex_code[1] + ")");
-        result.style.setProperty("--hex-2",  "var(--code-input_special-chars_" + hex_code[2] + ")");
-        result.style.setProperty("--hex-3",  "var(--code-input_special-chars_" + hex_code[3] + ")");
+        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(char_width == 0) result.classList.add("code-input_special-char_zero-width");
-        else result.style.width = char_width + "px";
+        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];
@@ -123,64 +119,72 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
         return result;
     }
     
-    getCharacterColor(ascii_code) {
-        // Choose colors based on character code - lazy load and return [background color, text color]
-        let background_color;
-        let text_color;
-        if(!(ascii_code in this.cachedColors)) {
-            // Get background color - arbitrary bit manipulation to get a good range of colours
-            background_color = ascii_code^(ascii_code << 3)^(ascii_code << 7)^(ascii_code << 14)^(ascii_code << 16); // Arbitrary
-            background_color = background_color^0x1fc627; // Arbitrary
-            background_color = background_color.toString(16);
-            background_color = ("000000" + background_color).substring(background_color.length); // So 6 chars with leading 0
+    /* 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 color_brightness = 0;
-            let luminance_coefficients = [0.299, 0.587, 0.114];
+            let colorBrightness = 0;
+            const luminanceCoefficients = [0.299, 0.587, 0.114];
             for(let i = 0; i < 6; i += 2) {
-                color_brightness += parseInt(background_color.substring(i, i+2), 16) * luminance_coefficients[i/2];
+                colorBrightness += parseInt(backgroundColor.substring(i, i+2), 16) * luminanceCoefficients[i/2];
             }
             // Calculate darkness
-            text_color = color_brightness < 128 ? "white" : "black";
+            textColor = colorBrightness < 128 ? "white" : "black";
 
-            this.cachedColors[ascii_code] = [background_color, text_color];
-            return [background_color, text_color];
+            this.cachedColors[asciiCode] = [backgroundColor, textColor];
+            return [backgroundColor, textColor];
         } else {
-            return this.cachedColors[ascii_code];
+            return this.cachedColors[asciiCode];
         }
     }
 
-    getCharacterWidth(codeInput, char) {
+    /* 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").test(char) ) { return 0 }
+        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.getCharacterWidth("\u0096");
+            let fallbackWidth = this.getCharacterWidthEm(codeInput, "\u0096");
             return fallbackWidth;
         }
 
-        let font = window.getComputedStyle(codeInput.pluginData.specialChars.textarea).font;
+        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 - TODO: Get a cleaner way of doing this
+        // Lazy-load width of each character
         if(this.cachedWidths[font] == undefined) {
-            this.cachedWidths[font] = {}; // Create new cached widths for this font
+            this.cachedWidths[font] = {};
         }
         if(this.cachedWidths[font][char] != undefined) { // Use cached width
             return this.cachedWidths[font][char];
         }
 
-        // Ensure font the same
-        this.canvasContext.font = font;
+        // 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;
-        if(width > Number(font.split("px")[0])) {
+        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.getCharacterWidth("\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;

package/plugins/special-chars.min.css

@@ -1,5 +1,5 @@
-:root,body{--code-input_special-chars_0:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABtJREFUGFdjZGBgYPj///9/RhCAMcA0bg6yHgAPmh/6BoxTcQAAAABJRU5ErkJgggAA');--code-input_special-chars_1:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABZJREFUGFdjZGBgYPj///9/RhAggwMAitIUBr9U6sYAAAAASUVORK5CYII=');--code-input_special-chars_2:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB9JREFUGFdj/P///38GKGCEMUCCjCgyYBFGRrAKFBkAuLYT9kYcIu0AAAAASUVORK5CYII=');--code-input_special-chars_3:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABhJREFUGFdj/P///38GKGCEMUCCjMTJAACYiBPyG8sfAgAAAABJRU5ErkJggg==');--code-input_special-chars_4:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdj/P///39GRkZGMI3BYYACRhgDrAKZAwAYxhvyz0DRIQAAAABJRU5ErkJggg==');--code-input_special-chars_5:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACJJREFUGFdj/P///38GKGAEcRgZGRlBfDAHLgNjgFUgywAAuR4T9hxJl2YAAAAASUVORK5CYII=');--code-input_special-chars_6:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACBJREFUGFdj/P///38GKGAEcRgZGRlBfDAHQwasAlkGABcdF/Y4yco2AAAAAElFTkSuQmCC');--code-input_special-chars_7:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABZJREFUGFdj/P///38GKGCEMUCCRHIAWMgT8kue3bQAAAAASUVORK5CYII=');--code-input_special-chars_8:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABlJREFUGFdj/P///38GKGAEcRgZGSE0cTIAvHcb8v+mIfAAAAAASUVORK5CYII=');--code-input_special-chars_9:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB9JREFUGFdj/P///38GKGAEcRgZGSE0igxMCVgGmQMAPqcX8hWL1K0AAAAASUVORK5CYII=');--code-input_special-chars_A:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACBJREFUGFdjZGBgYPj///9/RhCAMcA0iADJggCmDEw5ALdxH/aGuYHqAAAAAElFTkSuQmCC');--code-input_special-chars_B:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABlJREFUGFdj/P///38GBgYGRhAAceA0cTIAvc0b/vRDnVoAAAAASUVORK5CYII=');--code-input_special-chars_C:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdjZGBgYPj///9/EM0IYjAyMjIS4CDrAQC57hP+uLwvFQAAAABJRU5ErkJggg==');--code-input_special-chars_D:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABtJREFUGFdj/P///38GBgYGRhAAceA0fg5MDwAveh/6ToN9VwAAAABJRU5ErkJggg==');--code-input_special-chars_E:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABxJREFUGFdj/P///38GKGAEcRgZGRlBfDCHsAwA2UwT+mVIH1MAAAAASUVORK5CYII=');--code-input_special-chars_F:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdj/P///38GKGAEcRgZGRlBfDAHtwxMGQDZZhP+BnB1kwAAAABJRU5ErkJggg==')}.code-input_special-char_container{font-size:20px}.code-input_special-char{display:inline-block;position:relative;top:0;left:0;height:1em;overflow:hidden;text-decoration:none;text-shadow:none;vertical-align:middle;outline:.1px solid currentColor;--hex-0:var(
+:root,body{--code-input_special-chars_0:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABtJREFUGFdjZGBgYPj///9/RhCAMcA0bg6yHgAPmh/6BoxTcQAAAABJRU5ErkJgggAA');--code-input_special-chars_1:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABZJREFUGFdjZGBgYPj///9/RhAggwMAitIUBr9U6sYAAAAASUVORK5CYII=');--code-input_special-chars_2:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB9JREFUGFdj/P///38GKGCEMUCCjCgyYBFGRrAKFBkAuLYT9kYcIu0AAAAASUVORK5CYII=');--code-input_special-chars_3:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABhJREFUGFdj/P///38GKGCEMUCCjMTJAACYiBPyG8sfAgAAAABJRU5ErkJggg==');--code-input_special-chars_4:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdj/P///39GRkZGMI3BYYACRhgDrAKZAwAYxhvyz0DRIQAAAABJRU5ErkJggg==');--code-input_special-chars_5:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACJJREFUGFdj/P///38GKGAEcRgZGRlBfDAHLgNjgFUgywAAuR4T9hxJl2YAAAAASUVORK5CYII=');--code-input_special-chars_6:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACBJREFUGFdj/P///38GKGAEcRgZGRlBfDAHQwasAlkGABcdF/Y4yco2AAAAAElFTkSuQmCC');--code-input_special-chars_7:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABZJREFUGFdj/P///38GKGCEMUCCRHIAWMgT8kue3bQAAAAASUVORK5CYII=');--code-input_special-chars_8:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABlJREFUGFdj/P///38GKGAEcRgZGSE0cTIAvHcb8v+mIfAAAAAASUVORK5CYII=');--code-input_special-chars_9:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB9JREFUGFdj/P///38GKGAEcRgZGSE0igxMCVgGmQMAPqcX8hWL1K0AAAAASUVORK5CYII=');--code-input_special-chars_A:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACBJREFUGFdjZGBgYPj///9/RhCAMcA0iADJggCmDEw5ALdxH/aGuYHqAAAAAElFTkSuQmCC');--code-input_special-chars_B:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABlJREFUGFdj/P///38GBgYGRhAAceA0cTIAvc0b/vRDnVoAAAAASUVORK5CYII=');--code-input_special-chars_C:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdjZGBgYPj///9/EM0IYjAyMjIS4CDrAQC57hP+uLwvFQAAAABJRU5ErkJggg==');--code-input_special-chars_D:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABtJREFUGFdj/P///38GBgYGRhAAceA0fg5MDwAveh/6ToN9VwAAAABJRU5ErkJggg==');--code-input_special-chars_E:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABxJREFUGFdj/P///38GKGAEcRgZGRlBfDCHsAwA2UwT+mVIH1MAAAAASUVORK5CYII=');--code-input_special-chars_F:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdj/P///38GKGAEcRgZGRlBfDAHtwxMGQDZZhP+BnB1kwAAAABJRU5ErkJggg==')}.code-input_special-char{display:inline-block;position:relative;top:0;left:0;height:1em;overflow:hidden;text-decoration:none;text-shadow:none;vertical-align:middle;outline:.1px solid currentColor;--hex-0:var(
     --code-input_special-chars_0);--hex-1:var(
     --code-input_special-chars_0);--hex-2:var(
     --code-input_special-chars_0);--hex-3:var(
-    --code-input_special-chars_0)}.code-input_special-char::before{margin-left:50%;transform:translate(-50%,0);content:" ";background-color:var(--code-input_special-char_color,currentColor);image-rendering:pixelated;display:inline-block;width:calc(100%-2px);height:100%;mask-image:var(--hex-0),var(--hex-1),var(--hex-2),var(--hex-3);mask-repeat:no-repeat,no-repeat,no-repeat,no-repeat;mask-size:40%,40%,40%,40%;mask-position:10% 10%,90% 10%,10% 90%,90% 90%;-webkit-mask-image:var(--hex-0),var(--hex-1),var(--hex-2),var(--hex-3);-webkit-mask-repeat:no-repeat,no-repeat,no-repeat,no-repeat;-webkit-mask-size:min(40%,.25em),min(40%,.25em),min(40%,.25em),min(40%,.25em);-webkit-mask-position:10% 10%,min(90%,.5em) 10%,10% 90%,min(90%,.5em) 90%}.code-input_special-char_zero-width{z-index:1;width:1em;margin-left:-.5em;margin-right:-.5em;position:relative;opacity:.75}.code-input_special-char_one-byte::before{height:1.5em;top:-1em;content:attr(data-hex2)}.code-input_special-char_one-byte::after{height:1.5em;bottom:-1em;content:attr(data-hex3)}
+    --code-input_special-chars_0)}.code-input_special-char::before{margin-left:50%;transform:translate(-50%,0);content:" ";background-color:var(--code-input_special-char_color,currentColor);image-rendering:pixelated;display:inline-block;width:calc(100%-2px);height:100%;mask-image:var(--hex-0),var(--hex-1),var(--hex-2),var(--hex-3);mask-repeat:no-repeat,no-repeat,no-repeat,no-repeat;mask-size:min(40%,.25em),min(40%,.25em),min(40%,.25em),min(40%,.25em);mask-position:10% 10%,90% 10%,10% 90%,90% 90%;-webkit-mask-image:var(--hex-0),var(--hex-1),var(--hex-2),var(--hex-3);-webkit-mask-repeat:no-repeat,no-repeat,no-repeat,no-repeat;-webkit-mask-size:min(40%,.25em),min(40%,.25em),min(40%,.25em),min(40%,.25em);-webkit-mask-position:10% 10%,min(90%,.5em) 10%,10% 90%,min(90%,.5em) 90%}.code-input_special-char_zero-width{z-index:1;width:1em;margin-left:-.5em;margin-right:-.5em;position:relative;opacity:.75}.code-input_special-char_one-byte::before{height:1.5em;top:-1em;content:attr(data-hex2)}.code-input_special-char_one-byte::after{height:1.5em;bottom:-1em;content:attr(data-hex3)}

package/plugins/special-chars.min.js

@@ -1 +1 @@
-codeInput.plugins.SpecialChars=class extends codeInput.Plugin{specialCharRegExp;cachedColors;cachedWidths;canvasContext;constructor(a=!1,b=!1,c=/(?!\n)(?!\t)[\u{0000}-\u{001F}]|[\u{007F}-\u{009F}]|[\u{0200}-\u{FFFF}]/ug){super([]),this.specialCharRegExp=c,this.colorInSpecialChars=a,this.inheritTextColor=b,this.cachedColors={},this.cachedWidths={};let d=document.createElement("canvas");this.canvasContext=d.getContext("2d")}beforeElementsAdded(a){a.classList.add("code-input_special-char_container")}afterElementsAdded(a){setTimeout(()=>{a.update(a.value)},100)}afterHighlight(a){let b=a.querySelector("pre code");a.pluginData.specialChars={},a.pluginData.specialChars.textarea=a.getElementsByTagName("textarea")[0],a.pluginData.specialChars.contrastColor=window.getComputedStyle(b).color,this.recursivelyReplaceText(a,b),this.lastFont=window.getComputedStyle(a.pluginData.specialChars.textarea).font}recursivelyReplaceText(a,b){for(let c,d=0;d<b.childNodes.length;d++)if(c=b.childNodes[d],"#text"==c.nodeName&&""!=c.nodeValue){let b=c.nodeValue;this.specialCharRegExp.lastIndex=0;let d=this.specialCharRegExp.exec(b);if(null!=d){let b=d.index;if(c=c.splitText(b+1).previousSibling,0<b&&(c=c.splitText(b)),""!=c.textContent){let b=this.specialCharReplacer(a,c.textContent);c.parentNode.insertBefore(b,c),c.textContent=""}}}else 1==c.nodeType&&"code-input_special-char"!=c.className&&""!=c.nodeValue&&this.recursivelyReplaceText(a,c)}specialCharReplacer(a,b){let c,d=b.codePointAt(0);this.colorInSpecialChars&&(c=this.getCharacterColor(d)),d=d.toString(16),d=("0000"+d).substring(d.length),d=d.toUpperCase();let e=this.getCharacterWidth(a,b),f=document.createElement("span");return f.classList.add("code-input_special-char"),f.style.setProperty("--hex-0","var(--code-input_special-chars_"+d[0]+")"),f.style.setProperty("--hex-1","var(--code-input_special-chars_"+d[1]+")"),f.style.setProperty("--hex-2","var(--code-input_special-chars_"+d[2]+")"),f.style.setProperty("--hex-3","var(--code-input_special-chars_"+d[3]+")"),0==e?f.classList.add("code-input_special-char_zero-width"):f.style.width=e+"px",this.colorInSpecialChars?(f.style.backgroundColor="#"+c[0],f.style.setProperty("--code-input_special-char_color",c[1])):!this.inheritTextColor&&f.style.setProperty("--code-input_special-char_color",a.pluginData.specialChars.contrastColor),f}getCharacterColor(a){let b,c;if(!(a in this.cachedColors)){b=a^a<<3^a<<7^a<<14^a<<16,b^=2082343,b=b.toString(16),b=("000000"+b).substring(b.length);let d=0,e=[.299,.587,.114];for(let a=0;6>a;a+=2)d+=parseInt(b.substring(a,a+2),16)*e[a/2];return c=128>d?"white":"black",this.cachedColors[a]=[b,c],[b,c]}return this.cachedColors[a]}getCharacterWidth(a,b){if(/­|˞|[̀-ͯ]|[҃-҉]|​/.test(b))return 0;if("\x96"!=b&&/[\0-]|[-Ÿ]/g.test(b)){let a=this.getCharacterWidth("\x96");return a}let c=window.getComputedStyle(a.pluginData.specialChars.textarea).font;if(null==this.cachedWidths[c]&&(this.cachedWidths[c]={}),null!=this.cachedWidths[c][b])return this.cachedWidths[c][b];this.canvasContext.font=c;let d=this.canvasContext.measureText(b).width;if(d>+c.split("px")[0])d/=2;else if(0==d&&"\x96"!=b){let a=this.getCharacterWidth("\x96");return a}return this.cachedWidths[c][b]=d,d}};
+codeInput.plugins.SpecialChars=class extends codeInput.Plugin{specialCharRegExp;cachedColors;cachedWidths;canvasContext;constructor(a=!1,b=!1,c=/(?!\n)(?!\t)[\u{0000}-\u{001F}]|[\u{007F}-\u{009F}]|[\u{0200}-\u{FFFF}]/ug){super([]),this.specialCharRegExp=c,this.colorInSpecialChars=a,this.inheritTextColor=b,this.cachedColors={},this.cachedWidths={};let d=document.createElement("canvas");this.canvasContext=d.getContext("2d")}afterElementsAdded(a){setTimeout(()=>{a.value=a.value},100)}afterHighlight(a){let b=a.codeElement;a.pluginData.specialChars={},a.pluginData.specialChars.contrastColor=window.getComputedStyle(b).color,this.recursivelyReplaceText(a,b),this.lastFont=window.getComputedStyle(a.textareaElement).font}recursivelyReplaceText(a,b){for(let c,d=0;d<b.childNodes.length;d++)if(c=b.childNodes[d],3==c.nodeType){let b=c.nodeValue;this.specialCharRegExp.lastIndex=0;let d=this.specialCharRegExp.exec(b);if(null!=d){let b=d.index;if(c=c.splitText(b+1).previousSibling,0<b&&(c=c.splitText(b)),""!=c.textContent){let b=this.getStylisedSpecialChar(a,c.textContent);c.parentNode.insertBefore(b,c),c.textContent=""}}}else 1==c.nodeType&&"code-input_special-char"!=c.className&&""!=c.nodeValue&&this.recursivelyReplaceText(a,c)}getStylisedSpecialChar(a,b){let c,d=b.codePointAt(0);this.colorInSpecialChars&&(c=this.getCharacterColors(d)),d=d.toString(16),d=("0000"+d).substring(d.length),d=d.toUpperCase();let e=this.getCharacterWidthEm(a,b),f=document.createElement("span");return f.classList.add("code-input_special-char"),f.style.setProperty("--hex-0","var(--code-input_special-chars_"+d[0]+")"),f.style.setProperty("--hex-1","var(--code-input_special-chars_"+d[1]+")"),f.style.setProperty("--hex-2","var(--code-input_special-chars_"+d[2]+")"),f.style.setProperty("--hex-3","var(--code-input_special-chars_"+d[3]+")"),0==e?f.classList.add("code-input_special-char_zero-width"):f.style.width=e+"em",this.colorInSpecialChars?(f.style.backgroundColor="#"+c[0],f.style.setProperty("--code-input_special-char_color",c[1])):!this.inheritTextColor&&f.style.setProperty("--code-input_special-char_color",a.pluginData.specialChars.contrastColor),f}getCharacterColors(a){let b;if(!(a in this.cachedColors)){let c=a.toString(16),d="";for(let a=0;a<c.length;a++)d+=c[a]+c[a];d=("000000"+d).substring(d.length);let e=0;const f=[.299,.587,.114];for(let a=0;6>a;a+=2)e+=parseInt(d.substring(a,a+2),16)*f[a/2];return b=128>e?"white":"black",this.cachedColors[a]=[d,b],[d,b]}return this.cachedColors[a]}getCharacterWidthEm(a,b){if(/­|˞|[̀-ͯ]|[҃-҉]|[​-‍]|/.test(b))return 0;if("\x96"!=b&&/[\0-]|[-Ÿ]/g.test(b)){let b=this.getCharacterWidthEm(a,"\x96");return b}let c=getComputedStyle(a.textareaElement).fontFamily+" "+getComputedStyle(a.textareaElement).fontStretch+" "+getComputedStyle(a.textareaElement).fontStyle+" "+getComputedStyle(a.textareaElement).fontVariant+" "+getComputedStyle(a.textareaElement).fontWeight+" "+getComputedStyle(a.textareaElement).lineHeight;if(null==this.cachedWidths[c]&&(this.cachedWidths[c]={}),null!=this.cachedWidths[c][b])return this.cachedWidths[c][b];this.canvasContext.font=getComputedStyle(a.textareaElement).font.replace(getComputedStyle(a.textareaElement).fontSize,"20px");let d=this.canvasContext.measureText(b).width/20;if(1<d)d/=2;else if(0==d&&"\x96"!=b){let b=this.getCharacterWidthEm(a,"\x96");return b}if(navigator.userAgent.includes("Mozilla")&&!navigator.userAgent.includes("Chrome")&&!navigator.userAgent.includes("Safari")){let b=+getComputedStyle(a.textareaElement).fontSize.substring(0,getComputedStyle(a.textareaElement).fontSize.length-2);20>b&&(d*=20/b)}return this.cachedWidths[c][b]=d,d}};

package/plugins/test.js

@@ -10,9 +10,8 @@
  */
 codeInput.plugins.Test = class extends codeInput.Plugin {
     constructor() {
-        super(["testattr", "test-*"]); 
+        super(["testattr"]); 
         // Array of observed attributes as parameter
-        // Wildcard "*" matches any text
     }
     /* Runs before code is highlighted; Params: codeInput element) */
     beforeHighlight(codeInput) {

package/plugins/test.min.js

@@ -1 +1 @@
-codeInput.plugins.Test=class extends codeInput.Plugin{constructor(){super(["testattr","test-*"])}beforeHighlight(a){console.log(a,"before highlight")}afterHighlight(a){console.log(a,"after highlight")}beforeElementsAdded(a){console.log(a,"before elements added")}afterElementsAdded(a){console.log(a,"after elements added")}attributeChanged(a,b,c,d){console.log(a,b,":",c,">",d)}};
+codeInput.plugins.Test=class extends codeInput.Plugin{constructor(){super(["testattr"])}beforeHighlight(a){console.log(a,"before highlight")}afterHighlight(a){console.log(a,"after highlight")}beforeElementsAdded(a){console.log(a,"before elements added")}afterElementsAdded(a){console.log(a,"after elements added")}attributeChanged(a,b,c,d){console.log(a,b,":",c,">",d)}};