refactor popover and table components for improved structure and functionality

src/components/plate-ui/popover.tsx

@@ -13,7 +13,7 @@ export const PopoverTrigger = PopoverPrimitive.Trigger;
 export const PopoverAnchor = PopoverPrimitive.Anchor;
 
 export const popoverVariants = cva(
-  'z-50 w-72 rounded-md border border-zinc-200 bg-white p-4 text-zinc-950 shadow-md outline-none print:hidden dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50',
+  'z-50 w-72 rounded-md border border-zinc-200 bg-white p-4 text-zinc-950 shadow-md outline-none print:hidden dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50  ',
   {
     defaultVariants: {
       animate: true,
@@ -29,7 +29,7 @@ export const popoverVariants = cva(
 export const PopoverContent = withRef<
   typeof PopoverPrimitive.Content,
   VariantProps<typeof popoverVariants>
->(({ align = 'center', animate, className, sideOffset = 4, ...props }, ref) => (
+>(({ align = 'center', animate, className,sideOffset = 4, ...props }, ref) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       ref={ref}

src/components/plate-ui/table-element.tsx

@@ -205,38 +205,47 @@ export const TableElement = withHOC(
     const { colSizes, isSelectingCell, marginLeft, minColumnWidth } =
       useTableElementState();
     const { colGroupProps, props: tableProps } = useTableElement();
+    
+
 
     return (
-      <TableFloatingToolbar>
-        <PlateElement
-          className={cn(className, 'overflow-x-auto')}
-          style={{ paddingLeft: marginLeft }}
-          {...props}
-        >
-          <table
-            ref={ref}
-            className={cn(
-              'my-4 ml-px mr-0 table h-px w-[calc(100%-6px)] table-fixed border-collapse ',
-              isSelectingCell && '[&_*::selection]:!bg-transparent'
-            )}
-            {...tableProps}
+      <div className='relative'>
+        <TableFloatingToolbar>
+          <PlateElement
+          onClick={(e) => {
+            const x = e.clientX
+            const y = e.clientY
+            console.log(x, y)
+          }}
+            className={cn(className, 'overflow-x-auto')}
+            style={{ paddingLeft: marginLeft }}
+            {...props}
           >
-            <colgroup {...colGroupProps}>
-              {colSizes.map((width, index) => (
-                <col
-                  key={index}
-                  style={{
-                    minWidth: minColumnWidth,
-                    width: width || undefined,
-                  }}
-                />
-              ))}
-            </colgroup>
+            <table
+              ref={ref}
+              className={cn(
+                'my-4 ml-px mr-0 table h-px w-[calc(100%-6px)] table-fixed border-collapse ',
+                isSelectingCell && '[&_*::selection]:!bg-transparent'
+              )}
+              {...tableProps}
+            >
+              <colgroup {...colGroupProps}>
+                {colSizes.map((width, index) => (
+                  <col
+                    key={index}
+                    style={{
+                      minWidth: minColumnWidth,
+                      width: width || undefined,
+                    }}
+                  />
+                ))}
+              </colgroup>
 
-            <tbody className='min-w-full  '>{children}</tbody>
-          </table>
-        </PlateElement>
-      </TableFloatingToolbar>
+              <tbody className='min-w-full'>{children}</tbody>
+            </table>
+          </PlateElement>
+        </TableFloatingToolbar>
+      </div>
     );
   })
 );