Enable drag-and-drop for visual editing sections#607
Open
Conversation
Add data-sanity attributes and optimistic state to support drag-and-drop reordering of array-based sections in Sanity's Presentation tool. - Create SectionsRenderer component with useOptimistic for instant reorder feedback and createDataAttribute for drag-and-drop overlays - Add dataSanity prop to CmsSection/SectionWrapper for section-level data-sanity attributes - Update page, product, and collection routes to use SectionsRenderer
Contributor
|
Oxygen deployed a preview of your
Learn more about Hydrogen's GitHub integration. |
- Guard useOptimistic reducer with action.id === documentId to prevent cross-document mutation corruption - Add className="contents" to wrapper div to preserve gap-y spacing from parent main element's flex layout
The raw document from useOptimistic actions contains unresolved
portable text fields ({_key, _type, value} objects) that crash React
when rendered. Use the reconciliation pattern from Sanity docs: apply
the new order from the mutation but keep the GROQ-projected data from
the current state by matching on _key.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
SectionsRenderercomponent that wraps sections rendering with drag-and-drop support for Sanity's Presentation tooluseOptimisticfrom@sanity/visual-editing/reactfor instant reorder feedback when dragging sectionscreateDataAttributewith.scope()to generatedata-sanityattributes on both the parent container and individual section wrappersdataSanityprop toCmsSection/SectionWrapperto applydata-sanityon<section>elementsSectionsRendererAll attributes are only applied when
sanityPreviewModeis active — no impact on production rendering.Test plan
pnpm typecheck— passespnpm build— passes