Stop inline backgroundColor from hiding the selection layer by hackerwins · Pull Request #181 · wafflebase/wafflebase

hackerwins · 2026-05-03T13:47:06Z

Summary

When a text run carries style.backgroundColor (Word/Docs-style
"highlight"), the local selection, search match, and peer-cursor
highlights were all but invisible inside the colored span. Root cause
was the render order in DocCanvas.render: the translucent highlight
layers were drawn first, then renderRun painted the opaque inline
backgroundColor fillRect on top of them.

Tables had already solved the analogous issue for cell backgrounds by
splitting into renderTableBackgrounds (pre-selection) and
renderTableContent (post-selection). This PR extends that pattern to
inline run backgrounds.

DocCanvas.drawInlineRunBackgrounds walks the body's PageLines once
right after the table-cell-background pass and paints every run's
style.backgroundColor. renderRun gets a skipBackground flag so
the body path doesn't double-paint.
renderTableBackgrounds now also walks each cell's lines × runs for
inline backgrounds. A new computeCellLineAbsoluteYs helper shares
the verticalAlign / merged-cell line-Y math with
renderTableContent, which now skips the inline bg fill.
Header/footer paths keep skipBackground=false and continue to draw
bg inside renderRun — they don't share the body's two-pass pipeline
yet (noted as follow-up in the task todo).

Test plan

pnpm verify:fast (44 docs files / 739 tests passed)
New regression tests in
packages/docs/test/view/table-renderer.test.ts:
- renderTableBackgrounds paints inline run bg in the
background pass
- renderTableContent no longer paints inline run bg
Manual: type into a paragraph, give it a yellow highlight,
drag-select across it, confirm the blue selection band is
visible over the yellow

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

Bug Fixes
- Improved visibility of text selections and search highlights when styled text has background colors applied.
Tests
- Added test coverage for background color rendering in table cells.
Documentation
- Documented rendering layer ordering to address background color overlap with selection highlights.

The translucent local-selection, search, and peer-cursor highlights were drawn before each run's text, but `renderRun` then painted the opaque `style.backgroundColor` fillRect on top of them — so the blue selection band became invisible inside any colored span. Tables had already split cell backgrounds into a pre-pass to avoid the same issue; this commit extends that pattern to inline run backgrounds. `DocCanvas.drawInlineRunBackgrounds` walks the body's PageLines once right after the table-cell-background pass and paints every run's `style.backgroundColor`. `renderRun` gets a `skipBackground` flag so the body path doesn't double-paint; header/footer paths keep `skipBackground=false` since they don't share the body's two-pass pipeline. Inside tables, `renderTableBackgrounds` now also walks each cell's lines × runs for inline backgrounds, sharing the verticalAlign / merged-cell line-Y math with `renderTableContent` through a new `computeCellLineAbsoluteYs` helper. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

coderabbitai · 2026-05-03T13:47:17Z

Warning

Rate limit exceeded

@hackerwins has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 55 minutes and 11 seconds before requesting another review.

To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: de9d3a3f-4a18-4513-a397-89f194cbb38a

📥 Commits

Reviewing files that changed from the base of the PR and between e6e1836 and 7f41048.

📒 Files selected for processing (3)

docs/tasks/README.md
docs/tasks/archive/2026/05/20260503-docs-paragraph-bg-selection-todo.md
docs/tasks/archive/README.md

📝 Walkthrough

Walkthrough

This PR fixes a rendering bug where inline text-run background colors obscure selection and highlight layers. The solution adds a dedicated pre-pass that paints inline run backgrounds before highlights, skips redundant background painting in the content pass, and refactors table rendering to compute per-line absolute Y coordinates and paint inline backgrounds during the background pre-pass instead of content rendering.

Changes

Background Rendering Reordering

