Marks, lines, and a table that breaks

A long table lay straight across the gap between two sheets with a row
cut in half, and a shorter one jumped to the next sheet whole leaving
the rest of the first blank. Tables are broken between their rows now,
which is where a table breaks on paper. The spacer there is a tr with
one borderless cell: a div inside a tbody is not something the browser
keeps. Its own spacer rows are subtracted again on the next measurement
and counted into the shift every block below inherits — miss that and
everything under a broken table is measured a page too high.

A dialog closed in the middle of an edit if a selection was dragged past
its edge: the click lands on the nearest common ancestor of press and
release, which is the backdrop, and every dialog read that as "clicked
beside me". They remember where the press began now. All ten.

A note and a chapter can wear a mark of their own beside the name,
chosen from a short list searched by what a thing is for rather than
from the system emoji keyboard — a different thing on every machine, and
three thousand pictures for a decision that is "which of these is the
invoice notebook". A separator takes its own colour and one of five
shapes, and a chapter can be divided like the notebook it sits in: both
places a chapter is shown draw it with one component now, so it cannot
be divisible in the column and not in the unfolded block.

Also: a chapter's colour could not be cleared, because the update rode
on COALESCE and null there means "leave it alone". A table's header row
is legible on the dark theme. Three entries in the table's own menu were
still German. Opening a notebook opens its first note, on a wide screen
only — on a phone the list is the screen.

Fourteen suites green: 364 browser checks, 241 unit tests.

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

frontend/src/editor/editor.css

@@ -21,6 +21,12 @@
   --ne-accent: #0969da;
   --ne-surface: #ffffff;
   --ne-subtle: #f6f8fa;
+  /* A table's header row, which needs to read as one at a glance. Its own
+     tokens because "slightly off the page colour" is enough for a code block
+     sitting in the middle of text and not enough for a row that has to be told
+     from the rows under it. */
+  --ne-th-bg: #eaeef2;
+  --ne-th-rule: #afb8c1;
 }
 .note-editor[data-theme="dark"] {
   --ne-text: #e6edf3;
@@ -30,6 +36,10 @@
   --ne-accent: #388bfd;
   --ne-surface: #0d1117;
   --ne-subtle: #161b22;
+  /* Dark is where this mattered: #161b22 on a #0d1117 sheet is a difference you
+     have to look for, so a header row read as just another row. */
+  --ne-th-bg: #262c36;
+  --ne-th-rule: #6a7480;
 }
 
 .note-editor .ProseMirror {
@@ -167,6 +177,20 @@
   pointer-events: none;
 }
 
