@webcoder49/code-input 2.2.1 → 2.5.0

package/plugins/indent.js

@@ -8,14 +8,24 @@ codeInput.plugins.Indent = class extends codeInput.Plugin {
     bracketPairs = {}; // No bracket-auto-indentation used when {}
     indentation = "\t";
     indentationNumChars = 1;
+    tabIndentationEnabled = true; // Can be disabled for accessibility reasons to allow keyboard navigation
+    escTabToChangeFocus = true;
+    escJustPressed = false; // Becomes true when Escape key is pressed and false when another key is pressed
+
+    instructions = {
+        tabForIndentation: "Tab and Shift-Tab currently for indentation. Press Esc to enable keyboard navigation.",
+        tabForNavigation: "Tab and Shift-Tab currently for keyboard navigation. Type to return to indentation.",
+    };
 
     /**
      * Create an indentation plugin to pass into a template
-     * @param {Boolean} defaultSpaces Should the Tab key enter spaces rather than tabs? Defaults to false.
+     * @param {boolean} defaultSpaces Should the Tab key enter spaces rather than tabs? Defaults to false.
      * @param {Number} numSpaces How many spaces is each tab character worth? Defaults to 4.
      * @param {Object} bracketPairs Opening brackets mapped to closing brackets, default and example {"(": ")", "[": "]", "{": "}"}. All brackets must only be one character, and this can be left as null to remove bracket-based indentation behaviour.
+     * @param {boolean} escTabToChangeFocus Whether pressing the Escape key before Tab and Shift-Tab should make this keypress focus on a different element (Tab's default behaviour). You should always either enable this or use this plugin's disableTabIndentation and enableTabIndentation methods linked to other keyboard shortcuts, for accessibility.
+     * @param {Object} instructionTranslations: user interface string keys mapped to translated versions for localisation. Look at the go-to-line.js source code for the available keys and English text.
      */
-    constructor(defaultSpaces=false, numSpaces=4, bracketPairs={"(": ")", "[": "]", "{": "}"}) {
+    constructor(defaultSpaces=false, numSpaces=4, bracketPairs={"(": ")", "[": "]", "{": "}"}, escTabToChangeFocus=true, instructionTranslations = {}) {
         super([]); // No observed attributes
 
         this.bracketPairs = bracketPairs;
@@ -26,20 +36,81 @@ codeInput.plugins.Indent = class extends codeInput.Plugin {
             }
             this.indentationNumChars = numSpaces;
         }
+
+        this.escTabToChangeFocus = true;
+
+        this.addTranslations(this.instructions, instructionTranslations);
+    }
+
+    /**
+     * Make the Tab key 
+     */
+    disableTabIndentation() {
+        this.tabIndentationEnabled = false;
     }
 
-    /* Add keystroke events */
+    enableTabIndentation() {
+        this.tabIndentationEnabled = true;
+    }
+
+    /* Add keystroke events, and get the width of the indentation in pixels. */
     afterElementsAdded(codeInput) {
+
         let textarea = codeInput.textareaElement;
+        textarea.addEventListener('focus', (event) => { if(this.escTabToChangeFocus) codeInput.setKeyboardNavInstructions(this.instructions.tabForIndentation, true); })
         textarea.addEventListener('keydown', (event) => { this.checkTab(codeInput, event); this.checkEnter(codeInput, event); this.checkBackspace(codeInput, event); });
         textarea.addEventListener('beforeinput', (event) => { this.checkCloseBracket(codeInput, event); });
+
+        // Get the width of the indentation in pixels
+        let testIndentationWidthPre = document.createElement("pre");
+        testIndentationWidthPre.setAttribute("aria-hidden", "true"); // Hide for screen readers
+        let testIndentationWidthSpan = document.createElement("span");
+        if(codeInput.template.preElementStyled) {
+            testIndentationWidthPre.appendChild(testIndentationWidthSpan);
+            testIndentationWidthPre.classList.add("code-input_autocomplete_test-indentation-width");
+            codeInput.appendChild(testIndentationWidthPre); // Styled like first pre, but first pre found to update
+        } else {
+            let testIndentationWidthCode = document.createElement("code");
+            testIndentationWidthCode.appendChild(testIndentationWidthSpan);
+            testIndentationWidthCode.classList.add("code-input_autocomplete_test-indentation-width");
+            testIndentationWidthPre.appendChild(testIndentationWidthCode);
+            codeInput.appendChild(testIndentationWidthPre); // Styled like first pre, but first pre found to update
+        }
+
+        testIndentationWidthSpan.innerHTML = codeInput.escapeHtml(this.indentation);
+        let indentationWidthPx = testIndentationWidthSpan.offsetWidth;
+        codeInput.removeChild(testIndentationWidthPre);
+
+        codeInput.pluginData.indent = {indentationWidthPx: indentationWidthPx};
     }
 
-    /* Deal with the Tab key causing indentation, and Tab+Selection indenting / Shift+Tab+Selection unindenting lines */
+    /* Deal with the Tab key causing indentation, and Tab+Selection indenting / Shift+Tab+Selection unindenting lines, and the mechanism through which Tab can be used to switch focus instead (accessibility). */
     checkTab(codeInput, event) {
-        if(event.key != "Tab") {
+        if(!this.tabIndentationEnabled) return;
+        if(this.escTabToChangeFocus) {
+            // Accessibility - allow Tab for keyboard navigation when Esc pressed right before it.
+            if(event.key == "Escape") {
+                this.escJustPressed = true;
+                codeInput.setKeyboardNavInstructions(this.instructions.tabForNavigation, false);
+                return;
+            } else if(event.key != "Tab") {
+                if(event.key == "Shift") {
+                    return; // Shift+Tab after Esc should still be keyboard navigation
+                }
+                codeInput.setKeyboardNavInstructions(this.instructions.tabForIndentation, false);
+                this.escJustPressed = false;
+                return;
+            }
+
+            if(!this.enableTabIndentation || this.escJustPressed) {
+                codeInput.setKeyboardNavInstructions("", false);
+                this.escJustPressed = false;
+                return;
+            }
+        } else if(event.key != "Tab") {
             return;
         }
+
         let inputElement = codeInput.textareaElement;
         event.preventDefault(); // stop normal
         
@@ -93,6 +164,26 @@ codeInput.plugins.Indent = class extends codeInput.Plugin {
             // move cursor
             inputElement.selectionStart = selectionStartI;
             inputElement.selectionEnd = selectionEndI;
+
+            // move scroll position to follow code
+            const textDirection = getComputedStyle(codeInput).direction;
+            if(textDirection == "rtl") {
+                if(event.shiftKey) {
+                    // Scroll right
+                    codeInput.scrollBy(codeInput.pluginData.indent.indentationWidthPx, 0);
+                } else {
+                    // Scroll left
+                    codeInput.scrollBy(-codeInput.pluginData.indent.indentationWidthPx, 0);
+                }
+            } else {
+                if(event.shiftKey) {
+                    // Scroll left
+                    codeInput.scrollBy(-codeInput.pluginData.indent.indentationWidthPx, 0);
+                } else {
+                    // Scroll right
+                    codeInput.scrollBy(codeInput.pluginData.indent.indentationWidthPx, 0);
+                }
+            }
         }
 
         codeInput.value = inputElement.value;
@@ -235,4 +326,4 @@ codeInput.plugins.Indent = class extends codeInput.Plugin {
             }
         }
     }
-}
+}

