@webcoder49/code-input 1.5.0 → 1.5.1

package/plugins/indent.js

@@ -1,154 +1,154 @@
-/**
- * Adds indentation using the `Tab` key, and auto-indents after a newline, as well as making it 
- * possible to indent/unindent multiple lines using Tab/Shift+Tab
- * Files: indent.js
- */
-codeInput.plugins.Indent = class extends codeInput.Plugin {
-    constructor() {
-        super();
-    }
-
-    /* Add keystroke events */
-    afterElementsAdded(codeInput) {
-        let textarea = codeInput.querySelector("textarea");
-        textarea.addEventListener('keydown', (event) => { this.check_tab(codeInput, event); this.check_enter(codeInput, event); });
-    }
-
-    /* Event handlers */
-    check_tab(codeInput, event) {
-        if(event.key != "Tab") {
-            return;
-        }
-        let input_element = codeInput.querySelector("textarea");
-        let code = input_element.value;
-        event.preventDefault(); // stop normal
-        
-        if(!event.shiftKey && input_element.selectionStart == input_element.selectionEnd) {
-            // Just place a tab here.
-            document.execCommand("insertText", false, "\t");
-
-        } else {
-            let lines = input_element.value.split("\n");
-            let letter_i = 0;
-
-            let selection_start = input_element.selectionStart; // where cursor moves after tab - moving forward by 1 indent
-            let selection_end = input_element.selectionEnd; // where cursor moves after tab - moving forward by 1 indent
-
-            let number_indents = 0;
-            let first_line_indents = 0;
-
-            for (let i = 0; i < lines.length; i++) {                
-                // console.log(lines[i], ": start", selection_start, letter_i + lines[i].length + 1, "&& end", selection_end , letter_i + 1)
-                if((selection_start <= letter_i+lines[i].length && selection_end >= letter_i + 1)
-                || (selection_start == selection_end && selection_start <= letter_i+lines[i].length+1 && selection_end >= letter_i)) { // + 1 so newlines counted
-                    // Starts before or at last char and ends after or at first char
-                    if(event.shiftKey) {
-                        if(lines[i][0] == "\t") {
-                            // Remove first tab
-                            input_element.selectionStart = letter_i;
-                            input_element.selectionEnd = letter_i+1;
-                            document.execCommand("delete", false, "");
-
-                            // Change selection
-                            if(selection_start > letter_i) { // Indented outside selection
-                                selection_start--;
-                            }
-                            selection_end--;
-                            letter_i--;
-                        }
-                    } else {
-                        // Add tab at start
-                        input_element.selectionStart = letter_i;
-                        input_element.selectionEnd = letter_i;
-                        document.execCommand("insertText", false, "\t");
-
-                        // Change selection
-                        if(selection_start > letter_i) { // Indented outside selection
-                            selection_start++;
-                        }
-                        selection_end++;
-                        letter_i++;
-                    }                    
-                }
-                
-                letter_i += lines[i].length+1; // newline counted
-            }
-            // input_element.value = lines.join("\n");
-
-            // move cursor
-            input_element.selectionStart = selection_start;
-            input_element.selectionEnd = selection_end;
-        }
-
-        codeInput.update(input_element.value);
-    }
-
-    check_enter(codeInput, event) {
-        if(event.key != "Enter") {
-            return;
-        }
-        event.preventDefault(); // stop normal
-
-        let input_element = codeInput.querySelector("textarea");
-        let lines = input_element.value.split("\n");
-        let letter_i = 0;
-        let current_line = lines.length - 1;
-        let new_line = "";
-        let number_indents = 0;
-
-        // find the index of the line our cursor is currently on
-        for (let i = 0; i < lines.length; i++) {
-            letter_i += lines[i].length + 1;
-            if(input_element.selectionEnd <= letter_i) {
-                current_line = i;
-                break;
-            }
-        }
-
-        // count the number of indents the current line starts with (up to our cursor position in the line)
-        let cursor_pos_in_line = lines[current_line].length - (letter_i - input_element.selectionEnd) + 1;
-        for (let i = 0; i < cursor_pos_in_line; i++) {
-            if (lines[current_line][i] == "\t") {
-                number_indents++;
-            } else {
-                break;
-            }
-        }
-
-        // determine the text before and after the cursor and chop the current line at the new line break
-        let text_after_cursor = "";
-        if (cursor_pos_in_line != lines[current_line].length) {
-            text_after_cursor = lines[current_line].substring(cursor_pos_in_line);
-            lines[current_line] = lines[current_line].substring(0, cursor_pos_in_line);
-        }
-
-        // insert our indents and any text from the previous line that might have been after the line break
-        for (let i = 0; i < number_indents; i++) {
-            new_line += "\t";
-        }
-
-        // save the current cursor position
-        let selection_start = input_element.selectionStart;
-        let selection_end = input_element.selectionEnd;
-
-        document.execCommand("insertText", false, "\n" + new_line); // Write new line, including auto-indentation
-
-        // move cursor to new position
-        input_element.selectionStart = selection_start + number_indents + 1;  // count the indent level and the newline character
-        input_element.selectionEnd = selection_start + number_indents + 1;
-
-        codeInput.update(input_element.value);
-
-
-        // Update scrolls
-        input_element.scrollLeft = 0;
-        // Move down 1 line
-        let lineHeight = Number(getComputedStyle(input_element).lineHeight.split(0, -2));
-        // console.log(getComputedStyle(input_element).lineHeight);
-        if(lineHeight == NaN && getComputedStyle(input_element).lineHeight.split(-2) == "px") {
-            input_element.scrollTop += lineHeight;
-        } else {
-            input_element.scrollTop += 20; // px
-        }
-    }
+/**
+ * Adds indentation using the `Tab` key, and auto-indents after a newline, as well as making it 
+ * possible to indent/unindent multiple lines using Tab/Shift+Tab
+ * Files: indent.js
+ */
+codeInput.plugins.Indent = class extends codeInput.Plugin {
+    constructor() {
+        super();
+    }
+
+    /* Add keystroke events */
+    afterElementsAdded(codeInput) {
+        let textarea = codeInput.querySelector("textarea");
+        textarea.addEventListener('keydown', (event) => { this.check_tab(codeInput, event); this.check_enter(codeInput, event); });
+    }
+
+    /* Event handlers */
+    check_tab(codeInput, event) {
+        if(event.key != "Tab") {
+            return;
+        }
+        let input_element = codeInput.querySelector("textarea");
+        let code = input_element.value;
+        event.preventDefault(); // stop normal
+        
+        if(!event.shiftKey && input_element.selectionStart == input_element.selectionEnd) {
+            // Just place a tab here.
+            document.execCommand("insertText", false, "\t");
+
+        } else {
+            let lines = input_element.value.split("\n");
+            let letter_i = 0;
+
+            let selection_start = input_element.selectionStart; // where cursor moves after tab - moving forward by 1 indent
+            let selection_end = input_element.selectionEnd; // where cursor moves after tab - moving forward by 1 indent
+
+            let number_indents = 0;
+            let first_line_indents = 0;
+
+            for (let i = 0; i < lines.length; i++) {                
+                // console.log(lines[i], ": start", selection_start, letter_i + lines[i].length + 1, "&& end", selection_end , letter_i + 1)
+                if((selection_start <= letter_i+lines[i].length && selection_end >= letter_i + 1)
+                || (selection_start == selection_end && selection_start <= letter_i+lines[i].length+1 && selection_end >= letter_i)) { // + 1 so newlines counted
+                    // Starts before or at last char and ends after or at first char
+                    if(event.shiftKey) {
+                        if(lines[i][0] == "\t") {
+                            // Remove first tab
+                            input_element.selectionStart = letter_i;
+                            input_element.selectionEnd = letter_i+1;
+                            document.execCommand("delete", false, "");
+
+                            // Change selection
+                            if(selection_start > letter_i) { // Indented outside selection
+                                selection_start--;
+                            }
+                            selection_end--;
+                            letter_i--;
+                        }
+                    } else {
+                        // Add tab at start
+                        input_element.selectionStart = letter_i;
+                        input_element.selectionEnd = letter_i;
+                        document.execCommand("insertText", false, "\t");
+
+                        // Change selection
+                        if(selection_start > letter_i) { // Indented outside selection
+                            selection_start++;
+                        }
+                        selection_end++;
+                        letter_i++;
+                    }                    
+                }
+                
+                letter_i += lines[i].length+1; // newline counted
+            }
+            // input_element.value = lines.join("\n");
+
+            // move cursor
+            input_element.selectionStart = selection_start;
+            input_element.selectionEnd = selection_end;
+        }
+
+        codeInput.update(input_element.value);
+    }
+
+    check_enter(codeInput, event) {
+        if(event.key != "Enter") {
+            return;
+        }
+        event.preventDefault(); // stop normal
+
+        let input_element = codeInput.querySelector("textarea");
+        let lines = input_element.value.split("\n");
+        let letter_i = 0;
+        let current_line = lines.length - 1;
+        let new_line = "";
+        let number_indents = 0;
+
+        // find the index of the line our cursor is currently on
+        for (let i = 0; i < lines.length; i++) {
+            letter_i += lines[i].length + 1;
+            if(input_element.selectionEnd <= letter_i) {
+                current_line = i;
+                break;
+            }
+        }
+
+        // count the number of indents the current line starts with (up to our cursor position in the line)
+        let cursor_pos_in_line = lines[current_line].length - (letter_i - input_element.selectionEnd) + 1;
+        for (let i = 0; i < cursor_pos_in_line; i++) {
+            if (lines[current_line][i] == "\t") {
+                number_indents++;
+            } else {
+                break;
+            }
+        }
+
+        // determine the text before and after the cursor and chop the current line at the new line break
+        let text_after_cursor = "";
+        if (cursor_pos_in_line != lines[current_line].length) {
+            text_after_cursor = lines[current_line].substring(cursor_pos_in_line);
+            lines[current_line] = lines[current_line].substring(0, cursor_pos_in_line);
+        }
+
+        // insert our indents and any text from the previous line that might have been after the line break
+        for (let i = 0; i < number_indents; i++) {
+            new_line += "\t";
+        }
+
+        // save the current cursor position
+        let selection_start = input_element.selectionStart;
+        let selection_end = input_element.selectionEnd;
+
+        document.execCommand("insertText", false, "\n" + new_line); // Write new line, including auto-indentation
+
+        // move cursor to new position
+        input_element.selectionStart = selection_start + number_indents + 1;  // count the indent level and the newline character
+        input_element.selectionEnd = selection_start + number_indents + 1;
+
+        codeInput.update(input_element.value);
+
+
+        // Update scrolls
+        input_element.scrollLeft = 0;
+        // Move down 1 line
+        let lineHeight = Number(getComputedStyle(input_element).lineHeight.split(0, -2));
+        // console.log(getComputedStyle(input_element).lineHeight);
+        if(lineHeight == NaN && getComputedStyle(input_element).lineHeight.split(-2) == "px") {
+            input_element.scrollTop += lineHeight;
+        } else {
+            input_element.scrollTop += 20; // px
+        }
+    }
 }

package/plugins/indent.min.js

@@ -1 +1 @@
-codeInput.plugins.Indent=class extends codeInput.Plugin{constructor(){super()}afterElementsAdded(a){let b=a.querySelector("textarea");b.addEventListener("keydown",b=>{this.check_tab(a,b),this.check_enter(a,b)})}check_tab(a,b){if("Tab"!=b.key)return;let c=a.querySelector("textarea"),d=c.value;if(b.preventDefault(),!b.shiftKey&&c.selectionStart==c.selectionEnd)document.execCommand("insertText",!1,"\t");else{let a=c.value.split("\n"),d=0,e=c.selectionStart,f=c.selectionEnd;for(let g=0;g<a.length;g++)(e<=d+a[g].length&&f>=d+1||e==f&&e<=d+a[g].length+1&&f>=d)&&(b.shiftKey?"\t"==a[g][0]&&(c.selectionStart=d,c.selectionEnd=d+1,document.execCommand("delete",!1,""),e>d&&e--,f--,d--):(c.selectionStart=d,c.selectionEnd=d,document.execCommand("insertText",!1,"\t"),e>d&&e++,f++,d++)),d+=a[g].length+1;c.selectionStart=e,c.selectionEnd=f}a.update(c.value)}check_enter(a,b){if("Enter"!=b.key)return;b.preventDefault();let c=a.querySelector("textarea"),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&&"\t"==d[f][c];c++)h++;let k="";j!=d[f].length&&(k=d[f].substring(j),d[f]=d[f].substring(0,j));for(let c=0;c<h;c++)g+="\t";let l=c.selectionStart;document.execCommand("insertText",!1,"\n"+g),c.selectionStart=l+h+1,c.selectionEnd=l+h+1,a.update(c.value),c.scrollLeft=0;let m=+getComputedStyle(c).lineHeight.split(0,-2);c.scrollTop+=m==NaN&&"px"==getComputedStyle(c).lineHeight.split(-2)?m:20}};
+codeInput.plugins.Indent=class extends codeInput.Plugin{constructor(){super()}afterElementsAdded(a){let b=a.querySelector("textarea");b.addEventListener("keydown",b=>{this.check_tab(a,b),this.check_enter(a,b)})}check_tab(a,b){if("Tab"!=b.key)return;let c=a.querySelector("textarea"),d=c.value;if(b.preventDefault(),!b.shiftKey&&c.selectionStart==c.selectionEnd)document.execCommand("insertText",!1,"\t");else{let a=c.value.split("\n"),d=0,e=c.selectionStart,f=c.selectionEnd;for(let g=0;g<a.length;g++)(e<=d+a[g].length&&f>=d+1||e==f&&e<=d+a[g].length+1&&f>=d)&&(b.shiftKey?"\t"==a[g][0]&&(c.selectionStart=d,c.selectionEnd=d+1,document.execCommand("delete",!1,""),e>d&&e--,f--,d--):(c.selectionStart=d,c.selectionEnd=d,document.execCommand("insertText",!1,"\t"),e>d&&e++,f++,d++)),d+=a[g].length+1;c.selectionStart=e,c.selectionEnd=f}a.update(c.value)}check_enter(a,b){if("Enter"!=b.key)return;b.preventDefault();let c=a.querySelector("textarea"),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&&"\t"==d[f][c];c++)h++;let k="";j!=d[f].length&&(k=d[f].substring(j),d[f]=d[f].substring(0,j));for(let c=0;c<h;c++)g+="\t";let l=c.selectionStart,m=c.selectionEnd;document.execCommand("insertText",!1,"\n"+g),c.selectionStart=l+h+1,c.selectionEnd=l+h+1,a.update(c.value),c.scrollLeft=0;let n=+getComputedStyle(c).lineHeight.split(0,-2);c.scrollTop+=n==NaN&&"px"==getComputedStyle(c).lineHeight.split(-2)?n:20}};

