Add ability to scroll past the end of the document, and increase the height of the last note's background layer

This commit is contained in:
Jonatan Heyman 2022-12-30 11:20:07 +01:00
parent bbab47a8ac
commit 1f4c63cff1
2 changed files with 12 additions and 6 deletions

View File

@ -171,20 +171,25 @@ const blockLayer = () => {
function rangesOverlaps(range1, range2) { function rangesOverlaps(range1, range2) {
return range1.from <= range2.to && range2.from <= range1.to return range1.from <= range2.to && range2.from <= range1.to
} }
view.state.facet(blockState).forEach(block => { const blocks = view.state.facet(blockState)
blocks.forEach(block => {
// make sure the block is visible // make sure the block is visible
if (!view.visibleRanges.some(range => rangesOverlaps(block.content, range))) { if (!view.visibleRanges.some(range => rangesOverlaps(block.content, range))) {
idx++; idx++;
return return
} }
const fromCoords = view.coordsAtPos(Math.max(block.content.from, view.visibleRanges[0].from)) const fromCoordsTop = view.coordsAtPos(Math.max(block.content.from, view.visibleRanges[0].from)).top
const toCoords = view.coordsAtPos(Math.min(block.content.to, view.visibleRanges[view.visibleRanges.length - 1].to)) let toCoordsBottom = view.coordsAtPos(Math.min(block.content.to, view.visibleRanges[view.visibleRanges.length - 1].to)).bottom
if (idx === blocks.length - 1) {
let extraHeight = view.viewState.editorHeight - view.defaultLineHeight - view.documentPadding.top - 0.5
toCoordsBottom += extraHeight
}
markers.push(new RectangleMarker( markers.push(new RectangleMarker(
idx++ % 2 == 0 ? "block-even" : "block-odd", idx++ % 2 == 0 ? "block-even" : "block-odd",
0, 0,
fromCoords.top - (view.documentTop - view.documentPadding.top) - 1, fromCoordsTop - (view.documentTop - view.documentPadding.top) - 1,
editorWidth, editorWidth,
(toCoords.bottom - fromCoords.top) + 2, (toCoordsBottom - fromCoordsTop) + 2,
)) ))
}) })
return markers return markers

View File

@ -1,4 +1,4 @@
import { lineNumbers, highlightActiveLineGutter, highlightSpecialChars, drawSelection, dropCursor, rectangularSelection, crosshairCursor, highlightActiveLine, keymap } from '@codemirror/view'; import { lineNumbers, highlightActiveLineGutter, highlightSpecialChars, drawSelection, dropCursor, rectangularSelection, crosshairCursor, highlightActiveLine, keymap, scrollPastEnd } from '@codemirror/view';
import { EditorView } from '@codemirror/view'; import { EditorView } from '@codemirror/view';
import { EditorState } from '@codemirror/state'; import { EditorState } from '@codemirror/state';
import { foldGutter, indentOnInput, syntaxHighlighting, defaultHighlightStyle, bracketMatching, foldKeymap } from '@codemirror/language'; import { foldGutter, indentOnInput, syntaxHighlighting, defaultHighlightStyle, bracketMatching, foldKeymap } from '@codemirror/language';
@ -65,6 +65,7 @@ const customSetup = /*@__PURE__*/(() => [
highlightActiveLine(), highlightActiveLine(),
highlightSelectionMatches(), highlightSelectionMatches(),
EditorView.lineWrapping, EditorView.lineWrapping,
scrollPastEnd(),
keymap.of([ keymap.of([
...closeBracketsKeymap, ...closeBracketsKeymap,
...defaultKeymap, ...defaultKeymap,