Auto-fit input and output boxes to contents

Author: wimpyprogrammer

demo/index.html

@@ -83,11 +83,7 @@
 					<label for="words">
 						Words or phrases the Regular Expression should match:
 					</label>
-					<textarea
-						required
-						id="words"
-						class="form-control js-words"
-					></textarea>
+					<textarea class="form-control js-words" required rows="1"></textarea>
 				</div>
 
 				<div class="form-inline">
@@ -151,6 +147,7 @@
 						readonly="readonly"
 						id="output"
 						class="form-control js-output"
+						rows="1"
 					></textarea>
 				</div>
 			</section>

demo/src/demo.ts

@@ -1,4 +1,5 @@
 import { condense, condenseIgnoreCase } from '../../src/index';
+import { autoExpandTextarea } from './utils/auto-expand-field';
 import { parseString, WhitespaceHandling } from './utils/wordList';
 
 const { Preserve, TrimLeadingAndTrailing } = WhitespaceHandling;
@@ -29,6 +30,7 @@ function generatePattern(words: string): RegExp {
 let clearSuccessIndicatorHandle: number;
 function displayPattern(pattern: RegExp): void {
 	$output.value = pattern.toString();
+	$output.dispatchEvent(new Event('input'));
 
 	// Temporarily style the output box as valid
 	$output.classList.add('is-valid');
@@ -55,12 +57,16 @@ function onClickGenerate(): void {
 }
 $submit.addEventListener('click', onClickGenerate);
 
+autoExpandTextarea($input);
+autoExpandTextarea($output);
+
 ((): void => {
 	const exampleInput =
 		'Alabama, Alaska, Arizona, Arkansas, California, ' +
 		'Colorado, Connecticut, Delaware, Florida, Georgia';
 
 	$input.value = exampleInput;
+	$input.dispatchEvent(new Event('input'));
 	const pattern = generatePattern(exampleInput);
 	displayPattern(pattern);
 })();

demo/src/utils/auto-expand-field.ts

@@ -0,0 +1,46 @@
+/* eslint no-param-reassign: ["error", { "props": true, "ignorePropertyModificationsFor": ["field"] }] */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * @see https://gist.github.com/fr-ser/ded7690b245223094cd876069456ed6c
+ */
+function debounce<F extends Function>(func: F, wait: number): F {
+	let timeoutID: number;
+
+	return (function debounced(this: any, ...args: any[]) {
+		clearTimeout(timeoutID);
+
+		timeoutID = window.setTimeout(() => func.apply(this, args), wait);
+	} as any) as F;
+}
+/* eslint-enable @typescript-eslint/no-explicit-any */
+
+/**
+ * Grow or shrink a <textarea> field's height to fit its contents.
+ * From https://codepen.io/vsync/pen/frudD.
+ * @param field The <textarea> field to resize
+ */
+export function autoExpandTextarea(field: HTMLTextAreaElement): void {
+	field.classList.add('automaticHeight');
+
+	const fieldStyles = window.getComputedStyle(field);
+	const lineHeightStyle = fieldStyles.getPropertyValue('line-height');
+	const pixelsPerRow = parseInt(lineHeightStyle, 10);
+
+	const minVisibleRows = field.rows;
+
+	const savedValue = field.value;
+	field.value = '';
+	const baseScrollHeight = field.scrollHeight;
+	field.value = savedValue;
+
+	function recalculateHeight(): void {
+		field.rows = minVisibleRows;
+		const currentHeightPixels = field.scrollHeight - baseScrollHeight;
+		const rows = Math.ceil(currentHeightPixels / pixelsPerRow);
+		field.rows = minVisibleRows + rows;
+	}
+
+	field.addEventListener('input', recalculateHeight, false);
+	window.addEventListener('resize', debounce(recalculateHeight, 100), false);
+}

demo/styles.css

@@ -13,16 +13,18 @@
 	padding-top: 1em;
 }
 
+.automaticHeight {
+	box-sizing: padding-box;
+	overflow: hidden;
+	resize: none;
+}
+
 input:invalid,
 textarea:invalid,
 select:invalid {
 	border: 2px solid red;
 }
 
-#words {
-	height: 15em;
-}
-
 .form-inline {
 	flex-direction: column;
 }
@@ -37,8 +39,6 @@ select:invalid {
 }
 
 #output {
-	height: 5em;
-
 	border-width: 4px;
 	transition: border-color 0.6s ease-out;
 }

package.json

@@ -29,6 +29,7 @@
   "jest": {
     "collectCoverageFrom": [
       "**/src/**/?*.(js|ts)",
+      "!demo/src/utils/auto-expand-field.ts",
       "!demo/src/demo.ts"
     ],
     "preset": "ts-jest",