👷

udecode · Oct 3, 2023 · fc70584 · fc70584
1 parent e92d8c5
commit fc70584
Show file tree

Hide file tree

Showing 19 changed files with 277 additions and 311 deletions.
diff --git a/apps/www/src/registry/default/plate-ui/table-element.tsx b/apps/www/src/registry/default/plate-ui/table-element.tsx
@@ -3,17 +3,19 @@ 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 {
-  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
@@ -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
diff --git a/packages/table/src/components/TableCellElement/getClosest.ts b/packages/table/src/components/TableCellElement/getClosest.ts
diff --git 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
@@ -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
@@ -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,