Colour, a page you can see the edge of, and a document on its own

Five of the nine things on the list, and one finding that came out of them.

Colour: a marker pen and an ink colour, written as marks here rather than
installed — the schema of a note decides what can be stored in it forever. A
highlight is a <mark> so a reader that drops the colour still shows the word
as marked, and marked text is painted dark whatever the theme. Both travel as
HTML in Markdown, like underline, and both are read back.

The PDF fills the screen: the browser's own full screen for the window frame,
an overlay for the sidebar and the list, Escape and a visible button for the
way out.

The dashboard leads with the recent notes, sorted by time whatever order the
notebooks are in. A tap on the blank part of a page puts the caret at the
nearest position instead of nowhere. A drag from the left edge shows the
sidebar. The page has an edge on a phone, where it had none.

The finding: at the speed a robot types, a long note loses keystrokes between
the editor and the pagination measuring after each one — 87 of 220
paragraphs. Nothing is lost at 50 characters a second, so the page-count
check now pastes its bulk text rather than measuring typing throughput. And
the history suite asked for "the first note in the list" without waiting for
the note to reach the server; it asks by name now.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

e2e/editor.mjs

@@ -173,13 +173,22 @@ try {
   );
 
   await p.locator(".ProseMirror").click();
-  // Enough for several pages. With only two, the middle of the window never
-  // leaves the first one — a window is shorter than a page — so the check would
-  // be testing arithmetic rather than behaviour.
-  for (let i = 0; i < 220; i++) {
-    await p.keyboard.type(`Absatz ${i + 1}: Dichtungen altern durch Wärme.`);
-    await p.keyboard.press("Enter");
-  }
+  /* Enough for several pages. With only two, the middle of the window never
+     leaves the first one — a window is shorter than a page — so the check would
+     be testing arithmetic rather than behaviour.
+     Pasted rather than typed: at the speed a robot types, a long note loses
+     keystrokes between the editor and the pagination measuring after each one,
+     and the page count then measures typing throughput instead of pagination.
+     (At any human speed nothing is lost — checked at 50 characters a second.) */
+  await p.keyboard.type("Absatz 1: Dichtungen altern durch Wärme.");
+  await p.keyboard.press("Enter");
+  await p.evaluate((text) => {
+    const dt = new DataTransfer();
+    dt.setData("text/plain", text);
+    document
+      .querySelector(".ProseMirror")
+      .dispatchEvent(new ClipboardEvent("paste", { clipboardData: dt, bubbles: true, cancelable: true }));
+  }, Array.from({ length: 200 }, (_, i) => `Absatz ${i + 2}: Dichtungen altern durch Wärme.`).join("\n"));
   await p.waitForTimeout(3500);
 
   const position = () => p.locator("[data-note-position]").innerText();
@@ -295,6 +304,51 @@ try {
     await p.locator(".ProseMirror p").first().evaluate((e) => getComputedStyle(e).textAlign)
   );
 
+  /* ── the marker pen and the ink ──
+   * Two marks the schema had no room for until now, so the thing worth checking
+   * is that they reach the document and come back out of it: a colour that only
+   * exists on screen is a colour that is lost on the next reload. */
+  await createNote(p);
+  await setTitle(p, "Farbe");
+  await typeInEditor(p, "Wichtig und bunt");
+  await p.waitForTimeout(1200);
+
+  // Select the whole line, the way somebody marks a sentence they just wrote.
+  await p.locator(".ProseMirror").click();
+  await p.keyboard.press("Control+a");
+  await p.locator("[data-toolbar-colour]").click();
+  await p.waitForTimeout(400);
+  check((await p.locator("[data-colour-panel]").count()) === 1, "the toolbar offers colour");
+  const swatches = await p.locator("[data-colour-swatch]").count();
+  check(swatches >= 8, "with a palette for both kinds", `${swatches} swatches`);
+
+  await p.locator('[data-colour-swatch="#fff3a3"]').click();
+  await p.waitForTimeout(1600);
+  check((await p.locator(".ProseMirror mark").count()) === 1, "a highlight lands on the selected words");
+
+  await p.keyboard.press("Control+a");
+  await p.locator('[data-colour-swatch="#d1242f"]').click();
+  await p.waitForTimeout(1800);
+  const inked = await p.locator(".ProseMirror mark span").first().evaluate((el) => getComputedStyle(el).color);
+  check(inked === "rgb(209, 36, 47)", "and a text colour on top of it", inked);
+
+  await reopenNote(p, "Farbe");
+  check((await p.locator(".ProseMirror mark").count()) === 1, "the highlight is still there after a reload");
+  check(
+    (await p.locator(".ProseMirror [style*=color]").count()) >= 1,
+    "and so is the colour of the letters"
+  );
+
+  /* Pressing the same colour again takes it off — the button that put it there
+     is the one people reach for to remove it. */
+  await p.locator(".ProseMirror").click();
+  await p.keyboard.press("Control+a");
+  await p.locator("[data-toolbar-colour]").click();
+  await p.waitForTimeout(400);
+  await p.locator('[data-colour-swatch="#fff3a3"]').click();
+  await p.waitForTimeout(1500);
+  check((await p.locator(".ProseMirror mark").count()) === 0, "and pressing the same colour again removes it");
+
   /* ── a quote that holds more than a sentence ──
    * Markdown lets a quote hold whole blocks, and so does the editor. What it did
    * not do was give them any room: inside a quote nothing had a margin, so a