fix: exit table edit on area click (#945)

* fix: exit table edit on area click

* fix

src/pages/editor-page/canvas/area-node/area-node.tsx

@@ -16,6 +16,7 @@ import { Check, GripVertical, Pencil } from 'lucide-react';
 import { Button } from '@/components/button/button';
 import { useLayout } from '@/hooks/use-layout';
 import { AreaNodeContextMenu } from './area-node-context-menu';
+import { useCanvas } from '@/hooks/use-canvas';
 
 export type AreaNodeType = Node<
     {
@@ -57,6 +58,8 @@ export const AreaNode: React.FC<NodeProps<AreaNodeType>> = React.memo(
         useKeyPressEvent('Enter', editAreaName);
         useKeyPressEvent('Escape', abortEdit);
 
+        const { setEditTableModeTable } = useCanvas();
+
         const enterEditMode = (e: React.MouseEvent) => {
             e.stopPropagation();
             setEditMode(true);
@@ -77,6 +80,7 @@ export const AreaNode: React.FC<NodeProps<AreaNodeType>> = React.memo(
                         borderColor: selected ? undefined : area.color,
                     }}
                     onClick={(e) => {
+                        setEditTableModeTable(null);
                         if (e.detail === 2) {
                             openAreaInEditor();
                         }

src/pages/editor-page/canvas/canvas.tsx

@@ -200,6 +200,9 @@ const areaToAreaNode = (
         width: area.width,
         height: area.height,
         zIndex: -10,
+        style: {
+            zIndex: -10,
+        },
         hidden: !hasVisibleTable || filterLoading,
     };
 };