Layer / File(s)	Summary
Problem Documentation `docs/tasks/active/20260503-docs-paragraph-bg-selection-todo.md`	Documents the selection-invisibility bug caused by inline `backgroundColor` painting order, outlines the fix (pre-pass before highlights), and lists test coverage and risks (header/footer, image-run skipping).
Core Rendering Pre-pass `packages/docs/src/view/doc-canvas.ts`	Introduces `drawInlineRunBackgrounds()` method executed after table-cell backgrounds and before highlights. Adds `skipBackground` flag to `renderRun()` to prevent double-painting of inline backgrounds in the main content pass.
Table Integration `packages/docs/src/view/table-renderer.ts`	Adds `computeCellLineAbsoluteYs()` helper to compute per-line absolute Y coordinates with vertical-alignment logic; refactors `renderTableBackgrounds()` to paint inline run backgrounds using computed coordinates; removes inline background painting from `renderTableContent()`.
Test Coverage `packages/docs/test/view/table-renderer.test.ts`	New test suite verifies inline `backgroundColor` fills are drawn exclusively during `renderTableBackgrounds` pre-pass with correct coordinates, and not repainted during `renderTableContent()`.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Add word-processor-style pagination to docs editor #59: Modifies doc-canvas rendering order and per-run background/selection painting pipeline behavior (renderRun changes).
Fix image inline bugs in docs editor #123: Changes table-renderer and doc-canvas rendering paths to refactor how inline backgrounds and selection are painted across background vs. content passes.

Poem

🐰 Backgrounds were hiding the selection light,
So we drew them early, before highlights bright!
Now inline runs shine where they should be,
Pre-pass magic sets the selections free! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and concisely summarizes the main change: moving inline backgroundColor rendering to prevent it from obscuring the selection layer.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/docs-inline-bg-selection-visibility

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Review rate limit: 0/1 reviews remaining, refill in 55 minutes and 11 seconds.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

The fix shipped in this branch (#181). Move the todo from active to the May 2026 archive bucket and refresh the task index READMEs. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

github-actions · 2026-05-03T13:51:03Z

Verification: verify:self

Result: ✅ PASS in 133.2s

Lane	Status	Duration
sheets:build	✅ pass	14.0s
docs:build	✅ pass	12.2s
verify:fast	✅ pass	66.8s
frontend:build	✅ pass	17.5s
verify:frontend:chunks	✅ pass	0.3s
backend:build	✅ pass	4.8s
cli:build	✅ pass	1.8s
verify:entropy	✅ pass	15.8s

Verification: verify:integration

Result: ✅ PASS

codecov · 2026-05-03T13:55:31Z

Codecov Report

❌ Patch coverage is 39.28571% with 68 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
packages/docs/src/view/doc-canvas.ts	0.00%	38 Missing ⚠️
packages/docs/src/view/table-renderer.ts	59.45%	30 Missing ⚠️

📢 Thoughts on this report? Let us know!

Archive docs paragraph-bg-selection task

7f41048

The fix shipped in this branch (#181). Move the todo from active to the May 2026 archive bucket and refresh the task index READMEs. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

hackerwins merged commit 4b8f98d into main May 3, 2026
1 check passed

hackerwins deleted the fix/docs-inline-bg-selection-visibility branch May 3, 2026 13:51

This was referenced May 7, 2026

Add @wafflebase/slides package - Phase 1-5a + UI chrome #190

Merged

Add themed authoring for slides (5 themes, 11 layouts, pickers) #191

Merged

coderabbitai Bot mentioned this pull request Jul 21, 2026

Align mixed-size text runs on a common baseline #507

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Stop inline backgroundColor from hiding the selection layer#181

Stop inline backgroundColor from hiding the selection layer#181
hackerwins merged 2 commits into
mainfrom
fix/docs-inline-bg-selection-visibility

hackerwins commented May 3, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 3, 2026 •

edited

Loading

Rate limit exceeded

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

github-actions Bot commented May 3, 2026 •

edited

Loading

Uh oh!

Uh oh!

codecov Bot commented May 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

hackerwins commented May 3, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Summary by CodeRabbit

Release Notes

Uh oh!

coderabbitai Bot commented May 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rate limit exceeded

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

github-actions Bot commented May 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Verification: verify:self

Verification: verify:integration

Uh oh!

Uh oh!

codecov Bot commented May 3, 2026

Codecov Report

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

hackerwins commented May 3, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 3, 2026 •

edited

Loading

github-actions Bot commented May 3, 2026 •

edited

Loading