Skip to content

Commit 59908be

Browse files
author
WebCoder49
committed
Transfer HEX codes to special chars; TODO make it work with Firefox
1 parent 06b579a commit 59908be

File tree

3 files changed

+46
-27
lines changed

3 files changed

+46
-27
lines changed

‎code-input.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,6 @@ var codeInput = {
7272
// been run). Thank you to peterprvy for this.
7373
if(this.ignoreValueUpdate) return;
7474

75-
//console.log("Update", text);
7675
this.ignoreValueUpdate = true;
7776
this.value = text; // Change value attribute if necessary.
7877
this.ignoreValueUpdate = false;
@@ -86,6 +85,7 @@ var codeInput = {
8685
if (text[text.length - 1] == "\n") {
8786
text += " ";
8887
}
88+
8989
// Update code
9090
result_element.innerHTML = this.escape_html(text);
9191
this.plugin_evt("beforeHighlight");
@@ -216,7 +216,7 @@ var codeInput = {
216216
if(this.template.preElementStyled) this.classList.add("code-input_pre-element-styled");
217217
else this.classList.remove("code-input_pre-element-styled");
218218
// Syntax Highlight
219-
this.update(this.value, true);
219+
this.update(this.value);
220220

221221
break;
222222

‎plugins/special-chars.css‎

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@
1616
--code-input_special-chars_7: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABZJREFUGFdj/P///38GKGCEMUCCRHIAWMgT8kue3bQAAAAASUVORK5CYII=');
1717
--code-input_special-chars_8: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABlJREFUGFdj/P///38GKGAEcRgZGSE0cTIAvHcb8v+mIfAAAAAASUVORK5CYII=');
1818
--code-input_special-chars_9: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB9JREFUGFdj/P///38GKGAEcRgZGSE0igxMCVgGmQMAPqcX8hWL1K0AAAAASUVORK5CYII=');
19-
--code-input_special-chars_a: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACBJREFUGFdjZGBgYPj///9/RhCAMcA0iADJggCmDEw5ALdxH/aGuYHqAAAAAElFTkSuQmCC');
20-
--code-input_special-chars_b: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABlJREFUGFdj/P///38GBgYGRhAAceA0cTIAvc0b/vRDnVoAAAAASUVORK5CYII=');
21-
--code-input_special-chars_c: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdjZGBgYPj///9/EM0IYjAyMjIS4CDrAQC57hP+uLwvFQAAAABJRU5ErkJggg==');
22-
--code-input_special-chars_d: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABtJREFUGFdj/P///38GBgYGRhAAceA0fg5MDwAveh/6ToN9VwAAAABJRU5ErkJggg==');
23-
--code-input_special-chars_e: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABxJREFUGFdj/P///38GKGAEcRgZGRlBfDCHsAwA2UwT+mVIH1MAAAAASUVORK5CYII=');
24-
--code-input_special-chars_f: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdj/P///38GKGAEcRgZGRlBfDAHtwxMGQDZZhP+BnB1kwAAAABJRU5ErkJggg==');
19+
--code-input_special-chars_A: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACBJREFUGFdjZGBgYPj///9/RhCAMcA0iADJggCmDEw5ALdxH/aGuYHqAAAAAElFTkSuQmCC');
20+
--code-input_special-chars_B: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABlJREFUGFdj/P///38GBgYGRhAAceA0cTIAvc0b/vRDnVoAAAAASUVORK5CYII=');
21+
--code-input_special-chars_C: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdjZGBgYPj///9/EM0IYjAyMjIS4CDrAQC57hP+uLwvFQAAAABJRU5ErkJggg==');
22+
--code-input_special-chars_D: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABtJREFUGFdj/P///38GBgYGRhAAceA0fg5MDwAveh/6ToN9VwAAAABJRU5ErkJggg==');
23+
--code-input_special-chars_E: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABxJREFUGFdj/P///38GKGAEcRgZGRlBfDCHsAwA2UwT+mVIH1MAAAAASUVORK5CYII=');
24+
--code-input_special-chars_F: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdj/P///38GKGAEcRgZGRlBfDAHtwxMGQDZZhP+BnB1kwAAAABJRU5ErkJggg==');
2525
}
2626

2727
.code-input_special-char_container { /* pre element */
@@ -35,10 +35,19 @@
3535
left: 0;
3636
height: 1em;
3737
/* width: set by JS */
38+
39+
overflow: hidden;
40+
3841
text-decoration: none;
3942
text-shadow: none;
43+
4044
vertical-align: middle;
4145
outline: 0.1px solid currentColor;
46+
47+
--hex-0: var(--code-input_special-chars_0);
48+
--hex-1: var(--code-input_special-chars_0);
49+
--hex-2: var(--code-input_special-chars_0);
50+
--hex-3: var(--code-input_special-chars_0);
4251
}
4352

4453
/* Default - Two bytes - 4 hex chars */
@@ -54,25 +63,25 @@
5463
width: calc(100%-2px);
5564
height: 100%;
5665

57-
--char-0: var(
58-
--code-input_special-chars_0);
59-
--char-1: var(
60-
--code-input_special-chars_1);
61-
--char-2: var(
62-
--code-input_special-chars_2);
63-
--char-3: var(
64-
--code-input_special-chars_3);
65-
mask-image: var(
66-
--char-0), var(--char-1), var(--char-2), var(--char-3);
66+
mask-image: var(--hex-0), var(--hex-1), var(--hex-2), var(--hex-3);
6767
mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
6868
mask-size: 40%, 40%, 40%, 40%;
6969
mask-position: 10% 10%, 90% 10%, 10% 90%, 90% 90%;
70-
-webkit-mask-image: var(--char-0), var(--char-1), var(--char-2), var(--char-3);
70+
71+
-webkit-mask-image: var(--hex-0), var(--hex-1), var(--hex-2), var(--hex-3);
7172
-webkit-mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
7273
-webkit-mask-size: min(40%, 0.25em), min(40%, 0.25em), min(40%, 0.25em), min(40%, 0.25em);
7374
-webkit-mask-position: 10% 10%, min(90%, 0.5em) 10%, 10% 90%, min(90%, 0.5em) 90%;
7475
}
7576

77+
.code-input_special-char.code-input_special-char_narrow::before {
78+
mask-size: 30%, 30%, 30%, 30%;
79+
mask-position: 20% 20%, 80% 20%, 20% 80%, 80% 80%;
80+
81+
-webkit-mask-size: 30%, 30%, 30%, 30%;
82+
-webkit-mask-position: 20% 20%, 80% 20%, 20% 80%, 80% 80%;
83+
}
84+
7685
.code-input_special-char_zero-width {
7786
z-index: 1;
7887
width: 1em;

‎plugins/special-chars.js‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
1717
* @param {RegExp} specialCharRegExp The regular expression which matches special characters
1818
* @param {Boolean} colorInSpecialChars Whether or not to give special characters custom background colors based on their hex code
1919
*/
20-
constructor(specialCharRegExp = /(?!\n)(?!\t)[\u{0000}-\u{001F}]|[\u{007F}-\u{009F}]|[\u{0200}-\u{FFFF}]/ug, colorInSpecialChars = false) { // By default, covers many non-renderable ASCII characters
20+
constructor(specialCharRegExp = /(?!\n)(?!\t)[\u{0000}-\u{001F}]|[\u{007F}-\u{009F}]|[\u{0200}-\u{FFFF}]/ug, colorInSpecialChars = true) { // By default, covers many non-renderable ASCII characters
2121
super();
2222
this.specialCharRegExp = specialCharRegExp;
2323
this.colorInSpecialChars = colorInSpecialChars;
@@ -40,9 +40,16 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
4040
codeInput.classList.add("code-input_special-char_container");
4141
}
4242

43+
/* Runs after elements are added into a `code-input` (useful for adding events to the textarea); Params: codeInput element) */
44+
afterElementsAdded(codeInput) {
45+
// For some reason, special chars aren't synced the first time - TODO is there a cleaner way to do this?
46+
setTimeout(() => { codeInput.update(codeInput.value); }, 100);
47+
}
48+
4349
/* Runs after code is highlighted; Params: codeInput element) */
44-
afterHighlight(codeInput) {
50+
afterHighlight(codeInput) {
4551
let result_element = codeInput.querySelector("pre code");
52+
4653
this.recursivelyReplaceText(result_element);
4754
}
4855

@@ -81,7 +88,6 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
8188
}
8289

8390
specialCharReplacer(match_char) {
84-
console.log(2, match_char);
8591
let hex_code = match_char.codePointAt(0);
8692

8793
let colors;
@@ -96,10 +102,15 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
96102
// Create element with hex code
97103
let result = document.createElement("span");
98104
result.classList.add("code-input_special-char");
99-
result.setAttribute("data-hex0", hex_code[0]);
100-
result.setAttribute("data-hex1", hex_code[1]);
101-
result.setAttribute("data-hex2", hex_code[2]);
102-
result.setAttribute("data-hex3", hex_code[3]);
105+
result.style.setProperty("--hex-0", "var(--code-input_special-chars_" + hex_code[0] + ")");
106+
result.style.setProperty("--hex-1", "var(--code-input_special-chars_" + hex_code[1] + ")");
107+
result.style.setProperty("--hex-2", "var(--code-input_special-chars_" + hex_code[2] + ")");
108+
result.style.setProperty("--hex-3", "var(--code-input_special-chars_" + hex_code[3] + ")");
109+
110+
if(char_width <= 11) {
111+
result.classList.add("code-input_special-char_narrow");
112+
}
113+
103114
// Handle zero-width chars
104115
if(char_width == 0) result.classList.add("code-input_special-char_zero-width");
105116
else result.style.width = char_width + "px";
@@ -143,7 +154,6 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
143154
// Non-renderable ASCII characters should all be rendered at same size
144155
if(char != "\u0096" && new RegExp("[\u{0000}-\u{001F}]|[\u{007F}-\u{009F}]", "g").test(char)) {
145156
let fallbackWidth = this.getCharacterWidth("\u0096");
146-
console.log(char.codePointAt(0).toString(16), "Fallback", fallbackWidth);
147157
return fallbackWidth;
148158
}
149159
// Lazy-load - TODO: Get a cleaner way of doing this

0 commit comments

Comments
 (0)