fix

.changeset/few-pillows-punch.md

@@ -0,0 +1,6 @@
+---
+'@udecode/plate-table': patch
+---
+
+- Fixes #1356
+- Fixes #1359

.changeset/few-pillows-punchh.md

@@ -0,0 +1,6 @@
+---
+'@udecode/plate-ui-table': patch
+---
+
+- Fixes https://github.com/udecode/editor-protocol/issues/77
+- Fixes #1820

packages/nodes/table/src/transforms/deleteColumn.ts

@@ -3,54 +3,80 @@ import {
   getPluginType,
   PlateEditor,
   removeNodes,
+  setNodes,
   someNode,
   Value,
+  withoutNormalizing,
 } from '@udecode/plate-core';
 import {
   ELEMENT_TABLE,
   ELEMENT_TD,
   ELEMENT_TH,
   ELEMENT_TR,
 } from '../createTablePlugin';
+import { TTableElement } from '../types';
 
 export const deleteColumn = <V extends Value>(editor: PlateEditor<V>) => {
   if (
     someNode(editor, {
       match: { type: getPluginType(editor, ELEMENT_TABLE) },
     })
   ) {
-    const currentCellItem = getAboveNode(editor, {
+    const tdEntry = getAboveNode(editor, {
       match: {
         type: [
           getPluginType(editor, ELEMENT_TD),
           getPluginType(editor, ELEMENT_TH),
         ],
       },
     });
-    const currentRowItem = getAboveNode(editor, {
+    const trEntry = getAboveNode(editor, {
       match: { type: getPluginType(editor, ELEMENT_TR) },
     });
-    const currentTableItem = getAboveNode(editor, {
+    const tableEntry = getAboveNode<TTableElement>(editor, {
       match: { type: getPluginType(editor, ELEMENT_TABLE) },
     });
 
     if (
-      currentCellItem &&
-      currentRowItem &&
-      currentTableItem &&
+      tdEntry &&
+      trEntry &&
+      tableEntry &&
       // Cannot delete the last cell
-      currentRowItem[0].children.length > 1
+      trEntry[0].children.length > 1
     ) {
-      const currentCellPath = currentCellItem[1];
-      const pathToDelete = currentCellPath.slice();
+      const [tableNode, tablePath] = tableEntry;
+
+      const tdPath = tdEntry[1];
+      const colIndex = tdPath[tdPath.length - 1];
+
+      const pathToDelete = tdPath.slice();
       const replacePathPos = pathToDelete.length - 2;
 
-      currentTableItem[0].children.forEach((row, rowIdx) => {
-        pathToDelete[replacePathPos] = rowIdx;
+      withoutNormalizing(editor, () => {
+        tableEntry[0].children.forEach((row, rowIdx) => {
+          pathToDelete[replacePathPos] = rowIdx;
 
-        removeNodes(editor, {
-          at: pathToDelete,
+          removeNodes(editor, {
+            at: pathToDelete,
+          });
         });
+
+        const { colSizes } = tableNode;
+
+        if (colSizes) {
+          const newColSizes = [...colSizes];
+          newColSizes.splice(colIndex, 1);
+
+          setNodes<TTableElement>(
+            editor,
+            {
+              colSizes: newColSizes,
+            },
+            {
+              at: tablePath,
+            }
+          );
+        }
       });
     }
   }

packages/nodes/table/src/transforms/insertTableColumn.ts

@@ -5,13 +5,14 @@ import {
   getPluginType,
   insertElements,
   PlateEditor,
+  setNodes,
   TElement,
   Value,
   withoutNormalizing,
 } from '@udecode/plate-core';
 import { Path } from 'slate';
 import { ELEMENT_TABLE, ELEMENT_TH } from '../createTablePlugin';
-import { TablePlugin } from '../types';
+import { TablePlugin, TTableElement } from '../types';
 import { getEmptyCellNode } from '../utils/getEmptyCellNode';
 import { getCellTypes } from '../utils/index';
 
@@ -47,15 +48,16 @@ export const insertTableColumn = <V extends Value>(
 
   const [, cellPath] = cellEntry;
 
-  const tableEntry = getBlockAbove(editor, {
+  const tableEntry = getBlockAbove<TTableElement>(editor, {
     match: { type: getPluginType(editor, ELEMENT_TABLE) },
     at: cellPath,
   });
   if (!tableEntry) return;
 
-  const [tableNode] = tableEntry;
+  const [tableNode, tablePath] = tableEntry;
 
   const nextCellPath = Path.next(cellPath);
+  const nextColIndex = cellPath[cellPath.length - 1] + 1;
   const currentRowIndex = cellPath[cellPath.length - 2];
 
   const { newCellChildren } = getPluginOptions<TablePlugin, V>(
@@ -87,5 +89,23 @@ export const insertTableColumn = <V extends Value>(
         }
       );
     });
+
+    const { colSizes } = tableNode;
+
+    if (colSizes) {
+      setNodes<TTableElement>(
+        editor,
+        {
+          colSizes: [
+            ...colSizes.slice(0, nextColIndex),
+            0,
+            ...colSizes.slice(nextColIndex),
+          ],
+        },
+        {
+          at: tablePath,
+        }
+      );
+    }
   });
 };

packages/ui/nodes/table/src/TableCellElement/TableCellElement.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect } from 'react';
 import { findNodePath, Value } from '@udecode/plate-core';
 import { getRootProps } from '@udecode/plate-styled-components';
 import { getTableColumnIndex, setTableColSize } from '@udecode/plate-table';
@@ -32,6 +32,10 @@ export const TableCellElement = <V extends Value>(
   ] = useTableStore().use.hoveredColIndex();
   const setResizingCol = useTableStore().set.resizingCol();
 
+  useEffect(() => {
+    setHoveredColIndex(null);
+  }, [element, setHoveredColIndex]);
+
   const isCellSelected = useIsCellSelected(element);
 
   const handleResize: HandleStyles | undefined =
@@ -45,10 +49,7 @@ export const TableCellElement = <V extends Value>(
         }
       : undefined;
 
-  const colIndex = useMemo(
-    () => getTableColumnIndex(editor, { node: element }),
-    [editor, element]
-  );
+  const colIndex = getTableColumnIndex(editor, { node: element });
 
   const {
     root,
@@ -79,6 +80,7 @@ export const TableCellElement = <V extends Value>(
     );
 
     setResizingCol(null);
+    setHoveredColIndex(null);
   };
 
   return (

packages/ui/nodes/table/src/hooks/useTableColSizes.ts

@@ -1,7 +1,14 @@
+import { useEffect } from 'react';
+import { findNodePath, unsetNodes, useEditorRef } from '@udecode/plate-core';
 import { getTableColumnCount, TTableElement } from '@udecode/plate-table';
 import { useTableStore } from '../table.atoms';
 
+/**
+ * Returns node.colSizes if it exists, otherwise returns a 0-filled array.
+ * Unset node.colSizes if `colCount` updates to 1.
+ */
 export const useTableColSizes = (tableNode: TTableElement): number[] => {
+  const editor = useEditorRef();
   const resizingCol = useTableStore().get.resizingCol();
 
   const colCount = getTableColumnCount(tableNode);
@@ -14,5 +21,13 @@ export const useTableColSizes = (tableNode: TTableElement): number[] => {
     colSizes[resizingCol.index ?? 0] = resizingCol.width;
   }
 
+  useEffect(() => {
+    if (colCount < 2 && tableNode.colSizes?.length) {
+      unsetNodes(editor, 'colSizes', {
+        at: findNodePath(editor, tableNode),
+      });
+    }
+  }, [colCount, editor, tableNode]);
+
   return colSizes;
 };