From fc70584c5accc93a07c63527764db23ae5e7aace Mon Sep 17 00:00:00 2001
From: zbeyens <zbeyens@udecode.io>
Date: Tue, 3 Oct 2023 18:24:59 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=91=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../default/plate-ui/table-element.tsx        |  94 ++++----
 .../resizable/src/components/ResizeHandle.tsx |   3 +-
 .../TableCellElement/getCellsOffsets.ts       |  15 --
 .../components/TableCellElement/getClosest.ts |  14 --
 .../src/components/TableCellElement/index.ts  |   1 -
 .../useTableCellElementResizable.ts           |   2 +-
 .../useTableCellElementState.ts               |  36 ++--
 .../TableCellElement/useTableCellsMerge.ts    | 202 ------------------
 .../TableElement/useTableColSizes.ts          |   2 +-
 packages/table/src/index.ts                   |   1 +
 packages/table/src/merge/getCellsOffsets.ts   |  13 ++
 packages/table/src/merge/getClosest.ts        |  16 ++
 .../TableCellElement => merge}/getColSpan.ts  |   6 +-
 .../TableCellElement => merge}/getRowSpan.ts  |   6 +-
 packages/table/src/merge/index.ts             |  10 +
 packages/table/src/merge/mergeTableCells.ts   |  99 +++++++++
 packages/table/src/merge/unmergeTableCells.ts |  64 ++++++
 .../table/src/transforms/insertTableRow.ts    |   1 +
 packages/table/src/types.ts                   |   3 +
 19 files changed, 277 insertions(+), 311 deletions(-)
 delete mode 100644 packages/table/src/components/TableCellElement/getCellsOffsets.ts
 delete mode 100644 packages/table/src/components/TableCellElement/getClosest.ts
 delete mode 100644 packages/table/src/components/TableCellElement/useTableCellsMerge.ts
 create mode 100644 packages/table/src/merge/getCellsOffsets.ts
 create mode 100644 packages/table/src/merge/getClosest.ts
 rename packages/table/src/{components/TableCellElement => merge}/getColSpan.ts (54%)
 rename packages/table/src/{components/TableCellElement => merge}/getRowSpan.ts (54%)
 create mode 100644 packages/table/src/merge/index.ts
 create mode 100644 packages/table/src/merge/mergeTableCells.ts
 create mode 100644 packages/table/src/merge/unmergeTableCells.ts

