add merge / unmerge

udecode · Nov 15, 2023 · 9dc9735 · 9dc9735
1 parent c55ccf3
commit 9dc9735
Show file tree

Hide file tree

Showing 16 changed files with 541 additions and 160 deletions.
diff --git a/apps/www/src/components/icons.tsx b/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,

diff --git a/apps/www/src/lib/plate/demo/values/tableValue.tsx b/apps/www/src/lib/plate/demo/values/tableValue.tsx
@@ -158,6 +158,59 @@ export const createMergedCellsTable = (): any => (
   </fragment>
 );
 
+export const createAutoLayoutTable = (): any => (
+  <fragment>
+    <htable>
+      <htr>
+        <hth rowSpan={2} colSpan={1}>
+          <hp>
+            <htext bold>Heading</htext>
+          </hp>
+        </hth>
+        <hth>
+          <hp>
+            <htext bold>Cell 1</htext>
+          </hp>
+        </hth>
+        <hth>
+          <hp>
+            <htext bold>Cell 11</htext>
+          </hp>
+        </hth>
+        <hth>
+          <hp>
+            <htext bold>Cell 2</htext>
+          </hp>
+        </hth>
+      </htr>
+      <htr>
+        <htd rowSpan={2} colSpan={2}>
+          <hp>Cell 3</hp>
+        </htd>
+        {/* <htd>
+          <hp>Cell 77</hp>
+        </htd> */}
+        <htd>
+          <hp>Cell 7</hp>
+        </htd>
+      </htr>
+      <htr>
+        <htd>
+          <hp>
+            <htext bold>Cell 4</htext>
+          </hp>
+        </htd>
+        {/* <htd>
+          <hp>Cell 5</hp>
+        </htd> */}
+        <htd>
+          <hp>Cell 8</hp>
+        </htd>
+      </htr>
+    </htable>
+  </fragment>
+);
+
 
 export const tableValue: any = (
   <fragment>
@@ -167,7 +220,8 @@ export const tableValue: any = (
       to design structured layouts.
     </hp>
     {createMergedCellsTable()}
-    {createSpanningTable()}
+    {/* {createSpanningTable()}
+    {createAutoLayoutTable()} */}
     {/* {createTable()} */}
     {/* <hp>
       This table is an example of rendering a table spanning multiple columns:

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,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,66 @@ const TableFloatingToolbar = React.forwardRef<
   const readOnly = useReadOnly();
   const selected = useSelected();
   const editor = useEditorState();
-  const open = !readOnly && selected && isCollapsed(editor.selection);
+  // 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 +188,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>
   );

diff --git a/packages/table/src/components/TableCellElement/useTableCellElementState.ts b/packages/table/src/components/TableCellElement/useTableCellElementState.ts
@@ -7,7 +7,7 @@ import {
 import { useReadOnly } from 'slate-react';
 
 import { ELEMENT_TABLE, ELEMENT_TR } from '../../createTablePlugin';
-import { getCellIndices } from '../../queries/getCellIdices';
+import { computeCellIndices } from '../../queries/computeCellIndices';
 import { getColSpan } from '../../queries/getColSpan';
 import { getRowSpan } from '../../queries/getRowSpan';
 import { getTableColumnIndex, getTableRowIndex } from '../../queries/index';
@@ -67,19 +67,28 @@ export const useTableCellElementState = ({
 
   let x: { col: number; row: number };
   const fromWeakMap = _cellIndices.get(cellElement);
+  // const cellContent = cellElement.children.map((i) => {
+  //   return (i.children as any)[0].text;
+  // });
+
+  // const spans = {
+  //   colSpan: getColSpan(cellElement),
+  //   rowSpan: getRowSpan(cellElement),
+  // };
+
   if (fromWeakMap) {
     x = fromWeakMap;
-    console.log('from weak map', x, 'cellElement', cellElement);
+    // console.log('cellContent', cellContent, x);
   } else {
-    const x1 = getCellIndices(editor, tableElement, cellElement);
+    const x1 = computeCellIndices(editor, tableElement, cellElement);
     if (x1) {
       x = x1;
-      console.log('computed', x, 'cellElement', cellElement);
+      // console.log('computed', x, 'cellContent', cellContent, 'spans', spans);
     } else {
       const defaultColIndex = getTableColumnIndex(editor, cellElement);
       const defaultRowIndex = getTableRowIndex(editor, cellElement);
       x = { col: defaultColIndex, row: defaultRowIndex };
-      console.log('get default', x, 'cellElement', cellElement);
+      // console.log('get default', x, 'cellContent', cellContent);
     }
   }
   const colIndex = x.col;

diff --git a/packages/table/src/components/TableElement/useTableElement.ts b/packages/table/src/components/TableElement/useTableElement.ts
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import {
   collapseSelection,
   getPluginOptions,
@@ -6,6 +7,7 @@ import {
 } from '@udecode/plate-common';
 
 import { ELEMENT_TABLE } from '../../createTablePlugin';
+import { computeAllCellIndices } from '../../queries/computeCellIndices';
 import { useTableStore } from '../../stores/tableStore';
 import { TablePlugin, TTableElement } from '../../types';
 import { useSelectedCells } from './useSelectedCells';
@@ -43,6 +45,10 @@ export const useTableElementState = ({
 
   let colSizes = useTableColSizes(element);
 
+  useEffect(() => {
+    computeAllCellIndices(editor, element);
+  }, [editor, element]);
+
   if (transformColSizes) {
     colSizes = transformColSizes(colSizes);
   }

diff --git a/packages/table/src/index.ts b/packages/table/src/index.ts
@@ -19,3 +19,4 @@ export * from './queries/index';
 export * from './stores/index';
 export * from './transforms/index';
 export * from './utils/index';
+export * from './merge/index';
diff --git a/packages/table/src/merge/index.ts b/packages/table/src/merge/index.ts
@@ -0,0 +1,6 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './mergeTableCells';
+export * from './unmergeTableCells';