apply suggestions, fix tests and skip select on insert table / column

udecode · Nov 20, 2023 · 2df91cd · 2df91cd
1 parent 2b9861f
commit 2df91cd
Show file tree

Hide file tree

Showing 15 changed files with 48 additions and 203 deletions.
diff --git a/apps/www/src/lib/plate/demo/values/tableValue.tsx b/apps/www/src/lib/plate/demo/values/tableValue.tsx
@@ -105,127 +105,17 @@ export const createSpanningTable = (): any => (
   </fragment>
 );
 
-export const createMergedCellsTable = (): any => (
-  <fragment>
-    <htable colSizes={[100, 100, 100, 100]}>
-      <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 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>
     <hh2>🏓 Table</hh2>
     <hp>
       Create customizable tables with resizable columns and rows, allowing you
       to design structured layouts.
     </hp>
-    {createMergedCellsTable()}
-    {/* {createSpanningTable()}
-    {createAutoLayoutTable()} */}
-    {/* {createTable()} */}
-    {/* <hp>
+    {createTable()}
+    <hp>
       This table is an example of rendering a table spanning multiple columns:
     </hp>
-    {createSpanningTable()} */}
+    {createSpanningTable()}
   </fragment>
-);
+);
diff --git a/packages/table/src/components/TableElement/useSelectedCells.ts b/packages/table/src/components/TableElement/useSelectedCells.ts
@@ -28,9 +28,8 @@ export const useSelectedCells = () => {
   useEffect(() => {
     if (readOnly) return;
 
-    const { tableEntries, cellEntries } = getTableGridAbove(editor, {
-      format: 'all',
-    });
+    const tableEntries = getTableGridAbove(editor, { format: 'table' });
+    const cellEntries = getTableGridAbove(editor, { format: 'cell' });
     if (cellEntries?.length > 1) {
       const cells = cellEntries.map((entry) => entry[0]);
       const tables = tableEntries.map((entry) => entry[0]);

diff --git a/packages/table/src/createTablePlugin.ts b/packages/table/src/createTablePlugin.ts
@@ -36,7 +36,7 @@ export const createTablePlugin = createPluginFactory<TablePlugin>({
       });
     },
     minColumnWidth: 48,
-    disableCellsMerging: false,
+    disableCellsMerging: true,
     _cellIndices: new WeakMap() as TableStoreCellAttributes,
   },
   withOverrides: withTable,

diff --git a/packages/table/src/merge/deleteRow.ts b/packages/table/src/merge/deleteRow.ts
@@ -24,7 +24,7 @@ import { getCellTypes } from '../utils';
 import { findCellByIndexes } from './findCellByIndexes';
 import { getCellIndices } from './getCellIndices';
 
-export const deleteTableRowMerging = <V extends Value>(
+export const deleteTableMergeRow = <V extends Value>(
   editor: PlateEditor<V>
 ) => {
   if (

diff --git a/packages/table/src/merge/getCellIndices.ts b/packages/table/src/merge/getCellIndices.ts
@@ -6,5 +6,6 @@ export const getCellIndices = (
   options: TablePlugin<Value>,
   startCell: TTableCellElement
 ) => {
-  return options._cellIndices.get(startCell);
+  // optional typing needs for tests
+  return options._cellIndices?.get(startCell);
 };
diff --git a/packages/table/src/merge/insertTableColumn.ts b/packages/table/src/merge/insertTableColumn.ts
@@ -27,7 +27,7 @@ import { findCellByIndexes } from './findCellByIndexes';
 import { getCellIndices } from './getCellIndices';
 import { getCellPath } from './getCellPath';
 
-export const insertTableColumnMerging = <V extends Value>(
+export const insertTableMergeColumn = <V extends Value>(
   editor: PlateEditor<V>,
   {
     disableSelect,
@@ -153,7 +153,7 @@ export const insertTableColumnMerging = <V extends Value>(
       };
       insertElements(editor, emptyCell, {
         at: placementPath,
-        select: !disableSelect && curRowIndex === currentRowIndex,
+        // select: !disableSelect && curRowIndex === currentRowIndex,
       });
     }
   });

diff --git a/packages/table/src/merge/insertTableRow.ts b/packages/table/src/merge/insertTableRow.ts
@@ -29,7 +29,7 @@ import { findCellByIndexes } from './findCellByIndexes';
 import { getCellIndices } from './getCellIndices';
 import { getCellPath } from './getCellPath';
 
-export const insertTableRowMerging = <V extends Value>(
+export const insertTableMergeRow = <V extends Value>(
   editor: PlateEditor<V>,
   {
     header,
@@ -168,18 +168,8 @@ export const insertTableRowMerging = <V extends Value>(
       },
       {
         at: nextRowPath,
+        // select: !disableSelect
       }
     );
   });
-
-  if (!disableSelect) {
-    const nextCellPath = cellPath;
-    if (Path.isPath(at)) {
-      nextCellPath[nextCellPath.length - 2] = at.at(-2)!;
-    } else {
-      nextCellPath[nextCellPath.length - 2] += cellRowSpan;
-    }
-
-    select(editor, nextCellPath);
-  }
 };
diff --git a/packages/table/src/queries/getTableGridAbove.ts b/packages/table/src/queries/getTableGridAbove.ts
@@ -11,41 +11,32 @@ import { Path } from 'slate';
 import { getCellTypes } from '../utils/getCellType';
 import { getEmptyTableNode } from '../utils/getEmptyTableNode';
 import {
-  FormatType,
   getTableGridByRange,
   GetTableGridByRangeOptions,
-  GetTableGridReturnType,
 } from './getTableGridByRange';
 
-export type GetTableGridAboveOptions<
-  T extends FormatType,
-  V extends Value = Value,
-> = GetAboveNodeOptions<V> & Pick<GetTableGridByRangeOptions<T>, 'format'>;
+export type GetTableGridAboveOptions<V extends Value = Value> =
+  GetAboveNodeOptions<V> & Pick<GetTableGridByRangeOptions, 'format'>;
 
 /**
  * Get sub table above anchor and focus.
  * Format: tables or cells.
  */
-export const getTableGridAbove = <
-  T extends FormatType,
-  V extends Value = Value,
->(
+export const getTableGridAbove = <V extends Value = Value>(
   editor: PlateEditor<V>,
-  { format, ...options }: GetTableGridAboveOptions<T, V>
-): GetTableGridReturnType<T> => {
-  const formatType = (format as string) || 'table';
+  { format = 'table', ...options }: GetTableGridAboveOptions<V> = {}
+): TElementEntry[] => {
   const edges = getEdgeBlocksAbove<TElement>(editor, {
     match: {
       type: getCellTypes(editor),
     },
     ...options,
   });
-
   if (edges) {
     const [start, end] = edges;
 
     if (!Path.equals(start[1], end[1])) {
-      const entryResult = getTableGridByRange(editor, {
+      return getTableGridByRange(editor, {
         at: {
           anchor: {
             path: start[1],
@@ -58,24 +49,16 @@ export const getTableGridAbove = <
         },
         format,
       });
-
-      return entryResult;
     }
 
-    const table = getEmptyTableNode(editor, { rowCount: 1 });
-    table.children[0].children = [start[0]];
-    if (formatType === 'table') {
-      return [[table, start[1].slice(0, -2)]] as GetTableGridReturnType<T>;
+    if (format === 'table') {
+      const table = getEmptyTableNode(editor, { rowCount: 1 });
+      table.children[0].children = [start[0]];
+      return [[table, start[1].slice(0, -2)]];
     }
 
-    if (formatType === 'cell') {
-      return [start] as GetTableGridReturnType<T>;
-    }
-
-    return {
-      tableEntries: [[table, start[1].slice(0, -2)]],
-      cellEntries: [start],
-    } as GetTableGridReturnType<T>;
+    return [start];
   }
-  return [] as TElementEntry[] as GetTableGridReturnType<T>;
-};
+
+  return [];
+};
diff --git a/packages/table/src/queries/getTableGridByRange.ts b/packages/table/src/queries/getTableGridByRange.ts
@@ -13,40 +13,26 @@ import { getTableMergeGridByRange } from '../merge/getTableGridByRange';
 import { TablePlugin, TTableElement } from '../types';
 import { getEmptyTableNode } from '../utils/getEmptyTableNode';
 
-export type FormatType = 'table' | 'cell' | 'all';
-
-export interface TableGridEntries {
-  tableEntries: TElementEntry[];
-  cellEntries: TElementEntry[];
-}
-
-export type GetTableGridReturnType<T> = T extends 'all'
-  ? TableGridEntries
-  : TElementEntry[];
-
-export interface GetTableGridByRangeOptions<T extends FormatType> {
+export interface GetTableGridByRangeOptions {
   at: Range;
 
   /**
    * Format of the output:
    * - table element
    * - array of cells
    */
-  format?: T;
+  format?: 'table' | 'cell';
 }
 
 /**
  * Get sub table between 2 cell paths.
  */
-export const getTableGridByRange = <T extends FormatType, V extends Value>(
+export const getTableGridByRange = <V extends Value>(
   editor: PlateEditor<V>,
-  { at, format }: GetTableGridByRangeOptions<T>
-): GetTableGridReturnType<T> => {
-  const { disableCellsMerging } = getPluginOptions<TablePlugin, V>(
-    editor,
-    ELEMENT_TABLE
-  );
-  if (!disableCellsMerging) {
+  { at, format = 'table' }: GetTableGridByRangeOptions
+): TElementEntry[] => {
+  const options = getPluginOptions<TablePlugin, V>(editor, ELEMENT_TABLE);
+  if (!options.disableCellsMerging) {
     return getTableMergeGridByRange(editor, { at, format });
   }
 
@@ -103,15 +89,8 @@ export const getTableGridByRange = <T extends FormatType, V extends Value>(
   }
 
   if (format === 'cell') {
-    return cellEntries as GetTableGridReturnType<T>;
-  }
-
-  if (format === 'table') {
-    return [[table, tablePath]] as GetTableGridReturnType<T>;
+    return cellEntries;
   }
 
-  return {
-    tableEntries: [[table, tablePath]],
-    cellEntries,
-  } as GetTableGridReturnType<T>;
+  return [[table, tablePath]];
 };
diff --git a/packages/table/src/transforms/deleteRow.ts b/packages/table/src/transforms/deleteRow.ts
@@ -9,7 +9,7 @@ import {
 } from '@udecode/plate-common';
 
 import { ELEMENT_TABLE, ELEMENT_TR } from '../createTablePlugin';
-import { deleteTableRowMerging } from '../merge/deleteRow';
+import { deleteTableMergeRow } from '../merge/deleteRow';
 import { TablePlugin, TTableElement } from '../types';
 
 export const deleteRow = <V extends Value>(editor: PlateEditor<V>) => {
@@ -18,7 +18,7 @@ export const deleteRow = <V extends Value>(editor: PlateEditor<V>) => {
     ELEMENT_TABLE
   );
   if (!disableCellsMerging) {
-    return deleteTableRowMerging(editor);
+    return deleteTableMergeRow(editor);
   }
 
   if (