Add a compact text style selector to Content

[3mdistal]

Problem

The Content selection toolbar exposed four permanent H1-H4 buttons but no way to return selected text to regular body text. The four controls also consumed a disproportionate amount of the compact toolbar.

Approach

• Replace the four heading buttons with one labeled selector that reflects the current block style.
• Offer Text and exact H1-H4 choices in a compact accessible menu, with the active choice checked.
• Preserve the selected editor range while the menu has focus so pointer and keyboard choices apply immediately and current-style choices remain idempotent.
• Preserve compatibility with existing H5/H6 blocks: the trigger identifies their actual style and Text converts them back to body text, while H5/H6 remain intentionally absent from the new menu.
• Keep the rest of the formatting toolbar unchanged. Highlight colors are intentionally outside this PR.

Matched visual evidence

Before

Route: http://127.0.0.1:3317/page/j4a5KAEDBHXY
Viewport: 1496 x 846, desktop Chrome
Fixture: disposable local account toolbar-demo@example.com; page Toolbar comparison; paragraph Select this sentence to compare the formatting toolbar.
State: Personal expanded, agent panel closed, full paragraph selected, formatting bubble open, no submenu.

After

Route: http://127.0.0.1:3317/page/vDisteHisXMq
Viewport: 1496 x 846, desktop Chrome
Fixture: same account, page title, paragraph, sidebar state, and agent-panel state. The route differs because the isolated worktree uses its own disposable local fixture database.
State: full paragraph selected, formatting bubble open, Text selector expanded, Text checked, H1-H4 visible.

The matched captures and their reproduction notes are retained in templates/content/docs/solutions/evidence/content-text-selector/.

Verification

• pnpm --filter content exec vitest --run app/components/editor/BubbleToolbar.test.tsx — 8 tests passed, including existing H5/H6 identification and conversion plus a live paragraph-to-H5 transition
• pnpm --filter content typecheck — passed
• pnpm --filter content build — passed; existing non-blocking doctor findings remain
• pnpm guards — all checks passed
• Alice manually exercised the selector in the local Content UI with the final code state and accepted the tested behavior
• Earlier independent browser QA covered pointer conversion, keyboard open/dismiss/selection, idempotent Text, accessibility semantics, clean console, and fixture restoration; the compatibility repair is additionally covered by the exact-head focused tests above

Safety and review focus

• No data model, API, migration, permission, feature-flag, or deployment changes.
• Rollback is limited to the toolbar component, its focused tests, the changelog entry, and visual evidence.
• Please focus review on menu focus/selection preservation, pointer and keyboard behavior, H5/H6 compatibility, and the compact toolbar layout.

Visual-review handoff

Steve's current guidance is to share screenshots of prominent UX changes asynchronously in #dev-agent-native; it explicitly does not need to block shipping. Guidance thread: https://builder-internal.slack.com/archives/C0AKU9QD539/p1784744132830489?thread_ts=1784744132.830489&cid=C0AKU9QD539

Original selector/highlight feedback: https://builder-internal.slack.com/archives/C0ATH3CCZT4/p1785450194911999

This PR prepares the evidence for that later review. It does not claim Slack visual approval, and it does not include the separate Notion-style highlight-color work or the later H5/H6-disable idea.

content_product_impact:
  lane: local_refinement
  features:
    - content.feature.durable-foundations
  capabilities:
    - content.author.document-editor
  record_change: none
  proof:
    - pnpm --filter content exec vitest --run app/components/editor/BubbleToolbar.test.tsx
  rationale: The change refines the existing editor toolbar without changing the document-editor contract.

[github-actions]

Here's a visual recap of what changed:

Open the full interactive recap

[builder-io-integration]

Builder reviewed your changes and has a few items to flag 🟡

Review Details

Incremental Code Review Summary

The latest commit addresses the previous H5/H6 compatibility issue: the selector now detects all supported heading levels, shows H5/H6 in the trigger, converts them to Text, and intentionally keeps only Text/H1–H4 in the menu. The focused tests were expanded to cover H5/H6 conversion and a live paragraph-to-H5 transition. The change remains low risk overall because it is confined to Content editor UI, tests, changelog metadata, and visual evidence.

Key Findings

Medium: Escape dismissal suppresses Popover close autofocus unconditionally. When the focused menu closes via Escape, focus is not restored to the trigger or editor, so the bubble can disappear and the user must click back into the document before continuing.

Medium: A mixed selection spanning a paragraph and heading is classified as paragraph by editor.isActive, so selecting Text takes the no-op path and leaves any selected heading blocks unchanged. Text should apply paragraph conversion unconditionally to the selected blocks.

The H5/H6 repair itself is sound, and the pointer/keyboard selection logic and accessibility roles remain consistent with the intended design. Browser verification was attempted against the healthy dev server, but all executor retries lacked browser interaction tools.

🧪 Browser testing: Skipped — browser executor tooling was unavailable after retries; all planned cases were reported as unable to verify.