package/plugins/prism-line-numbers.css

@@ -1,20 +1,20 @@
-/**
- * Allows code-input elements to be used with the Prism.js line-numbers plugin, as long as the code-input element 
- * or a parent element of it has the CSS class `line-numbers`.
- * https://prismjs.com/plugins/line-numbers/
- * Files: prism-line-numbers.css
- */
-/* 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;
-}
-
-/* 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;
+/**
+ * Allows code-input elements to be used with the Prism.js line-numbers plugin, as long as the code-input element 
+ * or a parent element of it has the CSS class `line-numbers`.
+ * https://prismjs.com/plugins/line-numbers/
+ * Files: prism-line-numbers.css
+ */
+/* 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;
+}
+
+/* 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;
 }

package/plugins/special-chars.css

@@ -1,98 +1,98 @@
-/**
- * Render special characters and control characters as a symbol with their hex code.
- * Files: special-chars.js, special-chars.css
- */
-
-/* Main styling */
-
-:root, body { /* Font for hex chars */
-    --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 { /* pre element */
-    font-size: 20px;
-}
-
-.code-input_special-char {
-    display: inline-block;
-    position: relative;
-    top: 0;
-    left: 0;
-    height: 1em;
-    /* width: set by JS */
-    overflow: hidden;
-    text-decoration: none;
-    text-shadow: none;
-    vertical-align: middle;
-    outline: 0.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);
-}
-
-/* Default - Two bytes - 4 hex chars */
-
-.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%, 0.25em), min(40%, 0.25em), min(40%, 0.25em), min(40%, 0.25em);
-    -webkit-mask-position: 10% 10%, min(90%, 0.5em) 10%, 10% 90%, min(90%, 0.5em) 90%;
-}
-
-.code-input_special-char_zero-width {
-    z-index: 1;
-    width: 1em;
-    margin-left: -0.5em;
-    margin-right: -0.5em;
-    position: relative;
-
-    opacity: 0.75;
-}
-
-/* One byte - 2 hex chars */
-.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);
+/**
+ * Render special characters and control characters as a symbol with their hex code.
+ * Files: special-chars.js, special-chars.css
+ */
+
+/* Main styling */
+
+:root, body { /* Font for hex chars */
+    --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 { /* pre element */
+    font-size: 20px;
+}
+
+.code-input_special-char {
+    display: inline-block;
+    position: relative;
+    top: 0;
+    left: 0;
+    height: 1em;
+    /* width: set by JS */
+    overflow: hidden;
+    text-decoration: none;
+    text-shadow: none;
+    vertical-align: middle;
+    outline: 0.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);
+}
+
+/* Default - Two bytes - 4 hex chars */
+
+.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%, 0.25em), min(40%, 0.25em), min(40%, 0.25em), min(40%, 0.25em);
+    -webkit-mask-position: 10% 10%, min(90%, 0.5em) 10%, 10% 90%, min(90%, 0.5em) 90%;
+}
+
+.code-input_special-char_zero-width {
+    z-index: 1;
+    width: 1em;
+    margin-left: -0.5em;
+    margin-right: -0.5em;
+    position: relative;
+
+    opacity: 0.75;
+}
+
+/* One byte - 2 hex chars */
+.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);
 }