brrrr

src/components/control_panel.jsx

@@ -443,22 +443,22 @@ export default function ControlPanel(props) {
         color: defaultTableTheme,
       },
     ]);
-    setUndoStack((prev)=>[...prev, {
+  };
-      action: "add",
-      element: "table",
-    }])
-  }
 
   const undo = () => {
     if (undoStack.length === 0) return;
     const a = undoStack.pop();
     if (a.action === "add") {
       if (a.element === "table") {
-        setTables(prev=>prev.filter(e=>e.id!==prev.length-1).map((e, i)=>({...e, id: i})))
+        setTables((prev) =>
+          prev
+            .filter((e) => e.id !== prev.length - 1)
+            .map((e, i) => ({ ...e, id: i }))
+        );
       }
     }
-    setRedoStack(prev=>[...prev, a])
+    setRedoStack((prev) => [...prev, a]);
-  }
+  };
 
   const redo = () => {
     if (redoStack.length === 0) return;
@@ -468,8 +468,8 @@ export default function ControlPanel(props) {
         addTable();
       }
     }
-    setUndoStack(prev=>[...prev, a])
+    setUndoStack((prev) => [...prev, a]);
-  }
+  };
 
   return (
     <div>
@@ -558,7 +558,17 @@ export default function ControlPanel(props) {
           <button
             className="flex items-center py-1 px-2 hover:bg-slate-200 rounded"
             title="Add new table"
-            onClick={addTable}
+            onClick={() => {
+              addTable();
+              setUndoStack((prev) => [
+                ...prev,
+                {
+                  action: "add",
+                  element: "table",
+                },
+              ]);
+              if (redoStack.length > 0) setRedoStack([]);
+            }}
           >
             <AddTable />
           </button>