package/plugins/indent.min.js

@@ -1 +1 @@
-codeInput.plugins.Indent=class extends codeInput.Plugin{bracketPairs={};indentation="\t";indentationNumChars=1;constructor(a=!1,b=4,c={"(":")","[":"]","{":"}"}){if(super([]),this.bracketPairs=c,a){this.indentation="";for(let a=0;a<b;a++)this.indentation+=" ";this.indentationNumChars=b}}afterElementsAdded(a){let b=a.textareaElement;b.addEventListener("keydown",b=>{this.checkTab(a,b),this.checkEnter(a,b),this.checkBackspace(a,b)}),b.addEventListener("beforeinput",b=>{this.checkCloseBracket(a,b)})}checkTab(a,b){var c=Math.max;if("Tab"==b.key){let d=a.textareaElement;if(b.preventDefault(),!b.shiftKey&&d.selectionStart==d.selectionEnd)document.execCommand("insertText",!1,this.indentation);else{let a=d.value.split("\n"),e=0,f=d.selectionStart,g=d.selectionEnd;for(let h=0;h<a.length;h++)(f<=e+a[h].length&&g>=e+1||f==g&&f<=e+a[h].length+1&&g>=e)&&(b.shiftKey?a[h].substring(0,this.indentationNumChars)==this.indentation&&(d.selectionStart=e,d.selectionEnd=e+this.indentationNumChars,document.execCommand("delete",!1,""),f>e&&(f=c(f-this.indentationNumChars,e)),g-=this.indentationNumChars,e-=this.indentationNumChars):(d.selectionStart=e,d.selectionEnd=e,document.execCommand("insertText",!1,this.indentation),f>e&&(f+=this.indentationNumChars),g+=this.indentationNumChars,e+=this.indentationNumChars)),e+=a[h].length+1;d.selectionStart=f,d.selectionEnd=g}a.value=d.value}}checkEnter(a,b){if("Enter"!=b.key)return;b.preventDefault();let c=a.textareaElement,d=c.value.split("\n"),e=0,f=d.length-1,g="",h=0;for(let g=0;g<d.length;g++)if(e+=d[g].length+1,c.selectionEnd<=e){f=g;break}let j=d[f].length-(e-c.selectionEnd)+1;for(let c=0;c<j&&d[f].substring(c,c+this.indentationNumChars)==this.indentation;c+=this.indentationNumChars)h++;let k="";j!=d[f].length&&(k=d[f].substring(j),d[f]=d[f].substring(0,j));let l=!1,m="";if(null!=this.bracketPairs)for(let a in this.bracketPairs)if(d[f][d[f].length-1]==a){let b=this.bracketPairs[a];if(0<k.length&&k[0]==b){l=!0;for(let a=0;a<h+1;a++)m+=this.indentation}else h++;break}else{let b=this.bracketPairs[a];if(0<k.length&&k[0]==b){h--;break}}for(let c=0;c<h;c++)g+=this.indentation;let n=c.selectionStart;l&&(document.execCommand("insertText",!1,"\n"+m),h+=1),document.execCommand("insertText",!1,"\n"+g),c.selectionStart=n+h*this.indentationNumChars+1,c.selectionEnd=c.selectionStart;let o=+getComputedStyle(c).paddingTop.replace("px",""),p=+getComputedStyle(c).lineHeight.replace("px",""),q=+getComputedStyle(a).height.replace("px","");f*p+2*p+o>=c.scrollTop+q&&a.scrollBy(0,+getComputedStyle(c).lineHeight.replace("px","")),a.value=c.value}checkBackspace(a,b){if("Backspace"==b.key&&1!=this.indentationNumChars){let c=a.textareaElement;c.selectionStart==c.selectionEnd&&a.value.substring(c.selectionStart-this.indentationNumChars,c.selectionStart)==this.indentation&&(c.selectionStart-=this.indentationNumChars,b.preventDefault(),document.execCommand("delete",!1,""))}}checkCloseBracket(a,b){if(a.textareaElement.selectionStart==a.textareaElement.selectionEnd)for(let c in this.bracketPairs){let d=this.bracketPairs[c];b.data==d&&a.value.substring(a.textareaElement.selectionStart-this.indentationNumChars,a.textareaElement.selectionStart)==this.indentation&&(a.textareaElement.selectionStart-=this.indentationNumChars,document.execCommand("delete",!1,""))}}};
+codeInput.plugins.Indent=class extends codeInput.Plugin{bracketPairs={};indentation="\t";indentationNumChars=1;tabIndentationEnabled=!0;escTabToChangeFocus=!0;escJustPressed=!1;instructions={tabForIndentation:"Tab and Shift-Tab currently for indentation. Press Esc to enable keyboard navigation.",tabForNavigation:"Tab and Shift-Tab currently for keyboard navigation. Type to return to indentation."};constructor(a=!1,b=4,c={"(":")","[":"]","{":"}"},d=!0,e={}){if(super([]),this.bracketPairs=c,a){this.indentation="";for(let a=0;a<b;a++)this.indentation+=" ";this.indentationNumChars=b}this.escTabToChangeFocus=!0,this.addTranslations(this.instructions,e)}disableTabIndentation(){this.tabIndentationEnabled=!1}enableTabIndentation(){this.tabIndentationEnabled=!0}afterElementsAdded(a){let b=a.textareaElement;b.addEventListener("focus",()=>{this.escTabToChangeFocus&&a.setKeyboardNavInstructions(this.instructions.tabForIndentation,!0)}),b.addEventListener("keydown",b=>{this.checkTab(a,b),this.checkEnter(a,b),this.checkBackspace(a,b)}),b.addEventListener("beforeinput",b=>{this.checkCloseBracket(a,b)});let c=document.createElement("pre");c.setAttribute("aria-hidden","true");let d=document.createElement("span");if(a.template.preElementStyled)c.appendChild(d),c.classList.add("code-input_autocomplete_test-indentation-width"),a.appendChild(c);else{let b=document.createElement("code");b.appendChild(d),b.classList.add("code-input_autocomplete_test-indentation-width"),c.appendChild(b),a.appendChild(c)}d.innerHTML=a.escapeHtml(this.indentation);let e=d.offsetWidth;a.removeChild(c),a.pluginData.indent={indentationWidthPx:e}}checkTab(a,b){var c=Math.max;if(this.tabIndentationEnabled){if(this.escTabToChangeFocus){if("Escape"==b.key)return this.escJustPressed=!0,void a.setKeyboardNavInstructions(this.instructions.tabForNavigation,!1);if("Tab"!=b.key)return"Shift"==b.key?void 0:(a.setKeyboardNavInstructions(this.instructions.tabForIndentation,!1),void(this.escJustPressed=!1));if(!this.enableTabIndentation||this.escJustPressed)return a.setKeyboardNavInstructions("",!1),void(this.escJustPressed=!1)}else if("Tab"!=b.key)return;let d=a.textareaElement;if(b.preventDefault(),!b.shiftKey&&d.selectionStart==d.selectionEnd)document.execCommand("insertText",!1,this.indentation);else{let e=d.value.split("\n"),f=0,g=d.selectionStart,h=d.selectionEnd;for(let a=0;a<e.length;a++)(g<=f+e[a].length&&h>=f+1||g==h&&g<=f+e[a].length+1&&h>=f)&&(b.shiftKey?e[a].substring(0,this.indentationNumChars)==this.indentation&&(d.selectionStart=f,d.selectionEnd=f+this.indentationNumChars,document.execCommand("delete",!1,""),g>f&&(g=c(g-this.indentationNumChars,f)),h-=this.indentationNumChars,f-=this.indentationNumChars):(d.selectionStart=f,d.selectionEnd=f,document.execCommand("insertText",!1,this.indentation),g>f&&(g+=this.indentationNumChars),h+=this.indentationNumChars,f+=this.indentationNumChars)),f+=e[a].length+1;d.selectionStart=g,d.selectionEnd=h;const i=getComputedStyle(a).direction;"rtl"==i?b.shiftKey?a.scrollBy(a.pluginData.indent.indentationWidthPx,0):a.scrollBy(-a.pluginData.indent.indentationWidthPx,0):b.shiftKey?a.scrollBy(-a.pluginData.indent.indentationWidthPx,0):a.scrollBy(a.pluginData.indent.indentationWidthPx,0)}a.value=d.value}}checkEnter(a,b){if("Enter"!=b.key)return;b.preventDefault();let c=a.textareaElement,d=c.value.split("\n"),e=0,f=d.length-1,g="",h=0;for(let g=0;g<d.length;g++)if(e+=d[g].length+1,c.selectionEnd<=e){f=g;break}let j=d[f].length-(e-c.selectionEnd)+1;for(let c=0;c<j&&d[f].substring(c,c+this.indentationNumChars)==this.indentation;c+=this.indentationNumChars)h++;let k="";j!=d[f].length&&(k=d[f].substring(j),d[f]=d[f].substring(0,j));let l=!1,m="";if(null!=this.bracketPairs)for(let a in this.bracketPairs)if(d[f][d[f].length-1]==a){let b=this.bracketPairs[a];if(0<k.length&&k[0]==b){l=!0;for(let a=0;a<h+1;a++)m+=this.indentation}else h++;break}else{let b=this.bracketPairs[a];if(0<k.length&&k[0]==b){h--;break}}for(let c=0;c<h;c++)g+=this.indentation;let n=c.selectionStart;l&&(document.execCommand("insertText",!1,"\n"+m),h+=1),document.execCommand("insertText",!1,"\n"+g),c.selectionStart=n+h*this.indentationNumChars+1,c.selectionEnd=c.selectionStart;let o=+getComputedStyle(c).paddingTop.replace("px",""),p=+getComputedStyle(c).lineHeight.replace("px",""),q=+getComputedStyle(a).height.replace("px","");f*p+2*p+o>=c.scrollTop+q&&a.scrollBy(0,+getComputedStyle(c).lineHeight.replace("px","")),a.value=c.value}checkBackspace(a,b){if("Backspace"==b.key&&1!=this.indentationNumChars){let c=a.textareaElement;c.selectionStart==c.selectionEnd&&a.value.substring(c.selectionStart-this.indentationNumChars,c.selectionStart)==this.indentation&&(c.selectionStart-=this.indentationNumChars,b.preventDefault(),document.execCommand("delete",!1,""))}}checkCloseBracket(a,b){if(a.textareaElement.selectionStart==a.textareaElement.selectionEnd)for(let c in this.bracketPairs){let d=this.bracketPairs[c];b.data==d&&a.value.substring(a.textareaElement.selectionStart-this.indentationNumChars,a.textareaElement.selectionStart)==this.indentation&&(a.textareaElement.selectionStart-=this.indentationNumChars,document.execCommand("delete",!1,""))}}};