diff --git a/apps/www/src/registry/default/plate-ui/table-element.tsx b/apps/www/src/registry/default/plate-ui/table-element.tsx
index 45b7b7d312..5741164e1b 100644
--- a/apps/www/src/registry/default/plate-ui/table-element.tsx
+++ b/apps/www/src/registry/default/plate-ui/table-element.tsx
@@ -3,6 +3,7 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { PopoverAnchor, PopoverContentProps } from '@radix-ui/react-popover';
 import {
   isCollapsed,
+  isExpanded,
   PlateElement,
   PlateElementProps,
   useEditorState,
@@ -10,10 +11,11 @@ import {
   useRemoveNodeButton,
 } from '@udecode/plate-common';
 import {
-  isTableRectangular,
+  getTableGridAbove,
+  mergeTableCells,
   TTableElement,
+  unmergeTableCells,
   useTableBordersDropdownMenuContentState,
-  useTableCellsMerge,
   useTableElement,
   useTableElementState,
 } from '@udecode/plate-table';
@@ -114,56 +116,47 @@ const TableFloatingToolbar = React.forwardRef<
   const { props: buttonProps } = useRemoveNodeButton({ element });
 
   const readOnly = useReadOnly();
+  const selected = useSelected();
   const editor = useEditorState();
-  const isSelected = useSelected();
+  const collapsed = !readOnly && selected && isCollapsed(editor.selection);
+  const expanded = !readOnly && selected && isExpanded(editor.selection);
+  const open = !readOnly && selected;
 
-  const { onMergeCells, onUnmerge, cellEntries, subTable } =
-    useTableCellsMerge();
-  const tableSelection = subTable?.[0]?.[0];
+  const cellEntries = getTableGridAbove(editor, { format: 'cell' });
 
-  const collapsedToolbarActive =
-    isSelected && !readOnly && isCollapsed(editor.selection);
-
-  const hasEntries = !!cellEntries?.length;
   const canUnmerge =
-    hasEntries &&
-    cellEntries?.length === 1 &&
+    collapsed &&
+    cellEntries &&
+    cellEntries.length === 1 &&
     ((cellEntries[0][0] as any)?.colSpan > 1 ||
       (cellEntries[0][0] as any)?.rowSpan > 1);
 
-  const mergeToolbarActive =
-    isSelected &&
-    !readOnly &&
-    hasEntries &&
-    cellEntries.length > 1 &&
-    !isCollapsed(editor.selection) &&
-    isTableRectangular(tableSelection);
-
-  const mergeButton = (
+  const mergeContent = expanded && (
     <Button
       contentEditable={false}
       variant="ghost"
       isMenu
-      onClick={onMergeCells}
+      onClick={() => mergeTableCells(editor)}
     >
       <Icons.combine className="mr-2 h-4 w-4" />
       Merge
     </Button>
   );
 
-  const collapsedContent = (
+  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 && (
     <>
-      {canUnmerge && (
-        <Button
-          contentEditable={false}
-          variant="ghost"
-          isMenu
-          onClick={onUnmerge}
-        >
-          <Icons.ungroup className="mr-2 h-4 w-4" />
-          Unmerge
-        </Button>
-      )}
       <DropdownMenu modal={false}>
         <DropdownMenuTrigger asChild>
           <Button variant="ghost" isMenu>
@@ -176,6 +169,7 @@ const TableFloatingToolbar = React.forwardRef<
           <TableBordersDropdownMenuContent />
         </DropdownMenuPortal>
       </DropdownMenu>
+
       <Button contentEditable={false} variant="ghost" isMenu {...buttonProps}>
         <Icons.delete className="mr-2 h-4 w-4" />
         Delete
@@ -184,28 +178,18 @@ const TableFloatingToolbar = React.forwardRef<
   );
 
   return (
-    <Popover open={mergeToolbarActive || collapsedToolbarActive} modal={false}>
+    <Popover open={open} modal={false}>
       <PopoverAnchor asChild>{children}</PopoverAnchor>
-      {mergeToolbarActive && (
-        <PopoverContent
-          ref={ref}
-          className={cn(popoverVariants(), 'flex w-[220px] flex-col gap-1 p-1')}
-          onOpenAutoFocus={(e) => e.preventDefault()}
-          {...props}
-        >
-          {mergeButton}
-        </PopoverContent>
-      )}
-      {collapsedToolbarActive && (
-        <PopoverContent
-          ref={ref}
-          className={cn(popoverVariants(), 'flex w-[220px] flex-col gap-1 p-1')}
-          onOpenAutoFocus={(e) => e.preventDefault()}
-          {...props}
-        >
-          {collapsedContent}
-        </PopoverContent>
-      )}
+      <PopoverContent
+        ref={ref}
+        className={cn(popoverVariants(), 'flex w-[220px] flex-col gap-1 p-1')}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        {...props}
+      >
+        {unmergeButton}
+        {mergeContent}
+        {bordersContent}
+      </PopoverContent>
     </Popover>
   );
 });
diff --git a/packages/resizable/src/components/ResizeHandle.tsx b/packages/resizable/src/components/ResizeHandle.tsx
index 4e63dcc804..ae12d439cb 100644
--- a/packages/resizable/src/components/ResizeHandle.tsx
+++ b/packages/resizable/src/components/ResizeHandle.tsx
@@ -91,7 +91,7 @@ export const useResizeHandleState = ({
       const currentPosition = isHorizontal ? clientX : clientY;
       const delta = currentPosition - initialPosition;
       onResize?.({
-        initialSize: _initialSize ?? initialSize,
+        initialSize,
         delta,
         finished,
         direction,
@@ -126,7 +126,6 @@ export const useResizeHandleState = ({
     isHorizontal,
     onHoverEnd,
     direction,
-    _initialSize,
   ]);
 
   return {
diff --git a/packages/table/src/components/TableCellElement/getCellsOffsets.ts b/packages/table/src/components/TableCellElement/getCellsOffsets.ts
deleted file mode 100644
index 356e53dbd3..0000000000
--- a/packages/table/src/components/TableCellElement/getCellsOffsets.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export const getCellOffsets = (colSizes: number[]) => {
-  const { offsets } = colSizes.reduce(
-    (acc, current) => {
-      const currentOffset = acc.prevOffset + current;
-      acc.offsets.push(currentOffset);
-      acc.prevOffset = currentOffset;
-      return acc;
-    },
-    {
-      offsets: [0],
-      prevOffset: 0,
-    }
-  );
-  return offsets;
-};
diff --git a/packages/table/src/components/TableCellElement/getClosest.ts b/packages/table/src/components/TableCellElement/getClosest.ts
deleted file mode 100644
index b91cccad2d..0000000000
--- a/packages/table/src/components/TableCellElement/getClosest.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export const getClosest = (target: number, offsets: number[]) => {
-  const closest = offsets.reduce(
-    (acc, current, index) => {
-      return Math.abs(current - target) < Math.abs(acc.value - target)
-        ? { value: current, index }
-        : acc;
-    },
-    {
-      value: 0,
-      index: 0,
-    }
-  );
-  return closest.index;
-};
diff --git a/packages/table/src/components/TableCellElement/index.ts b/packages/table/src/components/TableCellElement/index.ts
index 0c2fc5c6ac..5ce0a0fc5c 100644
--- a/packages/table/src/components/TableCellElement/index.ts
+++ b/packages/table/src/components/TableCellElement/index.ts
@@ -9,4 +9,3 @@ export * from './useIsCellSelected';
 export * from './useTableBordersDropdownMenuContentState';
 export * from './useTableCellElementResizable';
 export * from './useTableCellElementState';
-export * from './useTableCellsMerge';
diff --git a/packages/table/src/components/TableCellElement/useTableCellElementResizable.ts b/packages/table/src/components/TableCellElement/useTableCellElementResizable.ts
index cb7ec88b8f..250cca4a61 100644
--- a/packages/table/src/components/TableCellElement/useTableCellElementResizable.ts
+++ b/packages/table/src/components/TableCellElement/useTableCellElementResizable.ts
@@ -89,7 +89,7 @@ export const useTableCellElementResizable = ({
     ELEMENT_TABLE
   );
 
-  // override width for horizontally merged cell
+  // MERGE: override width for horizontally merged cell
   let initialWidth: number | undefined;
   if (colSpan > 1) {
     initialWidth = tableElement.colSizes?.[colIndex];
diff --git a/packages/table/src/components/TableCellElement/useTableCellElementState.ts b/packages/table/src/components/TableCellElement/useTableCellElementState.ts
index 67fb91e4b4..0ca2ddde28 100644
--- a/packages/table/src/components/TableCellElement/useTableCellElementState.ts
+++ b/packages/table/src/components/TableCellElement/useTableCellElementState.ts
@@ -2,26 +2,25 @@ import { MutableRefObject, useEffect, useRef } from 'react';
 import { useEditorRef, useElement } from '@udecode/plate-common';
 import { useReadOnly } from 'slate-react';
 
-import { ELEMENT_TABLE, ELEMENT_TR } from '../../createTablePlugin.js';
-import { getTableColumnIndex, getTableRowIndex } from '../../queries/index.js';
-import { useTableStore } from '../../stores/tableStore.js';
+import { ELEMENT_TABLE, ELEMENT_TR } from '../../createTablePlugin';
+import { getClosest } from '../../merge/getClosest';
+import { getColSpan } from '../../merge/getColSpan';
+import { getRowSpan } from '../../merge/getRowSpan';
+import { getTableColumnIndex, getTableRowIndex } from '../../queries/index';
+import { useTableStore } from '../../stores/tableStore';
 import {
   TTableCellElement,
   TTableElement,
   TTableRowElement,
-} from '../../types.js';
-import { getClosest } from './getClosest.js';
-import { getColSpan } from './getColSpan.js';
-import { getRowSpan } from './getRowSpan.js';
+} from '../../types';
 import {
   BorderStylesDefault,
   getTableCellBorders,
-} from './getTableCellBorders.js';
-import { useIsCellSelected } from './useIsCellSelected.js';
+} from './getTableCellBorders';
+import { useIsCellSelected } from './useIsCellSelected';
 
 export type TableCellElementState = {
   colIndex: number;
-  colSpan: number;
   rowIndex: number;
   readOnly: boolean;
   hovered: boolean;
@@ -30,7 +29,10 @@ export type TableCellElementState = {
   rowSize: number | undefined;
   borders: BorderStylesDefault;
   isSelectingCell: boolean;
-  cellRef: MutableRefObject<HTMLTableCellElement | null>;
+
+  // Merge: cell colspan.
+  colSpan: number;
+  cellRef: MutableRefObject<HTMLTableCellElement | undefined>;
 };
 
 export const useTableCellElementState = ({
@@ -43,16 +45,15 @@ export const useTableCellElementState = ({
 } = {}): TableCellElementState => {
   const editor = useEditorRef();
   const cellElement = useElement<TTableCellElement>();
-  const cellRef = useRef<HTMLTableCellElement>(null);
+  const cellRef = useRef<HTMLTableDataCellElement>();
 
   // TODO: get rid of mutating element here
   // currently needed only for pasting tables from clipboard to gather span attributes
   cellElement.colSpan = getColSpan(cellElement);
   cellElement.rowSpan = getRowSpan(cellElement);
 
-  const rowIndex = getTableRowIndex(editor, cellElement);
-  cellElement.rowIndex = rowIndex; // TODO: get rid of mutation or make it more explicit
-  const endRowIndex = rowIndex + cellElement.rowSpan - 1;
+  const rowIndex =
+    getTableRowIndex(editor, cellElement) + cellElement.rowSpan - 1;
 
   const readOnly = useReadOnly();
 
@@ -65,7 +66,7 @@ export const useTableCellElementState = ({
   const rowElement = useElement<TTableRowElement>(ELEMENT_TR);
   const rowSizeOverrides = useTableStore().get.rowSizeOverrides();
   const rowSize =
-    rowSizeOverrides.get(endRowIndex) ?? rowElement?.size ?? undefined;
+    rowSizeOverrides.get(rowIndex) ?? rowElement?.size ?? undefined;
 
   const endColIndex = useRef<number>(getTableColumnIndex(editor, cellElement));
   const startCIndex = useRef<number>(getTableColumnIndex(editor, cellElement));
@@ -75,7 +76,6 @@ export const useTableCellElementState = ({
   if (cellRef.current && hoveredColIndex === null && cellOffsets) {
     const cellOffset = cellRef.current.offsetLeft;
     const startColIndex = getClosest(cellOffset, cellOffsets);
-    cellElement.colIndex = startColIndex; // TODO: get rid of mutation or make it more explicit
 
     startCIndex.current = startColIndex;
     endColIndex.current = startColIndex + cellElement.colSpan - 1;
@@ -91,7 +91,7 @@ export const useTableCellElementState = ({
 
   return {
     colIndex: endColIndex.current,
-    rowIndex: endRowIndex,
+    rowIndex,
     colSpan: cellElement.colSpan,
     readOnly: !ignoreReadOnly && readOnly,
     selected: isCellSelected,
diff --git a/packages/table/src/components/TableCellElement/useTableCellsMerge.ts b/packages/table/src/components/TableCellElement/useTableCellsMerge.ts
deleted file mode 100644
index 66064a2fbd..0000000000
--- a/packages/table/src/components/TableCellElement/useTableCellsMerge.ts
+++ /dev/null
@@ -1,202 +0,0 @@
-import {
-  findNode,
-  findNodePath,
-  getNodeString,
-  getPluginType,
-  insertElements,
-  removeNodes,
-  TDescendant,
-  useEditorRef,
-} from '@udecode/plate-common';
-
-import { ELEMENT_TABLE } from '../../createTablePlugin';
-import { useTableStore } from '../../stores';
-import {
-  TTableCellElement,
-  TTableElement,
-  TTableRowElement,
-} from '../../types';
-import { getCellTypes, getEmptyCellNode } from '../../utils/index';
-
-const getRowSpanInFirstCol = (table: TTableCellElement, colIndex: number) => {
-  return table.children.reduce((acc, cur) => {
-    const rowEl = cur as TTableRowElement;
-    const cellEl = rowEl.children.find((cell) => {
-      const cellElem = cell as TTableCellElement;
-      return cellElem?.colIndex === colIndex;
-    }) as TTableCellElement;
-
-    if (colIndex === cellEl?.colIndex) {
-      const curRowSpan = cellEl?.rowSpan || 1;
-      return acc + curRowSpan;
-    }
-    return acc;
-  }, 0);
-};
-
-export const useTableCellsMerge = () => {
-  const editor = useEditorRef();
-
-  const cellEntries = useTableStore().get.selectedCellEntries();
-  const subTable = useTableStore().get.selectedSubTable();
-
-  const onMergeCells = () => {
-    const selectedCellEntries = cellEntries!;
-    const [[table]] = subTable!;
-
-    const firstRow = table.children?.[0] as TTableRowElement;
-
-    // define colSpan
-    const colSpan = firstRow.children.reduce((acc, cur) => {
-      const cellElement = cur as TTableCellElement;
-      return acc + (cellElement?.colSpan || 1);
-    }, 0);
-
-    // define rowSpan
-    const firstCell = firstRow.children?.[0] as TTableCellElement;
-    const firstColIndex = firstCell.colIndex!;
-    const rowSpan = getRowSpanInFirstCol(table, firstColIndex);
-
-    const [, startCellPath] = selectedCellEntries[0];
-
-    const contents = [];
-    for (const cellEntry of selectedCellEntries) {
-      const [el] = cellEntry;
-
-      if (getNodeString(el)) {
-        contents.push(...el.children); // TODO: consider using deep clone
-      }
-    }
-
-    const cols: any = {};
-    let hasHeaderCell = false;
-    selectedCellEntries.forEach(([entry, path]) => {
-      if (!hasHeaderCell && entry.type === 'table_header_cell') {
-        hasHeaderCell = true;
-      }
-      if (cols[path[1]]) {
-        cols[path[1]].push(path);
-      } else {
-        cols[path[1]] = [path];
-      }
-    });
-
-    // removes multiple cells with on same path.
-    // once cell removed, next cell in the row will settle down on that path
-    Object.values(cols).forEach((paths: any) => {
-      paths?.forEach(() => {
-        removeNodes(editor, { at: paths[0] });
-      });
-    });
-
-    const mergedCell = {
-      ...getEmptyCellNode(editor, {
-        header: selectedCellEntries[0][0].type === 'th',
-        newCellChildren: contents,
-      }),
-      colSpan,
-      rowSpan,
-    };
-
-    insertElements(editor, mergedCell, { at: startCellPath, select: true });
-  };
-
-  const onUnmerge = () => {
-    const selectedCellEntries = cellEntries!;
-    const [[cellElem, path]] = selectedCellEntries;
-
-    // creating new object per iteration is essential here
-    const createEmptyCell = (children?: TDescendant[]) => {
-      return {
-        ...getEmptyCellNode(editor, {
-          header: cellElem.type === 'th',
-          newCellChildren: children,
-        }),
-        colSpan: 1,
-        rowSpan: 1,
-      };
-    };
-
-    const tablePath = path.slice(0, -2);
-
-    const cellPath = path.slice(-2);
-    const [rowPath, colPath] = cellPath;
-    const colSpan = cellElem.colSpan;
-    const rowSpan = cellElem.rowSpan;
-
-    const colPaths = Array.from(
-      { length: colSpan } as ArrayLike<number>,
-      (_, index) => index
-    ).map((current) => colPath + current);
-
-    let paths = Array.from(
-      { length: rowSpan } as ArrayLike<number>,
-      (_, index) => index
-    ).map((current) => {
-      const currentRowPath = rowPath + current;
-      return colPaths.map((currentColPath) => [
-        ...tablePath,
-        currentRowPath,
-        currentColPath,
-      ]);
-    });
-
-    const tableEntry = findNode(editor, {
-      at: path,
-      match: { type: getPluginType(editor, ELEMENT_TABLE) },
-    });
-    const table = tableEntry?.[0] as TTableElement;
-
-    paths = paths.map((cellsPaths) => {
-      const currentPath = cellsPaths[0]; // pick starting cell in the row
-      const [rowIndex, colIndex] = currentPath.slice(-2);
-
-      let newCellPaths = cellsPaths;
-      if (colIndex > 0) {
-        const prevCellInRowPath = [...tablePath, rowIndex, colIndex - 1];
-        const foundEntry = findNode(editor, {
-          at: prevCellInRowPath,
-          match: { type: getCellTypes(editor) },
-        });
-
-        /**
-         * Search for the last cell path in the row.
-         * We can't just paste new cell with path gaps.
-         * Slate needs elements with paths one by each other.
-         */
-        if (!foundEntry) {
-          const currentRow = table.children[rowIndex] as TTableRowElement;
-          const endingCell = currentRow.children.at(-1)!;
-          const endingCellPath = findNodePath(editor, endingCell)!;
-
-          const [, startingColIndex] = endingCellPath.slice(-2);
-          const startWith =
-            startingColIndex === 0 ? startingColIndex : startingColIndex + 1;
-
-          newCellPaths = cellsPaths.map((currentCellPath, i) => {
-            const currentRowPath = currentCellPath.slice(0, -1);
-            const newPath = [...currentRowPath, startWith + i]; // adjust column path
-            return newPath;
-          });
-        }
-      }
-      return newCellPaths;
-    });
-
-    // remove merged cell
-    removeNodes(editor, { at: path });
-
-    // insert new cells
-    paths
-      .flat()
-      .forEach((p, index) =>
-        insertElements(
-          editor,
-          index === 0 ? createEmptyCell(cellElem.children) : createEmptyCell(),
-          { at: p }
-        )
-      );
-  };
-
-  return { cellEntries, subTable, onMergeCells, onUnmerge };
-};
diff --git a/packages/table/src/components/TableElement/useTableColSizes.ts b/packages/table/src/components/TableElement/useTableColSizes.ts
index 08060a873d..ebd88bd785 100644
--- a/packages/table/src/components/TableElement/useTableColSizes.ts
+++ b/packages/table/src/components/TableElement/useTableColSizes.ts
@@ -7,13 +7,13 @@ import {
 } from '@udecode/plate-common';
 
 import { ELEMENT_TABLE } from '../../createTablePlugin';
+import { getCellOffsets } from '../../merge/getCellsOffsets';
 import {
   getTableColumnCount,
   getTableOverriddenColSizes,
 } from '../../queries/index';
 import { useTableStore } from '../../stores/tableStore';
 import { TablePlugin, TTableElement } from '../../types';
-import { getCellOffsets } from '../TableCellElement/getCellsOffsets';
 
 /**
  * Returns colSizes with overrides applied.
diff --git a/packages/table/src/index.ts b/packages/table/src/index.ts
index 81ea22f4b0..8704b7e1ac 100644
--- a/packages/table/src/index.ts
+++ b/packages/table/src/index.ts
@@ -15,6 +15,7 @@ export * from './withSelectionTable';
 export * from './withSetFragmentDataTable';
 export * from './withTable';
 export * from './components/index';
+export * from './merge/index';
 export * from './queries/index';
 export * from './stores/index';
 export * from './transforms/index';
diff --git a/packages/table/src/merge/getCellsOffsets.ts b/packages/table/src/merge/getCellsOffsets.ts
new file mode 100644
index 0000000000..8e75d0581d
--- /dev/null
+++ b/packages/table/src/merge/getCellsOffsets.ts
@@ -0,0 +1,13 @@
+// Returns an array of cumulative sums of the colSizes.
+export const getCellOffsets = (colSizes: number[]): number[] => {
+  const offsets: number[] = [0];
+  let prevOffset: number = 0;
+
+  for (const current of colSizes) {
+    const currentOffset = prevOffset + current;
+    offsets.push(currentOffset);
+    prevOffset = currentOffset;
+  }
+
+  return offsets;
+};
diff --git a/packages/table/src/merge/getClosest.ts b/packages/table/src/merge/getClosest.ts
new file mode 100644
index 0000000000..21edbdda69
--- /dev/null
+++ b/packages/table/src/merge/getClosest.ts
@@ -0,0 +1,16 @@
+/**
+ * Returns the index of the value in the array that is closest to the target.
+ */
+export const getClosest = (target: number, offsets: number[]) => {
+  let closestValue = offsets[0];
+  let closestIndex = 0;
+
+  for (let i = 1; i < offsets.length; i++) {
+    if (Math.abs(offsets[i] - target) < Math.abs(closestValue - target)) {
+      closestValue = offsets[i];
+      closestIndex = i;
+    }
+  }
+
+  return closestIndex;
+};
diff --git a/packages/table/src/components/TableCellElement/getColSpan.ts b/packages/table/src/merge/getColSpan.ts
similarity index 54%
rename from packages/table/src/components/TableCellElement/getColSpan.ts
rename to packages/table/src/merge/getColSpan.ts
index 236c62cc62..2df1070a04 100644
--- a/packages/table/src/components/TableCellElement/getColSpan.ts
+++ b/packages/table/src/merge/getColSpan.ts
@@ -1,5 +1,9 @@
-import { TTableCellElement } from '../../types';
+import { TTableCellElement } from '../types';
 
+/**
+ * Returns the colspan attribute of the table cell element.
+ * @default 1 if undefined.
+ */
 export const getColSpan = (cellElem: TTableCellElement) => {
   const attrColSpan = Number(cellElem.attributes?.colspan);
   return cellElem.colSpan || attrColSpan || 1;
diff --git a/packages/table/src/components/TableCellElement/getRowSpan.ts b/packages/table/src/merge/getRowSpan.ts
similarity index 54%
rename from packages/table/src/components/TableCellElement/getRowSpan.ts
rename to packages/table/src/merge/getRowSpan.ts
index bd4aa2037d..6e83104836 100644
--- a/packages/table/src/components/TableCellElement/getRowSpan.ts
+++ b/packages/table/src/merge/getRowSpan.ts
@@ -1,5 +1,9 @@
-import { TTableCellElement } from '../../types';
+import { TTableCellElement } from '../types';
 
+/**
+ * Returns the rowspan attribute of the table cell element.
+ * @default 1 if undefined
+ */
 export const getRowSpan = (cellElem: TTableCellElement) => {
   const attrRowSpan = Number(cellElem.attributes?.rowspan);
   return cellElem.rowSpan || attrRowSpan || 1;
diff --git a/packages/table/src/merge/index.ts b/packages/table/src/merge/index.ts
new file mode 100644
index 0000000000..457f22ffb9
--- /dev/null
+++ b/packages/table/src/merge/index.ts
@@ -0,0 +1,10 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './getCellsOffsets';
+export * from './getClosest';
+export * from './getColSpan';
+export * from './getRowSpan';
+export * from './mergeTableCells';
+export * from './unmergeTableCells';
diff --git a/packages/table/src/merge/mergeTableCells.ts b/packages/table/src/merge/mergeTableCells.ts
new file mode 100644
index 0000000000..86a0c9d453
--- /dev/null
+++ b/packages/table/src/merge/mergeTableCells.ts
@@ -0,0 +1,99 @@
+import {
+  insertElements,
+  PlateEditor,
+  removeNodes,
+  Value,
+  withoutNormalizing,
+} from '@udecode/plate-common';
+import cloneDeep from 'lodash/cloneDeep.js';
+
+import { getTableGridAbove } from '../queries';
+import { getEmptyCellNode } from '../utils';
+import { getColSpan } from './getColSpan';
+import { getRowSpan } from './getRowSpan';
+
+/**
+ * Merges multiple selected cells into one.
+ */
+export const mergeTableCells = <V extends Value = Value>(
+  editor: PlateEditor<V>
+) => {
+  withoutNormalizing(editor, () => {
+    const cellEntries = getTableGridAbove(editor, { format: 'cell' });
+
+    // calculate the colSpan which is the number of horizontal cells that a cell should span.
+    let colSpan = 0;
+    for (const entry of cellEntries) {
+      const [data, path] = entry;
+
+      // count only those cells that are in the first selected row.
+      if (path[1] === cellEntries[0][1][1]) {
+        const cellColSpan = getColSpan(data);
+        colSpan += cellColSpan;
+      }
+    }
+
+    // calculate the rowSpan which is the number of vertical cells that a cell should span.
+    let rowSpan = 1;
+    const alreadyCounted: number[] = [];
+    for (const entry of cellEntries) {
+      const [data, path] = entry;
+      const curRowCounted = alreadyCounted.includes(path[1]);
+
+      // only count each row once, and ignore the first selected row.
+      if (path[1] !== cellEntries[0][1][1] && !curRowCounted) {
+        alreadyCounted.push(path[1]);
+
+        const cellRowSpan = getRowSpan(data);
+        rowSpan += cellRowSpan;
+      }
+    }
+
+    // This will store the content of all cells we are merging
+    const contents = [];
+    for (const cellEntry of cellEntries) {
+      const [el] = cellEntry;
+      contents.push(...cloneDeep(el.children));
+    }
+
+    // Create a hash map where keys are col paths,
+    // and values are an array of all paths with that column
+    const cols: { [key: string]: number[][] } = {};
+
+    // A boolean to keep track if we have a header cell among the cells we are merging
+    let hasHeaderCell = false;
+
+    cellEntries.forEach(([entry, path]) => {
+      if (!hasHeaderCell && entry.type === 'table_header_cell') {
+        hasHeaderCell = true;
+      }
+      if (cols[path[1]]) {
+        cols[path[1]].push(path);
+      } else {
+        cols[path[1]] = [path];
+      }
+    });
+
+    // removes multiple cells with on same path.
+    // once cell removed, next cell in the row will settle down on that path
+    Object.values(cols).forEach((paths) => {
+      paths?.forEach(() => {
+        removeNodes(editor, { at: paths[0] });
+      });
+    });
+
+    // Create a new cell to replace the merged cells, with
+    // calculated colSpan and rowSpan attributes and combined content
+    const mergedCell = {
+      ...getEmptyCellNode(editor, {
+        header: cellEntries[0][0].type === 'th',
+        newCellChildren: contents,
+      }),
+      colSpan,
+      rowSpan,
+    };
+
+    // insert the new merged cell in place of the first cell in the selection
+    insertElements(editor, mergedCell, { at: cellEntries[0][1] });
+  });
+};
diff --git a/packages/table/src/merge/unmergeTableCells.ts b/packages/table/src/merge/unmergeTableCells.ts
new file mode 100644
index 0000000000..27945a2a10
--- /dev/null
+++ b/packages/table/src/merge/unmergeTableCells.ts
@@ -0,0 +1,64 @@
+// Unmerges previously merged cell into individual cells.
+import {
+  insertElements,
+  PlateEditor,
+  removeNodes,
+  TDescendant,
+  Value,
+  withoutNormalizing,
+} from '@udecode/plate-common';
+
+import { getTableGridAbove } from '../queries';
+import { getEmptyCellNode } from '../utils';
+
+export const unmergeTableCells = <V extends Value = Value>(
+  editor: PlateEditor<V>
+) => {
+  withoutNormalizing(editor, () => {
+    const cellEntries = getTableGridAbove(editor, { format: 'cell' });
+
+    const [[cellElem, path]] = cellEntries;
+
+    // creating new object per iteration is essential here
+    const createEmptyCell = (children?: TDescendant[]) => {
+      return {
+        ...getEmptyCellNode(editor, {
+          header: cellElem.type === 'th',
+          newCellChildren: children,
+        }),
+        colSpan: 1,
+        rowSpan: 1,
+      };
+    };
+
+    const tablePath = path.slice(0, -2);
+
+    const cellPath = path.slice(-2);
+    const [rowPath, colPath] = cellPath;
+    const colSpan = cellElem.colSpan as number;
+    const rowSpan = cellElem.rowSpan as number;
+
+    // Generate an array of column paths from the colspan
+    const colPaths: number[] = [];
+    for (let i = 0; i < colSpan; i++) {
+      colPaths.push(colPath + i);
+    }
+
+    // Remove the original merged cell from the editor
+    removeNodes(editor, { at: path });
+
+    // Generate an array of cell paths from the row and col spans and then insert empty cells at those paths
+    for (let i = 0; i < rowSpan; i++) {
+      const currentRowPath = rowPath + i;
+      for (let j = 0; j < colPaths.length; j++) {
+        const currentColPath = colPaths[j];
+        const pathForNewCell = [...tablePath, currentRowPath, currentColPath];
+        const cellToInsert =
+          i === 0 && j === 0
+            ? createEmptyCell(cellElem.children)
+            : createEmptyCell();
+        insertElements(editor, cellToInsert, { at: pathForNewCell });
+      }
+    }
+  });
+};
diff --git a/packages/table/src/transforms/insertTableRow.ts b/packages/table/src/transforms/insertTableRow.ts
index 081f3e364c..7332835668 100644
--- a/packages/table/src/transforms/insertTableRow.ts
+++ b/packages/table/src/transforms/insertTableRow.ts
@@ -16,6 +16,7 @@ import {
 import { Path } from 'slate';
 
 import { ELEMENT_TABLE, ELEMENT_TH, ELEMENT_TR } from '../createTablePlugin';
+import { getRowSpan } from '../merge/getRowSpan';
 import { getTableColumnCount } from '../queries';
 import {
   TablePlugin,
diff --git a/packages/table/src/types.ts b/packages/table/src/types.ts
index 7ee59a13a0..37c31b76c4 100644
--- a/packages/table/src/types.ts
+++ b/packages/table/src/types.ts
@@ -15,6 +15,9 @@ export interface TablePlugin<V extends Value = Value> {
   // Disable first column left resizer.
   disableMarginLeft?: boolean;
 
+  // Disable merging cells.
+  disableMergeCells?: boolean;
+
   /**
    * Disable unsetting the first column width when the table has one column.
    * Set it to true if you want to resize the table width when there is only one column.