Add final compatibility (fixes #211) for autogrow plugin; Fully tested

Author: WebCoder49

code-input.js

@@ -555,13 +555,13 @@ var codeInput = {
          */
         syncSize() {
             // Synchronise the size of the pre/code and textarea elements
+            // Set directly as well as via the variable so precedence
+            // not lowered, breaking CSS backwards compatibility.
             const height = getComputedStyle(this.getStyledHighlightingElement()).height;
-            this.textareaElement.style.height = 0;
             this.textareaElement.style.height = height;
             this.internalStyle.setProperty("--code-input_synced-height", height);
 
             const width = getComputedStyle(this.getStyledHighlightingElement()).width;
-            this.textareaElement.style.width = 0;
             this.textareaElement.style.width = width;
             this.internalStyle.setProperty("--code-input_synced-width", width);
         }
@@ -860,6 +860,10 @@ var codeInput = {
                 this.syncSize();
             });
             resizeObserver.observe(this);
+            // Must resize when this content resizes, for autogrow plugin
+            // support.
+            resizeObserver.observe(this.preElement);
+            resizeObserver.observe(this.codeElement);
 
             // Synchronise colors
             const preColorChangeCallback = (evt) => {

plugins/autocomplete.js

@@ -65,7 +65,7 @@ codeInput.plugins.Autocomplete = class extends codeInput.Plugin {
                 // Hasn't saved text in test pre to find pos
                 // Need to regenerate text in test pre
                 return this.getCaretCoordinates(codeInput, textarea, charIndex, false);
-            } 
+            }
             afterSpan = spans[1];
         } else {
             /* Inspired by https://github.com/component/textarea-caret-position */
@@ -74,7 +74,8 @@ codeInput.plugins.Autocomplete = class extends codeInput.Plugin {
             let beforeSpan = document.createElement("span");
             beforeSpan.textContent = textarea.value.substring(0, charIndex);
             afterSpan = document.createElement("span");
-            afterSpan.textContent = "."; // Placeholder
+            afterSpan.textContent = ""; // Text here would potentially make the
+            // invisible pre and thus the autogrowing code-input element wider
 
             // Clear test pre - https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild
             while (testPosElem.firstChild) {

plugins/prism-line-numbers.css

@@ -39,7 +39,9 @@ code-input.line-numbers.code-input_autogrow_width textarea, .line-numbers code-i
   width: calc(var(--code-input_autogrow_min-width) - max(3.8em, var(--padding-left, 16px)) - var(--padding-right, 16px))!important; /* So minimum width possible while containing highlighted code */
   min-width: max(var(--code-input_synced-width), calc(100% - max(3.8em, var(--padding-left, 16px)) - var(--padding-right, 16px)));
 }
-code-input.code-input_autogrow_width pre code,
-code-input.code-input_autogrow_width pre {
+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_min-width) - max(3.8em, var(--padding-left, 16px)) - var(--padding-right, 16px));
 }