From cf0e260a36688546296d6da3be155fa19ab059cc Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Fri, 5 Jan 2024 10:04:52 +0000
Subject: [PATCH] Recalculate toolbar overflow when buttons change (#16350)

GitOrigin-RevId: 70ab356172bc57630b6032a6400fb08e8fd33464
---
 .../components/codemirror-toolbar.tsx         | 32 ++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

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 d267c7bfa2..44b0d70bee 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
@@ -20,6 +20,7 @@ import DetachCompileButtonWrapper from '../../pdf-preview/components/detach-comp
 import { isVisual } from '../extensions/visual/visual'
 import { language } from '@codemirror/language'
 import { minimumListDepthForSelection } from '../utils/tree-operations/ancestors'
+import { debugConsole } from '@/utils/debugging'
 
 export const CodeMirrorToolbar = () => {
   const view = useCodeMirrorViewContext()
@@ -54,6 +55,8 @@ const Toolbar = memo(function Toolbar() {
 
   const buildOverflow = useCallback(
     (element: Element) => {
+      debugConsole.log('recalculating toolbar overflow')
+
       setOverflowOpen(false)
       setOverflowed(true)
 
@@ -93,6 +96,30 @@ const Toolbar = memo(function Toolbar() {
     }
   }, [buildOverflow, languageName, resizeRef, visual])
 
+  // calculate overflow when buttons change
+  const observerRef = useRef<MutationObserver | null>(null)
+  const handleButtons = useCallback(
+    node => {
+      if (!('MutationObserver' in window)) {
+        return
+      }
+
+      if (node) {
+        observerRef.current = new MutationObserver(() => {
+          if (resizeRef.current) {
+            buildOverflow(resizeRef.current.element)
+          }
+        })
+
+        observerRef.current.observe(node, { childList: true })
+      } else if (observerRef.current) {
+        observerRef.current.disconnect()
+      }
+    },
+    [buildOverflow, resizeRef]
+  )
+
+  // calculate overflow when active element changes to/from inside a table
   const insideTable = document.activeElement?.closest(
     '.table-generator-help-modal,.table-generator'
   )
@@ -145,7 +172,10 @@ const Toolbar = memo(function Toolbar() {
         <div className="formatting-buttons-wrapper" />
       </div>
 
-      <div className="ol-cm-toolbar-button-group ol-cm-toolbar-end">
+      <div
+        className="ol-cm-toolbar-button-group ol-cm-toolbar-end"
+        ref={handleButtons}
+      >
         <ToolbarButton
           id="toolbar-toggle-search"
           label="Toggle Search"