fix(editor): some UI bugs of table block (#9987)

close: BS-2507, BS-2508, BS-2511, BS-2519, BS-2523

blocksuite/affine/block-table/src/add-button.css.ts

@@ -4,10 +4,10 @@ import { style } from '@vanilla-extract/css';
 export const addColumnButtonStyle = style({
   cursor: 'col-resize',
   backgroundColor: cssVarV2.layer.background.hoverOverlay,
-  fontSize: '10px',
+  fontSize: '16px',
   color: cssVarV2.icon.secondary,
   display: 'flex',
-  width: '12px',
+  width: '16px',
   justifyContent: 'center',
   alignItems: 'center',
   position: 'absolute',
@@ -30,10 +30,10 @@ export const addColumnButtonStyle = style({
 export const addRowButtonStyle = style({
   cursor: 'row-resize',
   backgroundColor: cssVarV2.layer.background.hoverOverlay,
-  fontSize: '10px',
+  fontSize: '16px',
   color: cssVarV2.icon.secondary,
   display: 'flex',
-  height: '12px',
+  height: '16px',
   alignItems: 'center',
   justifyContent: 'center',
   position: 'absolute',
@@ -56,11 +56,11 @@ export const addRowButtonStyle = style({
 export const addRowColumnButtonStyle = style({
   cursor: 'nwse-resize',
   backgroundColor: cssVarV2.layer.background.hoverOverlay,
-  fontSize: '10px',
+  fontSize: '16px',
   color: cssVarV2.icon.secondary,
   display: 'flex',
-  width: '12px',
+  width: '16px',
-  height: '12px',
+  height: '16px',
   justifyContent: 'center',
   alignItems: 'center',
   position: 'absolute',

blocksuite/affine/block-table/src/table-cell.css.ts

@@ -1,5 +1,5 @@
 import { cssVar, cssVarV2 } from '@blocksuite/affine-shared/theme';
-import { style } from '@vanilla-extract/css';
+import { createVar, style } from '@vanilla-extract/css';
 
 export const cellContainerStyle = style({
   position: 'relative',
@@ -22,11 +22,12 @@ export const columnOptionsCellStyle = style({
   justifyContent: 'center',
 });
 
+const threePointerIconColorVar = createVar();
 export const columnOptionsStyle = style({
   cursor: 'pointer',
   zIndex: 2,
-  width: '22px',
+  width: '28px',
-  height: '12px',
+  height: '16px',
   backgroundColor: cssVarV2.table.headerBackground.default,
   borderRadius: '8px',
   boxShadow: cssVar('buttonShadow'),
@@ -35,6 +36,9 @@ export const columnOptionsStyle = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
+  vars: {
+    [threePointerIconColorVar]: cssVarV2.icon.secondary,
+  },
   selectors: {
     '&:hover': {
       opacity: 1,
@@ -42,6 +46,9 @@ export const columnOptionsStyle = style({
     '&.active': {
       opacity: 1,
       backgroundColor: cssVarV2.table.indicator.activated,
+      vars: {
+        [threePointerIconColorVar]: cssVarV2.table.indicator.pointerActive,
+      },
     },
   },
 });
@@ -57,12 +64,11 @@ export const rowOptionsCellStyle = style({
   alignItems: 'center',
   justifyContent: 'center',
 });
-
 export const rowOptionsStyle = style({
   cursor: 'pointer',
   zIndex: 2,
-  width: '12px',
+  width: '16px',
-  height: '22px',
+  height: '28px',
   backgroundColor: cssVarV2.table.headerBackground.default,
   borderRadius: '8px',
   boxShadow: cssVar('buttonShadow'),
@@ -71,6 +77,9 @@ export const rowOptionsStyle = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
+  vars: {
+    [threePointerIconColorVar]: cssVarV2.icon.secondary,
+  },
   selectors: {
     '&:hover': {
       opacity: 1,
@@ -78,6 +87,9 @@ export const rowOptionsStyle = style({
     '&.active': {
       opacity: 1,
       backgroundColor: cssVarV2.table.indicator.activated,
+      vars: {
+        [threePointerIconColorVar]: cssVarV2.table.indicator.pointerActive,
+      },
     },
   },
 });
@@ -90,9 +102,9 @@ export const threePointerIconStyle = style({
 });
 
 export const threePointerIconDotStyle = style({
-  width: '2px',
+  width: '3px',
-  height: '2px',
+  height: '3px',
-  backgroundColor: cssVarV2.icon.secondary,
+  backgroundColor: threePointerIconColorVar,
   borderRadius: '50%',
 });
 

blocksuite/affine/block-table/src/table-cell.ts

@@ -435,6 +435,7 @@ export class TableCell extends SignalWatcher(
 
   renderColumnOptions(column: TableColumn, columnIndex: number) {
     const openColumnOptions = (e: Event) => {
+      e.stopPropagation();
       const element = e.currentTarget;
       if (element instanceof HTMLElement) {
         this.openColumnOptions(
@@ -461,6 +462,7 @@ export class TableCell extends SignalWatcher(
 
   renderRowOptions(row: TableRow, rowIndex: number) {
     const openRowOptions = (e: Event) => {
+      e.stopPropagation();
       const element = e.currentTarget;
       if (element instanceof HTMLElement) {
         this.openRowOptions(popupTargetFromElement(element), row, rowIndex);

blocksuite/blocks/src/root-block/widgets/slash-menu/config.ts

@@ -60,7 +60,12 @@ import {
 } from '@blocksuite/affine-shared/utils';
 import { viewPresets } from '@blocksuite/data-view/view-presets';
 import { assertType } from '@blocksuite/global/utils';
-import { DualLinkIcon, GroupingIcon, TeXIcon } from '@blocksuite/icons/lit';
+import {
+  DualLinkIcon,
+  GroupingIcon,
+  TableIcon,
+  TeXIcon,
+} from '@blocksuite/icons/lit';
 import type { DeltaInsert } from '@blocksuite/inline';
 import type { BlockModel } from '@blocksuite/store';
 import { Slice, Text } from '@blocksuite/store';
@@ -259,8 +264,11 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
     { groupName: 'Content & Media' },
     {
       name: 'Table',
-      description: 'Create a table block.',
+      description: 'Create a simple table.',
-      icon: DatabaseTableViewIcon20,
+      icon: TableIcon({
+        width: '20',
+        height: '20',
+      }),
       tooltip: slashMenuToolTips['Table View'],
       showWhen: ({ model }) => !insideEdgelessText(model),
       action: ({ rootComponent }) => {