From 0ef658e240443c25629b54eea1c0f3e0c13069e6 Mon Sep 17 00:00:00 2001
From: Petyo Ivanov <underlog@gmail.com>
Date: Sat, 9 Sep 2023 12:23:35 +0300
Subject: [PATCH] fix: table tools work correctly

Fixes #72
---
 src/plugins/table/TableEditor.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/plugins/table/TableEditor.tsx b/src/plugins/table/TableEditor.tsx
index 665fcd5e..ce0ce233 100644
--- a/src/plugins/table/TableEditor.tsx
+++ b/src/plugins/table/TableEditor.tsx
@@ -40,6 +40,7 @@ import { corePluginHooks } from '../core'
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin.js'
 import { mergeRegister } from '@lexical/utils'
 import { isPartOftheEditorUI } from '../../utils/isPartOftheEditorUI'
+import { uuidv4 } from '../../utils/uuid4'
 
 const AlignToTailwindClassMap = {
   center: styles.centeredCell,
@@ -55,6 +56,15 @@ export interface TableEditorProps {
 
 export const TableEditor: React.FC<TableEditorProps> = ({ mdastNode, parentEditor, lexicalTable }) => {
   const [activeCell, setActiveCell] = React.useState<[number, number] | null>(null)
+  const getCellKey = React.useMemo(() => {
+    const cellKeyMap = new WeakMap<Mdast.TableCell, string>()
+    return (cell: Mdast.TableCell) => {
+      if (!cellKeyMap.has(cell)) {
+        cellKeyMap.set(cell, uuidv4())
+      }
+      return cellKeyMap.get(cell)!
+    }
+  }, [])
 
   const setActiveCellWithBoundaries = React.useCallback(
     (cell: [number, number] | null) => {
@@ -217,7 +227,7 @@ export const TableEditor: React.FC<TableEditorProps> = ({ mdastNode, parentEdito
                 return (
                   <Cell
                     align={mdastNode.align?.[colIndex]}
-                    key={colIndex}
+                    key={getCellKey(mdastCell)}
                     contents={mdastCell.children}
                     setActiveCell={setActiveCellWithBoundaries}
                     {...{