fix: do not allow dragging if gallery has max images #1479
Conversation
WalkthroughThe pull request modifies the gallery reordering functionality by updating the parameter order of the Assessment against linked issues
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
packages/koenig-lexical/src/hooks/useGalleryReorder.jsOops! Something went wrong! :( ESLint: 8.57.0 ESLint couldn't find the config "react-app" to extend from. Please check that the name of the config is correct. The config "react-app" was referenced from the config file in "/packages/koenig-lexical/.eslintrc.cjs". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. packages/koenig-lexical/src/nodes/GalleryNodeComponent.jsxOops! Something went wrong! :( ESLint: 8.57.0 ESLint couldn't find the config "react-app" to extend from. Please check that the name of the config is correct. The config "react-app" was referenced from the config file in "/packages/koenig-lexical/.eslintrc.cjs". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
im-adithya
force-pushed
the
fix/gallery-max-images
branch
from
3220653 to
d13e164
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/koenig-lexical/src/hooks/useGalleryReorder.js (2)
6-6: Parameter order change looks good, but consider using a different patternThe parameter reordering ensures callers must explicitly provide
maxImagesnow. This helps enforce the gallery's image limit consistently. However, changing the order of parameters in established APIs can be risky if all call sites aren't updated.As an alternative pattern, you could consider keeping the parameter order but making it required:
-export default function useGalleryReorder({images, updateImages, maxImages, isSelected = false, disabled = false}) { +export default function useGalleryReorder({images, updateImages, isSelected = false, disabled = false, maxImages}) {Or use early validation:
if (maxImages === undefined) { throw new Error('maxImages is required for useGalleryReorder'); }
20-20: Use optional chaining to prevent potential null referenceThere's a potential null reference error if
containerRefis null when checkingcontainerRef.contains().- const isInternal = containerRef && containerRef.contains(draggableInfo.element); + const isInternal = containerRef?.contains(draggableInfo.element);🧰 Tools
🪛 Biome (1.9.4)
[error] 20-20: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/koenig-lexical/src/hooks/useGalleryReorder.js(2 hunks)packages/koenig-lexical/src/nodes/GalleryNodeComponent.jsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/koenig-lexical/src/nodes/GalleryNodeComponent.jsx
🧰 Additional context used
🪛 Biome (1.9.4)
packages/koenig-lexical/src/hooks/useGalleryReorder.js
[error] 20-20: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (1)
packages/koenig-lexical/src/hooks/useGalleryReorder.js (1)
17-25: Good improvement to gallery drag behaviorThis change successfully prevents the green drop indicator from appearing when the gallery is full, which was the main goal of issue #22054. The logic now correctly allows dragging only when:
- There's still room for more images OR
- The drag is internal (rearranging existing images)
This provides better visual feedback to users by not showing the drop indicator when the action isn't allowed.
🧰 Tools
🪛 Biome (1.9.4)
[error] 20-20: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
|
@9larsons can you please have a look :D |
Fixes TryGhost/Ghost#22054
The problem is that we neither disable dragging nor check for
maxImagesinonDrop. I thought of showing an error message as per @9larsons' comment but I noticed that if we populate a gallery from the start with 9 images and then try to drag an image inside, it doesn't even show the green line which imo is good feedback to the user. So I did the same here to not show the green line anymore once gallery hits 9 images (rather than showing the green line first and then showing an error message which feels like a bad UX)Edit: I first disabled drag for all cases when
images.length === maxImagesbut that also stops reordering, fixed it now!