From 60309439dab2ebcc4b13ec22acd3de1d4e2049e1 Mon Sep 17 00:00:00 2001 From: Felix Feng Date: Wed, 11 Dec 2024 15:41:43 +0800 Subject: [PATCH] table --- apps/www/src/app/(app)/dev/page.tsx | 31 ++++++++-- .../plate-static-ui/table-cell-element.tsx | 60 +++++++++++++++++++ .../default/plate-static-ui/table-element.tsx | 44 ++++++++++++++ .../plate-static-ui/table-row-element.tsx | 27 +++++++++ .../utils}/getTableCellBorders.ts | 6 +- packages/table/src/lib/utils/index.ts | 1 + .../components/TableCellElement/index.ts | 1 - .../useTableCellElementState.ts | 6 +- .../src/react/merge/getTableColumnIndex.ts | 4 +- 9 files changed, 163 insertions(+), 17 deletions(-) create mode 100644 apps/www/src/registry/default/plate-static-ui/table-cell-element.tsx create mode 100644 apps/www/src/registry/default/plate-static-ui/table-element.tsx create mode 100644 apps/www/src/registry/default/plate-static-ui/table-row-element.tsx rename packages/table/src/{react/components/TableCellElement => lib/utils}/getTableCellBorders.ts (91%) diff --git a/apps/www/src/app/(app)/dev/page.tsx b/apps/www/src/app/(app)/dev/page.tsx index fb422cd01d..5f2fae9fd0 100644 --- a/apps/www/src/app/(app)/dev/page.tsx +++ b/apps/www/src/app/(app)/dev/page.tsx @@ -23,9 +23,14 @@ import { BaseHeadingPlugin, HEADING_KEYS } from '@udecode/plate-heading'; import { serializeHtml } from '@udecode/plate-html'; import { BaseIndentPlugin } from '@udecode/plate-indent'; import { BaseLinkPlugin } from '@udecode/plate-link'; +import { + BaseTableCellHeaderPlugin, + BaseTableCellPlugin, + BaseTablePlugin, + BaseTableRowPlugin, +} from '@udecode/plate-table'; -import { basicNodesValue } from '@/registry/default/example/values/basic-nodes-value'; -import { linkValue } from '@/registry/default/example/values/link-value'; +import { indentListValue } from '@/registry/default/example/values/indent-list-value'; import { BlockquoteStaticElement } from '@/registry/default/plate-static-ui/blockquote-element'; import { CodeBlockElementStatic } from '@/registry/default/plate-static-ui/code-block-element'; import { CodeStaticLeaf } from '@/registry/default/plate-static-ui/code-leaf'; @@ -37,6 +42,12 @@ import { ParagraphStaticElement, PlateStaticLeaf, } from '@/registry/default/plate-static-ui/paragraph-element'; +import { + TableCellHeaderStaticElement, + TableCellStaticElement, +} from '@/registry/default/plate-static-ui/table-cell-element'; +import { TableStaticElement } from '@/registry/default/plate-static-ui/table-element'; +import { TableRowStaticElement } from '@/registry/default/plate-static-ui/table-row-element'; export default async function DevPage() { const editorStatic = createSlateEditor({ @@ -62,6 +73,9 @@ export default async function DevPage() { }, }), BaseLinkPlugin, + BaseTableRowPlugin, + BaseTablePlugin, + BaseTableCellPlugin, ], staticComponents: { [BaseBlockquotePlugin.key]: BlockquoteStaticElement, @@ -76,6 +90,10 @@ export default async function DevPage() { [BaseStrikethroughPlugin.key]: withProps(PlateStaticLeaf, { as: 'del' }), [BaseSubscriptPlugin.key]: withProps(PlateStaticLeaf, { as: 'sub' }), [BaseSuperscriptPlugin.key]: withProps(PlateStaticLeaf, { as: 'sup' }), + [BaseTableCellHeaderPlugin.key]: TableCellHeaderStaticElement, + [BaseTableCellPlugin.key]: TableCellStaticElement, + [BaseTablePlugin.key]: TableStaticElement, + [BaseTableRowPlugin.key]: TableRowStaticElement, [BaseUnderlinePlugin.key]: withProps(PlateStaticLeaf, { as: 'u' }), [HEADING_KEYS.h1]: withProps(HeadingStaticElement, { variant: 'h1' }), [HEADING_KEYS.h2]: withProps(HeadingStaticElement, { variant: 'h2' }), @@ -84,7 +102,12 @@ export default async function DevPage() { [HEADING_KEYS.h5]: withProps(HeadingStaticElement, { variant: 'h5' }), [HEADING_KEYS.h6]: withProps(HeadingStaticElement, { variant: 'h6' }), }, - value: [...basicNodesValue, ...linkValue], + value: [ + // ...basicNodesValue, + // ...linkValue, + // ...tableValue, + ...indentListValue, + ], }); // eslint-disable-next-line @typescript-eslint/await-thenable @@ -92,8 +115,6 @@ export default async function DevPage() { nodes: editorStatic.children, }); - // Prism.highlightAll(); - return (

Plate Static :

diff --git a/apps/www/src/registry/default/plate-static-ui/table-cell-element.tsx b/apps/www/src/registry/default/plate-static-ui/table-cell-element.tsx new file mode 100644 index 0000000000..30ebec06ec --- /dev/null +++ b/apps/www/src/registry/default/plate-static-ui/table-cell-element.tsx @@ -0,0 +1,60 @@ +import React from 'react'; + +import type { StaticElementProps } from '@udecode/plate-core'; + +import { cn } from '@udecode/cn'; +import { getTableCellBorders } from '@udecode/plate-table'; + +import { StaticElement } from './paragraph-element'; + +export function TableCellStaticElement({ + children, + className, + element, + isHeader, + style, + ...props +}: StaticElementProps & { + isHeader?: boolean; +}) { + const borders = getTableCellBorders(element); + + return ( + _*]:m-0', + 'before:size-full', + "before:absolute before:box-border before:select-none before:content-['']", + borders && + cn( + borders.bottom?.size && `before:border-b before:border-b-border`, + borders.right?.size && `before:border-r before:border-r-border`, + borders.left?.size && `before:border-l before:border-l-border`, + borders.top?.size && `before:border-t before:border-t-border` + ) + ), + className + )} + style={ + { + '--cellBackground': element.background, + ...style, + } as React.CSSProperties + } + element={element} + {...props} + > +
+ {children} +
+ + ); +} + +export function TableCellHeaderStaticElement(props: StaticElementProps) { + return ; +} diff --git a/apps/www/src/registry/default/plate-static-ui/table-element.tsx b/apps/www/src/registry/default/plate-static-ui/table-element.tsx new file mode 100644 index 0000000000..4db429d644 --- /dev/null +++ b/apps/www/src/registry/default/plate-static-ui/table-element.tsx @@ -0,0 +1,44 @@ +import React from 'react'; + +import type { StaticElementProps } from '@udecode/plate-core'; +import type { TTableElement } from '@udecode/plate-table'; + +import { cn } from '@udecode/cn'; + +import { StaticElement } from './paragraph-element'; + +export const TableStaticElement = ({ + children, + className, + element, + ...props +}: StaticElementProps) => { + const { colSizes } = element as TTableElement; + + return ( + + + + {colSizes?.map((width, index) => ( + + ))} + + + {children} +
+ + ); +}; diff --git a/apps/www/src/registry/default/plate-static-ui/table-row-element.tsx b/apps/www/src/registry/default/plate-static-ui/table-row-element.tsx new file mode 100644 index 0000000000..aa72c2dcaf --- /dev/null +++ b/apps/www/src/registry/default/plate-static-ui/table-row-element.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +import type { StaticElementProps } from '@udecode/plate-core'; + +import { cn } from '@udecode/cn'; + +import { StaticElement } from './paragraph-element'; + +export function TableRowStaticElement({ + children, + className, + element, + ...props +}: StaticElementProps) { + // const { hideBorder } = element as TTableRowElement; + + return ( + + {children} + + ); +} diff --git a/packages/table/src/react/components/TableCellElement/getTableCellBorders.ts b/packages/table/src/lib/utils/getTableCellBorders.ts similarity index 91% rename from packages/table/src/react/components/TableCellElement/getTableCellBorders.ts rename to packages/table/src/lib/utils/getTableCellBorders.ts index 0c4052fcde..9c045794e3 100644 --- a/packages/table/src/react/components/TableCellElement/getTableCellBorders.ts +++ b/packages/table/src/lib/utils/getTableCellBorders.ts @@ -1,8 +1,4 @@ -import type { - BorderDirection, - BorderStyle, - TTableCellElement, -} from '../../../lib'; +import type { BorderDirection, BorderStyle, TTableCellElement } from '../types'; export interface BorderStylesDefault { bottom: Required; diff --git a/packages/table/src/lib/utils/index.ts b/packages/table/src/lib/utils/index.ts index 521e585d75..3d608301f5 100644 --- a/packages/table/src/lib/utils/index.ts +++ b/packages/table/src/lib/utils/index.ts @@ -7,3 +7,4 @@ export * from './getCellType'; export * from './getEmptyCellNode'; export * from './getEmptyRowNode'; export * from './getEmptyTableNode'; +export * from './getTableCellBorders'; diff --git a/packages/table/src/react/components/TableCellElement/index.ts b/packages/table/src/react/components/TableCellElement/index.ts index 5ce0a0fc5c..6e99ab2c22 100644 --- a/packages/table/src/react/components/TableCellElement/index.ts +++ b/packages/table/src/react/components/TableCellElement/index.ts @@ -3,7 +3,6 @@ */ export * from './getOnSelectTableBorderFactory'; -export * from './getTableCellBorders'; export * from './roundCellSizeToStep'; export * from './useIsCellSelected'; export * from './useTableBordersDropdownMenuContentState'; diff --git a/packages/table/src/react/components/TableCellElement/useTableCellElementState.ts b/packages/table/src/react/components/TableCellElement/useTableCellElementState.ts index e582aaa19d..df0a105274 100644 --- a/packages/table/src/react/components/TableCellElement/useTableCellElementState.ts +++ b/packages/table/src/react/components/TableCellElement/useTableCellElementState.ts @@ -4,6 +4,7 @@ import { useEditorRef, useElement } from '@udecode/plate-common/react'; import { useReadOnly } from 'slate-react'; import { + type BorderStylesDefault, type TTableCellElement, type TTableElement, type TTableRowElement, @@ -12,15 +13,12 @@ import { getCellIndices, getColSpan, getRowSpan, + getTableCellBorders, } from '../../../lib'; import { TablePlugin } from '../../TablePlugin'; import { getTableColumnIndex } from '../../merge'; import { getTableRowIndex } from '../../queries'; import { useTableStore } from '../../stores'; -import { - type BorderStylesDefault, - getTableCellBorders, -} from './getTableCellBorders'; import { useIsCellSelected } from './useIsCellSelected'; export type TableCellElementState = { diff --git a/packages/table/src/react/merge/getTableColumnIndex.ts b/packages/table/src/react/merge/getTableColumnIndex.ts index 72d16ce9fe..d6871cc540 100644 --- a/packages/table/src/react/merge/getTableColumnIndex.ts +++ b/packages/table/src/react/merge/getTableColumnIndex.ts @@ -1,13 +1,13 @@ import { type TEditor, type TElement, + findNode, getParentNode, } from '@udecode/plate-common'; -import { findNodePath } from '@udecode/plate-common/react'; /** Get table column index of a cell node. */ export const getTableColumnIndex = (editor: TEditor, cellNode: TElement) => { - const path = findNodePath(editor, cellNode); + const path = findNode(editor, { match: (n) => n === cellNode })?.[1]; if (!path) return -1;