fix: added allowedBlockids

adolfokrah · Sep 27, 2024 · 8d73b24 · 8d73b24
1 parent 217301b
commit 8d73b24
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 2 deletions.
diff --git a/src/components/blocks/blog-content.tsx b/src/components/blocks/blog-content.tsx
@@ -55,7 +55,7 @@ const BlogContent: Block<BlogContentProps> = ({ content, pageBlockId = '', image
             />
           )}
         />
-        <Slot defaultValue={content} propName="content" pageBlockId={pageBlockId} />
+        <Slot defaultValue={content} propName="content" pageBlockId={pageBlockId} allowedBlockIds={['footer','navbar']}  />
       </div>
     </div>
   );

diff --git 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
@@ -17,6 +17,7 @@ export default function BlockItem({
   propName,
   parentBlockId,
   droppableDirection = 'vertical',
+  allowedBlockIds=[]
 }: {
   block: Block<Record<string, any>>;
   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 && (
                 <DroppableItem
@@ -88,6 +91,7 @@ export default function BlockItem({
                   showPlaceHolder={isDraggingOver}
                   propName={propName}
                   pageBlockId={parentBlockId}
+                  allowedBlockIds={allowedBlockIds}
                 />
               )}
 

diff --git a/src/components/pages/page-content/components/droppableItem.tsx b/src/components/pages/page-content/components/droppableItem.tsx
@@ -1,19 +1,22 @@
 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,
   index,
   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
@@ -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',