From 3ce867c6d0cf2f5c67dcfa12baf01619f6f311f4 Mon Sep 17 00:00:00 2001
From: marc <marc@shortcake.local>
Date: Tue, 11 Aug 2026 19:50:32 +0200
Subject: [PATCH] Stop a drawing from making its note unwritable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The layer showing saved ink lies over the text. The canvas itself is deaf
to the pointer, but the box I wrapped it in yesterday was not — so on any
note carrying a drawing, every click meant for the text was swallowed
before it arrived, and the note simply could not be typed in.

Introduced with per-page drawing, where each page's ink got a wrapper to
be positioned by. The suite now clicks into the text of a note that has a
drawing and types, and asks what actually answers over the writing.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 e2e/drawing.mjs                            | 24 ++++++++++++++++++++++
 frontend/src/features/notes/NoteEditor.jsx | 14 ++++++++++++-
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/e2e/drawing.mjs b/e2e/drawing.mjs
index 6d89b8a..9ac5119 100644
--- a/e2e/drawing.mjs
+++ b/e2e/drawing.mjs
@@ -196,6 +196,30 @@ try {
     `${diff(second, reloadedTwo)} cells`
   );
 
+  /* ── a drawing must not make the note unwritable ──
+   * The layers that show saved ink lie over the text. They are transparent and
+   * deaf to the pointer — except the wrapper around one of them was not, and a
+   * note with a drawing could not be typed in at all: every click meant for the
+   * text was swallowed before it arrived. */
+  await p.locator("button").filter({ hasText: "Write" }).first().click();
+  await p.waitForTimeout(1200);
+  check(
+    await p.evaluate(() => {
+      const r = document.querySelector(".ProseMirror").getBoundingClientRect();
+      const el = document.elementFromPoint(r.x + r.width / 2, r.y + 20);
+      return !!el?.closest(".ProseMirror");
+    }),
+    "over the writing it is the writing that answers, not the ink layer"
+  );
+  await p.locator(".ProseMirror").click();
+  await p.keyboard.type("Getippt, obwohl die Notiz eine Zeichnung hat.");
+  await p.waitForTimeout(1800);
+  check(
+    (await p.locator(".ProseMirror").innerText()).includes("obwohl die Notiz eine Zeichnung hat"),
+    "and a note with a drawing can still be written in",
+    await p.locator(".ProseMirror").innerText()
+  );
+
   /* Clearing acts on the page you are looking at, not on the whole drawing. */
   await p.locator("button").filter({ hasText: "Draw" }).first().click();
   await p.waitForTimeout(1200);
diff --git a/frontend/src/features/notes/NoteEditor.jsx b/frontend/src/features/notes/NoteEditor.jsx
index fd1c082..18557aa 100644
--- a/frontend/src/features/notes/NoteEditor.jsx
+++ b/frontend/src/features/notes/NoteEditor.jsx
@@ -849,7 +849,19 @@ export function NoteEditor({
                 <div
                   key={page}
                   data-drawn-page={page}
-                  style={{ position: "absolute", left: 0, right: 0, top: (page - 1) * stageSize.h, height: stageSize.h }}
+                  style={{
+                    position: "absolute",
+                    left: 0,
+                    right: 0,
+                    top: (page - 1) * stageSize.h,
+                    height: stageSize.h,
+                    /* Deaf to the pointer, or this box lies over the writing and
+                       swallows every click meant for the text — which is exactly
+                       what it did: a note with a drawing could not be typed in
+                       at all. The canvas inside says the same thing, but a
+                       transparent wrapper is still a wrapper. */
+                    pointerEvents: "none",
+                  }}
                 >
                   <DrawingLayer
                     strokes={sheetStrokes({ sheets }, page)}