oficina / docs Public

Click the paper, get a caret — and no focus ring around it

Two things made the editor read as a text box sitting on a page
rather than as the page itself.

A click anywhere but on the prose did nothing. The editable node was
only ever as tall as its own text, so the page's 1in margin and the
empty space below the last line belonged to [docs-page] — not to
anything editable — and a click there landed on nothing. [docs-page]
is now a flex column with the editor as a grown child (flex: 1 0
auto), which hands the empty space below the last paragraph to
ProseMirror's own handling; the margins, which the editable node can
never reach into, are covered by placeCaretFromPage in
fixtures/editor-entry.js: it clamps the click's coordinates into the
editable node's rectangle and asks posAtCoords, so "beside the text"
resolves to the nearest end of the nearest line.

And the browser drew its default focus ring around the focused
contenteditable — a blue box tracing the text area of a sheet of
paper. [docs-editor]:focus now takes outline: none. That costs no
accessibility here and only here: the caret is a stronger,
always-visible focus indicator than the ring it replaces, which is
not true of the buttons and links in the chrome around it, and those
keep rastrillo's own focus styling untouched.

Verified in Chromium against ./scripts/run-dev.sh, signed in for
real: a click in the left margin puts the caret at offset 0 of the
block level with it; a click below the last line, and one in the
bottom margin, put it at the end of the last block; typing lands
there; and getComputedStyle reports outline-style none on the
focused editor. go test ./internal/... ./cmd/... and node --test
fixtures/*.test.mjs both pass. Bundle rebuilt (fixtures/
build-editor.mjs) — editor.2c8c082596237a4c.js.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017F61AU8zx7FcpF1zEPvMpp