Carlos Florêncio
100 lines
3.4 KiB
Markdown
100 lines
3.4 KiB
Markdown
---
|
|
id: "01-stop-bubble-menu-transaction-loop"
|
|
title: "Stop the BubbleMenu transaction loop"
|
|
status: done
|
|
wave: 1
|
|
depends_on: []
|
|
plan: "plan.md"
|
|
requirements:
|
|
- REQ-UI-RESPONSIVE-PLAN-FORMATTING-001
|
|
acceptance_criteria:
|
|
- AC-UI-RESPONSIVE-PLAN-FORMATTING-001.1
|
|
- AC-UI-RESPONSIVE-PLAN-FORMATTING-001.2
|
|
system_design:
|
|
- ../../specs/ui/system-design/responsive-plan-formatting.md
|
|
---
|
|
|
|
# Task 01: Stop the BubbleMenu Transaction Loop
|
|
|
|
## Summary
|
|
|
|
Make the desktop BubbleMenu inputs stable and deduplicate the reactive editor
|
|
snapshot. Add a focused regression that models Tiptap's option-update
|
|
transaction and proves that the component settles.
|
|
|
|
## In scope
|
|
|
|
- Add the failing transaction-loop regression before production changes.
|
|
- Keep the desktop BubbleMenu placement options referentially stable.
|
|
- Compare all `EditorSnapshot` fields before publishing state.
|
|
- Keep focus, selection, code-block, and active-mark changes reactive.
|
|
- Run the existing mobile formatting scenario after the focused checks pass.
|
|
|
|
## Out of scope
|
|
|
|
- Change rendered layout, action order, touch targets, or keyboard geometry.
|
|
- Change Plan content, comments, autosave, or revisions.
|
|
- Change Tiptap or ProseMirror package code.
|
|
- Add a new browser performance harness.
|
|
|
|
## Acceptance
|
|
|
|
- The regression fails before production changes because BubbleMenu option
|
|
updates cause repeated editor transactions.
|
|
- The corrected component settles after one option update when the editor
|
|
snapshot is unchanged.
|
|
- Real focus, selection, code-block, and active-mark changes still update the
|
|
formatting controls.
|
|
|
|
## Verification
|
|
|
|
```bash
|
|
cd apps/web
|
|
pnpm exec vitest run components/editors/tiptap/plan-bubble-menu.test.tsx
|
|
pnpm run typecheck
|
|
pnpm exec eslint components/editors/tiptap/plan-bubble-menu.tsx components/editors/tiptap/plan-bubble-menu.test.tsx
|
|
pnpm e2e:run --project mobile-chrome tests/task/mobile-plan-formatting-toolbar.spec.ts
|
|
```
|
|
|
|
## Files likely touched
|
|
|
|
- `apps/web/components/editors/tiptap/plan-bubble-menu.tsx`
|
|
- `apps/web/components/editors/tiptap/plan-bubble-menu.test.tsx`
|
|
- `docs/plans/plan-bubble-menu-transaction-loop/plan.md`
|
|
- `docs/plans/plan-bubble-menu-transaction-loop/task-01-stop-bubble-menu-transaction-loop.md`
|
|
|
|
## Dependencies
|
|
|
|
None.
|
|
|
|
## Risks
|
|
|
|
- The test fake must model the Tiptap options effect without creating an
|
|
unbounded test loop.
|
|
- The snapshot comparison must include every field in `EditorSnapshot`.
|
|
|
|
## Parallelism
|
|
|
|
`sequential`
|
|
|
|
## Inputs
|
|
|
|
- `REQ-UI-RESPONSIVE-PLAN-FORMATTING-001` acceptance criteria `.1` and `.2`.
|
|
- `docs/specs/ui/system-design/responsive-plan-formatting.md`.
|
|
- The performance trace attached to the investigation task.
|
|
- Tiptap BubbleMenu's option-update effect in `@tiptap/react`.
|
|
- Existing PlanBubbleMenu component tests and the mobile formatting E2E.
|
|
|
|
## Results
|
|
|
|
- Added a controlled BubbleMenu fake that reproduces repeated option-update
|
|
transactions and fails before the fix.
|
|
- Stabilized the desktop BubbleMenu placement options at module scope.
|
|
- Deduplicated all `EditorSnapshot` fields before publishing React state.
|
|
- Extended the fake editor regression to verify active-mark button state and
|
|
mobile and desktop code-block visibility changes after transactions.
|
|
- Focused Vitest, typecheck, changed-file ESLint, and the existing mobile Plan
|
|
formatting E2E all pass.
|
|
- No mobile E2E change was needed because this internal normalization preserves
|
|
the existing mobile presentation; the existing scenario covers it.
|