feat: add experiment param to disable textarea autosize (#646)

Author: stevenle

packages/root-cms/ui/components/DocEditor/fields/StringField.tsx

@@ -2,8 +2,11 @@ import {TextInput, Textarea} from '@mantine/core';
 import {ChangeEvent} from 'preact/compat';
 import {useEffect, useState} from 'preact/hooks';
 import * as schema from '../../../../core/schema.js';
+import {testHasExperimentParam} from '../../../utils/url-params.js';
 import {FieldProps} from './FieldProps.js';
 
+const DISABLE_AUTOSIZE = testHasExperimentParam('DisableTextareaAutosize');
+
 export function StringField(props: FieldProps) {
   const field = props.field as schema.StringField;
   const [value, setValue] = useState('');
@@ -28,8 +31,8 @@ export function StringField(props: FieldProps) {
       <Textarea
         size="xs"
         radius={0}
-        autosize
-        minRows={2}
+        autosize={!DISABLE_AUTOSIZE}
+        minRows={DISABLE_AUTOSIZE ? 4 : 2}
         maxRows={field.maxRows || 12}
         value={value}
         onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {

packages/root-cms/ui/components/FileUploadField/FileUploadField.tsx

@@ -42,6 +42,7 @@ import {
 } from '../../utils/gcs.js';
 
 import './FileUploadField.css';
+import {testHasExperimentParam} from '../../utils/url-params.js';
 
 /** Mimetypes accepted by the image input field. */
 const IMAGE_MIMETYPES = [
@@ -72,6 +73,8 @@ const PLACEHOLDER_COLORS = [
 
 type FileUploadFieldVariant = 'file' | 'image';
 
+const DISABLE_AUTOSIZE = testHasExperimentParam('DisableTextareaAutosize');
+
 interface FileUploadFieldProps {
   children?: preact.ComponentChildren;
   file?: UploadedFile | null;
@@ -611,7 +614,7 @@ FileUploadField.Preview = () => {
                       readOnly
                       value={uploadedFile.src}
                       size="xs"
-                      autosize
+                      autosize={!DISABLE_AUTOSIZE}
                       radius={0}
                     />
                   </td>

packages/root-cms/ui/utils/url-params.ts

@@ -0,0 +1,13 @@
+/**
+ * A tests whether e=<name> is in the URL. For multiple experiment names, use a
+ * comma-separated list in the URL.
+ */
+export function testHasExperimentParam(name: string) {
+  const searchParams = new URLSearchParams(window.location.search);
+  const e = searchParams.get('e');
+  if (!e) {
+    return false;
+  }
+  const values = e.split(',');
+  return values.includes(name);
+}