From 737e8abbfae3a780010941b6aa883e72df534f48 Mon Sep 17 00:00:00 2001 From: Nicolle Romero Date: Thu, 10 Nov 2022 15:55:18 -0800 Subject: [PATCH 1/2] Safari workaround for stale width calculation --- src/drafts/MarkdownEditor/MarkdownEditor.tsx | 23 +++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) 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` From 55c398aa3f119ca8c61b47c3a105c7de84c77fe0 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Wed, 16 Nov 2022 11:10:08 -0600 Subject: [PATCH 2/2] chore: add changeset --- .changeset/silent-vans-hammer.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/silent-vans-hammer.md 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