Merge pull request #2867 from udecode/fix/table-provider

Fix table store issues

.changeset/good-cats-scream.md

@@ -0,0 +1,5 @@
+---
+"@udecode/plate-core": minor
+---
+
+Export `atom` from `jotai`

.changeset/smart-poems-marry.md

@@ -0,0 +1,5 @@
+---
+"@udecode/plate-table": major
+---
+
+Fix: TableProvider is incorrectly shared by all tables in the editor. TableProvider must now be rendered as part of TableElement.

.changeset/violet-mugs-shake.md

@@ -0,0 +1,5 @@
+---
+"@udecode/plate-table": patch
+---
+
+Fix: Row and column size overrides not being applied correctly

apps/www/content/docs/components/changelog.mdx

@@ -10,6 +10,25 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## January 2024 #7
 
+### January 8 #7.2
+
+- `table-element` - TableProvider must now be rendered above TableElement
+
+```tsx
+// Before
+export const TableElement = withRef<typeof PlateElement>(({ className, children, ...props }, ref) => {
+	// ...
+});
+
+// After
+export const TableElement = withHOC(
+  TableProvider,
+  withRef<typeof PlateElement>(({ className, children, ...props }, ref) => {
+    // ...
+  })
+);
+```
+
 ### January 2 #7.1
 
 - `dropdown-menu` - fix: do not exclude `className` in `DropdownMenuContent`

apps/www/src/registry/default/plate-ui/table-element.tsx

@@ -9,9 +9,11 @@ import {
   useEditorSelector,
   useElement,
   useRemoveNodeButton,
+  withHOC,
 } from '@udecode/plate-common';
 import {
   mergeTableCells,
+  TableProvider,
   TTableElement,
   unmergeTableCells,
   useTableBordersDropdownMenuContentState,
@@ -193,8 +195,9 @@ export const TableFloatingToolbar = withRef<typeof PopoverContent>(
   }
 );
 
-export const TableElement = withRef<typeof PlateElement>(
-  ({ className, children, ...props }, ref) => {
+export const TableElement = withHOC(
+  TableProvider,
+  withRef<typeof PlateElement>(({ className, children, ...props }, ref) => {
     const { colSizes, isSelectingCell, minColumnWidth, marginLeft } =
       useTableElementState();
     const { props: tableProps, colGroupProps } = useTableElement();
@@ -232,5 +235,5 @@ export const TableElement = withRef<typeof PlateElement>(
         </div>
       </TableFloatingToolbar>
     );
-  }
+  })
 );

packages/core/src/libs/jotai.ts

@@ -1 +1,2 @@
 export { createAtomStore } from 'jotai-x';
+export { atom } from 'jotai';

packages/table/src/createTablePlugin.ts

@@ -1,7 +1,6 @@
 import { createPluginFactory } from '@udecode/plate-common';
 
 import { onKeyDownTable } from './onKeyDownTable';
-import { TableProvider } from './stores';
 import { insertTableColumn, insertTableRow } from './transforms/index';
 import { TablePlugin, TableStoreCellAttributes } from './types';
 import { withTable } from './withTable';
@@ -41,7 +40,6 @@ export const createTablePlugin = createPluginFactory<TablePlugin>({
     _cellIndices: new WeakMap() as TableStoreCellAttributes,
   },
   withOverrides: withTable,
-  renderAboveEditable: TableProvider,
   plugins: [
     {
       key: ELEMENT_TR,

packages/table/src/stores/tableStore.ts

@@ -1,12 +1,12 @@
 import React from 'react';
-import { createAtomStore, TElement } from '@udecode/plate-common';
+import { atom, createAtomStore, TElement } from '@udecode/plate-common';
 
 export type TableStoreSizeOverrides = Map<number, number>;
 
 export const { tableStore, useTableStore, TableProvider } = createAtomStore(
   {
-    colSizeOverrides: new Map() as TableStoreSizeOverrides,
-    rowSizeOverrides: new Map() as TableStoreSizeOverrides,
+    colSizeOverrides: atom(new Map() as TableStoreSizeOverrides),
+    rowSizeOverrides: atom(new Map() as TableStoreSizeOverrides),
     marginLeftOverride: null as number | null,
     hoveredColIndex: null as number | null,
     selectedCells: null as TElement[] | null,
@@ -37,15 +37,14 @@ const useOverrideSizeFactory = (
     [setOverrides]
   );
 
-// jotai supports setting with functions, but createAtomStore doesn't know that
 export const useOverrideColSize = () => {
   const setColSizeOverrides = useTableStore().set.colSizeOverrides();
-  return useOverrideSizeFactory(setColSizeOverrides as unknown as any);
+  return useOverrideSizeFactory(setColSizeOverrides);
 };
 
 export const useOverrideRowSize = () => {
   const setRowSizeOverrides = useTableStore().set.rowSizeOverrides();
-  return useOverrideSizeFactory(setRowSizeOverrides as unknown as any);
+  return useOverrideSizeFactory(setRowSizeOverrides);
 };
 
 export const useOverrideMarginLeft = () =>