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

heynote-codemirror/src/note-block.js

@@ -1,6 +1,6 @@
 import { ViewPlugin, EditorView, Decoration, WidgetType, lineNumbers } 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 { syntaxTree } from "@codemirror/language"
 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,
 
     markers(view) {
@@ -188,12 +176,11 @@ const blockLayer = () => {
                 idx++ % 2 == 0 ? "block-even" : "block-odd",
                 0,
                 fromCoordsTop - (view.documentTop - view.documentPadding.top) - 1,
-                    editorWidth,
+                null, // width is set to 100% in CSS
                 (toCoordsBottom - fromCoordsTop) + 2,
             ))
         })
         return markers
-
     },
 
     update(update, dom) {
@@ -201,10 +188,7 @@ const blockLayer = () => {
     },
 
     class: "blocks-layer"
-    })
-
-    return [measureEditorWidth, layerExtension]
-}
+})
 
 
 const preventFirstBlockFromBeingDeleted = EditorState.changeFilter.of((tr) => {
@@ -240,7 +224,7 @@ export const noteBlockExtension = () => {
         blockState,
         noteBlockWidget(),
         atomicNoteBlock,
-        blockLayer(),
+        blockLayer,
         preventFirstBlockFromBeingDeleted,
         preventSelectionBeforeFirstBlock,
         lineNumbers({

heynote-codemirror/src/styles.css

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