mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-04 23:36:00 -05:00
e025088065
Add documentation for CodeMirror extensions GitOrigin-RevId: e5f07084173f201919272f9d46dcdaef4b817874
90 lines
2.7 KiB
TypeScript
90 lines
2.7 KiB
TypeScript
import { EditorSelection, Extension } from '@codemirror/state'
|
|
import {
|
|
BlockInfo,
|
|
EditorView,
|
|
lineNumbers as _lineNumbers,
|
|
} from '@codemirror/view'
|
|
import { DebouncedFunc, throttle } from 'lodash'
|
|
|
|
/**
|
|
* The built-in extension which displays line numbers in the gutter,
|
|
* configured with a mousedown/mouseup handler that selects lines of the document
|
|
* when dragging a selection in the gutter.
|
|
*/
|
|
export function lineNumbers(): Extension {
|
|
let listener: DebouncedFunc<(event: MouseEvent) => boolean> | null
|
|
|
|
function disableListener() {
|
|
if (listener) {
|
|
document.removeEventListener('mousemove', listener)
|
|
listener = null
|
|
}
|
|
}
|
|
|
|
// Creates a selection range capped within the document bounds. The range is
|
|
// anchored at the beginning so that it is a full line that is selected
|
|
function selection(view: EditorView, start: BlockInfo, end: BlockInfo) {
|
|
const clamp = (num: number) =>
|
|
Math.max(0, Math.min(view.state.doc.length, num))
|
|
|
|
let startPos = start.from
|
|
let endPos = end.to + 1
|
|
if (start.from === end.from) {
|
|
// Selecting one line
|
|
startPos = end.to + 1
|
|
endPos = start.from
|
|
} else if (end.from < start.from) {
|
|
// End is prior to start
|
|
endPos = end.from
|
|
startPos = start.to + 1
|
|
}
|
|
return EditorSelection.range(clamp(startPos), clamp(endPos))
|
|
}
|
|
|
|
// Wrapper around the built-in codemirror lineNumbers() extension
|
|
return _lineNumbers({
|
|
domEventHandlers: {
|
|
mousedown: (view, line, event) => {
|
|
// Disable default focusing of line number
|
|
event.preventDefault()
|
|
|
|
// If we already have a listener, disable it
|
|
disableListener()
|
|
view.dispatch({
|
|
selection: selection(view, line, line),
|
|
})
|
|
|
|
// Focus the editor
|
|
view.contentDOM.focus()
|
|
|
|
// Set up new listener to track the mouse position
|
|
listener = throttle((event: MouseEvent) => {
|
|
// Check if we've missed a mouseup event by validating that the
|
|
// primary mouse button is still being held
|
|
if (event.buttons !== 1) {
|
|
disableListener()
|
|
return false
|
|
}
|
|
|
|
// Map the mouse cursor to the document, and select the lines matched
|
|
const documentPosition = view.posAtCoords({
|
|
x: event.pageX,
|
|
y: event.pageY,
|
|
})
|
|
if (documentPosition) {
|
|
const endLine = view.lineBlockAt(documentPosition)
|
|
view.dispatch({
|
|
selection: selection(view, line, endLine),
|
|
})
|
|
}
|
|
}, 50)
|
|
document.addEventListener('mousemove', listener)
|
|
return false
|
|
},
|
|
mouseup: () => {
|
|
disableListener()
|
|
return false
|
|
},
|
|
},
|
|
})
|
|
}
|