diff --git a/packages/koenig-lexical/src/hooks/useGalleryReorder.js b/packages/koenig-lexical/src/hooks/useGalleryReorder.js index a6bfe47f6b..6ce4ac213b 100644 --- a/packages/koenig-lexical/src/hooks/useGalleryReorder.js +++ b/packages/koenig-lexical/src/hooks/useGalleryReorder.js @@ -3,7 +3,7 @@ import React from 'react'; import pick from 'lodash/pick'; import {getImageFilenameFromSrc} from '../utils/getImageFilenameFromSrc'; -export default function useGalleryReorder({images, updateImages, isSelected = false, maxImages = 9, disabled = false}) { +export default function useGalleryReorder({images, updateImages, maxImages, isSelected = false, disabled = false}) { const koenig = React.useContext(KoenigComposerContext); const [containerRef, setContainerRef] = React.useState(null); @@ -14,8 +14,14 @@ export default function useGalleryReorder({images, updateImages, isSelected = fa const onDragStart = (draggableInfo) => { // enable dropping when an image is dragged in from outside of this card const isImageDrag = draggableInfo.type === 'image' || draggableInfo.cardName === 'image'; - if (isImageDrag && draggableInfo.dataset.src && images.length !== maxImages) { + if (!isImageDrag || !draggableInfo.dataset.src) { + return; + } + const isInternal = containerRef && containerRef.contains(draggableInfo.element); + if (images.length < maxImages || isInternal) { dragDropContainer.current.enableDrag(); + } else { + dragDropContainer.current.disableDrag(); } }; diff --git a/packages/koenig-lexical/src/nodes/GalleryNodeComponent.jsx b/packages/koenig-lexical/src/nodes/GalleryNodeComponent.jsx index 21cfa6fb77..f75619fb1f 100644 --- a/packages/koenig-lexical/src/nodes/GalleryNodeComponent.jsx +++ b/packages/koenig-lexical/src/nodes/GalleryNodeComponent.jsx @@ -27,7 +27,7 @@ export function GalleryNodeComponent({nodeKey, captionEditor, captionEditorIniti return existingImages; }); - const galleryReorder = useGalleryReorder({images, updateImages: reorderImages, isSelected}); + const galleryReorder = useGalleryReorder({images, updateImages: reorderImages, maxImages: MAX_IMAGES, isSelected}); const imageUploader = fileUploader.useFileUpload('image'); const imageFilesDropper = useFileDragAndDrop({handleDrop: handleImageFilesDrop}); @@ -57,7 +57,7 @@ export function GalleryNodeComponent({nodeKey, captionEditor, captionEditorIniti const strippedFiles = Array.prototype.slice.call(files, 0, allowedCount); if (strippedFiles.length < files.length) { - setErrorMessage('Galleries are limited to 9 images'); + setErrorMessage(`Galleries are limited to ${MAX_IMAGES} images`); } if (strippedFiles.length === 0) {