@webcoder49/code-input 2.8.0 → 2.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/docs/_index.md +1 -1
  2. package/docs/interface/css/_index.md +2 -1
  3. package/docs/plugins/_index.md +23 -19
  4. package/package.json +1 -1
  5. package/plugins/autogrow.css +14 -0
  6. package/plugins/autogrow.min.css +1 -1
  7. package/plugins/prism-line-numbers.min.css +1 -1
  8. package/plugins/special-chars.min.css +1 -1
package/docs/_index.md CHANGED
@@ -8,7 +8,7 @@ title = 'Flexible Syntax Highlighted Editable Textareas'
8
8
 
9
9
  ## Download
10
10
 
11
- *`code-input.js` is free, libre, open source software under the MIT (AKA Expat) license.* You have choices! **Download it from the Git repository on [GitHub](https://github.com/WebCoder49/code-input/tree/v2.8.0) or [Codeberg](https://codeberg.org/code-input-js/code-input-js/), [in a ZIP archive](/release/code-input-js-v2.8.0.zip), [in a TAR.GZ archive](/release/code-input-js-v2.8.0.tar.gz), or from `@webcoder49/code-input` on the NPM registry ([Yarn](https://yarnpkg.com/package?name=@webcoder49/code-input), [NPM](https://npmjs.com/package/@webcoder49/code-input), etc.).**
11
+ *`code-input.js` is free, libre, open source software under the MIT (AKA Expat) license.* You have choices! **Download it from the Git repository on [GitHub](https://github.com/WebCoder49/code-input/tree/v2.8.1) or [Codeberg](https://codeberg.org/code-input-js/code-input-js/), [in a ZIP archive](/release/code-input-js-v2.8.1.zip), [in a TAR.GZ archive](/release/code-input-js-v2.8.1.tar.gz), or from `@webcoder49/code-input` on the NPM registry ([Yarn](https://yarnpkg.com/package?name=@webcoder49/code-input), [NPM](https://npmjs.com/package/@webcoder49/code-input), etc.).**
12
12
 
13
13
  [Want to contribute to the code? You're very welcome to! See here.](#contributing)
14
14
 
package/docs/interface/css/_index.md CHANGED
@@ -20,5 +20,6 @@ Please do **not** use `className` in JavaScript referring to code-input elements
20
20
  `code-input` elements default to having a fixed height and filling the width of their container while the code inside scrolls, and you can set the ordinary CSS properties (for example `height` and `width`) to change this size. You can also make the size more flexible using CSS:
21
21
 
22
22
  * The [CSS `resize` property (see link)](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/resize) can be used on `code-input` elements to give them the manual resizing handle `textarea`s often come with, when the web browser supports it. For example, `<code-input style="resize: both;"`... gives:
23
+
23
24
  ![A syntax-highlighted code input element with diagonal lines in the corner, which can be dragged to resize the element.](resize-both-screenshot.png)
24
- * You can also make a `code-input` element resize automatically to fit its contents - use [the Autosize plugin](../../plugins/#playground-preset-autosize) for that.
25
+ * You can also make a `code-input` element resize automatically to fit its contents - use [the Autogrow plugin](../../plugins/#playground-preset-autogrow) for that.
package/docs/plugins/_index.md CHANGED
@@ -44,7 +44,7 @@ Right now, you can only add one plugin of each type (e.g. one SelectTokenCallbac
44
44
  ]));
45
45
  </script>
46
46
  <p>This uses both the auto-close brackets and indent plugins. Try typing some brackets / double quotes!</p>
47
- <code-input language="javascript"></code-input>
47
+ <code-input language="javascript"><textarea data-code-input-fallback></textarea></code-input>
48
48
  </body>
49
49
  </html>
50
50
  ```
@@ -119,12 +119,12 @@ Right now, you can only add one plugin of each type (e.g. one SelectTokenCallbac
119
119
  ]));
120
120
  </script>
121
121
  <p>Start typing some HTML tags to see the autocomplete in action. You can click an autocomplete suggestion, or press the Tab key to select the first.</p>
122
- <code-input language="html"></code-input>
122
+ <code-input language="html"><textarea data-code-input-fallback></textarea></code-input>
123
123
  </body>
124
124
  </html>
125
125
  ```
126
126
 
127
- #### `Autogrow`: Let code-input elements resize to fit their content (optionally between limits) {#playground-preset-prism-line-numbers}
127
+ #### `Autogrow`: Let code-input elements resize to fit their content (optionally between limits) {#playground-preset-autogrow}
128
128
 
129
129
  ```
130
130
  <!DOCTYPE html>
@@ -148,13 +148,13 @@ Right now, you can only add one plugin of each type (e.g. one SelectTokenCallbac
148
148
  ]));
149
149
  </script>
150
150
  <p>Enter newlines to grow vertically:</p>
151
- <code-input class="code-input_autogrow_height" language="Markdown"></code-input>
151
+ <code-input class="code-input_autogrow_height" language="Markdown"><textarea data-code-input-fallback></textarea></code-input>
152
152
  <p>Type to grow horizontally:</p>
153
- <code-input class="code-input_autogrow_width" language="Markdown"></code-input>
153
+ <code-input class="code-input_autogrow_width" language="Markdown"><textarea data-code-input-fallback></textarea></code-input>
154
154
  <p>Grows vertically between 100px and 200px:</p>
155
- <code-input class="code-input_autogrow_height" style="--code-input_autogrow_min-height: 100px; --code-input_autogrow_max-height: 200px;" language="Markdown"></code-input>
155
+ <code-input class="code-input_autogrow_height" style="--code-input_autogrow_min-height: 100px; --code-input_autogrow_max-height: 200px;" language="Markdown"><textarea data-code-input-fallback></textarea></code-input>
156
156
  <p>Grows horizontally between 100px and 200px:</p>
157
- <code-input class="code-input_autogrow_width" style="--code-input_autogrow_min-width: 100px; --code-input_autogrow_max-width: 200px;" language="Markdown"></code-input>
157
+ <code-input class="code-input_autogrow_width" style="--code-input_autogrow_min-width: 100px; --code-input_autogrow_max-width: 200px;" language="Markdown"><textarea data-code-input-fallback></textarea></code-input>
158
158
  </body>
159
159
  </html>
160
160
  ```
@@ -197,13 +197,15 @@ Right now, you can only add one plugin of each type (e.g. one SelectTokenCallbac
197
197
  ]));
198
198
  </script>
199
199
  <p>When focused in the editor: Try Ctrl/Cmd+F, or click <button onclick="find();">this</button> to find. Try Ctrl+H, or click <button onclick="replace();">this</button> to replace.</p>
200
- <code-input language="markdown"># Hickory dickory dock
200
+ <code-input language="markdown"><textarea data-code-input-fallback># Hickory dickory dock
201
201
  Hickory dickory dock.
202
202
  The mouse ran up the clock.
203
203
  The clock struck one,
204
204
  The mouse ran down,
205
- Hickory dickory dock.</code-input>
205
+ Hickory dickory dock.</textarea></code-input>
206
+ <h2>Please Note</h2>
206
207
  <p><small>When setting the size of <code>code-input</code> elements with this plugin, make sure they are large enough to fit the dialog, at least 500px wide and 170px tall with the default styling. (If you are using the <code>Autogrow</code> plugin, this will be done for you as long as your <code>--code-input_autogrow_max-width</code> and <code>--code-input_autogrow_max-height</code> are large enough.) For technical reasons the dialog cannot overflow the editing area.</small></p>
208
+ <p><small>The keyboard shortcuts may be intercepted by the browser and unable to be used by <code>code-input.js</code>, for example in GNOME Web or Konqueror. Thus if you want this plugin to be available to all users, provide separate buttons to trigger the dialogs as shown above.</small></p>
207
209
  </body>
208
210
  </html>
209
211
  ```
@@ -246,13 +248,15 @@ Hickory dickory dock.</code-input>
246
248
  ]));
247
249
  </script>
248
250
  <p>Try Ctrl+G when focused in the editor, or click <button onclick="goToLine()">this button</button></p>
249
- <code-input class="line-numbers" language="markdown"># Hickory dickory dock
251
+ <code-input class="line-numbers" language="markdown"><textarea data-code-input-fallback># Hickory dickory dock
250
252
  Hickory dickory dock.
251
253
  The mouse ran up the clock.
252
254
  The clock struck one,
253
255
  The mouse ran down,
254
- Hickory dickory dock.</code-input>
256
+ Hickory dickory dock.</textarea></code-input>
257
+ <h2>Please Note</h2>
255
258
  <p><small>When setting the size of <code>code-input</code> elements with this plugin, make sure they are large enough to fit the dialog, at least 300px wide and 150px tall with the default styling. (If you are using the <code>Autogrow</code> plugin, this will be done for you as long as your <code>--code-input_autogrow_max-width</code> and <code>--code-input_autogrow_max-height</code> are large enough.) For technical reasons the dialog cannot overflow the editing area.</small></p>
259
+ <p><small>The keyboard shortcuts may be intercepted by the browser and unable to be used by <code>code-input.js</code>, for example in GNOME Web or Konqueror. Thus if you want this plugin to be available to all users, provide a separate button to trigger the dialog as shown above.</small></p>
256
260
  </body>
257
261
  </html>
258
262
  ```
@@ -290,13 +294,13 @@ Hickory dickory dock.</code-input>
290
294
  ]));
