refactor popover and table components for improved z-index management and type safety

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-10 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,

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

@@ -114,7 +114,7 @@ export const TableBordersDropdownMenuContent = withRef<
   );
 });
 
-export const TableFloatingToolbar = ({ popoverState }: { popoverState: any }) => {
+export const TableFloatingToolbar = ({ popoverState }: { popoverState: "top"| 'bottom' | null }) => {
   const element = useElement<TTableElement>();
   const { props: buttonProps } = useRemoveNodeButton({ element });
 
@@ -128,7 +128,6 @@ export const TableFloatingToolbar = ({ popoverState }: { popoverState: any }) =>
   const editor = useEditorRef();
 
   const collapsed = !readOnly && selected && selectionCollapsed;
-  const open = !readOnly && selected;
 
   const { canMerge, canUnmerge } = useTableMergeState();
 
@@ -183,7 +182,7 @@ export const TableFloatingToolbar = ({ popoverState }: { popoverState: any }) =>
       <div
         className={cn(
           popoverVariants(),
-          'flex w-[220px] flex-col p-1 absolute left-0',
+          'flex w-[220px] flex-col p-1 absolute right-1/2 translate-x-1/2',
           popoverState === 'top' ? 'top-0 -translate-y-full' : popoverState === 'bottom' ? 'bottom-0 translate-y-full' : ''
         )}
       >
@@ -261,7 +260,6 @@ export const TableElement = withHOC(
             <tbody className='min-w-full'>{children}</tbody>
           </table>
         </PlateElement>
-
         {popoverState && (
           <TableFloatingToolbar popoverState={popoverState} />
         )}

src/components/plate-ui/toolbar.tsx

@@ -32,7 +32,7 @@ export const ToolbarSeparator = withCn(
 
 const toolbarButtonVariants = cva(
   cn(
-    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-xs font-medium text-zinc-950 ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg:not([data-icon])]:size-3.5 dark:text-zinc-50 dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300'
+    'z-20 inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-xs font-medium text-zinc-950 ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg:not([data-icon])]:size-3.5 dark:text-zinc-50 dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300'
   ),
   {
     defaultVariants: {