almost working custom background layer behind selection

packages/codemirror/backlayer.mjs

@@ -0,0 +1,38 @@
+// import { SelectionRange } from '@codemirror/state';
+import { RectangleMarker } from '@codemirror/view';
+import { layer } from '@codemirror/view';
+
+// currently stuck with: https://discuss.codemirror.net/t/line-background-layer/7666
+
+export const backlayer = layer({
+  update: (update) => {
+    return update.docChanged;
+  },
+  markers: (view) => {
+    const offsetTop = 14; // how to know this number ? .view.documentTop is scroll relative..
+    const offsetLeft = 4; // how to know this number ?
+
+    return view.viewportLineBlocks.map((block) => {
+      const { left } = view.coordsAtPos(block.to);
+      return new RectangleMarker('cm-backlayer', offsetLeft, block.top + offsetTop, left, block.height);
+    });
+  },
+});
+
+/* const len = view.state.doc.length;
+const markers = RectangleMarker.forRange(
+  view,
+  'cm-backlayer',
+  SelectionRange.fromJSON({
+    from: 0,
+    to: len,
+    anchor: 0,
+    head: len,
+    empty: true,
+    assoc: -1,
+    bidiLevel: null,
+  }),
+);
+console.log('markser', markers);
+return markers;
+ */

packages/codemirror/codemirror.mjs

@@ -21,6 +21,7 @@ import { keybindings } from './keybindings.mjs';
 import { initTheme, activateTheme, theme } from './themes.mjs';
 import { updateWidgets, sliderPlugin } from './slider.mjs';
 import { persistentAtom } from '@nanostores/persistent';
+import { backlayer } from './backlayer.mjs';
 
 const extensions = {
   isLineWrappingEnabled: (on) => (on ? EditorView.lineWrapping : []),
@@ -76,6 +77,7 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, roo
       history(),
       EditorView.updateListener.of((v) => onChange(v)),
       drawSelection({ cursorBlinkRate: 0 }),
+      backlayer,
       Prec.highest(
         keymap.of([
           {

packages/codemirror/index.mjs

@@ -3,3 +3,4 @@ export * from './highlight.mjs';
 export * from './flash.mjs';
 export * from './slider.mjs';
 export * from './themes.mjs';
+export * from './backlayer.mjs';

website/src/repl/Repl.css

@@ -10,6 +10,11 @@
   --gutterForeground: #8a919966;
 }
 
+.cm-backlayer {
+  background: #00ff0050;
+  /* background: var(--lineBackground) */
+}
+
 .darken::before {
   content: ' ';
   position: fixed;
@@ -30,9 +35,6 @@
 #code .cm-content {
   padding-bottom: 50vh;
 }
-#code .cm-line > * {
-  background: var(--lineBackground);
-}
 
 #code .cm-editor {
   background-color: transparent !important;