291
295
  </script>
292
296
  <p>Try Tab or Shift+Tab when selecting or editing text.</p>
293
- <code-input class="line-numbers" language="json">{
297
+ <code-input class="line-numbers" language="json"><textarea data-code-input-fallback>{
294
298
  "hello": "world",
295
299
  1: 2,
296
300
  "foo": {
297
301
  "bar": "baz"
298
302
  }
299
- }</code-input>
303
+ }</textarea></code-input>
300
304
  </body>
301
305
  </html>
302
306
  ```
@@ -575,14 +579,14 @@ Hickory dickory dock.</code-input>
575
579
  ]));
576
580
  </script>
577
581
  <p>Try selecting some code with a bracket. This is just one demo use of this very flexible plugin, which lets you use more features from your highlighter (here, Prism.js' match-braces plugin)!</p>
578
- <code-input class="match-braces" language="javascript">function hello() {
582
+ <code-input class="match-braces" language="javascript"><textarea data-code-input-fallback>function hello() {
579
583
  let data = {
580
584
  "array": [
581
585
  "world"
582
586
  ]
583
587
  };
584
588
  console.log(data["array"][0]);
585
- }</code-input>
589
+ }</textarea></code-input>
586
590
  </body>
587
591
  </html>
588
592
  ```
@@ -625,7 +629,7 @@ See https://github.com/WebCoder49/code-input/issues?q=is%3Aissue%20state%3Aopen%
625
629
  )
