chore: improved on block selection (still buggy)

henrynoowah · Jan 19, 2025 · ccd021d · ccd021d
1 parent 713054a
commit ccd021d
Show file tree

Hide file tree

Showing 8 changed files with 140 additions and 123 deletions.
diff --git a/apps/docs/data/test-data.ts b/apps/docs/data/test-data.ts
@@ -110,6 +110,7 @@ export const data: Page = {
         {
           type: "image",
           id: "section-2-block-1",
+          order: 1,
           style: {
             position: "relative",
             display: "block",
@@ -137,6 +138,7 @@ export const data: Page = {
         {
           id: "section-2-block-2",
           type: "html",
+          order: 2,
           style: {
             position: "relative",
             display: "block",
@@ -152,6 +154,7 @@ export const data: Page = {
         {
           id: "section-2-block-3",
           type: "html",
+          order: 3,
           style: {
             width: "100%",
             height: "100%",
@@ -165,6 +168,7 @@ export const data: Page = {
         {
           id: "section-2-block-4",
           type: "image",
+          order: 4,
           style: {
             position: "relative",
             width: "100%",
@@ -189,73 +193,59 @@ export const data: Page = {
         },
       ],
     },
-    // {
-    //   id: "section-3",
-    //   order: 3,
-    //   style: {
-    //     width: "100%",
-    //     maxWidth: "100%",
-    //     display: "block",
-    //     position: "relative",
-    //     height: "420px",
-    //     overflow: "hidden",
-    //   },
-    //   style_mobile: {
-    //     width: "100%",
-    //     maxWidth: "100%",
-    //     display: "block",
-    //     position: "relative",
-    //     height: "420px",
-    //     overflow: "hidden",
-    //   },
-    //   blocks: [
-    //     {
-    //       type: "image",
-    //       id: "section-3-block-1",
-    //       image: {
-    //         src: "https://images.pexels.com/photos/3381115/pexels-photo-3381115.jpeg",
-    //         width: 1920,
-    //         height: 748,
-    //         style: {
-    //           width: "100%",
-    //           height: "100%",
-    //           objectFit: "cover",
-    //           backgroundColor: "magenta",
-    //         },
-    //       },
-    //       style: {
-    //         width: "100%",
-    //         height: "100%",
-    //         backgroundColor: "gray",
-    //         position: "absolute",
-    //       },
-    //       style_mobile: {
-    //         width: "100%",
-    //         height: "100%",
-    //         backgroundColor: "gray",
-    //         position: "absolute",
-    //         overflow: "hidden",
-    //       },
-    //     },
-    //     {
-    //       id: "section-3-block-2",
-    //       type: "html",
-    //       style: {
-    //         position: "absolute",
-    //         display: "block",
-    //         width: "80%",
-    //         height: "fit-content",
-    //         maxHeight: "100%",
-    //         top: "10%",
-    //         left: "10%",
-    //         padding: "24px",
-    //         backgroundColor: "gray",
-    //       },
-    //       content:
-    //         "<h1>Heading 1</h1><p><span>Lorem ipsum odor amet, consectetuer adipiscing elit. Phasellus etiam praesent lacus, commodo sollicitudin iaculis. Nostra torquent odio lacinia massa hac. Dignissim consequat maecenas scelerisque sem laoreet felis maecenas efficitur. Malesuada mi bibendum a sem himenaeos dui in faucibus finibus. Tristique enim lacinia vel dignissim torquent condimentum dis curae pellentesque. Egestas ridiculus maecenas phasellus ornare gravida, viverra ultrices nisl accumsan. Nunc odio mus pulvinar nam conubia dolor</span></p><br>",
-    //       images: [],
-    //     },
-    //   ],
-    // },
+    {
+      id: "section-3",
+      order: 3,
+      style: {
+        width: "100%",
+        maxWidth: "100%",
+        display: "block",
+        position: "relative",
+        height: "640px",
+        overflow: "hidden",
+      },
+      style_mobile: {
+        width: "100%",
+        maxWidth: "100%",
+        display: "block",
+        position: "relative",
+        height: "420px",
+        overflow: "hidden",
+      },
+      blocks: [
+        {
+          type: "gallery",
+          id: "section-3-block-1",
+          order: 1,
+          images: [
+            {
+              src: "https://images.pexels.com/photos/3381115/pexels-photo-3381115.jpeg",
+              style: {
+                width: "100%",
+                height: "100%",
+                objectFit: "cover",
+                backgroundColor: "magenta",
+              },
+            },
+            {
+              src: "https://images.pexels.com/photos/20607063/pexels-photo-20607063/free-photo-of-close-up-of-the-facade-of-an-apartment-building-with-balconies.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+              style: {
+                position: "relative",
+                width: "100%",
+                height: "100%",
+                objectFit: "cover",
+                backgroundColor: "gray",
+              },
+            },
+          ],
+          style: {
+            width: "100%",
+            height: "100%",
+            backgroundColor: "gray",
+            position: "absolute",
+          },
+        },
+      ],
+    },
   ],
 };
diff --git a/packages/ui/src/components/carousel/index.tsx b/packages/ui/src/components/carousel/index.tsx
@@ -34,14 +34,7 @@ const Carousel = ({ images, style }: Block) => {
               key={`section-block-container-${image.src}`}
               src={image.src}
               alt={image.alt}
-              style={
-                {
-                  // width: "100%",
-                  // height: "100%",
-                  // objectFit: "contain",
-                  // objectPosition: "center",
-                }
-              }
+              style={image.style}
             />
           </div>
         ))}

diff --git a/packages/ui/src/components/context-menu/context-menu.tsx b/packages/ui/src/components/context-menu/context-menu.tsx
@@ -15,16 +15,18 @@ interface ContextMenuProps {
     }[];
   } | null)[];
   onOpenChange: (open: boolean) => void;
+  onContextMenu: (event: React.MouseEvent<HTMLSpanElement>) => void;
 }
 
 export const ContextMenu = ({
   children,
   items: contextGroups,
   onOpenChange,
+  onContextMenu,
 }: ContextMenuProps) => {
   return (
     <RadixContextMenu.Root onOpenChange={onOpenChange}>
-      <RadixContextMenu.Trigger asChild onContextMenu={() => {}}>
+      <RadixContextMenu.Trigger asChild onContextMenu={onContextMenu}>
         {children}
       </RadixContextMenu.Trigger>
       <RadixContextMenu.Portal>

diff --git a/packages/ui/src/components/editor/Editor.tsx b/packages/ui/src/components/editor/Editor.tsx
@@ -125,7 +125,7 @@ const Editor = ({ view = "web", data, onSubmit, children }: EditorProps) => {
         newPos
       ).map((s, i) => ({ ...s, order: i + 1 }));
       setValue("sections", newSectionOrder);
-      setSelectedSectionId(newSectionOrder[newPos].id);
+      // setSelectedSectionId(newSectionOrder[newPos].id);
     }
 
     setActiveId(null);
@@ -276,14 +276,14 @@ const RootContextMenu = ({ children }: { children: React.ReactNode }) => {
       items={[
         selectedBlock
           ? {
-              label: "Block",
+              label: `Block: ${selectedBlock.type.toUpperCase()}`,
               items: [
                 {
                   label: "Move to front",
                   onClick: () => {
                     if (selectedBlock && selectedSection?.blocks) {
                       const otherBlocks = selectedSection?.blocks.filter(
-                        (block) => block.id !== selectedBlock.id
+                        (block) => block.id !== selectedBlock?.id
                       );
 
                       // Update orders - other blocks move back, selected block becomes last
@@ -322,7 +322,7 @@ const RootContextMenu = ({ children }: { children: React.ReactNode }) => {
                   onClick: () => {
                     if (selectedBlock && selectedSection) {
                       const otherBlocks = selectedSection.blocks.filter(
-                        (block) => block.id !== selectedBlock.id
+                        (block) => block.id !== selectedBlock?.id
                       );
 
                       const updatedSelectedBlock = {
@@ -352,10 +352,48 @@ const RootContextMenu = ({ children }: { children: React.ReactNode }) => {
                     }
                   },
                 },
+                {
+                  label: "Duplicate Block",
+                  onClick: () => {
+                    if (selectedBlock && selectedSection) {
+                      const newBlockIndex = selectedSection.blocks.length + 1;
+                      const duplicatedBlock = {
+                        ...selectedBlock,
+                        id: "block-" + uuidv4(),
+                        style: {
+                          ...selectedBlock.style,
+                          zIndex: newBlockIndex,
+                        },
+                        order: newBlockIndex,
+                      };
+
+                      updateSelectedSection?.({
+                        ...selectedSection,
+                        blocks: [...selectedSection.blocks, duplicatedBlock],
+                      });
+                    }
+                  },
+                },
+                {
+                  label: "Delete",
+                  onClick: () => {
+                    if (selectedBlock && selectedSection) {
+                      const blocks = selectedSection.blocks.filter(
+                        (block) => block.id !== selectedBlock?.id
+                      );
+                      console.log("blocks", blocks);
+                      updateSelectedSection?.({
+                        ...selectedSection,
+                        blocks,
+                      });
+                    }
+                  },
+                },
               ],
             }
           : null,
         {
+          label: "Section",
           items: [
             {
               label: "Insert Section",
@@ -443,6 +481,10 @@ const RootContextMenu = ({ children }: { children: React.ReactNode }) => {
         console.log("selectedSection", selectedSection);
         console.log("selectedBlock", selectedBlock);
       }}
+      onContextMenu={(e) => {
+        console.log("context menu");
+        console.log("e", e);
+      }}
     >
       <div>{children}</div>
     </ContextMenu>

diff --git a/packages/ui/src/components/editor/block-editor/BlockEditor.tsx b/packages/ui/src/components/editor/block-editor/BlockEditor.tsx
@@ -15,14 +15,15 @@ interface BlockProps {
 }
 
 const BlockEditor = forwardRef<Block, BlockProps>(
-  ({ section, block, onChange }, _) => {
+  ({ section, block, onChange, onClick }, _) => {
     switch (block.type) {
       case "html":
         return (
           <TiptapEditor
             key={`${section.id}-${block.id}`}
             content={block.content}
             onUpdate={(value) => onChange?.({ ...block, content: value })}
+            onClick={() => onClick?.(block)}
           />
         );
       case "gallery":
@@ -32,6 +33,7 @@ const BlockEditor = forwardRef<Block, BlockProps>(
           <ImageBlock
             key={`${section.id}-${block.id}`}
             block={block}
+            onClick={() => onClick?.(block)}
             onChange={(block) => onChange?.({ ...block })}
           />
         );

diff --git a/packages/ui/src/components/editor/block-editor/blocks/ImageBlock.tsx b/packages/ui/src/components/editor/block-editor/blocks/ImageBlock.tsx
@@ -3,11 +3,13 @@ import { Block } from "@/types";
 interface Parmas {
   block: Block;
   onChange: (block: Block) => void;
+  onClick?: () => void;
 }
 
-const ImageBlock = ({ block }: Parmas) => {
+const ImageBlock = ({ block, onClick }: Parmas) => {
   return (
     <img
+      onClick={onClick}
       src={block.image?.src}
       alt={block.image?.alt}
       width={block.image?.width}