extern/heynote
1
0
Fork 0
mirror of https://github.com/heyman/heynote.git synced 2025-01-11 08:28:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Set note background layers' width to 100% in CSS instead of measuring the editor width in a requestMeasure() call

Browse Source
This commit is contained in:
Jonatan Heyman 2022-12-30 12:52:32 +01:00
parent 1f4c63cff1
commit 9aff278c80
2 changed files with 41 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
heynote-codemirror/src/note-block.js
View File

@ -1,6 +1,6 @@
import { ViewPlugin, EditorView, Decoration, WidgetType, lineNumbers } from "@codemirror/view" import { ViewPlugin, EditorView, Decoration, WidgetType, lineNumbers } from "@codemirror/view"
import { layer, RectangleMarker } from "@codemirror/view" import { layer, RectangleMarker } from "@codemirror/view"
import { EditorState, RangeSetBuilder, StateField } from "@codemirror/state"; import { EditorState, RangeSetBuilder, StateField, Facet , StateEffect} from "@codemirror/state";
import { RangeSet } from "@codemirror/rangeset"; import { RangeSet } from "@codemirror/rangeset";
import { syntaxTree } from "@codemirror/language" import { syntaxTree } from "@codemirror/language"
import { Note, Document, NoteDelimiter } from "./lang-heynote/parser.terms.js" import { Note, Document, NoteDelimiter } from "./lang-heynote/parser.terms.js"
@ -148,20 +148,8 @@ const atomicNoteBlock = ViewPlugin.fromClass(
} }
) )
const blockLayer = () => {
let editorWidth = 0;
const measureEditorWidth = EditorView.updateListener.of((update) => {
if (update.geometryChanged) {
update.view.requestMeasure({
read(a) {
const gutterWidth = update.view.contentDOM.previousSibling.clientWidth
editorWidth = update.view.contentDOM.clientWidth + gutterWidth
}
})
}
})
const layerExtension = layer({ const blockLayer = layer({
above: false, above: false,
markers(view) { markers(view) {
@ -188,12 +176,11 @@ const blockLayer = () => {
idx++ % 2 == 0 ? "block-even" : "block-odd", idx++ % 2 == 0 ? "block-even" : "block-odd",
0, 0,
fromCoordsTop - (view.documentTop - view.documentPadding.top) - 1, fromCoordsTop - (view.documentTop - view.documentPadding.top) - 1,
editorWidth, null, // width is set to 100% in CSS
(toCoordsBottom - fromCoordsTop) + 2, (toCoordsBottom - fromCoordsTop) + 2,
)) ))
}) })
return markers return markers
}, },
update(update, dom) { update(update, dom) {
@ -201,10 +188,7 @@ const blockLayer = () => {
}, },
class: "blocks-layer" class: "blocks-layer"
}) })
return [measureEditorWidth, layerExtension]
}
const preventFirstBlockFromBeingDeleted = EditorState.changeFilter.of((tr) => { const preventFirstBlockFromBeingDeleted = EditorState.changeFilter.of((tr) => {
@ -240,7 +224,7 @@ export const noteBlockExtension = () => {
blockState, blockState,
noteBlockWidget(), noteBlockWidget(),
atomicNoteBlock, atomicNoteBlock,
blockLayer(), blockLayer,
preventFirstBlockFromBeingDeleted, preventFirstBlockFromBeingDeleted,
preventSelectionBeforeFirstBlock, preventSelectionBeforeFirstBlock,
lineNumbers({ lineNumbers({

2
heynote-codemirror/src/styles.css
View File

@ -22,10 +22,12 @@ body {
.blocks-layer .block-even { .blocks-layer .block-even {
width: 100%;
/*background: #3f3b4b;*/ /*background: #3f3b4b;*/
background: #232537; background: #232537;
} }
.blocks-layer .block-odd { .blocks-layer .block-odd {
width: 100%;
/*background: rgb(57, 71, 77);*/ /*background: rgb(57, 71, 77);*/
background: #222f38; background: #222f38;
} }