Merge pull request #24306 from overleaf/mj-ide-breadcrumbs-loading

[web] Disable breadcrumbs with user setting

GitOrigin-RevId: bcb43aee139a321d9532b9a49e1e73fabba2fd66

services/web/frontend/js/features/source-editor/extensions/breadcrumbs-panel.ts

@@ -1,4 +1,5 @@
-import { isSplitTestEnabled } from '@/utils/splitTestUtils'
+import { canUseNewEditor } from '@/features/ide-redesign/utils/new-editor-utils'
+import { Compartment, Extension, TransactionSpec } from '@codemirror/state'
 import { EditorView, showPanel } from '@codemirror/view'
 
 export function createBreadcrumbsPanel() {
@@ -37,13 +38,24 @@ const breadcrumbsTheme = EditorView.baseTheme({
   },
 })
 
+const breadcrumbsConf = new Compartment()
+
+const breadcrumbsEnabled: Extension = [
+  showPanel.of(createBreadcrumbsPanel),
+  breadcrumbsTheme,
+]
+const breadcrumbsDisabled: Extension = []
+
+export const setBreadcrumbsEnabled = (enabled: boolean): TransactionSpec => ({
+  effects: breadcrumbsConf.reconfigure(
+    enabled ? breadcrumbsEnabled : breadcrumbsDisabled
+  ),
+})
+
 /**
  * A panel which contains the editor breadcrumbs
  */
-export const breadcrumbPanel = () => {
+export const breadcrumbPanel = (enableNewEditor: boolean) => {
-  if (!isSplitTestEnabled('editor-redesign')) {
+  const enabled = canUseNewEditor() && enableNewEditor
-    return []
+  return breadcrumbsConf.of(enabled ? breadcrumbsEnabled : breadcrumbsDisabled)
-  }
-
-  return [showPanel.of(createBreadcrumbsPanel), breadcrumbsTheme]
 }

services/web/frontend/js/features/source-editor/extensions/index.ts

@@ -148,7 +148,7 @@ export const createExtensions = (options: Record<string, any>): Extension[] => [
   mathPreview(options.settings.mathPreview),
   reviewTooltip(),
   toolbarPanel(),
-  breadcrumbPanel(),
+  breadcrumbPanel(options.settings.enableNewEditor),
   verticalOverflow(),
   highlightActiveLine(options.visual.visual),
   // The built-in extension that highlights the active line in the gutter.

services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts

@@ -53,6 +53,7 @@ import { useHunspell } from '@/features/source-editor/hooks/use-hunspell'
 import { Permissions } from '@/features/ide-react/types/permissions'
 import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
 import { useOnlineUsersContext } from '@/features/ide-react/context/online-users-context'
+import { setBreadcrumbsEnabled } from '../extensions/breadcrumbs-panel'
 
 function useCodeMirrorScope(view: EditorView) {
   const { fileTreeData } = useFileTreeData()
@@ -82,6 +83,7 @@ function useCodeMirrorScope(view: EditorView) {
     syntaxValidation,
     mathPreview,
     referencesSearchMode,
+    enableNewEditor,
   } = userSettings
 
   const { onlineUserCursorHighlights } = useOnlineUsersContext()
@@ -151,6 +153,7 @@ function useCodeMirrorScope(view: EditorView) {
     syntaxValidation,
     mathPreview,
     referencesSearchMode,
+    enableNewEditor,
   })
 
   const currentDocRef = useRef({
@@ -433,6 +436,13 @@ function useCodeMirrorScope(view: EditorView) {
     settingsRef.current.referencesSearchMode = referencesSearchMode
   }, [referencesSearchMode])
 
+  useEffect(() => {
+    settingsRef.current.enableNewEditor = enableNewEditor
+    window.setTimeout(() => {
+      view.dispatch(setBreadcrumbsEnabled(enableNewEditor))
+    })
+  }, [view, enableNewEditor])
+
   const emitSyncToPdf = useScopeEventEmitter('cursor:editor:syncToPdf')
 
   // select and scroll to position on editor:gotoLine event (from synctex)