overleaf/services/web/frontend/js/features/source-editor/extensions/highlight-active-line.ts
Tim Down 7f37ba737c Move source editor out of module (#12457)
* Update Copybara options in preparation for open-sourcing the source editor

* Move files

* Update paths

* Remove source-editor module and checks for its existence

* Explicitly mention CM6 license in files that contain code adapted from CM6

GitOrigin-RevId: 89b7cc2b409db01ad103198ccbd1b126ab56349b
2023-04-13 08:40:56 +00:00

116 lines
3 KiB
TypeScript

import {
Decoration,
DecorationSet,
EditorView,
layer,
LayerMarker,
RectangleMarker,
ViewPlugin,
ViewUpdate,
} from '@codemirror/view'
import { sourceOnly } from './visual/visual'
import { fullHeightCoordsAtPos } from '../utils/layer'
export const highlightActiveLine = (visual: boolean) => {
// this extension should only be active in the source editor
return sourceOnly(visual, [
activeLineLayer,
singleLineHighlighter,
EditorView.baseTheme({
'.ol-cm-activeLineLayer': {
pointerEvents: 'none',
},
}),
])
}
/**
* Line decoration approach used for non-wrapped lines, adapted from built-in
* CodeMirror 6 highlightActiveLine, licensed under the MIT license:
* https://github.com/codemirror/view/blob/main/src/active-line.ts
*/
const lineDeco = Decoration.line({ class: 'cm-activeLine' })
const singleLineHighlighter = ViewPlugin.fromClass(
class {
decorations: DecorationSet
constructor(view: EditorView) {
this.decorations = this.getDeco(view)
}
update(update: ViewUpdate) {
if (update.docChanged || update.selectionSet) {
this.decorations = this.getDeco(update.view)
}
}
getDeco(view: EditorView) {
const deco = []
// NOTE: only highlighting the active line for the main selection
const { main } = view.state.selection
// No active line highlight when text is selected
if (main.empty) {
const line = view.lineBlockAt(main.head)
if (line.height <= view.defaultLineHeight) {
deco.push(lineDeco.range(line.from))
}
}
return Decoration.set(deco)
}
},
{
decorations: v => v.decorations,
}
)
// Custom layer approach, used only for wrapped lines
const activeLineLayer = layer({
above: false,
class: 'ol-cm-activeLineLayer',
markers(view: EditorView): readonly LayerMarker[] {
const markers: LayerMarker[] = []
// NOTE: only highlighting the active line for the main selection
const { main } = view.state.selection
// no active line highlight when text is selected
if (!main.empty) {
return markers
}
// Use line decoration when line doesn't wrap
if (view.lineBlockAt(main.head).height <= view.defaultLineHeight) {
return markers
}
const coords = fullHeightCoordsAtPos(
view,
main.head,
main.assoc || undefined
)
if (coords) {
const scrollRect = view.scrollDOM.getBoundingClientRect()
const contentRect = view.contentDOM.getBoundingClientRect()
const scrollTop = view.scrollDOM.scrollTop
const top = coords.top - scrollRect.top + scrollTop
const left = contentRect.left - scrollRect.left
const width = contentRect.right - contentRect.left
const height = coords.bottom - coords.top
markers.push(
new RectangleMarker('cm-activeLine', left, top, width, height)
)
}
return markers
},
update(update: ViewUpdate): boolean {
return update.geometryChanged || update.selectionSet
},
})