Skip to content

feat(cms-sections): variant drag-and-drop reorder + variant-aware preview#4173

Open
aka-sacci-ccr wants to merge 1 commit into
mainfrom
aka-sacci-ccr/variants-drag-drop-preview
Open

feat(cms-sections): variant drag-and-drop reorder + variant-aware preview#4173
aka-sacci-ccr wants to merge 1 commit into
mainfrom
aka-sacci-ccr/variants-drag-drop-preview

Conversation

@aka-sacci-ccr

@aka-sacci-ccr aka-sacci-ccr commented Jun 26, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Drag-and-drop reorder for variants. Both section variants (SectionVariantList) and page variants (PageVariantTabs) are now reorderable via dnd-kit, with a new reorderMultivariateSectionVariant op and onReorder handlers that follow the moved/selected variant. Order is semantically meaningful (deco renders the first matching variant), so this lets users control precedence.
  • Variant-aware preview. Clicking a variant forces the preview iframe to render that exact variant through the deco runtime's x-deco-matchers-override query param. New pure, unit-tested helper variant-matcher-override.ts builds the override ids for inline matchers (dotted resolve-chain path, incl. the .section segment for Lazy-wrapped sections and page-variant nesting) and saved matcher blocks (resolveType).
  • Only on explicit click. Entering/auto-selecting a section no longer re-navigates the iframe — the override is applied solely when the user clicks a variant row (or a page-variant tab).
  • Scroll preservation. The injected CMS script persists the preview scroll to sessionStorage and restores it (with retries to outlast re-hydration) across the override navigation and the post-save reload, so the preview no longer jumps to the top.

Files

  • section-variants.ts (+ test): reorderMultivariateSectionVariant
  • section-variant-list.tsx: dnd-kit sortable list
  • sections-editor.tsx: reorder handlers, gated syncVariantPreviewOverride, page-variant override wiring
  • variant-matcher-override.ts (+ test): override-id/param builders
  • sandbox/preview/preview.tsx + cms-editor-script.ts: apply override to iframe src, scroll persistence

Test plan

  • Section with ≥2 variants: drag to reorder; order persists after reload; click still selects; duplicate/delete still work.
  • Clicking a variant flips the rendered variant in the iframe; entering a section does not reload.
  • Page variant tabs: select/reorder updates the preview.
  • Scroll down, switch/reorder a variant → preview stays put (no jump to top).
  • bun run check, bun run lint, bun run fmt:check, bun test for the touched units.

Made with Cursor


Summary by cubic

Adds drag‑and‑drop reordering for section and page variants, and makes the preview render the exact variant you click using matcher overrides, with scroll preserved during reloads.

  • New Features
    • Reorder section variants and page variant tabs via @dnd-kit/* with a new onReorder handler; selection follows the moved item.
    • New reorderMultivariateSectionVariant op to persist variant order.
    • Clicking a variant forces the iframe to that variant using x-deco-matchers-override; helpers buildSectionVariantOverrideParams, buildPageVariantOverrideParams, and withVariantMatcherOverride (unit‑tested).
    • Overrides trigger only on explicit clicks; entering/auto‑selecting a section no longer navigates the preview.
    • CMS script preserves preview scroll across override navigations and post‑save reloads (sessionStorage + retried restore); iframe reloads avoid focus steal.

Written for commit c418a4b. Summary will update on new commits.

Review in cubic

…view

- Reorder section and page variants via dnd-kit
- Force the preview to render the selected variant through the deco runtime's
  x-deco-matchers-override (section + page level), only on explicit variant click
- Preserve preview scroll across override navigations/save-reloads via the
  injected CMS script (sessionStorage + retried restore)

Co-authored-by: Cursor <cursoragent@cursor.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant