diff --git a/.changeset/honest-fishes-explain.md b/.changeset/honest-fishes-explain.md new file mode 100644 index 00000000000..a9446ca6e4f --- /dev/null +++ b/.changeset/honest-fishes-explain.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +improve performance of the MarkdownEditor component when fullHeight is enabled diff --git a/src/drafts/MarkdownEditor/_MarkdownInput.tsx b/src/drafts/MarkdownEditor/_MarkdownInput.tsx index 6b78f2e5892..9d0b7e4a9e5 100644 --- a/src/drafts/MarkdownEditor/_MarkdownInput.tsx +++ b/src/drafts/MarkdownEditor/_MarkdownInput.tsx @@ -123,8 +123,14 @@ export const MarkdownInput = forwardRef return subscription?.unsubscribe }, [pasteUrlsAsPlainText]) - const dynamicHeightStyles = useDynamicTextareaHeight({maxHeightLines, minHeightLines, elementRef: ref, value}) - const heightStyles = fullHeight ? {} : dynamicHeightStyles + const heightStyles = useDynamicTextareaHeight({ + // if fullHeight is enabled, there is no need to compute a dynamic height (for perfs reasons) + disabled: fullHeight, + maxHeightLines, + minHeightLines, + elementRef: ref, + value, + }) return ( @@ -23,6 +24,7 @@ type UseDynamicTextareaHeightSettings = { * explicitly set in CSS. */ export const useDynamicTextareaHeight = ({ + disabled, minHeightLines, maxHeightLines, elementRef, @@ -33,6 +35,8 @@ export const useDynamicTextareaHeight = ({ const [maxHeight, setMaxHeight] = useState(undefined) useLayoutEffect(() => { + if (disabled) return + const element = elementRef.current if (!element) return @@ -56,7 +60,9 @@ export const useDynamicTextareaHeight = ({ if (minHeightLines !== undefined) setMinHeight(`calc(${minHeightLines} * ${lineHeight})`) if (maxHeightLines !== undefined) setMaxHeight(`calc(${maxHeightLines} * ${lineHeight})`) // `value` is an unnecessary dependency but it enables us to recalculate as the user types - }, [minHeightLines, maxHeightLines, value, elementRef]) + }, [minHeightLines, maxHeightLines, value, elementRef, disabled]) + + if (disabled) return {} return {height, minHeight, maxHeight, boxSizing: 'content-box'} }