github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
[web] Move symbol palette icon inline

GitOrigin-RevId: 8d05cbf5211009870b8107c3c620af0e701a04dd
This commit is contained in:
Mathias Jakobsen 2024-06-18 11:00:17 +01:00 committed by Copybot
parent 4087345a2a
commit d2ae97427d
2 changed files with 15 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
services/web/frontend/js/features/source-editor/extensions/auto-complete.ts
View file

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

6
services/web/test/frontend/features/source-editor/components/codemirror-editor-autocomplete.spec.tsx
View file

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