From 3ca203e08c1a9ccb0ac844ba86b294f1365ec995 Mon Sep 17 00:00:00 2001
From: Paul <paul@payloadcms.com>
Date: Tue, 5 Nov 2024 13:43:51 -0600
Subject: [PATCH] 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        |  2 ++
 packages/ui/src/elements/CodeEditor/CodeEditor.tsx | 10 ++++++----
 packages/ui/src/elements/CodeEditor/types.ts       |  1 +
 packages/ui/src/fields/JSON/index.tsx              |  2 ++
 test/fields/collections/JSON/index.tsx             |  3 +++
 5 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/payload/src/fields/config/types.ts b/packages/payload/src/fields/config/types.ts
index f2fdee8a1f..0a3423247f 100644
--- a/packages/payload/src/fields/config/types.ts
+++ b/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'> &
diff --git a/packages/ui/src/elements/CodeEditor/CodeEditor.tsx b/packages/ui/src/elements/CodeEditor/CodeEditor.tsx
index 002a5cc985..e174add3a7 100644
--- a/packages/ui/src/elements/CodeEditor/CodeEditor.tsx
+++ b/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))
       }}
     />
   )
diff --git a/packages/ui/src/elements/CodeEditor/types.ts b/packages/ui/src/elements/CodeEditor/types.ts
index 538a347273..5f6e97d228 100644
--- a/packages/ui/src/elements/CodeEditor/types.ts
+++ b/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
diff --git a/packages/ui/src/fields/JSON/index.tsx b/packages/ui/src/fields/JSON/index.tsx
index 5dbbf31dee..73e182e181 100644
--- a/packages/ui/src/fields/JSON/index.tsx
+++ b/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}
diff --git a/test/fields/collections/JSON/index.tsx b/test/fields/collections/JSON/index.tsx
index 8ddbedd2f1..d3ba0e5e3d 100644
--- a/test/fields/collections/JSON/index.tsx
+++ b/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: {