+/* The spacer that carries a table across the gap between two sheets. It is a
+   row, so it inherits every cell rule below — and has to shed all of them, or
+   the gap shows a tall bordered box. */
+.note-editor .ProseMirror tr.ne-page-spacer-row,
+.note-editor .ProseMirror tr.ne-page-spacer-row td {
+  border: none !important;
+  padding: 0 !important;
+  background: transparent !important;
+}
+.note-editor .ProseMirror tr.ne-page-spacer-row td::before,
+.note-editor .ProseMirror tr.ne-page-spacer-row td::after {
+  content: none !important;
+}
+
 /* ── Tables ── */
 .note-editor .ProseMirror table {
   border-collapse: collapse;
@@ -184,9 +208,12 @@
   min-width: 1em;
 }
 .note-editor .ProseMirror th {
-  background: var(--ne-subtle);
-  font-weight: 600;
+  background: var(--ne-th-bg);
+  font-weight: 700;
   text-align: left;
+  /* The rule under the header does most of the work — the fill alone cannot be
+     made much stronger without the header turning into a banner. */
+  border-bottom: 2px solid var(--ne-th-rule);
 }
 .note-editor .ProseMirror .selectedCell::after {
   content: "";

frontend/src/editor/pagination.js

@@ -17,14 +17,24 @@ import { Decoration, DecorationSet } from "@tiptap/pm/view";
  * note is still one body.
  *
  * The unit is a whole block. A paragraph that would be split across the gap
- * moves down entire, which is what a page break means on paper. A single block
- * taller than a page — a long table, a big image — is left where it is and runs
- * over the gap: splitting one would mean laying out its insides ourselves.
+ * moves down entire, which is what a page break means on paper.
+ *
+ * A **table** is the exception, and has to be: moved whole it either jumps to
+ * the next page leaving half a sheet blank, or — being taller than a page — has
+ * nowhere to jump to and lies across the gap regardless. So a table is broken
+ * between its rows, which is where a table breaks on paper too. The spacer there
+ * is a row of its own rather than a block: a `div` inside a `tbody` is not a
+ * thing, and a `tr` with one borderless cell pushes the rows after it down
+ * exactly as needed.
+ *
+ * Everything else too tall to fit anywhere — a full-page image — is left where
+ * it is: moving it down only puts the same problem one page further on.
  */
 
 export const paginationKey = new PluginKey("pagination");
 
 const SPACER_CLASS = "ne-page-spacer";
+const SPACER_ROW_CLASS = "ne-page-spacer-row";
 
 const px = (value) => {
   const n = parseFloat(value);
@@ -55,6 +65,59 @@ function makeSpacer(height, delta) {
  * Returns `null` when there is nothing to measure against — no geometry yet, or
  * a page too short to hold anything.
  */
+/**
+ * The spacer inside a table.
+ *
+ * A row, because that is what a table's children are: anything else is either
+ * dropped by the browser or wrapped in an anonymous cell of its own. The cell
+ * carries the height and is stripped of the borders every other cell has, so the
+ * gap between two sheets stays empty.
+ */
+function makeSpacerRow(height, delta, colspan) {
+  const tr = document.createElement("tr");
+  tr.className = SPACER_ROW_CLASS;
+  tr.setAttribute("aria-hidden", "true");
+  tr.contentEditable = "false";
+  tr.dataset.delta = String(delta);
+  const td = document.createElement("td");
+  td.colSpan = Math.max(1, colspan || 1);
+  td.style.height = `${Math.max(0, Math.round(height))}px`;
+  tr.appendChild(td);
+  return tr;
+}
+
+/** The rows of a table, with the document position of each. */
+function tableRows(node, wrapper, domTop, seenBefore) {
+  const table = wrapper.matches?.("table") ? wrapper : wrapper.querySelector(":scope table");
+  const body = table?.querySelector(":scope > tbody");
+  if (!body) return null;
+
+  const rows = [];
+  let inner = 0;
+  let index = 0;
+  // Positions are walked rather than looked up: a row's place in the document is
+  // the table's own position plus the size of every row before it.
+  let pos = 0;
+  for (const el of body.children) {
+    if (el.classList?.contains(SPACER_ROW_CLASS)) {
+      inner += Number(el.dataset.delta) || 0;
+      continue;
+    }
+    if (index >= node.childCount) break;
+    const rect = el.getBoundingClientRect();
+    rows.push({
+      index,
+      pos,
+      top: rect.top - domTop - seenBefore - inner,
+      height: rect.height,
+    });
+    pos += node.child(index).nodeSize;
+    index++;
+  }
+  const columns = table.querySelector(":scope > colgroup")?.children.length || 1;
+  return { rows, inner, columns };
+}
+
 function computeBreaks(view, geometry) {
   const pageHeight = geometry?.pageHeight ?? 0;
   const gap = geometry?.gap ?? 0;
@@ -71,9 +134,9 @@ function computeBreaks(view, geometry) {
 
   const domTop = dom.getBoundingClientRect().top;
 
-  // Top-level document positions, in the order they are rendered.
-  const positions = [];
-  view.state.doc.forEach((_node, offset) => positions.push(offset));
+  // Top-level nodes and their positions, in the order they are rendered.
+  const nodes = [];
+  view.state.doc.forEach((node, offset) => nodes.push({ node, offset }));
 
   /* Each block's position **as if no spacer existed**. A spacer shifts
    * everything after it by exactly its recorded delta, so subtracting the
@@ -87,16 +150,33 @@ function computeBreaks(view, geometry) {
       seen += Number(child.dataset.delta) || 0;
       continue;
     }
-    if (index >= positions.length) break;
+    if (index >= nodes.length) break;
+    const { node, offset } = nodes[index];
     const rect = child.getBoundingClientRect();
     const cs = getComputedStyle(child);
-    blocks.push({
-      pos: positions[index],
+    const block = {
+      pos: offset,
       top: rect.top - domTop - seen,
       height: rect.height,
       marginTop: px(cs.marginTop),
       marginBottom: px(cs.marginBottom),
-    });
+    };
+
+    /* A table is measured row by row, since that is where it can be broken.
+     * Its own spacer rows are subtracted as we go, and then added to `seen`:
+     * they push everything after the table down as surely as a block spacer
+     * does, and the next block's natural position has to allow for it. */
+    if (node.type.name === "table") {
+      const measured = tableRows(node, child, domTop, seen);
+      if (measured) {
+        block.rows = measured.rows.map((r) => ({ ...r, pos: offset + 1 + r.pos }));
+        block.columns = measured.columns;
+        block.height = rect.height - measured.inner;
+        seen += measured.inner;
+      }
+    }
+
+    blocks.push(block);
     index++;
   }
 
@@ -105,6 +185,40 @@ function computeBreaks(view, geometry) {
   for (let i = 0; i < blocks.length; i++) {
     const block = blocks[i];
     const top = block.top + shift;
+
+    /* ── a table breaks between its rows ──
+     * The row that would straddle the gap starts the next page instead, and the
+     * rows above it stay where they are. Moving the table whole either wastes
+     * the rest of the sheet or, for a table longer than a page, cannot help at
+     * all — which is why a long one used to lie straight across the gap. */
+    if (block.rows?.length) {
+      let inner = 0;
+      for (const row of block.rows) {
+        // `shift` is what the blocks above pushed down; `inner` is what the
+        // breaks already placed inside this table added on top of that.
+        const rowTop = row.top + shift + inner;
+        const rowPage = Math.floor(rowTop / pitch);
+        const rowEnd = rowPage * pitch + pageHeight - padBottom;
+        if (rowTop + row.height <= rowEnd + 0.5) continue;
+        // A row taller than a whole page cannot be helped by moving it.
+        if (row.height > usable) continue;
+        const delta = (rowPage + 1) * pitch + padTop - rowTop;
+        if (delta <= 0) continue;
+        /* The first row is the table's own top edge: pushing *inside* the table
+         * there would leave its border hanging above the break, so the whole
+         * table moves, exactly as any other block would. */
+        if (row.index === 0) {
+          if (i === 0) continue;
+          breaks.push({ pos: block.pos, delta, height: Math.max(0, delta - Math.min(blocks[i - 1].marginBottom, block.marginTop)) });
+        } else {
+          breaks.push({ pos: row.pos, delta, height: delta, row: true, columns: block.columns });
+        }
+        inner += delta;
+      }
+      shift += inner;
+      continue;
+    }
+
     // Taller than a page however it is placed — moving it down would only put
     // the same problem on the next page, one page further from the top.
     if (block.height > usable) continue;
@@ -133,20 +247,24 @@ const sameBreaks = (a, b) =>
   !!a &&
   !!b &&
   a.length === b.length &&
-  a.every((x, i) => x.pos === b[i].pos && Math.abs(x.height - b[i].height) < 1);
+  a.every((x, i) => x.pos === b[i].pos && !!x.row === !!b[i].row && Math.abs(x.height - b[i].height) < 1);
 
 const decorationsFor = (doc, breaks) =>
   DecorationSet.create(
     doc,
     breaks.map((b) =>
-      Decoration.widget(b.pos, () => makeSpacer(b.height, b.delta), {
+      Decoration.widget(
+        b.pos,
+        () => (b.row ? makeSpacerRow(b.height, b.delta, b.columns) : makeSpacer(b.height, b.delta)),
+        {
         // Height in the key, so a spacer that has to change size is rebuilt
         // rather than reused at its old height.
-        key: `page-break-${b.pos}-${Math.round(b.height)}`,
+        key: `page-break-${b.row ? "row" : "block"}-${b.pos}-${Math.round(b.height)}`,
         side: -1,
         ignoreSelection: true,
         marks: [],
-      })
+        }
+      )
     )
   );
 

frontend/src/editor/tableMenu.js

@@ -38,13 +38,13 @@ export function tableMenuItems(editor) {
     { label: "Insert column left", action: run((c) => c.addColumnBefore()) },
     { label: "Insert column right", action: run((c) => c.addColumnAfter()) },
     { divider: true },
-    { label: "Kopfzeile an/aus", action: run((c) => c.toggleHeaderRow()) },
+    { label: "Header row on/off", action: run((c) => c.toggleHeaderRow()) },
   ];
 
   // mergeCells and splitCell are mutually exclusive in practice: one needs a
   // multi-cell selection, the other a cell that was merged earlier.
-  if (can("mergeCells")) items.push({ label: "Zellen verbinden", action: run((c) => c.mergeCells()) });
-  if (can("splitCell")) items.push({ label: "Zelle teilen", action: run((c) => c.splitCell()) });
+  if (can("mergeCells")) items.push({ label: "Merge cells", action: run((c) => c.mergeCells()) });
+  if (can("splitCell")) items.push({ label: "Split cell", action: run((c) => c.splitCell()) });
 
   items.push(
     { divider: true },