From 930cec218935a68ba06e9342b7d7f44260a934af Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Tue, 18 Jul 2023 11:21:56 +0100
Subject: [PATCH] Calculate overflow when `languageName` or `visual` change
 (#13872)

GitOrigin-RevId: f2d200d0d34e810688defe78b8143829f095df9f
---
 .../components/pdf-log-entry-raw-content.js       |  4 ++--
 .../components/codemirror-toolbar.tsx             | 15 +++++++++++----
 .../js/shared/hooks/use-resize-observer.ts        |  2 +-
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-log-entry-raw-content.js b/services/web/frontend/js/features/pdf-preview/components/pdf-log-entry-raw-content.js
index 347e7f48ff..d1457d5586 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-log-entry-raw-content.js
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-log-entry-raw-content.js
@@ -13,7 +13,7 @@ export default function PdfLogEntryRawContent({
   const [expanded, setExpanded] = useState(false)
   const [needsExpander, setNeedsExpander] = useState(false)
 
-  const containerRef = useResizeObserver(element => {
+  const { elementRef } = useResizeObserver(element => {
     setNeedsExpander(element.scrollHeight > collapsedSize)
   })
 
@@ -27,7 +27,7 @@ export default function PdfLogEntryRawContent({
           height: expanded || !needsExpander ? 'auto' : collapsedSize,
         }}
       >
-        <pre className="log-entry-content-raw" ref={containerRef}>
+        <pre className="log-entry-content-raw" ref={elementRef}>
           {rawContent.trim()}
         </pre>
       </div>
diff --git a/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx b/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx
index b6090141f2..8fe6123e5c 100644
--- a/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx
+++ b/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx
@@ -1,4 +1,4 @@
-import { memo, useCallback, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import {
   useCodeMirrorStateContext,
@@ -87,8 +87,15 @@ const Toolbar = memo(function Toolbar() {
     [setOverflowOpen]
   )
 
-  // build when the container resizes
-  const resizeRef = useResizeObserver(buildOverflow)
+  // calculate overflow when the container resizes
+  const { elementRef, resizeRef } = useResizeObserver(buildOverflow)
+
+  // calculate overflow when `languageName` or `visual` change
+  useEffect(() => {
+    if (resizeRef.current) {
+      buildOverflow(resizeRef.current.element)
+    }
+  }, [buildOverflow, languageName, resizeRef, visual])
 
   const toggleToolbar = useCallback(() => {
     setCollapsed(value => !value)
@@ -99,7 +106,7 @@ const Toolbar = memo(function Toolbar() {
   }
 
   return (
-    <div className="ol-cm-toolbar toolbar-editor" ref={resizeRef}>
+    <div className="ol-cm-toolbar toolbar-editor" ref={elementRef}>
       {showSourceToolbar && <EditorSwitch />}
       <ToolbarItems state={state} languageName={languageName} visual={visual} />
       <div
diff --git a/services/web/frontend/js/shared/hooks/use-resize-observer.ts b/services/web/frontend/js/shared/hooks/use-resize-observer.ts
index 6361844ec5..6832890129 100644
--- a/services/web/frontend/js/shared/hooks/use-resize-observer.ts
+++ b/services/web/frontend/js/shared/hooks/use-resize-observer.ts
@@ -35,5 +35,5 @@ export const useResizeObserver = (handleResize: (element: Element) => void) => {
     }
   }, [])
 
-  return elementRef
+  return { elementRef, resizeRef }
 }