Fix page editor alignment: checkboxes, bullets, drag handles + heading rhythm - #285
Merged
Conversation
…rag-handle alignment Empirically measured the seeded "Sample Page – All Block Types" in the running web app (getBoundingClientRect, computed styles, annotated screenshots) and documented four alignment issues with root causes and a surgical fix set: - Drag handle overlaps list bullets/checkboxes (~18px) — anchors to the inner list-item <p>, not the outer block; recommend a fixed-gutter anchor. - Drag handle ~3px low vertically — fixed padding-top; recommend first-line (lh) centering. - Unchecked tasks render checked — blue fill keys off input:checked (desynced DOM property) instead of li[data-checked]; recommend styling from data-checked. - Heading vertical rhythm bypassed — React node views wrapped in .react-renderer escape the 0198 rhythm direct-child selectors; recommend piercing wrappers with :has() and one consolidated heading scale. Horizontal list alignment (bullet/number/to-do share one edge) is already good. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ng scale - Drag handle: anchor X to the editor content-left (constant gutter) instead of the matched block's left edge, so it no longer lands on list bullets / to-do checkboxes; centre the button on the block's first *rendered* line (via a Range, robust to inner list-item paragraph margins) at any size; and resolve the top-level block (depth 1) so a list drags as a whole. - Checkbox: key the fill + checkmark off the authoritative li[data-checked] rather than the input's :checked DOM property, which can desync from the node and render unchecked tasks as filled. - Task pipeline: coerce a string `checked` attr (e.g. "false", which is truthy) to a real boolean and self-heal the node, fixing both the checkbox and the completion mirror. - Headings: editor.css `.ProseMirror h1..h6` is now the single source of the heading scale (size/weight/line-height/margins, leading on all 6 levels); HeadingView drops its duplicate/conflicting classes. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Heading rhythm now pierces the React node-view `.react-renderer` wrappers via :has(), so the "space precedes headings" rule fires uniformly across levels, and the node view's legacy heading margins are neutralised. - To-do checkbox: rounded-square radius (reads as a checkbox, not a dot) and a corrected optical nudge that centres the box on the first line within ~1px. - Narrow the reading measure (max-w-[44rem]) toward ~70ch. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…lse"
Yjs attributes are strings and the editor reads any non-empty string as
truthy, so `setAttribute('checked', String(false))` rendered seeded unchecked
to-dos as checked. Only set the attribute when checked is true; absent means
the schema's boolean false default.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ox drag handle alignment Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
🖼️ UI changes in this PRInteractionsAuto-captured by CI · run. Informational — not a blocking check. |
Contributor
|
Preview removed for PR #285. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implements exploration 0231 — dials in the page/document editor's typography and fixes the alignment of bullets, checkboxes, and drag handles. Every fix was measured live in the running app (
getBoundingClientRect, computed styles, screenshots).What was broken (measured)
input.checkeddesynced from node stateHow
DragHandle.ts): anchor X to the editor content-left (constant gutter) not the matched block's edge; centre the button on the block's first rendered line via a Range (robust to inner list-item<p>margins); resolve the top-level block (depth 1) so a list drags as a whole.li[data-checked]instead of the input's:checkedDOM property; coerce a stringcheckedattr ("false"is truthy!) to a real boolean in the task pipeline; fix the seed that wroteString(false).globals.css): pierce the React node-view.react-rendererwrappers with:has()so "space precedes headings" fires uniformly; neutralise the node view's legacy margins.editor.css(.ProseMirror h1..h6);HeadingViewdrops its duplicate/conflicting classes.Scope / notes
@xnetjs/editorand@xnetjs/devtoolsare private → no changeset needed (coverage passes). Page-specific fixes are scoped to.page-prose; the baseeditor.csschanges (checkbox state, drag-handle centring, heading leading) intentionally apply to every editor surface.🤖 Generated with Claude Code