diff --git a/.changeset/silent-vans-hammer.md b/.changeset/silent-vans-hammer.md new file mode 100644 index 00000000000..1a4fc1b1fa6 --- /dev/null +++ b/.changeset/silent-vans-hammer.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Present MarkdownEditor from resizing when rendered in a condensed state diff --git a/src/drafts/MarkdownEditor/MarkdownEditor.tsx b/src/drafts/MarkdownEditor/MarkdownEditor.tsx index 4c62993745e..dd7d71262ee 100644 --- a/src/drafts/MarkdownEditor/MarkdownEditor.tsx +++ b/src/drafts/MarkdownEditor/MarkdownEditor.tsx @@ -1,5 +1,14 @@ import {useSSRSafeId} from '@react-aria/ssr' -import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react' +import React, { + forwardRef, + useCallback, + useEffect, + useImperativeHandle, + useLayoutEffect, + useMemo, + useRef, + useState +} from 'react' import Box from '../../Box' import {FileType} from '../hooks/useUnifiedFileSelect' import {useIgnoreKeyboardActionsWhileComposing} from '../hooks/useIgnoreKeyboardActionsWhileComposing' @@ -244,6 +253,7 @@ const MarkdownEditor = forwardRef( // use state instead of ref since we need to recalculate when the element mounts const containerRef = useRef(null) + const [condensed, setCondensed] = useState(false) const onResize = useCallback( // it's fine that this isn't debounced because calling setCondensed with the current value will not trigger a render @@ -252,6 +262,17 @@ const MarkdownEditor = forwardRef( ) useResizeObserver(onResize, containerRef) + // workaround for Safari bug where layout is otherwise not recalculated + useLayoutEffect(() => { + const container = containerRef.current + if (!container) return + + const parent = container.parentElement + const nextSibling = containerRef.current.nextSibling + parent?.removeChild(container) + parent?.insertBefore(container, nextSibling) + }, [condensed]) + // the ID must be unique for each instance while remaining constant across renders const id = useSSRSafeId() const descriptionId = `${id}-description`