overleaf/services/web/frontend/js/features/source-editor/extensions/go-to-line.ts

68 lines
1.7 KiB
TypeScript
Raw Normal View History

import { Prec } from '@codemirror/state'
import { EditorView, keymap } from '@codemirror/view'
import { gotoLine } from '@codemirror/search'
/**
* A custom extension that provides a keyboard shortcut
* and panel with UI for jumping to a specific line number.
*/
export const goToLinePanel = () => {
return [
Prec.high(
keymap.of([
{
key: 'Mod-Shift-l',
preventDefault: true,
run: gotoLine,
},
])
),
gotoLineTheme,
]
}
const gotoLineTheme = EditorView.baseTheme({
'.cm-panel.cm-gotoLine': {
padding: '10px',
fontSize: '14px',
'& label': {
margin: 0,
fontSize: '14px',
'& .cm-textfield': {
margin: '0 10px',
maxWidth: '100px',
height: '34px',
padding: '5px 16px',
fontSize: '14px',
fontWeight: 'normal',
lineHeight: 'var(--line-height-base)',
color: 'var(--input-color)',
backgroundColor: '#fff',
backgroundImage: 'none',
borderRadius: 'var(--input-border-radius)',
boxShadow: 'inset 0 1px 1px rgb(0 0 0 / 8%)',
transition:
'border-color ease-in-out .15s, box-shadow ease-in-out .15s',
'&:focus-visible': {
outline: 'none',
},
'&:focus': {
borderColor: 'var(--input-border-focus)',
},
},
},
'& .cm-button': {
padding: '4px 16px 5px',
textTransform: 'capitalize',
fontSize: '14px',
lineHeight: 'var(--line-height-base)',
userSelect: 'none',
backgroundImage: 'none',
backgroundColor: 'var(--btn-default-bg)',
borderRadius: 'var(--btn-border-radius-base)',
border: '0 solid transparent',
color: '#fff',
},
},
})