From bae2fe535edde59a4f5ae2102c838136c063758d Mon Sep 17 00:00:00 2001 From: Alessio Gravili Date: Wed, 11 Dec 2024 23:31:39 -0700 Subject: [PATCH] feat(ui): allow customizing min height of code editor (#9920) Requirement for https://github.com/payloadcms/payload/pull/9645. Dynamic code field resizing currently is broken for line-breaks - need to address that in a future PR. --- packages/ui/src/elements/CodeEditor/CodeEditor.tsx | 8 ++++---- packages/ui/src/elements/CodeEditor/types.ts | 4 ++++ 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/ui/src/elements/CodeEditor/CodeEditor.tsx b/packages/ui/src/elements/CodeEditor/CodeEditor.tsx index e174add3a75..018c466052c 100644 --- a/packages/ui/src/elements/CodeEditor/CodeEditor.tsx +++ b/packages/ui/src/elements/CodeEditor/CodeEditor.tsx @@ -13,11 +13,11 @@ const Editor = (EditorImport.default || EditorImport) as unknown as typeof Edito const baseClass = 'code-editor' const CodeEditor: React.FC = (props) => { - const { className, maxHeight, options, readOnly, ...rest } = props - const [dynamicHeight, setDynamicHeight] = useState(20) - const { theme } = useTheme() + const { className, maxHeight, minHeight, options, readOnly, ...rest } = props + const MIN_HEIGHT = minHeight ?? 56 // equivalent to 3 lines - const MIN_HEIGHT = 56 // equivalent to 3 lines + const [dynamicHeight, setDynamicHeight] = useState(MIN_HEIGHT) + const { theme } = useTheme() const classes = [ baseClass, diff --git a/packages/ui/src/elements/CodeEditor/types.ts b/packages/ui/src/elements/CodeEditor/types.ts index 5f6e97d2284..387bc059605 100644 --- a/packages/ui/src/elements/CodeEditor/types.ts +++ b/packages/ui/src/elements/CodeEditor/types.ts @@ -2,5 +2,9 @@ import type { EditorProps } from '@monaco-editor/react' export type Props = { maxHeight?: number + /** + * @default 56 (3 lines) + */ + minHeight?: number readOnly?: boolean } & EditorProps