kandev/docs/plans/plan-bubble-menu-transaction-loop/task-01-stop-bubble-menu-transaction-loop.md

id, title, status, wave, depends_on, plan, requirements, acceptance_criteria, system_design

id	title	status	wave	depends_on	plan	requirements	acceptance_criteria	system_design
01-stop-bubble-menu-transaction-loop	Stop the BubbleMenu transaction loop	done	1		plan.md	REQ-UI-RESPONSIVE-PLAN-FORMATTING-001	AC-UI-RESPONSIVE-PLAN-FORMATTING-001.1 AC-UI-RESPONSIVE-PLAN-FORMATTING-001.2	../../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

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.