Add tests for synchronise color; Make synchronise color not use the style attribute for long-term storage and document use of class attribute

Author: WebCoder49

code-input.css

@@ -27,7 +27,7 @@ code-input {
   /* --code-input_no-override-color: Set by JS for very short time to get whether color has been overriden */
   color: var(--code-input_no-override-color, black);
   /* --code-input_default-caret-color: Set by JS to be same as color property - currentColor won't work because it's lazily evaluated so gives transparent for the textarea */
-  caret-color: var(--code-input_default-caret-color, black);
+  caret-color: var(--code-input_default-caret-color, inherit);
   background-color: white;
 
   /* Normal inline styles */
@@ -132,7 +132,7 @@ code-input pre {
 code-input textarea:not([data-code-input-fallback]) {
   background: transparent;
   color: transparent;
-  caret-color: inherit; /* Or choose your favourite color */
+  caret-color: inherit;
 }
 code-input textarea:not([data-code-input-fallback]):placeholder-shown {
   /* Show placeholder */
@@ -253,7 +253,7 @@ code-input:not(.code-input_loaded)::after {
   border-top: 1px solid currentColor;
   outline-top: 0;
   background-color: inherit;
-  color: var(--code-input_highlight-text-color, inherit);
+  color: inherit;
 
   margin: 0;
   padding: 0;

code-input.js

@@ -152,6 +152,8 @@ var codeInput = {
         }
     },
 
+    stylesheetI: 0, // Increments to give different classes to each code-input element so they can have custom styles synchronised internally without affecting the inline style
+
     /**
      * Please see `codeInput.templates.prism` or `codeInput.templates.hljs`.
      * Templates are used in `<code-input>` elements and once registered with
@@ -445,6 +447,16 @@ var codeInput = {
          */
         dialogContainerElement = null;
 
+        /**
+         * Like style attribute, but with a specificity of 1
+         * element, 1 class. Present so styles can be set on only
+         * this element while giving other code freedom of use of
+         * the style attribute.
+         *
+         * For internal use only.
+         */
+        internalStyle = null;
+
         /**
         * Form-Associated Custom Element Callbacks
         * https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example
@@ -559,23 +571,23 @@ var codeInput = {
             const oldTransition = this.style.transition;
             this.style.transition = "unset";
             window.requestAnimationFrame(() => {
-                this.style.setProperty("--code-input_no-override-color", "rgb(0, 0, 0)");
+                this.internalStyle.setProperty("--code-input_no-override-color", "rgb(0, 0, 0)");
                 if(getComputedStyle(this).color == "rgb(0, 0, 0)") {
                     // May not be overriden
-                    this.style.setProperty("--code-input_no-override-color", "rgb(255, 255, 255)");
+                    this.internalStyle.setProperty("--code-input_no-override-color", "rgb(255, 255, 255)");
                     if(getComputedStyle(this).color == "rgb(255, 255, 255)") {
                         // Definitely not overriden
-                        this.style.removeProperty("--code-input_no-override-color");
+                        this.internalStyle.removeProperty("--code-input_no-override-color");
                         this.style.transition = oldTransition;
 
                         const highlightedTextColor = getComputedStyle(this.getStyledHighlightingElement()).color;
 
-                        this.style.setProperty("--code-input_highlight-text-color", highlightedTextColor);
-                        this.style.setProperty("--code-input_default-caret-color", highlightedTextColor);
+                        this.internalStyle.setProperty("--code-input_highlight-text-color", highlightedTextColor);
+                        this.internalStyle.setProperty("--code-input_default-caret-color", highlightedTextColor);
                         return false;
                     }
                 }
-                this.style.removeProperty("--code-input_no-override-color");
+                this.internalStyle.removeProperty("--code-input_no-override-color");
                 this.style.transition = oldTransition;
             });
 
@@ -593,8 +605,8 @@ var codeInput = {
             // color of code-input element
             if(this.isColorOverridenSyncIfNot()) {
                 // color overriden
-                this.style.removeProperty("--code-input_highlight-text-color");
-                this.style.setProperty("--code-input_default-caret-color", getComputedStyle(this).color);
+                this.internalStyle.removeProperty("--code-input_highlight-text-color");
+                this.internalStyle.setProperty("--code-input_default-caret-color", getComputedStyle(this).color);
             }
         }
 
@@ -832,6 +844,15 @@ var codeInput = {
             });
             resizeObserver.observe(this);
 
+
+            // Add internal style as non-externally-overridable alternative to style attribute for e.g. syncing color
+            this.classList.add("code-input_styles_" + codeInput.stylesheetI);
+            const stylesheet = document.createElement("style");
+            stylesheet.innerHTML = "code-input.code-input_styles_" + codeInput.stylesheetI + " {}";
+            this.appendChild(stylesheet);
+            this.internalStyle = stylesheet.sheet.cssRules[0].style;
+            codeInput.stylesheetI++;
+
             // Synchronise colors
             const preColorChangeCallback = (evt) => {
                 if(evt.propertyName == "color") {
@@ -993,7 +1014,9 @@ var codeInput = {
                             code.classList.add("language-" + newValue);
                         }
 
-                        if (mainTextarea.placeholder == oldValue) mainTextarea.placeholder = newValue;
+                        if (mainTextarea.placeholder == oldValue || oldValue == null && mainTextarea.placeholder == "") {
+                            mainTextarea.placeholder = newValue;
+                        }
 
                         this.scheduleHighlight();
 

docs/interface/css/_index.md

@@ -10,3 +10,5 @@ title = 'Styling `code-input` elements with CSS'
 * The CSS variable `--padding` should be used rather than the property `padding` (e.g. `<code-input style="--padding: 10px;">...`), or `--padding-left`, `--padding-right`, `--padding-top` and `--padding-bottom` instead of the CSS properties of the same names. For technical reasons, the value must have a unit (i.e. `0px`, not `0`).
 * Background colours set on `code-input` elements will not work with highlighters that set background colours themselves - use `(code-input's selector) pre[class*="language-"]` for Prism.js or `.hljs` for highlight.js to target the highlighted element with higher specificity than the highlighter's theme. You may also set the `background-color` of the code-input element for its appearance when its template is unregistered / there is no JavaScript.
 * For now, elements on top of `code-input` elements should have a CSS `z-index` at least 3 greater than the `code-input` element.
+
+Please do **not** use `className` in JavaScript referring to code-input elements, because the code-input library needs to add its own classes to code-input elements for easier progressive enhancement. You can, however, use `classList` and `style` as much as you want - it will make your code cleaner anyway.

tests/hljs.html

@@ -6,7 +6,7 @@
     <title>code-input Tester</title>
 
     <!--Import Highlight.JS-->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css" id="theme-stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/xml.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/css.min.js"></script>
@@ -42,7 +42,7 @@ <h4><a href="prism.html">Test for Prism.js</a></h4>
 
     <details id="collapse-results"><summary>Test Results (Click to Open)</summary><pre id="test-results"></pre></details>
     <form method="GET" action="afterform.html" target="_blank">
-        <code-input><textarea data-code-input-fallback name="q">console.log("Hello, World!");
+        <code-input><textarea data-code-input-fallback name="q" placeholder="language auto-detected">console.log("Hello, World!");
 // A second line
 // A third line with &lt;html> tags</textarea></code-input>
         <input type="submit" value="Test HTML Form"/>

tests/prism.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>code-input Tester</title>
     <!--Import Prism-->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" id="theme-stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" data-manual></script><!--Remove data-manual if also using Prism normally-->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>

tests/tester.js

@@ -326,6 +326,34 @@ console.log("I've got another line!", 2 < 3, "should be true.");
 // A third line with <html> tags
 `); // Extra newline so line numbers visible if enabled.
 
+    // Delete all code
+    textarea.selectionStart = 0;
+    textarea.selectionEnd = textarea.value.length;
+    backspace(textarea);
+    codeInputElement.setAttribute("language", "JavaScript"); // for placeholder
+
+    await waitAsync(100); // Wait for rendered value to update
+    testAssertion("Core", "Light theme Caret/Placeholder Color Correct", confirm("Are the caret and placeholder near-black? (OK=Yes)"), "user-judged");
+
+    if(isHLJS) {
+        document.getElementById("theme-stylesheet").href = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/dark.min.css";
+    } else {
+        document.getElementById("theme-stylesheet").href = "https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css";
+    }
+    await waitAsync(200); // Wait for colours to update
+    testAssertion("Core", "Dark theme Caret/Placeholder Color Correct", confirm("Are the caret and placeholder near-white? (OK=Yes)"), "user-judged");
+
+    codeInputElement.style.color = "red";
+    await waitAsync(200); // Wait for colours to update
+    testAssertion("Core", "Overriden color Caret/Placeholder Color Correct", confirm("Are the caret and placeholder (for Firefox) or just caret (for Chromium/WebKit, for consistency with textareas) red? (OK=Yes)"), "user-judged");
+
+    codeInputElement.style.removeProperty("color");
+    codeInputElement.style.caretColor = "red";
+    await waitAsync(200); // Wait for colours to update
+    testAssertion("Core", "Overriden caret-color Caret/Placeholder Color Correct", confirm("Is the caret red and placeholder near-white? (OK=Yes)"), "user-judged");
+
+    codeInputElement.style.removeProperty("caret-color");
+
     /*--- Tests for plugins ---*/
     // AutoCloseBrackets
     testAddingText("AutoCloseBrackets", textarea, function(textarea) {