From ffd6f258ad543805915de7f9ba69e0d22b026d12 Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Tue, 15 Jul 2025 09:58:48 +0100
Subject: [PATCH] Merge pull request #27079 from
 overleaf/mj-base-theme-extraction

[web] Extract breadcrumbs theme to constant

GitOrigin-RevId: 55d65597a85a7da5cf5506caf8e13d4e2977fb1f
---
 .../extensions/breadcrumbs-panel.ts           | 60 ++++++++++---------
 1 file changed, 31 insertions(+), 29 deletions(-)

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 a3768a9d5a..9572b16567 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,5 +1,35 @@
 import { EditorView } from '@codemirror/view'
 
+const breadcrumbsTheme = EditorView.baseTheme({
+  '.ol-cm-breadcrumbs-portal': {
+    display: 'flex',
+    pointerEvents: 'none !important',
+    '& > *': {
+      pointerEvents: 'all',
+    },
+  },
+  '.ol-cm-breadcrumbs': {
+    height: 'var(--breadcrumbs-height)',
+    flex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    gap: 'var(--spacing-01)',
+    fontSize: 'var(--font-size-01)',
+    padding: 'var(--spacing-02)',
+    overflow: 'auto',
+    scrollbarWidth: 'thin',
+    '& > *': {
+      flexShrink: '0',
+    },
+  },
+  '&light .ol-cm-breadcrumb-chevron': {
+    color: 'var(--neutral-30)',
+  },
+  '&dark .ol-cm-breadcrumb-chevron': {
+    color: 'var(--neutral-50)',
+  },
+})
+
 /**
  * A panel which contains the editor breadcrumbs
  */
@@ -8,34 +38,6 @@ export function breadcrumbPanel() {
     EditorView.editorAttributes.of({
       style: '--breadcrumbs-height: 28px;',
     }),
-    EditorView.baseTheme({
-      '.ol-cm-breadcrumbs-portal': {
-        display: 'flex',
-        pointerEvents: 'none !important',
-        '& > *': {
-          pointerEvents: 'all',
-        },
-      },
-      '.ol-cm-breadcrumbs': {
-        height: 'var(--breadcrumbs-height)',
-        flex: 1,
-        display: 'flex',
-        alignItems: 'center',
-        gap: 'var(--spacing-01)',
-        fontSize: 'var(--font-size-01)',
-        padding: 'var(--spacing-02)',
-        overflow: 'auto',
-        scrollbarWidth: 'thin',
-        '& > *': {
-          flexShrink: '0',
-        },
-      },
-      '&light .ol-cm-breadcrumb-chevron': {
-        color: 'var(--neutral-30)',
-      },
-      '&dark .ol-cm-breadcrumb-chevron': {
-        color: 'var(--neutral-50)',
-      },
-    }),
+    breadcrumbsTheme,
   ]
 }