web: the editor draws the checklist too

2992's other half. The browser was the last surface still showing `- [ ] ` as
markup: cards rendered and ticked checkboxes, the editor did not.

Same shape as Android, deliberately. notes/blocks.ts mirrors EditorBlock.kt —
splitBlocks, joinBlocks, afterEnter, withoutIndex, plusTask — because the two
editors should behave alike and the cheapest way to keep them that way is for the
code to read alike. `body` becomes a computed over the blocks, so every save,
baseline check and draft still reads the one markdown string they always did.

markdown.ts now exports parseTaskLine and renderTaskLine, and parseMarkdown uses
the former. The read view and the editor's block split had been matching the same
grammar through two separate copies of one regex; now they agree by construction.

Two places the web can do better than Compose, and does:

  * Backspace at the start of an empty item removes it. A browser sends a real
    keydown for Backspace; an Android soft keyboard sends an IME delete that never
    surfaces as one, which is why that surface only has Enter-on-empty.
  * Prose fields size to their text — rows="1" plus a scrollHeight fit, which beats
    guessing a row count that is wrong the moment a line wraps.

KNOWN, and the same on both surfaces: typing `- [ ] ` by hand into a prose block
leaves it prose until the note is reopened. Blocks are split when the editor loads,
not re-derived per keystroke — re-splitting mid-type would move the caret. The
toolbar button is the intended path. Converting on blur would fix it and is worth
doing to BOTH editors at once rather than letting them drift.

frontend/src/notes/blocks.ts

@@ -0,0 +1,110 @@
+// The editor's shape for a note body: a list of blocks rather than one string.
+//
+// The note is still one markdown body underneath (M304) — this is a rendering and
+// input shape, and nothing below the editor can tell it exists. `joinBlocks` puts the
+// string back together on every edit, and for a body already in canonical form it
+// returns exactly what `splitBlocks` was handed.
+//
+// Why blocks at all: a checklist item has to be a real `<input type="checkbox">`, and
+// a widget cannot live inside a `<textarea>`. Only a `contenteditable` could hold one,
+// and that is a different editor with a different set of problems.
+//
+// A run of prose lines is ONE block, not one per line. Typing a paragraph has to feel
+// like typing a paragraph, and a separate field under every sentence would break the
+// caret mid-sentence. Only a checklist item earns a block, because only a checklist
+// item needs a widget.
+//
+// The mirror of android/.../ui/EditorBlock.kt, deliberately: the two editors should
+// behave the same, and the cheapest way to keep them that way is for the shapes to
+// read alike.
+
+import { parseTaskLine, renderTaskLine } from "./markdown";
+
+export interface EditorBlock {
+  /** Stable across edits, so Vue keeps a field's caret when a block is inserted above
+   *  it. Content cannot serve as the key — two empty items are identical and neither
+   *  is the other. */
+  id: number;
+  text: string;
+  /** null for prose; ticked-or-not for a checklist item. */
+  checked: boolean | null;
+}
+
+/** Split a body into blocks, numbering them from `firstId`. */
+export function splitBlocks(body: string, firstId = 0): EditorBlock[] {
+  const out: EditorBlock[] = [];
+  const prose: string[] = [];
+  let id = firstId;
+
+  const flushProse = () => {
+    if (prose.length) {
+      out.push({ id: id++, text: prose.join("\n"), checked: null });
+      prose.length = 0;
+    }
+  };
+
+  for (const line of (body ?? "").split("\n")) {
+    const task = parseTaskLine(line);
+    if (task) {
+      flushProse();
+      out.push({ id: id++, text: task.text, checked: task.checked });
+    } else {
+      prose.push(line);
+    }
+  }
+  flushProse();
+
+  // Never empty: an empty note still needs one field to type into.
+  return out.length ? out : [{ id, text: "", checked: null }];
+}
+
+/** The body those blocks stand for. */
+export function joinBlocks(blocks: EditorBlock[]): string {
+  return blocks.map((b) => (b.checked === null ? b.text : renderTaskLine(b.text, b.checked))).join("\n");
+}
+
+/** An id nothing else is using. Monotonic within a session, which is all it has to be. */
+export function nextId(blocks: EditorBlock[]): number {
+  return blocks.reduce((max, b) => Math.max(max, b.id), -1) + 1;
+}
+
+/**
+ * What Enter does on a checklist item, and which block should hold the caret after.
+ *
+ * On an item with words in it, a new empty item below. On an EMPTY one, the item
+ * becomes prose — which is how a list ENDS, and the only way to get a paragraph after
+ * one. Without that half a list is impossible to get out of.
+ *
+ * Appends rather than splitting at the caret: splitting an item in two is a rarity,
+ * and the caret is at the end for every ordinary use of that key.
+ */
+export function afterEnter(blocks: EditorBlock[], index: number): { blocks: EditorBlock[]; focus: number } {
+  const block = blocks[index];
+  const out = [...blocks];
+  if (!block.text.trim()) {
+    out[index] = { ...block, text: "", checked: null };
+    return { blocks: out, focus: block.id };
+  }
+  const id = nextId(blocks);
+  out.splice(index + 1, 0, { id, text: "", checked: false });
+  return { blocks: out, focus: id };
+}
+
+/**
+ * Drop a block, leaving at least one field to type into.
+ *
+ * Focus goes to the block above — or, when the first one was removed, to whichever
+ * takes its place. `index - 1` alone is -1 there, which would leave nothing focused.
+ */
+export function withoutIndex(blocks: EditorBlock[], index: number): { blocks: EditorBlock[]; focus: number | null } {
+  const kept = blocks.filter((_, i) => i !== index);
+  const fallback: EditorBlock[] = [{ id: nextId(blocks), text: "", checked: null }];
+  const remaining = kept.length ? kept : fallback;
+  return { blocks: remaining, focus: remaining[Math.max(0, index - 1)]?.id ?? null };
+}
+
+/** One more empty checklist item at the end, and the id to put the caret in. */
+export function plusTask(blocks: EditorBlock[]): { blocks: EditorBlock[]; focus: number } {
+  const id = nextId(blocks);
+  return { blocks: [...blocks, { id, text: "", checked: false }], focus: id };
+}

