Untangle the toolbar's direct calls into three side panels
Selecting a link makes the toolbar call the inspector, the inspector call the outline, and the outline call the toolbar again. A new panel added another circular dependency and occasional repeated selection updates.
- Focused work estimate
- 3h + prerequisites
- Priority in the scenario
- Medium
- Engineering practice
- State ownership · Dependency design · UI architecture
Estimated field mix
- Frontend60%
- System design40%
Field percentages are editorial estimates of the ticket's engineering focus. They total 100%; they are not measured time, proficiency scores, or ownership evidence.
Pattern topics
- MediatorCompare
Compare a document-scoped coordinator with reducer state to remove circular panel calls without creating a central object that owns every editor feature.
Review it, then add it to your workspace.
The board opens an editable draft; nothing is saved until you confirm it. Sign-in and workspace permissions apply, and Demo boards remain ephemeral.
Project context
A fictional support team edits reusable troubleshooting documents with paragraphs, links, and nested sections. The browser prototype has separate toolbar and keyboard handlers, an unreliable undo stack, and mutable shared formatting objects. Create a local editor and synthetic documents; no starter assets, rich-text engine, collaborative backend, or production service is supplied.
Setup prerequisites
- Browser events
- Immutable updates
- Accessible form controls
Preceding work
Complete these dependencies, or supply their agreed outputs before taking this ticket.
Acceptance criteria
- Define one direction for selection intents and one authoritative logical selection state.
- Toolbar, inspector, and outline remain consistent without importing or invoking each other's component instances.
- Compare a document-scoped Mediator with reducer-driven state and callbacks; retain the simpler option that exposes event flow clearly.
Implementation constraints
- Do not move every unrelated editor concern into a central god object; keep document commands and formatting rules separately testable.
Verification to include
- Select a nested link from each panel and compare selection and enabled toolbar actions.
- Send the same selection intent twice and remove the selected node; assert bounded updates and a consistent empty selection.
Deliverables
- Interaction dependency refactor and selection-flow decision record
Rollout and recovery
Migrate the three selection participants together in the local editor; retain command behavior and shortcut bindings during the change.
Value of the work
For the engineer: Practice relating object and state patterns to real UI behavior, including undo semantics, bounded traversal, lifecycle cleanup, and memory tradeoffs.
For the team: Review whether editor changes preserve user work, keep controls consistent, and reduce maintenance effort without concealing document corruption.
Evidence boundaries
Outcome Evidence: Tests, patches, and runbooks are requested deliverables. They become Outcome Evidence only through a qualified Mission and immutable Evidence IDs.
Ownership Evidence: Independent adaptation must be observed under a declared verification policy and cite immutable Evidence IDs. Completing a planning ticket establishes no Ownership Evidence.