✨

udecode · Oct 2, 2023 · 4ee33e5 · 4ee33e5
1 parent 18e4caa
commit 4ee33e5
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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