package/plugins/prism-line-numbers.css

@@ -7,14 +7,15 @@
 /* Update padding to match line-numbers plugin */
 code-input.line-numbers textarea, code-input.line-numbers.code-input_pre-element-styled pre,
 .line-numbers code-input textarea, .line-numbers code-input.code-input_pre-element-styled pre {
-  padding-top: 1em!important;
-  padding-bottom: 1em!important;
-  padding-right: 1em!important;
-  padding-left: 3.8em!important;
+  padding-left: max(3.8em, var(--padding, 16px))!important;
 }
 
-/* Remove unnecessary, interfering padding values */
-code-input.line-numbers, code-input.line-numbers.code-input_pre-element-styled code,
-.line-numbers code-input, .line-numbers code-input.code-input_pre-element-styled code{
-  padding: 0;
-}
+/* Ensure pre code/textarea just wide enough to give 100% width with line numbers */
+code-input.line-numbers, .line-numbers code-input {
+  grid-template-columns: calc(100% - max(0em, calc(3.8em - var(--padding, 16px))));
+}
+
+/* Make keyboard navigation still fill width */
+code-input .code-input_dialog-container .code-input_keyboard-navigation-instructions {
+  width: calc(100% + max(3.8em, var(--padding, 16px)))!important;
+}

package/plugins/prism-line-numbers.min.css

