Skip to content

Commit

Permalink
feat
Browse files Browse the repository at this point in the history
  • Loading branch information
@zbeyens
zbeyens committed Jan 23, 2025
1 parent 4e4fa78 commit 031aefc
Show file tree
Hide file tree
Showing 3 changed files with 3 additions and 3 deletions.
2 changes: 1 addition & 1 deletion apps/www/public/r/styles/default/table-cell-element.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
},
"files": [
{
"content": "'use client';\n\nimport React from 'react';\n\nimport type { TTableCellElement } from '@udecode/plate-table';\n\nimport { cn, withProps, withRef } from '@udecode/cn';\nimport {\n useEditorPlugin,\n useElementSelector,\n useReadOnly,\n} from '@udecode/plate/react';\nimport {\n BlockSelectionPlugin,\n useBlockSelected,\n} from '@udecode/plate-selection/react';\nimport {\n TablePlugin,\n TableRowPlugin,\n useTableCellElement,\n useTableCellElementResizable,\n} from '@udecode/plate-table/react';\nimport { cva } from 'class-variance-authority';\n\nimport { blockSelectionVariants } from './block-selection';\nimport { PlateElement } from './plate-element';\nimport { ResizeHandle } from './resizable';\n\nexport const TableCellElement = withRef<\n typeof PlateElement,\n {\n isHeader?: boolean;\n }\n>(({ children, className, isHeader, style, ...props }, ref) => {\n const { api } = useEditorPlugin(TablePlugin);\n const readOnly = useReadOnly();\n const element = props.element as TTableCellElement;\n\n const rowId = useElementSelector(([node]) => node.id as string, [], {\n key: TableRowPlugin.key,\n });\n const isSelectingRow = useBlockSelected(rowId);\n const isSelectionAreaVisible = props.editor.useOption(\n BlockSelectionPlugin,\n 'isSelectionAreaVisible'\n );\n\n const { borders, colIndex, colSpan, minHeight, rowIndex, selected, width } =\n useTableCellElement();\n\n const { bottomProps, hiddenLeft, leftProps, rightProps } =\n useTableCellElementResizable({\n colIndex,\n colSpan,\n rowIndex,\n });\n\n return (\n <PlateElement\n ref={ref}\n as={isHeader ? 'th' : 'td'}\n className={cn(\n className,\n 'h-full overflow-visible border-none bg-background p-0',\n element.background ? 'bg-[--cellBackground]' : 'bg-background',\n\n cn(\n isHeader && 'text-left [&_>_*]:m-0',\n 'before:size-full',\n selected && 'before:z-10 before:bg-muted',\n \"before:absolute before:box-border before:select-none before:content-['']\",\n borders.bottom?.size && `before:border-b before:border-b-border`,\n borders.right?.size && `before:border-r before:border-r-border`,\n borders.left?.size && `before:border-l before:border-l-border`,\n borders.top?.size && `before:border-t before:border-t-border`\n )\n )}\n style={\n {\n '--cellBackground': element.background,\n maxWidth: width || 240,\n minWidth: width || 120,\n ...style,\n } as React.CSSProperties\n }\n {...{\n colSpan: api.table.getColSpan(element),\n rowSpan: api.table.getRowSpan(element),\n }}\n {...props}\n >\n <div\n className=\"relative z-20 box-border h-full px-3 py-2\"\n style={{ minHeight }}\n >\n {children}\n </div>\n\n {!isSelectionAreaVisible && (\n <div\n className=\"group absolute top-0 size-full select-none\"\n contentEditable={false}\n suppressContentEditableWarning={true}\n >\n {!readOnly && (\n <>\n <ResizeHandle\n {...rightProps}\n className=\"-right-1 -top-2 h-[calc(100%_+_8px)] w-2\"\n data-col={colIndex}\n />\n <ResizeHandle {...bottomProps} className=\"-bottom-1 h-2\" />\n {!hiddenLeft && (\n <ResizeHandle\n {...leftProps}\n className=\"-left-1 top-0 w-2\"\n data-resizer-left={colIndex === 0 ? 'true' : undefined}\n />\n )}\n\n <div\n className={cn(\n 'absolute top-0 z-30 hidden h-full w-1 bg-ring',\n 'right-[-1.5px]',\n columnResizeVariants({ colIndex: colIndex as any })\n )}\n />\n {colIndex === 0 && (\n <div\n className={cn(\n 'absolute top-0 z-30 h-full w-1 bg-ring',\n 'left-[-1.5px]',\n 'hidden animate-in fade-in group-has-[[data-resizer-left]:hover]/table:block group-has-[[data-resizer-left][data-resizing=\"true\"]]/table:block'\n )}\n />\n )}\n </>\n )}\n </div>\n )}\n\n {isSelectingRow && (\n <div className={blockSelectionVariants()} contentEditable={false} />\n )}\n </PlateElement>\n );\n});\n\nexport const TableCellHeaderElement = withProps(TableCellElement, {\n isHeader: true,\n});\n\nconst columnResizeVariants = cva('hidden animate-in fade-in', {\n variants: {\n colIndex: {\n 0: 'group-has-[[data-col=\"0\"]:hover]/table:block group-has-[[data-col=\"0\"][data-resizing=\"true\"]]/table:block',\n 1: 'group-has-[[data-col=\"1\"]:hover]/table:block group-has-[[data-col=\"1\"][data-resizing=\"true\"]]/table:block',\n 2: 'group-has-[[data-col=\"2\"]:hover]/table:block group-has-[[data-col=\"2\"][data-resizing=\"true\"]]/table:block',\n 3: 'group-has-[[data-col=\"3\"]:hover]/table:block group-has-[[data-col=\"3\"][data-resizing=\"true\"]]/table:block',\n 4: 'group-has-[[data-col=\"4\"]:hover]/table:block group-has-[[data-col=\"4\"][data-resizing=\"true\"]]/table:block',\n 5: 'group-has-[[data-col=\"5\"]:hover]/table:block group-has-[[data-col=\"5\"][data-resizing=\"true\"]]/table:block',\n 6: 'group-has-[[data-col=\"6\"]:hover]/table:block group-has-[[data-col=\"6\"][data-resizing=\"true\"]]/table:block',\n 7: 'group-has-[[data-col=\"7\"]:hover]/table:block group-has-[[data-col=\"7\"][data-resizing=\"true\"]]/table:block',\n 8: 'group-has-[[data-col=\"8\"]:hover]/table:block group-has-[[data-col=\"8\"][data-resizing=\"true\"]]/table:block',\n 9: 'group-has-[[data-col=\"9\"]:hover]/table:block group-has-[[data-col=\"9\"][data-resizing=\"true\"]]/table:block',\n 10: 'group-has-[[data-col=\"10\"]:hover]/table:block group-has-[[data-col=\"10\"][data-resizing=\"true\"]]/table:block',\n },\n },\n});\n",
"content": "'use client';\n\nimport React from 'react';\n\nimport type { TTableCellElement } from '@udecode/plate-table';\n\nimport { cn, withProps, withRef } from '@udecode/cn';\nimport {\n useEditorPlugin,\n useElementSelector,\n useReadOnly,\n} from '@udecode/plate/react';\nimport {\n BlockSelectionPlugin,\n useBlockSelected,\n} from '@udecode/plate-selection/react';\nimport {\n TablePlugin,\n TableRowPlugin,\n useTableCellElement,\n useTableCellElementResizable,\n} from '@udecode/plate-table/react';\nimport { cva } from 'class-variance-authority';\n\nimport { blockSelectionVariants } from './block-selection';\nimport { PlateElement } from './plate-element';\nimport { ResizeHandle } from './resizable';\n\nexport const TableCellElement = withRef<\n typeof PlateElement,\n {\n isHeader?: boolean;\n }\n>(({ children, className, isHeader, style, ...props }, ref) => {\n const { api } = useEditorPlugin(TablePlugin);\n const readOnly = useReadOnly();\n const element = props.element as TTableCellElement;\n\n const rowId = useElementSelector(([node]) => node.id as string, [], {\n key: TableRowPlugin.key,\n });\n const isSelectingRow = useBlockSelected(rowId);\n const isSelectionAreaVisible = props.editor.useOption(\n BlockSelectionPlugin,\n 'isSelectionAreaVisible'\n );\n\n const { borders, colIndex, colSpan, minHeight, rowIndex, selected, width } =\n useTableCellElement();\n\n const { bottomProps, hiddenLeft, leftProps, rightProps } =\n useTableCellElementResizable({\n colIndex,\n colSpan,\n rowIndex,\n });\n\n return (\n <PlateElement\n ref={ref}\n as={isHeader ? 'th' : 'td'}\n className={cn(\n className,\n 'h-full overflow-visible border-none bg-background p-0',\n element.background ? 'bg-[--cellBackground]' : 'bg-background',\n isHeader && 'text-left [&_>_*]:m-0',\n 'before:size-full',\n selected && 'before:z-10 before:bg-brand/5',\n \"before:absolute before:box-border before:select-none before:content-['']\",\n borders.bottom?.size && `before:border-b before:border-b-border`,\n borders.right?.size && `before:border-r before:border-r-border`,\n borders.left?.size && `before:border-l before:border-l-border`,\n borders.top?.size && `before:border-t before:border-t-border`\n )}\n style={\n {\n '--cellBackground': element.background,\n maxWidth: width || 240,\n minWidth: width || 120,\n ...style,\n } as React.CSSProperties\n }\n {...{\n colSpan: api.table.getColSpan(element),\n rowSpan: api.table.getRowSpan(element),\n }}\n {...props}\n >\n <div\n className=\"relative z-20 box-border h-full px-3 py-2\"\n style={{ minHeight }}\n >\n {children}\n </div>\n\n {!isSelectionAreaVisible && (\n <div\n className=\"group absolute top-0 size-full select-none\"\n contentEditable={false}\n suppressContentEditableWarning={true}\n >\n {!readOnly && (\n <>\n <ResizeHandle\n {...rightProps}\n className=\"-right-1 -top-2 h-[calc(100%_+_8px)] w-2\"\n data-col={colIndex}\n />\n <ResizeHandle {...bottomProps} className=\"-bottom-1 h-2\" />\n {!hiddenLeft && (\n <ResizeHandle\n {...leftProps}\n className=\"-left-1 top-0 w-2\"\n data-resizer-left={colIndex === 0 ? 'true' : undefined}\n />\n )}\n\n <div\n className={cn(\n 'absolute top-0 z-30 hidden h-full w-1 bg-ring',\n 'right-[-1.5px]',\n columnResizeVariants({ colIndex: colIndex as any })\n )}\n />\n {colIndex === 0 && (\n <div\n className={cn(\n 'absolute top-0 z-30 h-full w-1 bg-ring',\n 'left-[-1.5px]',\n 'hidden animate-in fade-in group-has-[[data-resizer-left]:hover]/table:block group-has-[[data-resizer-left][data-resizing=\"true\"]]/table:block'\n )}\n />\n )}\n </>\n )}\n </div>\n )}\n\n {isSelectingRow && (\n <div className={blockSelectionVariants()} contentEditable={false} />\n )}\n </PlateElement>\n );\n});\n\nexport const TableCellHeaderElement = withProps(TableCellElement, {\n isHeader: true,\n});\n\nconst columnResizeVariants = cva('hidden animate-in fade-in', {\n variants: {\n colIndex: {\n 0: 'group-has-[[data-col=\"0\"]:hover]/table:block group-has-[[data-col=\"0\"][data-resizing=\"true\"]]/table:block',\n 1: 'group-has-[[data-col=\"1\"]:hover]/table:block group-has-[[data-col=\"1\"][data-resizing=\"true\"]]/table:block',\n 2: 'group-has-[[data-col=\"2\"]:hover]/table:block group-has-[[data-col=\"2\"][data-resizing=\"true\"]]/table:block',\n 3: 'group-has-[[data-col=\"3\"]:hover]/table:block group-has-[[data-col=\"3\"][data-resizing=\"true\"]]/table:block',\n 4: 'group-has-[[data-col=\"4\"]:hover]/table:block group-has-[[data-col=\"4\"][data-resizing=\"true\"]]/table:block',\n 5: 'group-has-[[data-col=\"5\"]:hover]/table:block group-has-[[data-col=\"5\"][data-resizing=\"true\"]]/table:block',\n 6: 'group-has-[[data-col=\"6\"]:hover]/table:block group-has-[[data-col=\"6\"][data-resizing=\"true\"]]/table:block',\n 7: 'group-has-[[data-col=\"7\"]:hover]/table:block group-has-[[data-col=\"7\"][data-resizing=\"true\"]]/table:block',\n 8: 'group-has-[[data-col=\"8\"]:hover]/table:block group-has-[[data-col=\"8\"][data-resizing=\"true\"]]/table:block',\n 9: 'group-has-[[data-col=\"9\"]:hover]/table:block group-has-[[data-col=\"9\"][data-resizing=\"true\"]]/table:block',\n 10: 'group-has-[[data-col=\"10\"]:hover]/table:block group-has-[[data-col=\"10\"][data-resizing=\"true\"]]/table:block',\n },\n },\n});\n",
"path": "plate-ui/table-cell-element.tsx",
"target": "components/plate-ui/table-cell-element.tsx",
"type": "registry:ui"
Expand Down
Loading

0 comments on commit 031aefc

Please sign in to comment.