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
This commit is contained in:
zzj3720
2025-01-24 10:07:57 +00:00
parent 3f4311ff1c
commit 5a5779c05a
61 changed files with 3577 additions and 381 deletions
@@ -0,0 +1,90 @@
import { cssVar, cssVarV2 } from '@blocksuite/affine-shared/theme';
import { style } from '@vanilla-extract/css';
export const addColumnButtonStyle = style({
cursor: 'col-resize',
backgroundColor: cssVarV2.layer.background.hoverOverlay,
fontSize: '10px',
color: cssVarV2.icon.secondary,
display: 'flex',
width: '12px',
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
top: '0',
left: 'calc(100% + 2px)',
height: '100%',
transition:
'opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out',
borderRadius: '2px',
opacity: 0,
selectors: {
'&:hover, &.active': {
backgroundColor: cssVarV2.table.indicator.drag,
color: cssVarV2.icon.primary,
opacity: 1,
},
},
});
export const addRowButtonStyle = style({
cursor: 'row-resize',
backgroundColor: cssVarV2.layer.background.hoverOverlay,
fontSize: '10px',
color: cssVarV2.icon.secondary,
display: 'flex',
height: '12px',
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
top: 'calc(100% + 2px)',
left: '0',
width: '100%',
transition:
'opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out',
borderRadius: '2px',
opacity: 0,
selectors: {
'&:hover, &.active': {
backgroundColor: cssVarV2.table.indicator.drag,
color: cssVarV2.icon.primary,
opacity: 1,
},
},
});
export const addRowColumnButtonStyle = style({
cursor: 'nwse-resize',
backgroundColor: cssVarV2.layer.background.hoverOverlay,
fontSize: '10px',
color: cssVarV2.icon.secondary,
display: 'flex',
width: '12px',
height: '12px',
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
top: 'calc(100% + 2px)',
left: 'calc(100% + 2px)',
borderRadius: '2px',
opacity: 0,
transition:
'opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out',
selectors: {
'&:hover, &.active': {
backgroundColor: cssVarV2.table.indicator.drag,
color: cssVarV2.icon.primary,
opacity: 1,
},
},
});
export const cellCountTipsStyle = style({
position: 'absolute',
backgroundColor: cssVarV2.tooltips.background,
borderRadius: '4px',
padding: '4px',
boxShadow: cssVar('buttonShadow'),
color: cssVarV2.tooltips.foreground,
whiteSpace: 'nowrap',
});