From 2375a7c1a2fc84e9991e5a845abf194ef1db0a36 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sun, 7 Jan 2024 00:09:30 +0100
Subject: [PATCH] almost working custom background layer behind selection

---
 packages/codemirror/backlayer.mjs  | 38 ++++++++++++++++++++++++++++++
 packages/codemirror/codemirror.mjs |  2 ++
 packages/codemirror/index.mjs      |  1 +
 website/src/repl/Repl.css          |  8 ++++---
 4 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 packages/codemirror/backlayer.mjs

diff --git a/packages/codemirror/backlayer.mjs b/packages/codemirror/backlayer.mjs
new file mode 100644
index 000000000..dc04e5eb3
--- /dev/null
+++ b/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;
+ */
diff --git a/packages/codemirror/codemirror.mjs b/packages/codemirror/codemirror.mjs
index 0d095a4ed..88786f25b 100644
--- a/packages/codemirror/codemirror.mjs
+++ b/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([
           {
diff --git a/packages/codemirror/index.mjs b/packages/codemirror/index.mjs
index 8f2d16303..2eabfa0f8 100644
--- a/packages/codemirror/index.mjs
+++ b/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';
diff --git a/website/src/repl/Repl.css b/website/src/repl/Repl.css
index 2d97d8a2b..fd49a03ea 100644
--- a/website/src/repl/Repl.css
+++ b/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;