feat(editor): simple table block (#9740)

close: BS-2122, BS-2125, BS-2124, BS-2420, PD-2073, BS-2126, BS-2469, BS-2470, BS-2478, BS-2471
2026-07-29 08:09:52 +08:00 · 2025-01-24 10:07:57 +00:00
parent 3f4311ff1c
commit 5a5779c05a
61 changed files with 3577 additions and 381 deletions
@@ -0,0 +1,109 @@
+import { cssVar, cssVarV2 } from '@blocksuite/affine-shared/theme';
+import { style } from '@vanilla-extract/css';
+
+export const cellContainerStyle = style({
+  position: 'relative',
+  alignItems: 'center',
+  border: '1px solid var(--affine-border-color)',
+  borderCollapse: 'collapse',
+  isolation: 'auto',
+  textAlign: 'start',
+  verticalAlign: 'top',
+});
+
+export const columnOptionsCellStyle = style({
+  position: 'absolute',
+  height: '0',
+  top: '0',
+  left: '0',
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const columnOptionsStyle = style({
+  cursor: 'pointer',
+  zIndex: 2,
+  width: '22px',
+  height: '12px',
+  backgroundColor: cssVarV2.table.headerBackground.default,
+  borderRadius: '8px',
+  boxShadow: cssVar('buttonShadow'),
+  opacity: 0,
+  transition: 'opacity 0.2s ease-in-out',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  selectors: {
+    '&:hover': {
+      opacity: 1,
+    },
+    '&.active': {
+      opacity: 1,
+      backgroundColor: cssVarV2.table.indicator.activated,
+    },
+  },
+});
+
+export const rowOptionsCellStyle = style({
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  width: '0',
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const rowOptionsStyle = style({
+  cursor: 'pointer',
+  zIndex: 2,
+  width: '12px',
+  height: '22px',
+  backgroundColor: cssVarV2.table.headerBackground.default,
+  borderRadius: '8px',
+  boxShadow: cssVar('buttonShadow'),
+  opacity: 0,
+  transition: 'opacity 0.2s ease-in-out',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  selectors: {
+    '&:hover': {
+      opacity: 1,
+    },
+    '&.active': {
+      opacity: 1,
+      backgroundColor: cssVarV2.table.indicator.activated,
+    },
+  },
+});
+
+export const threePointerIconStyle = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '2px',
+});
+
+export const threePointerIconDotStyle = style({
+  width: '2px',
+  height: '2px',
+  backgroundColor: cssVarV2.icon.secondary,
+  borderRadius: '50%',
+});
+
+export const widthDragHandleStyle = style({
+  position: 'absolute',
+  top: '-1px',
+  height: 'calc(100% + 2px)',
+  right: '-3px',
+  width: '5px',
+  backgroundColor: cssVarV2.table.indicator.activated,
+  cursor: 'ew-resize',
+  zIndex: 2,
+  transition: 'opacity 0.2s ease-in-out',
+});