diff --git a/core/src/Editor.tsx b/core/src/Editor.tsx index 31203961..0f51a92a 100644 --- a/core/src/Editor.tsx +++ b/core/src/Editor.tsx @@ -87,7 +87,7 @@ export default React.forwardRef((p /> ), // eslint-disable-next-line react-hooks/exhaustive-deps - [prefixCls, language, htmlStr], + [prefixCls, language, htmlStr, padding, minHeight], ); const change = (evn: React.ChangeEvent) => { diff --git a/core/src/__test__/index.test.tsx b/core/src/__test__/index.test.tsx index 127cc2d2..bb9a4a25 100644 --- a/core/src/__test__/index.test.tsx +++ b/core/src/__test__/index.test.tsx @@ -102,6 +102,42 @@ it('TextareaCodeEditor language="html"', async () => { } }); +it('TextareaCodeEditor keeps preview padding in sync when padding changes', () => { + const props = { language: 'js', value: 'const value = 1;' }; + const { rerender } = render(); + const textbox = screen.getByRole('textbox'); + // eslint-disable-next-line testing-library/no-node-access + const preview = textbox.nextElementSibling; + + for (const padding of [10, 24, 0, undefined]) { + rerender(); + const expectedPadding = `${padding ?? 10}px`; + const expectedStyle = { + paddingTop: expectedPadding, + paddingRight: expectedPadding, + paddingBottom: expectedPadding, + paddingLeft: expectedPadding, + }; + expect(textbox).toHaveStyle(expectedStyle); + expect(preview).toHaveStyle(expectedStyle); + } +}); + +it('TextareaCodeEditor keeps preview minHeight in sync when minHeight changes', () => { + const props = { language: 'js', value: 'const value = 1;' }; + const { rerender } = render(); + const textbox = screen.getByRole('textbox'); + // eslint-disable-next-line testing-library/no-node-access + const preview = textbox.nextElementSibling; + + for (const minHeight of [16, 120, undefined]) { + rerender(); + const expectedStyle = { minHeight: `${minHeight ?? 16}px` }; + expect(textbox).toHaveStyle(expectedStyle); + expect(preview).toHaveStyle(expectedStyle); + } +}); + it('TextareaCodeEditor onChange 1', async () => { const MyComponent = () => { const txtRef = useRef(null);