diff --git a/services/web/frontend/js/features/source-editor/extensions/breadcrumbs-panel.ts b/services/web/frontend/js/features/source-editor/extensions/breadcrumbs-panel.ts index 61afc9a947..1207f1a54d 100644 --- a/services/web/frontend/js/features/source-editor/extensions/breadcrumbs-panel.ts +++ b/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 = () => { - if (!isSplitTestEnabled('editor-redesign')) { - return [] - } - - return [showPanel.of(createBreadcrumbsPanel), breadcrumbsTheme] +export const breadcrumbPanel = (enableNewEditor: boolean) => { + const enabled = canUseNewEditor() && enableNewEditor + return breadcrumbsConf.of(enabled ? breadcrumbsEnabled : breadcrumbsDisabled) } diff --git a/services/web/frontend/js/features/source-editor/extensions/index.ts b/services/web/frontend/js/features/source-editor/extensions/index.ts index 0a65739c55..5daa597df3 100644 --- a/services/web/frontend/js/features/source-editor/extensions/index.ts +++ b/services/web/frontend/js/features/source-editor/extensions/index.ts @@ -148,7 +148,7 @@ export const createExtensions = (options: Record): 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. diff --git a/services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts b/services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts index 7e0e4a1c89..fac88acc9e 100644 --- a/services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts +++ b/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)