@@ -1 +1 @@
-.line-numbers code-input textarea,.line-numbers code-input.code-input_pre-element-styled pre,code-input.line-numbers textarea,code-input.line-numbers.code-input_pre-element-styled pre{padding-top:1em!important;padding-bottom:1em!important;padding-right:1em!important;padding-left:3.8em!important}.line-numbers code-input,.line-numbers code-input.code-input_pre-element-styled code,code-input.line-numbers,code-input.line-numbers.code-input_pre-element-styled code{padding:0}
+.line-numbers code-input textarea,.line-numbers code-input.code-input_pre-element-styled pre,code-input.line-numbers textarea,code-input.line-numbers.code-input_pre-element-styled pre{padding-left:max(3.8em,var(--padding,16px))!important}.line-numbers code-input,code-input.line-numbers{grid-template-columns:calc(100% - max(0em,calc(3.8em - var(--padding,16px))))}code-input .code-input_dialog-container .code-input_keyboard-navigation-instructions{width:calc(100% + max(3.8em,var(--padding,16px)))!important}

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

@@ -62,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

@@ -14,7 +14,7 @@ codeInput.plugins.SpecialChars = class extends codeInput.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
-     * @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
@@ -71,6 +71,7 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
 
                     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 = "";
                     }
@@ -120,14 +121,15 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
     
     /* 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 backgroundColor;
         let textColor;
         if(!(asciiCode in this.cachedColors)) {
-            // Get background color - arbitrary bit manipulation to get a good range of colours
-            backgroundColor = asciiCode^(asciiCode << 3)^(asciiCode << 7)^(asciiCode << 14)^(asciiCode << 16); // Arbitrary
-            backgroundColor = backgroundColor^0x1fc627; // Arbitrary
-            backgroundColor = backgroundColor.toString(16);
-            backgroundColor = ("000000" + backgroundColor).substring(backgroundColor.length); // So 6 chars with leading 0
+            // 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;
@@ -148,7 +150,7 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
     /* 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.getCharacterWidthEm(codeInput, "\u0096");

package/plugins/special-chars.min.css

@@ -2,4 +2,4 @@
     --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")}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,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;const 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]}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}};
+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/tests/hljs.html

@@ -28,6 +28,7 @@
     <script src="../plugins/go-to-line.js"></script>
     <link rel="stylesheet" href="../plugins/go-to-line.css">
     <script src="../plugins/indent.js"></script>
+    <script src="../plugins/select-token-callbacks.js"></script>
     <script src="../plugins/special-chars.js"></script>
     <link rel="stylesheet" href="../plugins/special-chars.css">
 
@@ -41,7 +42,7 @@
 
     <details id="collapse-results"><summary>Test Results (Click to Open)</summary><pre id="test-results"></pre></details>
     <form method="GET" action="https://google.com/search" target="_blank">
-        <code-input language="JavaScript" name="q">console.log("Hello, World!");
+        <code-input name="q">console.log("Hello, World!");
 // A second line
 // A third line with &lt;html> tags</code-input>
         <input type="submit" value="Search Google For Code"/>