From 8d73b2458cb425ff68848d6bc6e6b88c865e3539 Mon Sep 17 00:00:00 2001 From: Adolphus Okrah Date: Fri, 27 Sep 2024 10:37:05 +0200 Subject: [PATCH] fix: added allowedBlockids --- src/components/blocks/blog-content.tsx | 2 +- src/components/exposed-components/slot/index.tsx | 5 ++++- .../pages/page-content/components/bock-item.tsx | 4 ++++ .../pages/page-content/components/droppableItem.tsx | 10 ++++++++++ .../page-content/components/emptyPageDroppable.tsx | 9 +++++++++ 5 files changed, 28 insertions(+), 2 deletions(-) diff --git a/src/components/blocks/blog-content.tsx b/src/components/blocks/blog-content.tsx index 126f24a..40ba5e4 100644 --- a/src/components/blocks/blog-content.tsx +++ b/src/components/blocks/blog-content.tsx @@ -55,7 +55,7 @@ const BlogContent: Block = ({ content, pageBlockId = '', image /> )} /> - + ); diff --git a/src/components/exposed-components/slot/index.tsx b/src/components/exposed-components/slot/index.tsx index 856a426..a6aecab 100644 --- a/src/components/exposed-components/slot/index.tsx +++ b/src/components/exposed-components/slot/index.tsx @@ -12,8 +12,9 @@ type SlotProps = { className?: string; propName: string; pageBlockId: string; + allowedBlockIds?: string[]; }; -export default function Slot({ defaultValue, direction = 'vertical', className, propName, pageBlockId }: SlotProps) { +export default function Slot({ defaultValue, direction = 'vertical', className, propName, pageBlockId, allowedBlockIds }: SlotProps) { const { activePage } = usePageContent(); const { blocks: builderBlocks } = useProjectConfigurationState(); const { blocks: liveBlocks, globalBlocks } = usePageContentState(); @@ -26,6 +27,7 @@ export default function Slot({ defaultValue, direction = 'vertical', className, propName={propName} pageBlockId={pageBlockId} className="!visio-cms-h-full !visio-cms-min-h-[50px]" + allowedBlockIds={allowedBlockIds} /> ); } @@ -71,6 +73,7 @@ export default function Slot({ defaultValue, direction = 'vertical', className, index={index} pageBlock={pageBlock} pageBlocks={defaultValue} + allowedBlockIds={allowedBlockIds} /> ); })} diff --git a/src/components/pages/page-content/components/bock-item.tsx b/src/components/pages/page-content/components/bock-item.tsx index 954b1b1..31c9a2f 100644 --- a/src/components/pages/page-content/components/bock-item.tsx +++ b/src/components/pages/page-content/components/bock-item.tsx @@ -17,6 +17,7 @@ export default function BlockItem({ propName, parentBlockId, droppableDirection = 'vertical', + allowedBlockIds=[] }: { block: Block>; index: number; @@ -25,6 +26,7 @@ export default function BlockItem({ propName?: string; parentBlockId?: string; droppableDirection?: 'horizontal' | 'vertical'; + allowedBlockIds?: string[]; }) { const [isDraggingOver, setIsDraggingOver] = React.useState(false); const { globalBlocks } = usePageContentState(); @@ -80,6 +82,7 @@ export default function BlockItem({ showPlaceHolder={isDraggingOver} propName={propName} pageBlockId={parentBlockId} + allowedBlockIds={allowedBlockIds} /> {index + 1 == pageBlocks.length - 1 && ( )} diff --git a/src/components/pages/page-content/components/droppableItem.tsx b/src/components/pages/page-content/components/droppableItem.tsx index 32f13be..06e8c7b 100644 --- a/src/components/pages/page-content/components/droppableItem.tsx +++ b/src/components/pages/page-content/components/droppableItem.tsx @@ -1,6 +1,7 @@ import { cn, sendMessageToParent } from '@/lib/utils'; import { useState } from 'react'; import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'; +import { toast } from 'sonner'; export default function DroppableItem({ position, @@ -8,12 +9,14 @@ export default function DroppableItem({ showPlaceHolder, propName, pageBlockId, + allowedBlockIds=[] }: { position: 'top' | 'bottom' | 'left' | 'right'; index: number; showPlaceHolder: boolean; propName?: string; pageBlockId?: string; + allowedBlockIds?: string[]; }) { const [isDraggingOver, setIsDraggingOver] = useState(false); @@ -44,6 +47,13 @@ export default function DroppableItem({ e.preventDefault(); setIsDraggingOver(false); const data = e.dataTransfer.getData('application/block'); + + const block = JSON.parse(data); + if(allowedBlockIds?.length && !allowedBlockIds?.includes(block.blockId)) { + toast.error(`This block is not allowed here, allowed blocks are: ${allowedBlockIds.join(', ')}`); + return; + } + if (data) { sendMessageToParent({ type: 'addBlock', diff --git a/src/components/pages/page-content/components/emptyPageDroppable.tsx b/src/components/pages/page-content/components/emptyPageDroppable.tsx index 1c444c9..89b53cb 100644 --- a/src/components/pages/page-content/components/emptyPageDroppable.tsx +++ b/src/components/pages/page-content/components/emptyPageDroppable.tsx @@ -3,17 +3,20 @@ import { Page } from '@/lib/states/usePagesState'; import { cn, sendMessageToParent } from '@/lib/utils'; import { Box } from 'lucide-react'; import { useState } from 'react'; +import { toast } from 'sonner'; export default function EmptyPageDroppable({ activePage, propName, pageBlockId, className, + allowedBlockIds=[], }: { activePage: Page; propName?: string; pageBlockId?: string; className?: string; + allowedBlockIds?: string[]; }) { const [isDraggingOver, setIsDraggingOver] = useState(false); @@ -46,6 +49,12 @@ export default function EmptyPageDroppable({ if (activePage?.blocks?.[activePage.activeLanguageLocale]?.length && !propName) return; setIsDraggingOver(false); const data = e.dataTransfer.getData('application/block'); + + const block = JSON.parse(data); + if(allowedBlockIds?.length && !allowedBlockIds?.includes(block.blockId)){ + toast.error(`This block is not allowed here, allowed blocks are: ${allowedBlockIds.join(', ')}`); + return; + } if (data) { sendMessageToParent({ type: 'addBlock',