Avoid calling getCharacterCoordinates when fullHeight is set in t…

…he MarkdownEditor (#3423) * avoid calling getCharacterCoordinates when fullHeight is set * changeset + rename
primer · Jun 19, 2023 · af32ec7 · af32ec7
1 parent 3fd3c89
commit af32ec7
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/.changeset/honest-fishes-explain.md 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
@@ -123,8 +123,14 @@ export const MarkdownInput = forwardRef<HTMLTextAreaElement, MarkdownInputProps>
       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 (
       <InlineAutocomplete

diff --git a/src/drafts/hooks/useDynamicTextareaHeight.ts b/src/drafts/hooks/useDynamicTextareaHeight.ts
@@ -4,6 +4,7 @@ import {SxProp} from '../../sx'
 import {getCharacterCoordinates} from '../utils/character-coordinates'
 
 type UseDynamicTextareaHeightSettings = {
+  disabled?: boolean
   minHeightLines?: number
   maxHeightLines?: number
   elementRef: RefObject<HTMLTextAreaElement | null>
@@ -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<string | undefined>(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'}
 }