Add almost-perfect (#211) cross-browser Autogrow plugin (fixes #206); make Autogrow fit dialogs by default; make dialogs fully disappear when closed (#210)

Author: WebCoder49

code-input.css

@@ -99,7 +99,7 @@ code-input textarea, code-input pre, code-input pre * {
   tab-size: inherit!important;
   text-align: inherit!important;
 }
-code-input textarea, code-input pre, code-input pre code {
+code-input pre, code-input pre code {
   overflow: visible!important;
 }
 

code-input.js

@@ -558,12 +558,12 @@ var codeInput = {
             const height = getComputedStyle(this.getStyledHighlightingElement()).height;
             this.textareaElement.style.height = 0;
             this.textareaElement.style.height = height;
-            this.textareaElement.style.setProperty("--code-input_synced-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.textareaElement.style.setProperty("--code-input_synced-width", width);
+            this.internalStyle.setProperty("--code-input_synced-width", width);
         }
 
         /**
@@ -785,6 +785,14 @@ var codeInput = {
 
             this.innerHTML = ""; // Clear Content
 
+            // 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 attributes to textarea
             for(let i = 0; i < this.attributes.length; i++) {
                 let attribute = this.attributes[i].name;
@@ -853,15 +861,6 @@ 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") {

plugins/autogrow.css

@@ -18,15 +18,36 @@ code-input.code-input_autogrow_height textarea {
     height: calc(var(--code-input_autogrow_min-height) - var(--padding-top, 16px) - var(--padding-bottom, 16px))!important; /* So minimum height possible while containing highlighted code */
     min-height: max(var(--code-input_synced-height), calc(100% - var(--padding-top, 16px) - var(--padding-bottom, 16px)));
 }
+code-input.code-input_autogrow_height > pre,
+code-input.code-input_autogrow_height > pre code {
+    min-height: calc(var(--code-input_autogrow_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%;
     width: max-content; /* Using unset rather than max-content makes always 100% width. */
     max-width: var(--code-input_autogrow_max-width);
 }
-
 code-input.code-input_autogrow_width textarea {
     width: calc(var(--code-input_autogrow_min-width) - 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% - var(--padding-left, 16px) - var(--padding-right, 16px)));
 }
+code-input.code-input_autogrow_width pre code,
+code-input.code-input_autogrow_width pre {
+    min-width: calc(var(--code-input_autogrow_min-width) - var(--padding-left, 16px) - var(--padding-right, 16px));
+}
+
+/* FindAndReplace / GoToLine dialog visibility */
+code-input.code-input_autogrow_width:has(.code-input_go-to-line_dialog:not(.code-input_go-to-line_hidden-dialog)) {
+    --code-input_autogrow_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_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_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_min-height: 170px;
+}

plugins/find-and-replace.css

@@ -15,13 +15,14 @@
 /* Find-and-replace dialog */
 
 @keyframes code-input_find-and-replace_roll-in {
-    0% {opacity: 0; transform: translateY(-34px);}
-    100% {opacity: 1; transform: translateY(0px);}
-}
-
-@keyframes code-input_find-and-replace_roll-out {
-    0% {opacity: 1;top: 0;}
-    100% {opacity: 0;top: -34px;}
+    0% {
+      opacity: 0;
+      transform: translateY(-34px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0px);
+    }
 }
 
 .code-input_find-and-replace_dialog {
@@ -38,14 +39,11 @@
 
 .code-input_find-and-replace_dialog:not(.code-input_find-and-replace_hidden-dialog) {
   animation: code-input_find-and-replace_roll-in .2s;
-  opacity: 1;
-  pointer-events: all;
+  display: block;
 }
 
 .code-input_find-and-replace_dialog.code-input_find-and-replace_hidden-dialog {
-  animation: code-input_find-and-replace_roll-out .2s;
-  opacity: 0;
-  pointer-events: none;
+  display: none;
 }
 
 .code-input_find-and-replace_dialog input::placeholder {

plugins/go-to-line.css

@@ -1,11 +1,12 @@
 @keyframes code-input_go-to-line_roll-in {
-    0% {opacity: 0; transform: translateY(-34px);}
-    100% {opacity: 1; transform: translateY(0px);}
-}
-
-@keyframes code-input_go-to-line_roll-out {
-    0% {opacity: 1; transform: translateY(0px);}
-    100% {opacity: 0; transform: translateY(-34px);}
+    0% {
+      opacity: 0;
+      transform: translateY(-34px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0px);
+    }
 }
 
 .code-input_go-to-line_dialog {
@@ -21,14 +22,11 @@
 
 .code-input_go-to-line_dialog:not(.code-input_go-to-line_hidden-dialog) {
   animation: code-input_go-to-line_roll-in .2s;
-  opacity: 1;
-  pointer-events: all;
+  display: block;
 }
 
 .code-input_go-to-line_dialog.code-input_go-to-line_hidden-dialog {
-  animation: code-input_go-to-line_roll-out .2s;
-  opacity: 0;
-  pointer-events: none;
+  display: none;
 }
 
 .code-input_go-to-line_dialog input::placeholder {

plugins/prism-line-numbers.css

@@ -39,3 +39,7 @@ 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 {
+  min-width: calc(var(--code-input_autogrow_min-width) - max(3.8em, var(--padding-left, 16px)) - var(--padding-right, 16px));
+}

tests/tester.js

@@ -520,6 +520,7 @@ console.log("I've got another line!", 2 < 3, "should be true.");
     await waitAsync(100); // Wait for width to update
 
     const emptyWidth = textarea.parentElement.clientWidth;
+    textarea.parentElement.style.setProperty("--code-input_autogrow_max-width", "calc(infinity * 1px)"); // So can grow beyond width of viewport - default CSS limits to width
     addText(textarea, "// A very very very very extremely vastly very very very very long line of code is written here in this very comment; yes, this very comment!");
     await waitAsync(100); // Wait for width to update
 
@@ -529,7 +530,6 @@ console.log("I've got another line!", 2 < 3, "should be true.");
     await waitAsync(200); // Wait for width to update
 
     testAssertion("Autogrow", "font-size Decrease Decreases Width", textarea.parentElement.clientWidth < fullWidth, `${textarea.parentElement.clientWidth} should be < ${fullWidth}`);
-    textarea.parentElement.style.setProperty("font-size", "100%");
     textarea.parentElement.style.removeProperty("font-size");
     textarea.parentElement.style.setProperty("--code-input_autogrow_min-width", (fullWidth + 10) + "px");
     await waitAsync(200); // Wait for width to update