Make caret and placeholder use highlighted text's base colour or preferably color CSS of code-input element

WebCoder49 · WebCoder49 · commit 99f1688eaee7 · 2025-08-21T17:48:54.000+01:00
diff --git a/code-input.css b/code-input.css
@@ -20,7 +20,13 @@ code-input {
   top: 0;
   left: 0;
 
-  color: black;
+  /* CSS variables rather than inline styles used for values synced from JavaScript
+   to keep low precedence and thus overridability
+   The variables may change and are for internal use. */
+  --code-input_highlight-text-color: black; /* Set by JS to be base text color of pre code element */
+  color: var(--code-input_highlight-text-color, black);
+  --code-input_default-caret-color: black; /* Set by JS to be same as color property */
+  caret-color: var(--code-input_default-caret-color, black); /* Set by JS to be equal to color property */
   background-color: white;
 
   /* Normal inline styles */
@@ -36,7 +42,6 @@ code-input {
   text-align: start;
   line-height: 1.5; /* Inherited to child elements */
   tab-size: 2;
-  caret-color: darkgrey;
   white-space: pre;
   padding: 0!important; /* Use --padding to set the code-input element's padding */
   display: grid;
@@ -118,12 +123,13 @@ code-input pre {
 /* Make textarea almost completely transparent, except for caret and placeholder */
 
 code-input textarea:not([data-code-input-fallback]) {
-  color: transparent;
   background: transparent;
-  caret-color: inherit!important; /* Or choose your favourite color */
+  color: transparent;
+  caret-color: inherit; /* Or choose your favourite color */
 }
-code-input textarea::placeholder {
-  color: lightgrey;
+code-input textarea:not([data-code-input-fallback]):placeholder-shown {
+  /* Show placeholder */
+  color: inherit;
 }
 
 /* Can be scrolled */
@@ -252,6 +258,8 @@ code-input:not(.code-input_loaded) pre, code-input:not(.code-input_loaded) texta
 code-input:has(textarea[data-code-input-fallback]) {
   padding: 0!important; /* Padding now in the textarea */
   box-sizing: content-box;
+
+  caret-color: revert; /* JS not setting the colour since no highlighting */
 }
 code-input textarea[data-code-input-fallback] {
   overflow: auto;
diff --git a/code-input.js b/code-input.js
@@ -506,6 +506,18 @@ var codeInput = {
                 this.needsHighlight = false;
             }
 
+            // Synchronise colors
+            if(this.textareaElement) {
+                let color;
+                if(this.templateObject.preElementStyled) {
+                    color = getComputedStyle(this.preElement).color;
+                } else {
+                    color = getComputedStyle(this.codeElement).color;
+                }
+                this.style.setProperty("--code-input_highlight-text-color", color);
+            }
+            this.style.setProperty("--code-input_default-caret-color", getComputedStyle(this).color);
+
             window.requestAnimationFrame(this.animateFrame.bind(this));
         }
 
@@ -536,11 +548,9 @@ var codeInput = {
         syncSize() {
             // Synchronise the size of the pre/code and textarea elements
             if(this.templateObject.preElementStyled) {
-                this.style.backgroundColor = getComputedStyle(this.preElement).backgroundColor;
                 this.textareaElement.style.height = getComputedStyle(this.preElement).height;
                 this.textareaElement.style.width = getComputedStyle(this.preElement).width;
             } else {
-                this.style.backgroundColor = getComputedStyle(this.codeElement).backgroundColor;
                 this.textareaElement.style.height = getComputedStyle(this.codeElement).height;
                 this.textareaElement.style.width = getComputedStyle(this.codeElement).width;
             }
@@ -765,7 +775,6 @@ var codeInput = {
             // Update with fallback textarea's state so can keep editing
             // if loaded slowly
             if(fallbackSelectionStart !== undefined) {
-                console.log("sel", fallbackSelectionStart, fallbackSelectionEnd, fallbackSelectionDirection, "scr", fallbackScrollTop, fallbackScrollLeft, "foc", fallbackFocused);
                 textarea.setSelectionRange(fallbackSelectionStart, fallbackSelectionEnd, fallbackSelectionDirection);
                 textarea.scrollTo(fallbackScrollTop, fallbackScrollLeft);
             }
