From d2ae97427d19adba5131f7274788d169d2202ed3 Mon Sep 17 00:00:00 2001
From: Mathias Jakobsen <mathias.jakobsen@overleaf.com>
Date: Tue, 18 Jun 2024 11:00:17 +0100
Subject: [PATCH] Merge pull request #18782 from
 overleaf/mj-symbol-palette-inline

[web] Move symbol palette icon inline

GitOrigin-RevId: 8d05cbf5211009870b8107c3c620af0e701a04dd
---
 .../source-editor/extensions/auto-complete.ts      | 14 +++++++++++++-
 .../codemirror-editor-autocomplete.spec.tsx        |  6 ++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/services/web/frontend/js/features/source-editor/extensions/auto-complete.ts b/services/web/frontend/js/features/source-editor/extensions/auto-complete.ts
index 315faa5582..7f88192f05 100644
--- a/services/web/frontend/js/features/source-editor/extensions/auto-complete.ts
+++ b/services/web/frontend/js/features/source-editor/extensions/auto-complete.ts
@@ -82,6 +82,7 @@ const createAutoComplete = (enabled: boolean) => {
   ]
 }
 
+const AUTOCOMPLETE_LINE_HEIGHT = 1.4
 /**
  * Styles for the autocomplete menu
  */
@@ -113,9 +114,20 @@ const autocompleteTheme = EditorView.baseTheme({
   '.cm-tooltip.cm-tooltip-autocomplete li[role="option"]': {
     display: 'flex',
     justifyContent: 'space-between',
-    lineHeight: 1.4, // increase the line height from default 1.2, for a larger target area
+    lineHeight: AUTOCOMPLETE_LINE_HEIGHT, // increase the line height from default 1.2, for a larger target area
     outline: '1px solid transparent',
   },
+  '.cm-tooltip .cm-completionDetail': {
+    flex: '1 0 auto',
+    fontSize: 'calc(var(--font-size) * 1.4)',
+    lineHeight: `calc(var(--font-size) * ${AUTOCOMPLETE_LINE_HEIGHT})`,
+    overflow: 'hidden',
+    // By default CodeMirror styles the details as italic
+    fontStyle: 'normal !important',
+    // We use this element for the symbol palette, so change the font to the
+    // symbol palette font
+    fontFamily: "'Stix Two Math', serif",
+  },
   '&light .cm-tooltip.cm-tooltip-autocomplete li[role="option"]:hover': {
     outlineColor: '#abbffe',
     backgroundColor: 'rgba(233, 233, 253, 0.4)',
diff --git a/services/web/test/frontend/features/source-editor/components/codemirror-editor-autocomplete.spec.tsx b/services/web/test/frontend/features/source-editor/components/codemirror-editor-autocomplete.spec.tsx
index 0fafc57543..a9ce2aa369 100644
--- a/services/web/test/frontend/features/source-editor/components/codemirror-editor-autocomplete.spec.tsx
+++ b/services/web/test/frontend/features/source-editor/components/codemirror-editor-autocomplete.spec.tsx
@@ -902,10 +902,8 @@ describe('autocomplete', { scrollBehavior: false }, function () {
 
     // the symbol completion should exist
     cy.findAllByRole('option', {
-      name: /^\\alpha\s+Greek$/,
+      name: /^\\alpha\s+𝛼\s+Greek$/,
     }).should('have.length', 1)
-
-    cy.get('body').should('contain', 'Lowercase Greek letter alpha')
   })
 
   it('does not display symbol completions in autocomplete when the feature is disabled', function () {
@@ -933,7 +931,7 @@ describe('autocomplete', { scrollBehavior: false }, function () {
     cy.findAllByRole('listbox').should('have.length', 1)
 
     cy.findAllByRole('option', {
-      name: /^\\alpha\s+Greek$/,
+      name: /^\\alpha\s+𝛼\s+Greek$/,
     }).should('have.length', 0)
   })