table

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,16 +102,19 @@ 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
   const html = await serializeHtml(editorStatic, {
     nodes: editorStatic.children,
   });
 
-  // Prism.highlightAll();
-
   return (
     <div className="mx-auto w-1/2">
       <h1 className="text-xl font-bold text-green-800">Plate Static :</h1>

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 (
+    <StaticElement
+      as={isHeader ? 'th' : 'td'}
+      className={cn(
+        'relative h-full overflow-visible bg-background p-0',
+        element.background ? 'bg-[--cellBackground]' : 'bg-background',
+        cn(
+          isHeader && 'text-left font-normal [&_>_*]: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}
+    >
+      <div className="relative z-20 box-border h-full px-3 py-2">
+        {children}
+      </div>
+    </StaticElement>
+  );
+}
+
+export function TableCellHeaderStaticElement(props: StaticElementProps) {
+  return <TableCellStaticElement {...props} isHeader />;
+}

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 (
+    <StaticElement
+      className={cn('overflow-x-auto', className)}
+      element={element}
+      {...props}
+    >
+      <table
+        className={cn(
+          'my-4 ml-px mr-0 table h-px w-[calc(100%-6px)] table-fixed border-collapse'
+        )}
+      >
+        <colgroup>
+          {colSizes?.map((width, index) => (
+            <col
+              key={index}
+              style={{
+                width: width || undefined,
+              }}
+            />
+          ))}
+        </colgroup>
+
+        <tbody className="min-w-full">{children}</tbody>
+      </table>
+    </StaticElement>
+  );
+};

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 (
+    <StaticElement
+      as="tr"
+      className={cn('h-full', className)}
+      element={element}
+      {...props}
+    >
+      {children}
+    </StaticElement>
+  );
+}

packages/table/src/react/components/TableCellElement/getTableCellBorders.ts → 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<BorderStyle>;

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';

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';

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 = {

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;