Make textarea rather than code-input element scroll

Author: WebCoder49

code-input.css

@@ -6,8 +6,7 @@
 code-input {
   /* Allow other elements to be inside */
   display: block;
-  overflow-y: auto;
-  overflow-x: auto;
+  overflow: hidden;
   position: relative;
   top: 0;
   left: 0;
@@ -38,21 +37,16 @@ code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, co
   margin: 0px!important;
   padding: var(--padding, 16px)!important;
   border: 0;
-  min-width: calc(100% - var(--padding) * 2);
-  min-height: calc(100% - var(--padding) * 2);
+  width: calc(100% - var(--padding) * 2);
+  height: calc(100% - var(--padding) * 2);
   box-sizing: content-box; /* Make height, width work consistently no matter the box-sizing of ancestors; dialogs can be styled as wanted so are excluded. */
-  overflow: hidden;
+  overflow: auto;
   resize: none;
   grid-row: 1;
   grid-column: 1;
   display: block;
 }
 
-code-input:not(.code-input_pre-element-styled) pre code, code-input.code-input_pre-element-styled pre {
-  height: max-content;
-  width: max-content;
-}
-
 code-input:not(.code-input_pre-element-styled) pre, code-input.code-input_pre-element-styled pre code {
   /* Remove all margin and padding from others */
   margin: 0px!important;
@@ -104,7 +98,7 @@ code-input pre {
 code-input textarea {
   color: transparent;
   background: transparent;
-  caret-color: inherit!important; /* Or choose your favourite color */
+  caret-color: inherit!important;
 }
 code-input textarea::placeholder {
   color: lightgrey;
@@ -187,7 +181,11 @@ code-input .code-input_dialog-container .code-input_keyboard-navigation-instruct
   position: absolute;
   background-color: black;
   color: white;
+
   padding: 2px;
+  line-height: 2em;
+  box-sizing: content-box; /* Make height, width work consistently no matter the box-sizing of ancestors; dialogs can be styled as wanted so are excluded. */
+
   padding-left: 10px;
   margin: 0;
   text-wrap: balance;
@@ -212,5 +210,6 @@ code-input .code-input_dialog-container .code-input_keyboard-navigation-instruct
 code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused) textarea,
 code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused):not(.code-input_pre-element-styled) pre code,
 code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre {
-  padding-top: calc(var(--padding) + 3em)!important;
+  padding-top: calc(var(--padding) + 2em + 4px)!important;
+  height: calc(100% - var(--padding) * 2 - 2em - 4px)!important;
 }

code-input.js

@@ -6,7 +6,6 @@
  * **<https://github.com/WebCoder49/code-input>**
  */
 
-
 var codeInput = {
     /**
      * A list of attributes that will trigger the 
@@ -64,7 +63,8 @@ var codeInput = {
         "change",
         "selectionchange",
         "invalid",
-        "input"
+        "input",
+        "scroll"
     ],
 
     /* ------------------------------------
@@ -512,27 +512,9 @@ var codeInput = {
             if (this.template.includeCodeInputInHighlightFunc) this.template.highlight(resultElement, this);
             else this.template.highlight(resultElement);
 
-            this.syncSize();
-
             this.pluginEvt("afterHighlight");
         }
 
-        /**
-         * Set the size of the textarea element to the size of the pre/code element.
-         */
-        syncSize() {
-            // Synchronise the size of the pre/code and textarea elements
-            if(this.template.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;
-            }
-        }
-
         /**
          * Show some instructions to the user only if they are using keyboard navigation - for example, a prompt on how to navigate with the keyboard if Tab is repurposed.
          * @param {string} instructions The instructions to display only if keyboard navigation is being used. If it's blank, no instructions will be shown.
@@ -684,22 +666,64 @@ var codeInput = {
             this.value = value;
             this.animateFrame();
 
-            const resizeObserver = new ResizeObserver((elements) => {
-                // The only element that could be resized is this code-input element.
-                this.syncSize();
+            // Scrolling
+            this.textareaElement.addEventListener("scroll", () => {
+                this.syncScrollFromTextarea();
             });
-            resizeObserver.observe(this);
+            if(this.template.preElementStyled) {
+                this.preElement.addEventListener("scroll", () => {
+                    this.syncScrollFromHighlighted(this.preElement)
+                });
+            } else {
+                this.codeElement.addEventListener("scroll", () => {
+                     this.syncScrollFromHighlighted(this.codeElement)
+                });
+            }
+            // TODO: Make scrollTop etc. directly accessible from code-input.
+        }
+
+        /**
+         * Synchronise the scroll position of the textarea element to that of the pre/code element.
+         * @param {HTMLElement} highlightedElement The pre/code element that has been scrolled (the styled one).
+         */
+        syncScrollFromHighlighted(highlightedElement) {
+            this.textareaElement.scrollTo(highlightedElement.scrollLeft, highlightedElement.scrollTop);
+        }
+
+        /**
+         * Synchronise the scroll position of the pre/code element to that of the textarea element.
+         */
+        syncScrollFromTextarea() {
+            if(this.template.preElementStyled) {
+                this.preElement.scrollTo(this.textareaElement.scrollLeft, this.textareaElement.scrollTop);
+            } else {
+                this.codeElement.scrollTo(this.textareaElement.scrollLeft, this.textareaElement.scrollTop);
+            }
+        }
+
+        /**
+         * @deprecated This is internal code used by code-input and it may change/be removed to improve the library. This function with its old name remains, though, because that wasn't made as clear in the past.
+         */
+        syncScroll() {
+            this.syncScrollFromTextarea();
+        }
+
+        /**
+         * @deprecated This is internal code used by code-input and it may change/be removed to improve the library. This function with its old name remains, though, because that wasn't made as clear in the past, and will remain until the next major version of code-inp.
+         */
+        sync_scroll() {
+            this.syncScroll();
         }
 
         /**
-         * @deprecated Please use `codeInput.CodeInput.escapeHtml`
+         * @deprecated This is internal code used by code-input and it may change/be removed to improve the library. This function with its old name remains, though, because that wasn't made clear in the past.
          */
         escape_html(text) {
             return this.escapeHtml(text);
         }
 
         /**
-         * @deprecated Please use `codeInput.CodeInput.getTemplate`
+         * @deprecated This is internal code used by code-input and it may change/be removed to improve the library. This function with its old name remains, though, because that wasn't made clear in the past.
          */
         get_template() {
             return this.getTemplate();