Merge pull request #212 from WebCoder49/autogrow

WebCoder49 · web-flow · commit 1c3a9ea95d91 · 2025-12-11T12:44:54.000Z
Add autogrow plugin
diff --git a/code-input.css b/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;
 }
 
diff --git a/code-input.js b/code-input.js
@@ -555,8 +555,15 @@ var codeInput = {
          */
         syncSize() {
             // Synchronise the size of the pre/code and textarea elements
-            this.textareaElement.style.height = getComputedStyle(this.getStyledHighlightingElement()).height;
-            this.textareaElement.style.width = getComputedStyle(this.getStyledHighlightingElement()).width;
+            // 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 = height;
+            this.internalStyle.setProperty("--code-input_synced-height", height);
+
+            const width = getComputedStyle(this.getStyledHighlightingElement()).width;
+            this.textareaElement.style.width = width;
+            this.internalStyle.setProperty("--code-input_synced-width", width);
         }
 
         /**
@@ -788,6 +795,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;
@@ -855,14 +870,11 @@ var codeInput = {
                 this.syncSize();
             });
             resizeObserver.observe(this);
-
-
-            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++;
+          
+            // Must resize when this content resizes, for autogrow plugin
+            // support.
+            resizeObserver.observe(this.preElement);
+            resizeObserver.observe(this.codeElement);
 
             // Synchronise colors
             const preColorChangeCallback = (evt) => {
diff --git a/docs/interface/css/_index.md b/docs/interface/css/_index.md
@@ -14,3 +14,11 @@ title = 'Styling `code-input` elements with CSS'
 * 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.
+
+## Methods of resizing
+
+`code-input` elements default to having a fixed height and filling the width of their container while the code inside scrolls, and you can set the ordinary CSS properties (for example `height` and `width`) to change this size. You can also make the size more flexible using CSS:
+
+* The [CSS `resize` property (see link)](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/resize) can be used on `code-input` elements to give them the manual resizing handle `textarea`s often come with, when the web browser supports it. For example, `<code-input style="resize: both;"`... gives:
+![A syntax-highlighted code input element with diagonal lines in the corner, which can be dragged to resize the element.](resize-both-screenshot.png)
+* You can also make a `code-input` element resize automatically to fit its contents - use [the Autosize plugin](../../plugins/#playground-preset-autosize) for that.
diff --git a/docs/interface/css/resize-both-screenshot.png b/docs/interface/css/resize-both-screenshot.png
diff --git a/docs/plugins/_index.md b/docs/plugins/_index.md
@@ -124,6 +124,41 @@ Right now, you can only add one plugin of each type (e.g. one SelectTokenCallbac
 </html>
 ```
 
+#### `Autogrow`: Let code-input elements resize to fit their content (optionally between limits) {#playground-preset-prism-line-numbers}
+
+```
+<!DOCTYPE html>
+<html>
+    <body>
+        <!--For convenience, this demo uses files from JSDelivr CDN; for more privacy and security download and host them yourself.-->
+        <!--Prism+code-input-->
+        <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js" data-manual></script><!--Remove data-manual if also using Prism normally-->
+        <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css"></link>
+        <script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.7/code-input.min.js"></script>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.7/code-input.min.css">
+
+        
+        <!--Import-->
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.7/plugins/autogrow.min.css"/>
+
+        <script>
+            codeInput.registerTemplate("syntax-highlighted", new codeInput.templates.Prism(Prism, [
+                // CSS only - don't pass here
+            ]));
+        </script>
+        <p>Enter newlines to grow vertically:</p>
+        <code-input class="code-input_autogrow_height" language="Markdown"></code-input>
+        <p>Type to grow horizontally:</p>
+        <code-input class="code-input_autogrow_width" language="Markdown"></code-input>
+        <p>Grows vertically between 100px and 200px:</p>
+        <code-input class="code-input_autogrow_height" style="--code-input_autogrow_min-height: 100px; --code-input_autogrow_max-height: 200px;" language="Markdown"></code-input>
+        <p>Grows horizontally between 100px and 200px:</p>
+        <code-input class="code-input_autogrow_width" style="--code-input_autogrow_min-width: 100px; --code-input_autogrow_max-width: 200px;" language="Markdown"></code-input>
+    </body>
+</html>
+```
+
 #### `FindAndReplace`: Add an openable dialog to find and replace matches to a search term, including highlighting the matches {#playground-preset-find-and-replace}
 
 ```
diff --git a/plugins/README.md b/plugins/README.md
@@ -29,6 +29,13 @@ Files: [autodetect.js](./autodetect.js)
 
 [🚀 *Demo*](https://v2.code-input-js.org/plugins/#playground-preset-autodetect)
 
+### Autogrow
+Make code-input elements resize automatically and fit their content live using CSS classes, optionally between a minimum and maximum size specified using CSS variables.
+
+Files: [autogrow.css](./autogrow.css) (NO JS FILE)
+
+[🚀 *Demo*](https://v2.code-input-js.org/plugins/#playground-preset-autogrow)
+
 ### Find and Replace
 Add Find-and-Replace (Ctrl+F for find, Ctrl+H for replace by default, or when JavaScript triggers it) functionality to the code editor.
 
diff --git a/plugins/autocomplete.js b/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) {
diff --git a/plugins/autogrow.css b/plugins/autogrow.css
@@ -0,0 +1,53 @@
+/**
+ * Make code-input elements resize automatically and fit their content live using CSS
+ * classes, optionally between a minimum and maximum size specified using CSS variables.
+ *
+ * Files: autogrow.css
+ */
+
+/* Inspired greatly by https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
+and the fact code-input.js already implements the article's main structure. */
+
+code-input.code-input_autogrow_height {
+    --code-input_autogrow_min-height: 0px;
+    --code-input_autogrow_max-height: calc(infinity * 1px);
+    height: max-content;
+    max-height: var(--code-input_autogrow_max-height);
+}
+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;
+}
diff --git a/plugins/find-and-replace.css b/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 {
diff --git a/plugins/go-to-line.css b/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 {
diff --git a/plugins/prism-line-numbers.css b/plugins/prism-line-numbers.css
@@ -33,3 +33,15 @@ code-input .line-numbers .line-numbers-rows {
 code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused) .line-numbers .line-numbers-rows {
   top: calc(var(--padding-top) + 3em);
 }
+
+/* Compatibility with autogrow plugin */
+code-input.line-numbers.code-input_autogrow_width textarea, .line-numbers code-input.code-input_autogrow_width textarea {
+  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.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));
+}
diff --git a/tests/hljs.html b/tests/hljs.html
@@ -22,6 +22,7 @@
     <script src="../plugins/auto-close-brackets.js"></script>
     <script src="../plugins/autocomplete.js"></script>
     <link rel="stylesheet" href="../plugins/autocomplete.css">
