Merge pull request #34110 from overleaf/mg-toolbar-language-suggestions

Add language suggestion controls to editor toolbar

GitOrigin-RevId: fe52b909b44ef8ccfc1449366bbf62f2d9d7ee4e

services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx

@@ -125,12 +125,20 @@ const Toolbar = memo(function Toolbar() {
     if (resizeRef.current) {
       buildOverflow(resizeRef.current.element)
     }
-  }, [buildOverflow, languageName, resizeRef, visual])
+  }, [buildOverflow, languageName, listDepth, resizeRef, visual])
 
-  // calculate overflow when buttons change
+  // calculate overflow when toolbar content changes
   const observerRef = useRef<MutationObserver | null>(null)
-  const handleButtons = useCallback(
+  const handleToolbar = useCallback(
     (node: HTMLDivElement) => {
+      // register the resize observer on the toolbar node
+      elementRef(node)
+
+      if (observerRef.current) {
+        observerRef.current.disconnect()
+        observerRef.current = null
+      }
+
       if (!('MutationObserver' in window)) {
         return
       }
@@ -142,12 +150,10 @@ const Toolbar = memo(function Toolbar() {
           }
         })
 
-        observerRef.current.observe(node, { childList: true })
-      } else if (observerRef.current) {
-        observerRef.current.disconnect()
+        observerRef.current.observe(node, { childList: true, subtree: true })
       }
     },
-    [buildOverflow, resizeRef]
+    [buildOverflow, elementRef, resizeRef]
   )
 
   // calculate overflow when active element changes to/from inside a table
@@ -181,7 +187,7 @@ const Toolbar = memo(function Toolbar() {
           role="toolbar"
           aria-label={t('toolbar_editor')}
           className="ol-cm-toolbar toolbar-editor"
-          ref={elementRef}
+          ref={handleToolbar}
         >
           {showActions && (
             <ToolbarItems
@@ -211,10 +217,7 @@ const Toolbar = memo(function Toolbar() {
             )}
           </div>
 
-          <div
-            className="ol-cm-toolbar-button-group ol-cm-toolbar-end"
-            ref={handleButtons}
-          >
+          <div className="ol-cm-toolbar-button-group ol-cm-toolbar-end">
             {!visualPreviewEnabled && <EditorSwitch />}
             {sourceEditorToolbarEndButtons.map(
               ({ import: { default: Component }, path }) => (

services/web/frontend/js/features/source-editor/components/toolbar/toolbar-items.tsx

@@ -1,4 +1,4 @@
-import { FC, memo } from 'react'
+import { ComponentType, FC, memo } from 'react'
 import { EditorState } from '@codemirror/state'
 import { useEditorContext } from '../../../../shared/context/editor-context'
 import { ToolbarButton } from './toolbar-button'
@@ -18,6 +18,14 @@ import { useProjectContext } from '@/shared/context/project-context'
 import { useEditorPropertiesContext } from '@/features/ide-react/context/editor-properties-context'
 import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
 import { isCursorOnEmptyLine } from '@/features/source-editor/utils/is-cursor-on-empty-line'
+import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
+
+const sourceEditorToolbarButtonGroups = importOverleafModules(
+  'sourceEditorToolbarButtonGroups'
+) as {
+  import: { default: ComponentType; overflowGroupId: string }
+  path: string
+}[]
 
 const addCommentFromToolbar = () => commands.addComment('toolbar')
 
@@ -70,6 +78,10 @@ export const ToolbarItems: FC<{
           />
         </div>
       )}
+      {sourceEditorToolbarButtonGroups.map(
+        ({ import: { default: Component, overflowGroupId }, path }) =>
+          showGroup(overflowGroupId) && <Component key={path} />
+      )}
       {languageName === 'latex' && (
         <>
           {showGroup('group-section') && (