626
630
  ]));
627
631
  </script>
628
- <code-input class="line-numbers" language="json"></code-input>
632
+ <code-input class="line-numbers" language="json"><textarea data-code-input-fallback></textarea></code-input>
629
633
  <script>
630
634
  window.addEventListener("load", function() {
631
635
  document.querySelector("code-input").value += "[\n";
@@ -667,7 +671,7 @@ See https://github.com/WebCoder49/code-input/issues?q=is%3Aissue%20state%3Aopen%
667
671
  ]));
668
672
  </script>
669
673
  <p>Start typing code of any language. <strong>Detected language: <span id="language"></span></strong>. Inaccurate language detection should be reported to <a target="_blank" href="https://highlightjs.org">highlight.js</a>, not code-input-js.</p>
670
- <code-input oninput="document.getElementById('language').textContent = this.getAttribute('language');"></code-input>
674
+ <code-input><textarea oninput="document.getElementById('language').textContent = this.getAttribute('language');" data-code-input-fallback></textarea></code-input>
671
675
  <p></p>
672
676
  </body>
673
677
  </html>
@@ -701,12 +705,12 @@ See https://github.com/WebCoder49/code-input/issues?q=is%3Aissue%20state%3Aopen%
701
705
  ]));
702
706
  </script>
703
707
  <p>The lines are numbered!</p>
704
- <code-input class="line-numbers" language="markdown"># Hickory dickory dock
708
+ <code-input class="line-numbers" language="markdown"><textarea data-code-input-fallback># Hickory dickory dock
705
709
  Hickory dickory dock.
