Merge pull request #18782 from overleaf/mj-symbol-palette-inline

[web] Move symbol palette icon inline

GitOrigin-RevId: 8d05cbf5211009870b8107c3c620af0e701a04dd

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)',

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)
   })