+    <link rel="stylesheet" href="../plugins/autogrow.css">
     <script src="../plugins/autodetect.js"></script>
     <script src="../plugins/find-and-replace.js"></script>
     <link rel="stylesheet" href="../plugins/find-and-replace.css">
diff --git a/tests/prism.html b/tests/prism.html
@@ -21,6 +21,7 @@
     <script src="../plugins/auto-close-brackets.js"></script>
     <script src="../plugins/autocomplete.js"></script>
     <link rel="stylesheet" href="../plugins/autocomplete.css">
+    <link rel="stylesheet" href="../plugins/autogrow.css">
     <script src="../plugins/find-and-replace.js"></script>
     <link rel="stylesheet" href="../plugins/find-and-replace.css">
     <script src="../plugins/go-to-line.js"></script>
diff --git a/tests/tester.js b/tests/tester.js
@@ -478,6 +478,76 @@ console.log("I've got another line!", 2 &lt; 3, "should be true.");
         assertEqual("Autodetect", "Detects CSS", codeInputElement.getAttribute("language"), "css");
     }
 
+    // Autogrow
+    // Replace all code
+    textarea.selectionStart = 0;
+    textarea.selectionEnd = textarea.value.length;
+    backspace(textarea);
+    textarea.parentElement.classList.add("code-input_autogrow_height");
+    await waitAsync(100); // Wait for height to update
+
+    const emptyHeight = textarea.parentElement.clientHeight;
+    addText(textarea, "// a\n// b\n// c\n// d\n// e\n// f\n// g");
+    await waitAsync(100); // Wait for height to update
+
+    const fullHeight = textarea.parentElement.clientHeight;
+    testAssertion("Autogrow", "Content Increases Height", fullHeight > emptyHeight, `${fullHeight} should be > ${emptyHeight}`);
+    textarea.parentElement.style.setProperty("font-size", "50%");
+    await waitAsync(200); // Wait for height to update
+
+    testAssertion("Autogrow", "font-size Decrease Decreases Height", textarea.parentElement.clientHeight < fullHeight, `${textarea.parentElement.clientHeight} should be < ${fullHeight}`);
+    textarea.parentElement.style.setProperty("font-size", "100%");
+    textarea.parentElement.style.removeProperty("font-size");
+    textarea.parentElement.style.setProperty("--code-input_autogrow_min-height", (fullHeight + 10) + "px");
+    textarea.blur(); // Prevent focus instruction bar from affecting height
+    await waitAsync(200); // Wait for height to update
+
+    assertEqual("Autogrow", "--code-input_autogrow_min-height Sets Height", textarea.parentElement.clientHeight, fullHeight + 10);
+    textarea.focus(); // Enable inserting text again
+    textarea.parentElement.style.removeProperty("--code-input_autogrow_min-height");
+    textarea.parentElement.style.setProperty("--code-input_autogrow_max-height", (fullHeight - 10) + "px");
+    await waitAsync(100); // Wait for height to update
+
+    assertEqual("Autogrow", "--code-input_autogrow_max-height Sets Height", textarea.parentElement.clientHeight, fullHeight - 10);
+    textarea.parentElement.style.removeProperty("--code-input_autogrow_max-height");
+    textarea.parentElement.style.removeProperty("--code-input_autogrow_max-height");
+    await waitAsync(100); // Wait for height to update
+
+    textarea.selectionStart = 0;
+    textarea.selectionEnd = textarea.value.length;
+    backspace(textarea);
+    textarea.parentElement.classList.add("code-input_autogrow_width");
+    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
+
+    const fullWidth = textarea.parentElement.clientWidth;
+    testAssertion("Autogrow", "Content Increases Width", fullWidth > emptyWidth, `${fullWidth} should be > ${emptyWidth}`);
+    textarea.parentElement.style.setProperty("font-size", "50%");
+    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.removeProperty("font-size");
+    textarea.parentElement.style.setProperty("--code-input_autogrow_min-width", (fullWidth + 10) + "px");
+    await waitAsync(200); // Wait for width to update
+
+    assertEqual("Autogrow", "--code-input_autogrow_min-width Sets Width", textarea.parentElement.clientWidth, fullWidth + 10);
+    textarea.parentElement.style.removeProperty("--code-input_autogrow_min-width");
+    textarea.parentElement.style.setProperty("--code-input_autogrow_max-width", (fullWidth - 10) + "px");
+    await waitAsync(100); // Wait for width to update
+
+    assertEqual("Autogrow", "--code-input_autogrow_max-width Sets Width", textarea.parentElement.clientWidth, fullWidth - 10);
+    textarea.parentElement.style.removeProperty("--code-input_autogrow_max-width");
+    textarea.parentElement.style.removeProperty("--code-input_autogrow_max-width");
+
+    textarea.parentElement.classList.remove("code-input_autogrow_height");
+    textarea.parentElement.classList.remove("code-input_autogrow_width");
+
+    // TODO add reaons to above testAssertions; check why min-width failing; manual tests to check properly fits; prompt tests; fix no-content hljs.html autogrow-both-ways sizing; test with unregistered.
+
     // FindAndReplace
     // Replace all code
     textarea.selectionStart = 0;

Original file line number	Diff line number	Diff line change
`@@ -99,7 +99,7 @@ code-input textarea, code-input pre, code-input pre * {`
`99`	`99`	`tab-size: inherit!important;`
`100`	`100`	`text-align: inherit!important;`
`101`	`101`	`}`
`102`		`-code-input textarea, code-input pre, code-input pre code {`
	`102`	`+code-input pre, code-input pre code {`
`103`	`103`	`overflow: visible!important;`
`104`	`104`	`}`
`105`	`105`