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 } & 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 } & Omit & 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) => { - 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) => { // 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) => {