frontend/src/notes/markdown.ts

@@ -66,6 +66,27 @@ export function parseInline(text: string): InlineToken[] {
 // which is at least consistent.
 const TASK_RE = /^\s*[-*] +\[([ xX])\](?: +(.*))?$/;
 
+export interface TaskLine {
+  checked: boolean;
+  text: string;
+}
+
+/** One task line's parts, or null when the line is prose.
+ *
+ *  Exported so the EDITOR's block split (notes/blocks.ts) and this read-view parser
+ *  agree by construction rather than by comment. One grammar, one matcher. */
+export function parseTaskLine(line: string): TaskLine | null {
+  const m = TASK_RE.exec(line);
+  return m ? { checked: m[1] !== " ", text: m[2] ?? "" } : null;
+}
+
+/** One item as the body line that stores it, in canonical form — `- [x] `, lowercase,
+ *  and no trailing space when the item is empty so a round trip does not grow it. */
+export function renderTaskLine(text: string, checked: boolean): string {
+  const mark = checked ? "x" : " ";
+  return text ? `- [${mark}] ${text}` : `- [${mark}]`;
+}
+
 export function parseMarkdown(text: string): Block[] {
   const lines = (text ?? "").split("\n");
   const blocks: Block[] = [];
@@ -124,15 +145,15 @@ export function parseMarkdown(text: string): Block[] {
     // Task list, BEFORE the plain bullet below — which would otherwise swallow
     // `- [ ] x` as an ordinary list item and leave the brackets showing. Same
     // ordering reason as `code` being matched before emphasis in INLINE_RE.
-    if (TASK_RE.test(line)) {
+    if (parseTaskLine(line)) {
       flushPara();
       const items: InlineToken[][] = [];
       const tasks: TaskMeta[] = [];
       while (i < lines.length) {
-        const m = TASK_RE.exec(lines[i]);
-        if (!m) break;
-        items.push(parseInline(m[2] ?? ""));
-        tasks.push({ index: taskIndex, checked: m[1] !== " " });
+        const task = parseTaskLine(lines[i]);
+        if (!task) break;
+        items.push(parseInline(task.text));
+        tasks.push({ index: taskIndex, checked: task.checked });
         taskIndex++;
         i++;
       }