Work in Progress (nearly complete; needs docs and testing): Add autogrow plugin

Author: WebCoder49

code-input.js

@@ -555,8 +555,13 @@ 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;
+            const height = getComputedStyle(this.getStyledHighlightingElement()).height;
+            this.textareaElement.style.height = height;
+            this.textareaElement.style.setProperty("--code-input_synced-height", height);
+
+            const width = getComputedStyle(this.getStyledHighlightingElement()).width;
+            this.textareaElement.style.width = width;
+            this.textareaElement.style.setProperty("--code-input_synced-width", width);
         }
 
         /**

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.

docs/interface/css/resize-both-screenshot.png

@@ -0,0 +1,32 @@
+/**
+ * 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: var(--code-input_autogrow_min-height)!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_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: var(--code-input_autogrow_min-width)!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)));
+}