Table cells merging

apps/e2e-examples/src/main.tsx

@@ -13,6 +13,7 @@ const router = createBrowserRouter([
 
 const rootElement = document.querySelector('#root');
 
+// eslint-disable-next-line react/no-deprecated
 ReactDOM.render(
   <React.StrictMode>
     <RouterProvider router={router} />

apps/www/content/docs/components/changelog.mdx

@@ -8,6 +8,13 @@ Since Plate UI is not a component library, a changelog is maintained here.
 
 Use the [CLI](https://platejs.org/docs/components/cli) to install the latest version of the components.
 
+## October 2023 #5
+
+### 2 Oct #5.1
+
+- `table-cell-element`:
+  - feat: merging cells
+
 ## September 2023 #4
 
 ### 18 Sept #4.4

apps/www/src/components/icons.tsx

@@ -15,6 +15,7 @@ import {
   ChevronsUpDown,
   ClipboardCheck,
   Code2,
+  Combine,
   Copy,
   DownloadCloud,
   ExternalLink,
@@ -73,6 +74,7 @@ import {
   Trash,
   Twitter,
   Underline,
+  Ungroup,
   Unlink,
   WrapText,
   X,
@@ -281,6 +283,8 @@ export const Icons = {
   codeblock: FileCode,
   color: Baseline,
   column: RectangleVertical,
+  combine: Combine,
+  ungroup: Ungroup,
   comment: MessageSquare,
   commentAdd: MessageSquarePlus,
   conflict: Unlink,

apps/www/src/registry/default/plate-ui/table-cell-element.tsx

@@ -27,19 +27,24 @@ const TableCellElement = React.forwardRef<
   const {
     colIndex,
     rowIndex,
+    colSpan,
     readOnly,
     selected,
     hovered,
     hoveredLeft,
     rowSize,
     borders,
     isSelectingCell,
+    cellRef,
   } = useTableCellElementState();
   const { props: cellProps } = useTableCellElement({ element: props.element });
+
   const resizableState = useTableCellElementResizableState({
     colIndex,
     rowIndex,
+    colSpan,
   });
+
   const { rightProps, bottomProps, leftProps, hiddenLeft } =
     useTableCellElementResizable(resizableState);
 
@@ -50,7 +55,7 @@ const TableCellElement = React.forwardRef<
       asChild
       ref={ref}
       className={cn(
-        'relative overflow-visible border-none bg-background p-0',
+        'relative h-full overflow-visible border-none bg-background p-0',
         hideBorder && 'before:border-none',
         element.background ? 'bg-[--cellBackground]' : 'bg-background',
         !hideBorder &&
@@ -79,7 +84,7 @@ const TableCellElement = React.forwardRef<
         } as React.CSSProperties
       }
     >
-      <Cell>
+      <Cell ref={cellRef}>
         <div
           className="relative z-20 box-border h-full px-3 py-2"
           style={{

apps/www/src/registry/default/plate-ui/table-dropdown-menu.tsx

@@ -6,6 +6,7 @@ import {
   deleteRow,
   deleteTable,
   ELEMENT_TABLE,
+  getTableEntries,
   insertTable,
   insertTableColumn,
   insertTableRow,
@@ -32,6 +33,8 @@ export function TableDropdownMenu(props: DropdownMenuProps) {
     match: { type: ELEMENT_TABLE },
   });
 
+  const { cell, row } = getTableEntries(editor) || {};
+
   const openState = useOpenState();
 
   return (
@@ -82,6 +85,17 @@ export function TableDropdownMenu(props: DropdownMenuProps) {
             <span>Column</span>
           </DropdownMenuSubTrigger>
           <DropdownMenuSubContent>
+            <DropdownMenuItem
+              className="min-w-[180px]"
+              disabled={!tableSelected}
+              onSelect={async () => {
+                insertTableColumn(editor, { at: cell![1] });
+                focusEditor(editor);
+              }}
+            >
+              <Icons.add className={iconVariants({ variant: 'menuItem' })} />
+              Insert column before
+            </DropdownMenuItem>
             <DropdownMenuItem
               className="min-w-[180px]"
               disabled={!tableSelected}
@@ -113,6 +127,17 @@ export function TableDropdownMenu(props: DropdownMenuProps) {
             <span>Row</span>
           </DropdownMenuSubTrigger>
           <DropdownMenuSubContent>
+            <DropdownMenuItem
+              className="min-w-[180px]"
+              disabled={!tableSelected}
+              onSelect={async () => {
+                insertTableRow(editor, { at: row![1] });
+                focusEditor(editor);
+              }}
+            >
+              <Icons.add className={iconVariants({ variant: 'menuItem' })} />
+              Insert row before
+            </DropdownMenuItem>
             <DropdownMenuItem
               className="min-w-[180px]"
               disabled={!tableSelected}

apps/www/src/registry/default/plate-ui/table-element.tsx

@@ -3,14 +3,18 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { PopoverAnchor, PopoverContentProps } from '@radix-ui/react-popover';
 import {
   isCollapsed,
+  isExpanded,
   PlateElement,
   PlateElementProps,
   useEditorState,
   useElement,
   useRemoveNodeButton,
 } from '@udecode/plate-common';
 import {
+  getTableGridAbove,
+  mergeTableCells,
   TTableElement,
+  unmergeTableCells,
   useTableBordersDropdownMenuContentState,
   useTableElement,
   useTableElementState,
@@ -114,7 +118,64 @@ const TableFloatingToolbar = React.forwardRef<
   const readOnly = useReadOnly();
   const selected = useSelected();
   const editor = useEditorState();
-  const open = !readOnly && selected && isCollapsed(editor.selection);
+  const collapsed = !readOnly && selected && isCollapsed(editor.selection);
+  const expanded = !readOnly && selected && isExpanded(editor.selection);
+  const open = !readOnly && selected;
+
+  const cellEntries = getTableGridAbove(editor, { format: 'cell' });
+
+  const canUnmerge =
+    collapsed &&
+    cellEntries &&
+    cellEntries.length === 1 &&
+    ((cellEntries[0][0] as any)?.colSpan > 1 ||
+      (cellEntries[0][0] as any)?.rowSpan > 1);
+
+  const mergeContent = expanded && (
+    <Button
+      contentEditable={false}
+      variant="ghost"
+      isMenu
+      onClick={() => mergeTableCells(editor)}
+    >
+      <Icons.combine className="mr-2 h-4 w-4" />
+      Merge
+    </Button>
+  );
+
+  const unmergeButton = canUnmerge && (
+    <Button
+      contentEditable={false}
+      variant="ghost"
+      isMenu
+      onClick={() => unmergeTableCells(editor)}
+    >
+      <Icons.ungroup className="mr-2 h-4 w-4" />
+      Unmerge
+    </Button>
+  );
+
+  const bordersContent = collapsed && (
+    <>
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" isMenu>
+            <Icons.borderAll className="mr-2 h-4 w-4" />
+            Borders
+          </Button>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuPortal>
+          <TableBordersDropdownMenuContent />
+        </DropdownMenuPortal>
+      </DropdownMenu>
+
+      <Button contentEditable={false} variant="ghost" isMenu {...buttonProps}>
+        <Icons.delete className="mr-2 h-4 w-4" />
+        Delete
+      </Button>
+    </>
+  );
 
   return (
     <Popover open={open} modal={false}>
@@ -125,23 +186,9 @@ const TableFloatingToolbar = React.forwardRef<
         onOpenAutoFocus={(e) => e.preventDefault()}
         {...props}
       >
-        <DropdownMenu modal={false}>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" isMenu>
-              <Icons.borderAll className="mr-2 h-4 w-4" />
-              Borders
-            </Button>
-          </DropdownMenuTrigger>
-
-          <DropdownMenuPortal>
-            <TableBordersDropdownMenuContent />
-          </DropdownMenuPortal>
-        </DropdownMenu>
-
-        <Button contentEditable={false} variant="ghost" isMenu {...buttonProps}>
-          <Icons.delete className="mr-2 h-4 w-4" />
-          Delete
-        </Button>
+        {unmergeButton}
+        {mergeContent}
+        {bordersContent}
       </PopoverContent>
     </Popover>
   );
@@ -152,7 +199,7 @@ const TableElement = React.forwardRef<
   React.ElementRef<typeof PlateElement>,
   PlateElementProps
 >(({ className, children, ...props }, ref) => {
-  const { colSizes, isSelectingCell, minColumnWidth, marginLeft } =
+  const { colSizes, tableWidth, isSelectingCell, minColumnWidth, marginLeft } =
     useTableElementState();
   const { props: tableProps, colGroupProps } = useTableElement();
 
@@ -163,14 +210,14 @@ const TableElement = React.forwardRef<
           asChild
           ref={ref}
           className={cn(
-            'my-4 ml-px mr-0 table h-px w-full table-fixed border-collapse',
+            'relative my-4 ml-px mr-0 table h-px w-full table-fixed border-collapse',
             isSelectingCell && '[&_*::selection]:bg-none',
             className
           )}
           {...tableProps}
           {...props}
         >
-          <table>
+          <table style={{ width: tableWidth }}>
             <colgroup {...colGroupProps}>
               {colSizes.map((width, index) => (
                 <col

packages/resizable/src/components/ResizeHandle.tsx

@@ -51,6 +51,7 @@ export const ResizeHandleProvider = ({
 
 export type ResizeHandleOptions = {
   direction?: ResizeDirection;
+  initialSize?: number;
   onResize?: (event: ResizeEvent) => void;
   onMouseDown?: MouseEventHandler;
   onTouchStart?: TouchEventHandler;
@@ -60,6 +61,7 @@ export type ResizeHandleOptions = {
 
 export const useResizeHandleState = ({
   direction = 'left',
+  initialSize: _initialSize,
   onResize,
   onMouseDown,
   onTouchStart,
@@ -71,7 +73,7 @@ export const useResizeHandleState = ({
 
   const [isResizing, setIsResizing] = useState(false);
   const [initialPosition, setInitialPosition] = useState(0);
-  const [initialSize, setInitialSize] = useState(0);
+  const [initialSize, setInitialSize] = useState(_initialSize ?? 0);
 
   const isHorizontal = direction === 'left' || direction === 'right';
 
@@ -88,7 +90,12 @@ export const useResizeHandleState = ({
 
       const currentPosition = isHorizontal ? clientX : clientY;
       const delta = currentPosition - initialPosition;
-      onResize?.({ initialSize, delta, finished, direction });
+      onResize?.({
+        initialSize,
+        delta,
+        finished,
+        direction,
+      });
     };
 
     const handleMouseMove = (event: MouseEvent | TouchEvent) =>

packages/table/src/components/TableCellElement/useTableCellElementResizable.ts

@@ -30,7 +30,7 @@ import { TableCellElementState } from './useTableCellElementState';
 
 export type TableCellElementResizableOptions = Pick<
   TableCellElementState,
-  'colIndex' | 'rowIndex'
+  'colIndex' | 'rowIndex' | 'colSpan'
 > & {
   /**
    * Resize by step instead of by pixel.
@@ -47,6 +47,7 @@ export type TableCellElementResizableOptions = Pick<
 export const useTableCellElementResizableState = ({
   colIndex,
   rowIndex,
+  colSpan,
   step,
   stepX = step,
   stepY = step,
@@ -61,6 +62,7 @@ export const useTableCellElementResizableState = ({
     disableMarginLeft,
     colIndex,
     rowIndex,
+    colSpan,
     stepX,
     stepY,
   };
@@ -70,6 +72,7 @@ export const useTableCellElementResizable = ({
   disableMarginLeft,
   colIndex,
   rowIndex,
+  colSpan,
   stepX,
   stepY,
 }: ReturnType<typeof useTableCellElementResizableState>): {
@@ -86,6 +89,12 @@ export const useTableCellElementResizable = ({
     ELEMENT_TABLE
   );
 
+  // MERGE: override width for horizontally merged cell
+  let initialWidth: number | undefined;
+  if (colSpan > 1) {
+    initialWidth = tableElement.colSizes?.[colIndex];
+  }
+
   const [hoveredColIndex, setHoveredColIndex] =
     useTableStore().use.hoveredColIndex();
 
@@ -246,6 +255,7 @@ export const useTableCellElementResizable = ({
     rightProps: {
       options: {
         direction: 'right',
+        initialSize: initialWidth,
         onResize: handleResizeRight,
         ...getHandleHoverProps(colIndex),
       },