From 4ee33e511d9345d91b522f1f556b3c8564937ca5 Mon Sep 17 00:00:00 2001
From: zbeyens <zbeyens@udecode.io>
Date: Mon, 2 Oct 2023 19:32:22 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../www/content/docs/components/changelog.mdx |  7 ++++++
 .../default/plate-ui/table-cell-element.tsx   |  5 ++---
 .../useTableCellElementState.ts               | 22 +++++++++----------
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx
index 550c240b08..474a8e3ef6 100644
--- a/apps/www/content/docs/components/changelog.mdx
+++ b/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
diff --git a/apps/www/src/registry/default/plate-ui/table-cell-element.tsx b/apps/www/src/registry/default/plate-ui/table-cell-element.tsx
index 3ef4777e84..3395bfb4e4 100644
--- a/apps/www/src/registry/default/plate-ui/table-cell-element.tsx
+++ b/apps/www/src/registry/default/plate-ui/table-cell-element.tsx
@@ -1,4 +1,4 @@
-import React, { LegacyRef } from 'react';
+import React from 'react';
 import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';
 import {
   TTableCellElement,
@@ -48,7 +48,6 @@ const TableCellElement = React.forwardRef<
   const { rightProps, bottomProps, leftProps, hiddenLeft } =
     useTableCellElementResizable(resizableState);
 
-    
   const Cell = isHeader ? 'th' : 'td';
 
   return (
@@ -85,7 +84,7 @@ const TableCellElement = React.forwardRef<
         } as React.CSSProperties
       }
     >
-      <Cell ref={cellRef as LegacyRef<HTMLTableDataCellElement> | undefined}>
+      <Cell ref={cellRef}>
         <div
           className="relative z-20 box-border h-full px-3 py-2"
           style={{
diff --git a/packages/table/src/components/TableCellElement/useTableCellElementState.ts b/packages/table/src/components/TableCellElement/useTableCellElementState.ts
index ea5f499508..67fb91e4b4 100644
--- a/packages/table/src/components/TableCellElement/useTableCellElementState.ts
+++ b/packages/table/src/components/TableCellElement/useTableCellElementState.ts
@@ -2,22 +2,22 @@ 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';
-import { getTableColumnIndex, getTableRowIndex } from '../../queries/index';
-import { useTableStore } from '../../stores/tableStore';
+import { ELEMENT_TABLE, ELEMENT_TR } from '../../createTablePlugin.js';
+import { getTableColumnIndex, getTableRowIndex } from '../../queries/index.js';
+import { useTableStore } from '../../stores/tableStore.js';
 import {
   TTableCellElement,
   TTableElement,
   TTableRowElement,
-} from '../../types';
-import { getClosest } from './getClosest';
-import { getColSpan } from './getColSpan';
-import { getRowSpan } from './getRowSpan';
+} from '../../types.js';
+import { getClosest } from './getClosest.js';
+import { getColSpan } from './getColSpan.js';
+import { getRowSpan } from './getRowSpan.js';
 import {
   BorderStylesDefault,
   getTableCellBorders,
-} from './getTableCellBorders';
-import { useIsCellSelected } from './useIsCellSelected';
+} from './getTableCellBorders.js';
+import { useIsCellSelected } from './useIsCellSelected.js';
 
 export type TableCellElementState = {
   colIndex: number;
@@ -30,7 +30,7 @@ export type TableCellElementState = {
   rowSize: number | undefined;
   borders: BorderStylesDefault;
   isSelectingCell: boolean;
-  cellRef: MutableRefObject<HTMLTableCellElement | undefined>;
+  cellRef: MutableRefObject<HTMLTableCellElement | null>;
 };
 
 export const useTableCellElementState = ({
@@ -43,7 +43,7 @@ export const useTableCellElementState = ({
 } = {}): TableCellElementState => {
   const editor = useEditorRef();
   const cellElement = useElement<TTableCellElement>();
-  const cellRef = useRef<HTMLTableCellElement>();
+  const cellRef = useRef<HTMLTableCellElement>(null);
 
   // TODO: get rid of mutating element here
   // currently needed only for pasting tables from clipboard to gather span attributes