706
710
  The mouse ran up the clock.
707
711
  The clock struck one,
708
712
  The mouse ran down,
709
- Hickory dickory dock.</code-input>
713
+ Hickory dickory dock.</textarea></code-input>
710
714
  </body>
711
715
  </html>
712
716
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webcoder49/code-input",
3
- "version": "2.8.0",
3
+ "version": "2.8.1",
4
4
  "description": "An editable &lt;textarea&gt; that supports *any* syntax highlighting algorithm, for code or something else. Also, added plugins.",
5
5
  "browser": "code-input.js",
6
6
  "exports": {
package/plugins/autogrow.css CHANGED
@@ -61,3 +61,17 @@ code-input.code-input_autogrow_width:has(.code-input_find-and-replace_dialog:not
61
61
  code-input.code-input_autogrow_height:has(.code-input_find-and-replace_dialog:not(.code-input_find-and-replace_hidden-dialog)) {
62
62
  --code-input_autogrow_internal-min-height: 170px;
63
63
  }
64
+
65
+ /* Autogrow doesn't work with fallback textarea (since its functioning depends on
66
+ synchronisation to pre code element). Stick to the minimum size. */
67
+
68
+ /* At least one line high, leave space for no-JS instructions */
69
+ code-input.code-input_autogrow_height:has(textarea[data-code-input-fallback]) {
70
+ --code-input_autogrow_internal-min-height: calc(4em + var(--padding-top, 16px) + var(--padding-bottom, 16px)); /* For browsers that don't support 1lh */
71
+ --code-input_autogrow_internal-min-height: calc(1lh + 2em + var(--padding-top, 16px) + var(--padding-bottom, 16px)); /* So minimum height possible while containing highlighted code */
72
+ height: var(--code-input_autogrow_true-min-height);
73
+ }
74
+ code-input textarea[data-code-input-fallback] {
75
+ height: calc(var(--code-input_autogrow_true-min-height) - var(--padding-top, 16px) - var(--padding-bottom, 16px) - 2em)!important; /* So minimum height possible while containing highlighted code */
76
+ min-height: calc(100% - var(--padding-top, 16px) - var(--padding-bottom, 16px) - 2em);
77
+ }
package/plugins/autogrow.min.css CHANGED
@@ -1 +1 @@
1
- code-input.code-input_autogrow_height{--code-input_autogrow_min-height:0px;--code-input_autogrow_max-height:calc(infinity*1px);--code-input_autogrow_internal-min-height:0px;--code-input_autogrow_true-min-height:max(var(--code-input_autogrow_min-height),var(--code-input_autogrow_internal-min-height));height:max-content;max-height:var(--code-input_autogrow_max-height)}code-input.code-input_autogrow_height textarea{min-height:max(var(--code-input_synced-height),calc(100% - var(--padding-top,16px) - var(--padding-bottom,16px)));height:calc(var(--code-input_autogrow_true-min-height) - var(--padding-top,16px) - var(--padding-bottom,16px))!important}code-input.code-input_autogrow_height>pre,code-input.code-input_autogrow_height>pre code{min-height:calc(var(--code-input_autogrow_true-min-height) - var(--padding-top,16px) - var(--padding-bottom,16px))}code-input.code-input_autogrow_width{--code-input_autogrow_min-width:100px;--code-input_autogrow_max-width:100%;--code-input_autogrow_internal-min-width:0px;--code-input_autogrow_true-min-width:max(var(--code-input_autogrow_min-width),var(--code-input_autogrow_internal-min-width));width:max-content;max-width:var(--code-input_autogrow_max-width)}code-input.code-input_autogrow_width textarea{min-width:max(var(--code-input_synced-width),calc(100% - var(--padding-left,16px) - var(--padding-right,16px)));width:calc(var(--code-input_autogrow_true-min-width) - var(--padding-left,16px) - var(--padding-right,16px))!important}code-input.code-input_autogrow_width pre code,code-input.code-input_autogrow_width pre{min-width:calc(var(--code-input_autogrow_true-min-width) - var(--padding-left,16px) - var(--padding-right,16px))}code-input.code-input_autogrow_width:has(.code-input_go-to-line_dialog:not(.code-input_go-to-line_hidden-dialog)){--code-input_autogrow_internal-min-width:300px}code-input.code-input_autogrow_height:has(.code-input_go-to-line_dialog:not(.code-input_go-to-line_hidden-dialog)){--code-input_autogrow_internal-min-height:150px}code-input.code-input_autogrow_width:has(.code-input_find-and-replace_dialog:not(.code-input_find-and-replace_hidden-dialog)){--code-input_autogrow_internal-min-width:500px}code-input.code-input_autogrow_height:has(.code-input_find-and-replace_dialog:not(.code-input_find-and-replace_hidden-dialog)){--code-input_autogrow_internal-min-height:170px}
1
+ code-input.code-input_autogrow_height{--code-input_autogrow_min-height:0px;--code-input_autogrow_max-height:calc(infinity * 1px);--code-input_autogrow_internal-min-height:0px;--code-input_autogrow_true-min-height:max(var(--code-input_autogrow_min-height), var(--code-input_autogrow_internal-min-height));height:max-content;max-height:var(--code-input_autogrow_max-height)}code-input.code-input_autogrow_height textarea{min-height:max(var(--code-input_synced-height), calc(100% - var(--padding-top,16px) - var(--padding-bottom,16px)));height:calc(var(--code-input_autogrow_true-min-height) - var(--padding-top,16px) - var(--padding-bottom,16px))!important}code-input.code-input_autogrow_height>pre,code-input.code-input_autogrow_height>pre code{min-height:calc(var(--code-input_autogrow_true-min-height) - var(--padding-top,16px) - var(--padding-bottom,16px))}code-input.code-input_autogrow_width{--code-input_autogrow_min-width:100px;--code-input_autogrow_max-width:100%;--code-input_autogrow_internal-min-width:0px;--code-input_autogrow_true-min-width:max(var(--code-input_autogrow_min-width), var(--code-input_autogrow_internal-min-width));width:max-content;max-width:var(--code-input_autogrow_max-width)}code-input.code-input_autogrow_width textarea{min-width:max(var(--code-input_synced-width), calc(100% - var(--padding-left,16px) - var(--padding-right,16px)));width:calc(var(--code-input_autogrow_true-min-width) - var(--padding-left,16px) - var(--padding-right,16px))!important}code-input.code-input_autogrow_width pre code,code-input.code-input_autogrow_width pre{min-width:calc(var(--code-input_autogrow_true-min-width) - var(--padding-left,16px) - var(--padding-right,16px))}code-input.code-input_autogrow_width:has(.code-input_go-to-line_dialog:not(.code-input_go-to-line_hidden-dialog)){--code-input_autogrow_internal-min-width:300px}code-input.code-input_autogrow_height:has(.code-input_go-to-line_dialog:not(.code-input_go-to-line_hidden-dialog)){--code-input_autogrow_internal-min-height:150px}code-input.code-input_autogrow_width:has(.code-input_find-and-replace_dialog:not(.code-input_find-and-replace_hidden-dialog)){--code-input_autogrow_internal-min-width:500px}code-input.code-input_autogrow_height:has(.code-input_find-and-replace_dialog:not(.code-input_find-and-replace_hidden-dialog)){--code-input_autogrow_internal-min-height:170px}code-input.code-input_autogrow_height:has(textarea[data-code-input-fallback]){--code-input_autogrow_internal-min-height:calc(1lh + 2em + var(--padding-top,16px) + var(--padding-bottom,16px));height:var(--code-input_autogrow_true-min-height)}code-input textarea[data-code-input-fallback]{min-height:calc(100% - var(--padding-top,16px) - var(--padding-bottom,16px) - 2em);height:calc(var(--code-input_autogrow_true-min-height) - var(--padding-top,16px) - var(--padding-bottom,16px) - 2em)!important}
package/plugins/prism-line-numbers.min.css CHANGED
@@ -1 +1 @@
1
- code-input.line-numbers textarea,code-input.line-numbers.code-input_pre-element-styled pre,code-input.line-numbers:not(.code-input_pre-element-styled) pre code,.line-numbers code-input textarea,.line-numbers code-input.code-input_pre-element-styled pre,.line-numbers code-input:not(.code-input_pre-element-styled) pre code{padding-left:max(3.8em,var(--padding-left,16px))!important}code-input.line-numbers,.line-numbers code-input{grid-template-columns:calc(100% - max(0em,calc(3.8em - var(--padding-left,16px))))}code-input.line-numbers .code-input_dialog-container,.line-numbers code-input .code-input_dialog-container{width:calc(100% + max(0em,calc(3.8em - var(--padding-left,16px))))}code-input pre[class*=language-].line-numbers>code{position:static}code-input .line-numbers .line-numbers-rows{left:max(0em,calc(var(--padding-left,16px) - 3.8em));top:var(--padding-top)}code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused) .line-numbers .line-numbers-rows{top:calc(var(--padding-top) + 3em)}code-input.line-numbers.code-input_autogrow_width textarea,.line-numbers code-input.code-input_autogrow_width textarea{min-width:max(var(--code-input_synced-width),calc(100% - max(3.8em,var(--padding-left,16px)) - var(--padding-right,16px)));width:calc(var(--code-input_autogrow_true-min-width) - max(3.8em,var(--padding-left,16px)) - var(--padding-right,16px))!important}code-input.line-numbers.code-input_autogrow_width pre code,code-input.line-numbers.code-input_autogrow_width pre,.line-numbers code-input.code-input_autogrow_width pre code,.line-numbers code-input.code-input_autogrow_width pre{min-width:calc(var(--code-input_autogrow_true-min-width) - max(3.8em,var(--padding-left,16px)) - var(--padding-right,16px))}
1
+ code-input.line-numbers textarea,code-input.line-numbers.code-input_pre-element-styled pre,code-input.line-numbers:not(.code-input_pre-element-styled) pre code,.line-numbers code-input textarea,.line-numbers code-input.code-input_pre-element-styled pre,.line-numbers code-input:not(.code-input_pre-element-styled) pre code{padding-left:max(3.8em, var(--padding-left,16px))!important}code-input.line-numbers,.line-numbers code-input{grid-template-columns:calc(100% - max(0em, calc(3.8em - var(--padding-left,16px))))}code-input.line-numbers .code-input_dialog-container,.line-numbers code-input .code-input_dialog-container{width:calc(100% + max(0em, calc(3.8em - var(--padding-left,16px))))}code-input pre[class*=language-].line-numbers>code{position:static}code-input .line-numbers .line-numbers-rows{left:max(0em, calc(var(--padding-left,16px) - 3.8em));top:var(--padding-top)}code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused) .line-numbers .line-numbers-rows{top:calc(var(--padding-top) + 3em)}code-input.line-numbers.code-input_autogrow_width textarea,.line-numbers code-input.code-input_autogrow_width textarea{min-width:max(var(--code-input_synced-width), calc(100% - max(3.8em, var(--padding-left,16px)) - var(--padding-right,16px)));width:calc(var(--code-input_autogrow_true-min-width) - max(3.8em, var(--padding-left,16px)) - var(--padding-right,16px))!important}code-input.line-numbers.code-input_autogrow_width pre code,code-input.line-numbers.code-input_autogrow_width pre,.line-numbers code-input.code-input_autogrow_width pre code,.line-numbers code-input.code-input_autogrow_width pre{min-width:calc(var(--code-input_autogrow_true-min-width) - max(3.8em, var(--padding-left,16px)) - var(--padding-right,16px))}
package/plugins/special-chars.min.css CHANGED
@@ -1 +1 @@
1
- :root,body{--code-input_special-chars_0:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABtJREFUGFdjZGBgYPj///9/RhCAMcA0bg6yHgAPmh/6BoxTcQAAAABJRU5ErkJgggAA);--code-input_special-chars_1:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABZJREFUGFdjZGBgYPj///9/RhAggwMAitIUBr9U6sYAAAAASUVORK5CYII=);--code-input_special-chars_2:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB9JREFUGFdj/P///38GKGCEMUCCjCgyYBFGRrAKFBkAuLYT9kYcIu0AAAAASUVORK5CYII=);--code-input_special-chars_3:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABhJREFUGFdj/P///38GKGCEMUCCjMTJAACYiBPyG8sfAgAAAABJRU5ErkJggg==);--code-input_special-chars_4:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdj/P///39GRkZGMI3BYYACRhgDrAKZAwAYxhvyz0DRIQAAAABJRU5ErkJggg==);--code-input_special-chars_5:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACJJREFUGFdj/P///38GKGAEcRgZGRlBfDAHLgNjgFUgywAAuR4T9hxJl2YAAAAASUVORK5CYII=);--code-input_special-chars_6:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACBJREFUGFdj/P///38GKGAEcRgZGRlBfDAHQwasAlkGABcdF/Y4yco2AAAAAElFTkSuQmCC);--code-input_special-chars_7:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABZJREFUGFdj/P///38GKGCEMUCCRHIAWMgT8kue3bQAAAAASUVORK5CYII=);--code-input_special-chars_8:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABlJREFUGFdj/P///38GKGAEcRgZGSE0cTIAvHcb8v+mIfAAAAAASUVORK5CYII=);--code-input_special-chars_9:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB9JREFUGFdj/P///38GKGAEcRgZGSE0igxMCVgGmQMAPqcX8hWL1K0AAAAASUVORK5CYII=);--code-input_special-chars_A:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACBJREFUGFdjZGBgYPj///9/RhCAMcA0iADJggCmDEw5ALdxH/aGuYHqAAAAAElFTkSuQmCC);--code-input_special-chars_B:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABlJREFUGFdj/P///38GBgYGRhAAceA0cTIAvc0b/vRDnVoAAAAASUVORK5CYII=);--code-input_special-chars_C:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdjZGBgYPj///9/EM0IYjAyMjIS4CDrAQC57hP+uLwvFQAAAABJRU5ErkJggg==);--code-input_special-chars_D:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABtJREFUGFdj/P///38GBgYGRhAAceA0fg5MDwAveh/6ToN9VwAAAABJRU5ErkJggg==);--code-input_special-chars_E:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABxJREFUGFdj/P///38GKGAEcRgZGRlBfDCHsAwA2UwT+mVIH1MAAAAASUVORK5CYII=);--code-input_special-chars_F:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdj/P///38GKGAEcRgZGRlBfDAHtwxMGQDZZhP+BnB1kwAAAABJRU5ErkJggg==)}.code-input_special-char{height:1em;text-shadow:none;vertical-align:middle;color:#0000;--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);outline:.1px solid;font-size:0;text-decoration:none;display:inline-block;position:relative;top:0;left:0;overflow:hidden}.code-input_special-char:before{content:" ";background-color:var(--code-input_special-char_color,currentColor);image-rendering:pixelated;width:calc(100%-2px);height:100%;mask-image:var(--hex-0),var(--hex-1),var(--hex-2),var(--hex-3);mask-position:10% 10%,90% 10%,10% 90%,90% 90%;mask-size:min(40%,.25em),min(40%,.25em),min(40%,.25em),min(40%,.25em);mask-repeat:no-repeat,no-repeat,no-repeat,no-repeat;-webkit-mask-image:var(--hex-0),var(--hex-1),var(--hex-2),var(--hex-3);margin-left:50%;display:inline-block;transform:translate(-50%);-webkit-mask-position:10% 10%,min(90%,.5em) 10%,10% 90%,min(90%,.5em) 90%;-webkit-mask-size:min(40%,.25em),min(40%,.25em),min(40%,.25em),min(40%,.25em);-webkit-mask-repeat:no-repeat,no-repeat,no-repeat,no-repeat}.code-input_special-char_zero-width{z-index:1;opacity:.75;width:1em;margin-left:-.5em;margin-right:-.5em;position:relative}.code-input_special-char_one-byte:before{content:attr(data-hex2);height:1.5em;top:-1em}.code-input_special-char_one-byte:after{content:attr(data-hex3);height:1.5em;bottom:-1em}
1
+ :root,body{--code-input_special-chars_0:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABtJREFUGFdjZGBgYPj///9/RhCAMcA0bg6yHgAPmh/6BoxTcQAAAABJRU5ErkJgggAA);--code-input_special-chars_1:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABZJREFUGFdjZGBgYPj///9/RhAggwMAitIUBr9U6sYAAAAASUVORK5CYII=);--code-input_special-chars_2:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB9JREFUGFdj/P///38GKGCEMUCCjCgyYBFGRrAKFBkAuLYT9kYcIu0AAAAASUVORK5CYII=);--code-input_special-chars_3:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABhJREFUGFdj/P///38GKGCEMUCCjMTJAACYiBPyG8sfAgAAAABJRU5ErkJggg==);--code-input_special-chars_4:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdj/P///39GRkZGMI3BYYACRhgDrAKZAwAYxhvyz0DRIQAAAABJRU5ErkJggg==);--code-input_special-chars_5:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACJJREFUGFdj/P///38GKGAEcRgZGRlBfDAHLgNjgFUgywAAuR4T9hxJl2YAAAAASUVORK5CYII=);--code-input_special-chars_6:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACBJREFUGFdj/P///38GKGAEcRgZGRlBfDAHQwasAlkGABcdF/Y4yco2AAAAAElFTkSuQmCC);--code-input_special-chars_7:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABZJREFUGFdj/P///38GKGCEMUCCRHIAWMgT8kue3bQAAAAASUVORK5CYII=);--code-input_special-chars_8:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABlJREFUGFdj/P///38GKGAEcRgZGSE0cTIAvHcb8v+mIfAAAAAASUVORK5CYII=);--code-input_special-chars_9:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB9JREFUGFdj/P///38GKGAEcRgZGSE0igxMCVgGmQMAPqcX8hWL1K0AAAAASUVORK5CYII=);--code-input_special-chars_A:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACBJREFUGFdjZGBgYPj///9/RhCAMcA0iADJggCmDEw5ALdxH/aGuYHqAAAAAElFTkSuQmCC);--code-input_special-chars_B:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABlJREFUGFdj/P///38GBgYGRhAAceA0cTIAvc0b/vRDnVoAAAAASUVORK5CYII=);--code-input_special-chars_C:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdjZGBgYPj///9/EM0IYjAyMjIS4CDrAQC57hP+uLwvFQAAAABJRU5ErkJggg==);--code-input_special-chars_D:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABtJREFUGFdj/P///38GBgYGRhAAceA0fg5MDwAveh/6ToN9VwAAAABJRU5ErkJggg==);--code-input_special-chars_E:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABxJREFUGFdj/P///38GKGAEcRgZGRlBfDCHsAwA2UwT+mVIH1MAAAAASUVORK5CYII=);--code-input_special-chars_F:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdj/P///38GKGAEcRgZGRlBfDAHtwxMGQDZZhP+BnB1kwAAAABJRU5ErkJggg==)}.code-input_special-char{height:1em;text-shadow:none;vertical-align:middle;color:#0000;--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);outline:.1px solid;font-size:0;text-decoration:none;display:inline-block;position:relative;top:0;left:0;overflow:hidden}.code-input_special-char:before{content:" ";background-color:var(--code-input_special-char_color,currentColor);image-rendering:pixelated;width:calc(100%-2px);height:100%;mask-image:var(--hex-0), var(--hex-1), var(--hex-2), var(--hex-3);mask-position:10% 10%,90% 10%,10% 90%,90% 90%;mask-size:min(40%,.25em),min(40%,.25em),min(40%,.25em),min(40%,.25em);mask-repeat:no-repeat,no-repeat,no-repeat,no-repeat;-webkit-mask-image:var(--hex-0), var(--hex-1), var(--hex-2), var(--hex-3);margin-left:50%;display:inline-block;transform:translate(-50%);-webkit-mask-position:10% 10%,min(90%,.5em) 10%,10% 90%,min(90%,.5em) 90%;-webkit-mask-size:min(40%,.25em),min(40%,.25em),min(40%,.25em),min(40%,.25em);-webkit-mask-repeat:no-repeat,no-repeat,no-repeat,no-repeat}.code-input_special-char_zero-width{z-index:1;opacity:.75;width:1em;margin-left:-.5em;margin-right:-.5em;position:relative}.code-input_special-char_one-byte:before{content:attr(data-hex2);height:1.5em;top:-1em}.code-input_special-char_one-byte:after{content:attr(data-hex3);height:1.5em;bottom:-1em}