fix(ui): json fields can now take a maxHeight in admin props and there's a mininum height of 3 lines (#9018)

JSON fields are now 3 lines minimum in height like so:

![image](https://github.com/user-attachments/assets/0b2ad47e-6929-4836-ac9d-022ffcdc6f27)


This helps fix an issue where long content is wrapped:

![image](https://github.com/user-attachments/assets/40fc2426-11d7-4ca5-a716-3347bb0d5a4b)

Previously it would show like this:

![image](https://github.com/user-attachments/assets/7f321220-ffa2-40ff-bc4b-2b26d21d4911)

packages/payload/src/fields/config/types.ts

@@ -1011,6 +1011,7 @@ export type JSONField = {
       Label?: CustomComponent<JSONFieldLabelClientComponent | JSONFieldLabelServerComponent>
     } & Admin['components']
     editorOptions?: EditorProps['options']
+    maxHeight?: number
   } & Admin
 
   jsonSchema?: {
@@ -1030,6 +1031,7 @@ export type JSONFieldClient = {
       Error?: MappedComponent
       Label?: MappedComponent
     } & AdminClient['components']
+    maxHeight?: number
   } & AdminClient &
     Pick<JSONField['admin'], 'editorOptions'>
 } & Omit<FieldBaseClient, 'admin'> &

packages/ui/src/elements/CodeEditor/CodeEditor.tsx

@@ -13,10 +13,12 @@ const Editor = (EditorImport.default || EditorImport) as unknown as typeof Edito
 const baseClass = 'code-editor'
 
 const CodeEditor: React.FC<Props> = (props) => {
-  const { className, options, readOnly, ...rest } = props
+  const { className, maxHeight, options, readOnly, ...rest } = props
   const [dynamicHeight, setDynamicHeight] = useState(20)
   const { theme } = useTheme()
 
+  const MIN_HEIGHT = 56 // equivalent to 3 lines
+
   const classes = [
     baseClass,
     className,
@@ -52,14 +54,14 @@ const CodeEditor: React.FC<Props> = (props) => {
       // can already have scrolling, we want the height of the
       // editor to fit its content.
       // See: https://github.com/microsoft/monaco-editor/discussions/3677
-      height={dynamicHeight}
+      height={maxHeight ? Math.min(dynamicHeight, maxHeight) : dynamicHeight}
       onChange={(value, ev) => {
         rest.onChange?.(value, ev)
-        setDynamicHeight(value.split('\n').length * 18 + 2)
+        setDynamicHeight(Math.max(MIN_HEIGHT, value.split('\n').length * 18 + 2))
       }}
       onMount={(editor, monaco) => {
         rest.onMount?.(editor, monaco)
-        setDynamicHeight(editor.getValue().split('\n').length * 18 + 2)
+        setDynamicHeight(Math.max(MIN_HEIGHT, editor.getValue().split('\n').length * 18 + 2))
       }}
     />
   )

packages/ui/src/elements/CodeEditor/types.ts

@@ -1,5 +1,6 @@
 import type { EditorProps } from '@monaco-editor/react'
 
 export type Props = {
+  maxHeight?: number
   readOnly?: boolean
 } & EditorProps

packages/ui/src/fields/JSON/index.tsx

@@ -29,6 +29,7 @@ const JSONFieldComponent: JSONFieldClientComponent = (props) => {
         className,
         description,
         editorOptions,
+        maxHeight,
         readOnly: readOnlyFromAdmin,
         style,
         width,
@@ -144,6 +145,7 @@ const JSONFieldComponent: JSONFieldClientComponent = (props) => {
         <RenderComponent mappedComponent={field?.admin?.components?.beforeInput} />
         <CodeEditor
           defaultLanguage="json"
+          maxHeight={maxHeight}
           onChange={handleChange}
           onMount={handleMount}
           options={editorOptions}

test/fields/collections/JSON/index.tsx

@@ -11,6 +11,9 @@ const JSON: CollectionConfig = {
     {
       name: 'json',
       type: 'json',
+      admin: {
+        maxHeight: 542,
+      },
       jsonSchema: {
         fileMatch: ['a://b/foo.json'],
         schema: {