chore: use produceWithPatches universally for op extracting and history recording

packages/core/tsconfig.json

@@ -1,10 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./lib",
-    "rootDir": "./src",
-    "baseUrl": "./",
-    "composite": true
-  },
-  "include": ["./src"]
-}

packages/react/src/components/ContextMenu/SheetTab.tsx

@@ -6,7 +6,6 @@ import React, {
   useState,
   useLayoutEffect,
 } from "react";
-import produce from "immer";
 import WorkbookContext from "../../context";
 import "./index.css";
 import Menu from "./Menu";
@@ -68,12 +67,10 @@ const SheetTabContextMenu: React.FC<Props> = ({
     >
       <Menu
         onClick={() => {
-          setContext(
+          setContext((draftCtx) => {
-            produce((draftCtx) => {
+            deleteSheet(draftCtx, sheet.index!);
-              deleteSheet(draftCtx, sheet.index);
             onClose?.();
-            })
+          });
-          );
         }}
       >
         {sheetconfig.delete}

packages/react/src/components/ContextMenu/index.tsx

@@ -7,7 +7,6 @@ import {
 } from "@fortune-sheet/core";
 import _ from "lodash";
 import React, { useContext, useMemo, useRef, useLayoutEffect } from "react";
-import produce from "immer";
 import WorkbookContext from "../../context";
 import "./index.css";
 import Menu from "./Menu";
@@ -24,12 +23,10 @@ const ContextMenu: React.FC = () => {
         <Menu
           key="copy"
           onClick={() => {
-            setContext(
+            setContext((draftCtx) => {
-              produce((draftCtx) => {
               handleCopy(draftCtx);
               draftCtx.contextMenu = undefined;
-              })
+            });
-            );
           }}
         >
           {rightclick.copy}
@@ -39,12 +36,10 @@ const ContextMenu: React.FC = () => {
         <Menu
           key="paste"
           onClick={() => {
-            setContext(
+            setContext((draftCtx) => {
-              produce((draftCtx) => {
               handlePasteByClick(draftCtx);
               draftCtx.contextMenu = undefined;
-              })
+            });
-            );
           }}
         >
           {rightclick.paste}
@@ -56,8 +51,7 @@ const ContextMenu: React.FC = () => {
             <Menu
               key={`add-col-${dir}`}
               onClick={(e) => {
-                setContext(
+                setContext((draftCtx) => {
-                  produce((draftCtx) => {
                   const position =
                     draftCtx.luckysheet_select_save?.[0]?.column?.[0];
                   if (position == null) return;
@@ -76,8 +70,7 @@ const ContextMenu: React.FC = () => {
                     draftCtx.currentSheetIndex
                   );
                   draftCtx.contextMenu = undefined;
-                  })
+                });
-                );
               }}
             >
               <>
@@ -106,8 +99,7 @@ const ContextMenu: React.FC = () => {
             <Menu
               key={`add-row-${dir}`}
               onClick={(e, container) => {
-                setContext(
+                setContext((draftCtx) => {
-                  produce((draftCtx) => {
                   const position =
                     draftCtx.luckysheet_select_save?.[0]?.row?.[0];
                   if (position == null) return;
@@ -124,8 +116,7 @@ const ContextMenu: React.FC = () => {
                     draftCtx.currentSheetIndex
                   );
                   draftCtx.contextMenu = undefined;
-                  })
+                });
-                );
               }}
             >
               <>
@@ -154,12 +145,10 @@ const ContextMenu: React.FC = () => {
           onClick={() => {
             if (!selection) return;
             const [st_index, ed_index] = selection.column;
-            setContext(
+            setContext((draftCtx) => {
-              produce((draftCtx) => {
               deleteRowCol(draftCtx, "column", st_index, ed_index);
               draftCtx.contextMenu = undefined;
-              })
+            });
-            );
           }}
         >
           {rightclick.deleteSelected}
@@ -172,12 +161,10 @@ const ContextMenu: React.FC = () => {
           onClick={() => {
             if (!selection) return;
             const [st_index, ed_index] = selection.row;
-            setContext(
+            setContext((draftCtx) => {
-              produce((draftCtx) => {
               deleteRowCol(draftCtx, "row", st_index, ed_index);
               draftCtx.contextMenu = undefined;
-              })
+            });
-            );
           }}
         >
           {rightclick.deleteSelected}
@@ -214,12 +201,10 @@ const ContextMenu: React.FC = () => {
       hasOverflow = true;
     }
     if (hasOverflow) {
-      setContext(
+      setContext((draftCtx) => {
-        produce((draftCtx) => {
         draftCtx.contextMenu.x = left;
         draftCtx.contextMenu.y = top;
-        })
+      });
-      );
     }
   }, [contextMenu, setContext]);
 

packages/react/src/components/FxEditor/index.tsx

@@ -17,7 +17,6 @@ import React, {
   useEffect,
   useRef,
 } from "react";
-import produce from "immer";
 import "./index.css";
 import _ from "lodash";
 import WorkbookContext from "../../context";
@@ -65,8 +64,7 @@ const FxEditor: React.FC = () => {
   const onFocus = useCallback(() => {
     if ((context.luckysheet_select_save?.length ?? 0) > 0) {
       setFocused(true);
-      setContext(
+      setContext((draftCtx) => {
-        produce((draftCtx) => {
         const last =
           draftCtx.luckysheet_select_save![
             draftCtx.luckysheet_select_save!.length - 1
@@ -78,8 +76,7 @@ const FxEditor: React.FC = () => {
         draftCtx.luckysheetCellUpdate = [row_index, col_index];
         refs.globalCache.doNotFocus = true;
         // formula.rangeResizeTo = $("#luckysheet-functionbox-cell");
-        })
+      });
-      );
     }
   }, [context.luckysheet_select_save, refs.globalCache, setContext]);
 
@@ -90,8 +87,7 @@ const FxEditor: React.FC = () => {
       //   return;
       // }
       lastKeyDownEventRef.current = e;
-      setContext(
+      setContext((draftCtx) => {
-        produce((draftCtx) => {
         if (context.luckysheetCellUpdate.length > 0) {
           switch (e.key) {
             case "Enter": {
@@ -194,8 +190,7 @@ const FxEditor: React.FC = () => {
               break;
           }
         }
-        })
+      });
-      );
     },
     [context.luckysheetCellUpdate.length, refs.fxInput, setContext]
   );
@@ -222,16 +217,14 @@ const FxEditor: React.FC = () => {
       kcode === 46 ||
       (e.ctrlKey && kcode === 86)
     ) {
-      setContext(
+      setContext((draftCtx) => {
-        produce((draftCtx) => {
         handleFormulaInput(
           draftCtx,
           refs.cellInput.current!,
           refs.fxInput.current!,
           kcode
         );
-        })
+      });
-      );
     }
   }, [refs.cellInput, refs.fxInput, setContext]);
 

packages/react/src/components/Sheet/index.tsx

@@ -9,7 +9,6 @@ import {
 } from "@fortune-sheet/core";
 import "./index.css";
 import type { CellMatrix } from "@fortune-sheet/core";
-import produce from "immer";
 import WorkbookContext from "../../context";
 import SheetOverlay from "../SheetOverlay";
 
@@ -25,16 +24,14 @@ const Sheet: React.FC<Props> = ({ data }) => {
 
   useEffect(() => {
     function resize() {
-      setContext(
+      setContext((draftCtx) => {
-        produce((draftCtx) => {
         updateContextWithSheetData(draftCtx, data);
         updateContextWithCanvas(
           draftCtx,
           canvasRef.current!,
           placeholderRef.current!
         );
-        })
+      });
-      );
     }
     window.addEventListener("resize", resize);
     return () => {
@@ -43,30 +40,24 @@ const Sheet: React.FC<Props> = ({ data }) => {
   }, [data, setContext]);
 
   useEffect(() => {
-    setContext(
+    setContext((draftCtx) => updateContextWithSheetData(draftCtx, data));
-      produce((draftCtx) => updateContextWithSheetData(draftCtx, data))
-    );
   }, [context.config?.rowlen, context.config?.columnlen, data, setContext]);
 
   useEffect(() => {
-    setContext(
+    setContext((draftCtx) =>
-      produce((draftCtx) =>
       updateContextWithCanvas(
         draftCtx,
         canvasRef.current!,
         placeholderRef.current!
       )
-      )
     );
   }, [setContext]);
 
   useEffect(() => {
     if (hasGroupValuesRefreshData()) {
-      setContext(
+      setContext((draftCtx) => {
-        produce((draftCtx) => {
         groupValuesRefresh(draftCtx);
-        })
+      });
-      );
     }
   }, [context.luckysheetfile, context.currentSheetIndex, setContext]);
 
@@ -82,8 +73,7 @@ const Sheet: React.FC<Props> = ({ data }) => {
 
   const onWheel = useCallback(
     (e: WheelEvent) => {
-      setContext(
+      setContext((draftCtx) => {
-        produce((draftCtx) => {
         handleGlobalWheel(
           draftCtx,
           e,
@@ -91,8 +81,7 @@ const Sheet: React.FC<Props> = ({ data }) => {
           refs.scrollbarX.current!,
           refs.scrollbarY.current!
         );
-        })
+      });
-      );
     },
     [refs.globalCache, refs.scrollbarX, refs.scrollbarY, setContext]
   );

packages/react/src/components/SheetOverlay/ColumnHeader.tsx

@@ -15,7 +15,6 @@ import React, {
   useCallback,
   useEffect,
 } from "react";
-import produce from "immer";
 import WorkbookContext from "../../context";
 
 const ColumnHeader: React.FC = () => {
@@ -55,15 +54,13 @@ const ColumnHeader: React.FC = () => {
 
   const onMouseDown = useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      setContext(
+      setContext((draftCtx) => {
-        produce((draftCtx) => {
         handleColumnHeaderMouseDown(
           draftCtx,
           e.nativeEvent,
           containerRef.current!
         );
-        })
+      });
-      );
     },
     [setContext]
   );
@@ -77,16 +74,14 @@ const ColumnHeader: React.FC = () => {
 
   const onColSizeHandleMouseDown = useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      setContext(
+      setContext((draftCtx) => {
-        produce((draftCtx) => {
         handleColSizeHandleMouseDown(
           draftCtx,
           e.nativeEvent,
           containerRef.current!,
           refs.cellArea.current!
         );
-        })
+      });
-      );
       e.stopPropagation();
     },
     [refs.cellArea, setContext]
@@ -94,16 +89,14 @@ const ColumnHeader: React.FC = () => {
 
   const onContextMenu = useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      setContext(
+      setContext((draftCtx) => {
-        produce((draftCtx) => {
         handleContextMenu(
           draftCtx,
           settings,
           e.nativeEvent,
           refs.workbookContainer.current!
         );
-        })
+      });
-      );
     },
     [refs.workbookContainer, setContext, settings]
   );

packages/react/src/components/SheetOverlay/InputBox.tsx

@@ -19,7 +19,6 @@ import React, {
   useLayoutEffect,
 } from "react";
 import _ from "lodash";
-import produce from "immer";
 import WorkbookContext from "../../context";
 import ContentEditable from "./ContentEditable";
 import FormulaSearch from "./FormulaSearch";
@@ -107,8 +106,7 @@ const InputBox: React.FC = () => {
       //   return;
       // }
 
-      setContext(
+      setContext((draftCtx) => {
-        produce((draftCtx) => {
         if (e.key === "Escape" && draftCtx.luckysheetCellUpdate.length > 0) {
           cancelNormalSelected(draftCtx);
           moveHighlightCell(draftCtx, "down", 0, "rangeOfSelect");
@@ -152,10 +150,7 @@ const InputBox: React.FC = () => {
           // }
 
           e.preventDefault();
-          } else if (
+        } else if (e.key === "F4" && draftCtx.luckysheetCellUpdate.length > 0) {
-            e.key === "F4" &&
-            draftCtx.luckysheetCellUpdate.length > 0
-          ) {
           // formula.setfreezonFuc(event);
           e.preventDefault();
         } /* else if (
@@ -179,8 +174,7 @@ const InputBox: React.FC = () => {
           ) {
             formulaMoveEvent("right", ctrlKey, shiftKey, event);
           } */
-        })
+      });
-      );
     },
     [setContext]
   );
@@ -213,8 +207,7 @@ const InputBox: React.FC = () => {
       kcode === 46 ||
       (e.ctrlKey && kcode === 86)
     ) {
-      setContext(
+      setContext((draftCtx) => {
-        produce((draftCtx) => {
         // if(event.target.id!="luckysheet-input-box" && event.target.id!="luckysheet-rich-text-editor"){
         handleFormulaInput(
           draftCtx,
@@ -233,8 +226,7 @@ const InputBox: React.FC = () => {
         //   draftCtx.flowdata
         // );
         // }
-        })
+      });
-      );
     }
   }, [refs.cellInput, refs.fxInput, setContext]);
 

packages/react/src/components/SheetOverlay/RowHeader.tsx

@@ -15,7 +15,6 @@ import React, {
   useCallback,
   useEffect,
 } from "react";
-import produce from "immer";
 import WorkbookContext from "../../context";
 
 const RowHeader: React.FC = () => {
@@ -55,15 +54,13 @@ const RowHeader: React.FC = () => {
 
   const onMouseDown = useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      setContext(
+      setContext((draftCtx) => {
-        produce((draftCtx) => {
         handleRowHeaderMouseDown(
           draftCtx,
           e.nativeEvent,
           containerRef.current!
         );
-        })
+      });
-      );
     },
     [setContext]
   );
@@ -77,16 +74,14 @@ const RowHeader: React.FC = () => {
 
   const onRowSizeHandleMouseDown = useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      setContext(
+      setContext((draftCtx) => {
-        produce((draftCtx) => {
         handleRowSizeHandleMouseDown(
           draftCtx,
           e.nativeEvent,
           containerRef.current!,
           refs.cellArea.current!
         );
-        })
+      });
-      );
       e.stopPropagation();
     },
     [refs.cellArea, setContext]
@@ -94,16 +89,14 @@ const RowHeader: React.FC = () => {
 
   const onContextMenu = useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      setContext(
+      setContext((draftCtx) => {
-        produce((draftCtx) => {
         handleContextMenu(
           draftCtx,
           settings,
           e.nativeEvent,
           refs.workbookContainer.current!
         );
-        })
+      });
-      );
     },
     [refs.workbookContainer, setContext, settings]
   );

packages/react/src/components/SheetOverlay/ScrollBar/index.tsx

@@ -7,7 +7,7 @@ type Props = {
 };
 
 const ScrollBar: React.FC<Props> = ({ axis }) => {
-  const { context, refs, setContextValue } = useContext(WorkbookContext);
+  const { context, refs, setContext } = useContext(WorkbookContext);
 
   useEffect(() => {
     if (axis === "x") {
@@ -24,9 +24,13 @@ const ScrollBar: React.FC<Props> = ({ axis }) => {
       className={`luckysheet-scrollbars luckysheet-scrollbar-ltr luckysheet-scrollbar-${axis}`}
       onScroll={() => {
         if (axis === "x") {
-          setContextValue("scrollLeft", refs.scrollbarX.current!.scrollLeft);
+          setContext((draftCtx) => {
+            draftCtx.scrollLeft = refs.scrollbarX.current!.scrollLeft;
+          });
         } else {
-          setContextValue("scrollTop", refs.scrollbarY.current!.scrollTop);
+          setContext((draftCtx) => {
+            draftCtx.scrollTop = refs.scrollbarY.current!.scrollTop;
+          });
         }
       }}
     >

packages/react/src/components/SheetOverlay/index.tsx

@@ -1,6 +1,5 @@
 import React, { useContext, useCallback, useRef, useEffect } from "react";
 import "./index.css";
-import produce from "immer";
 import {
   handleCellAreaDoubleClick,
   handleCellAreaMouseDown,
@@ -20,56 +19,49 @@ const SheetOverlay: React.FC = () => {
 
   const cellAreaMouseDown = useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      setContext(
+      setContext((draftCtx) => {
-        produce((draftCtx) => {
         handleCellAreaMouseDown(
           draftCtx,
           e.nativeEvent,
           refs.cellInput.current!,
           refs.cellArea.current!
         );
-        })
+      });
-      );
     },
     [refs.cellArea, refs.cellInput, setContext]
   );
 
   const cellAreaContextMenu = useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      setContext(
+      setContext((draftCtx) => {
-        produce((draftCtx) => {
         handleContextMenu(
           draftCtx,
           settings,
           e.nativeEvent,
           refs.workbookContainer.current!
         );
-        })
+      });
-      );
     },
     [refs.workbookContainer, setContext, settings]
   );
 
   const cellAreaDoubleClick = useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      setContext(
+      setContext((draftCtx) => {
-        produce((draftCtx) => {
         handleCellAreaDoubleClick(
           draftCtx,
           settings,
           e.nativeEvent,
           refs.cellArea.current!
         );
-        })
+      });
-      );
     },
     [refs.cellArea, setContext, settings]
   );
 
   const onMouseMove = useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      setContext(
+      setContext((draftCtx) => {
-        produce((draftCtx) => {
         handleOverlayMouseMove(
           draftCtx,
           e.nativeEvent,
@@ -77,24 +69,21 @@ const SheetOverlay: React.FC = () => {
           refs.scrollbarY.current!,
           containerRef.current!
         );
-        })
+      });
-      );
     },
     [refs.scrollbarX, refs.scrollbarY, setContext]
   );
 
   const onMouseUp = useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      setContext(
+      setContext((draftCtx) => {
-        produce((draftCtx) => {
         handleOverlayMouseUp(
           draftCtx,
           settings,
           e.nativeEvent,
           containerRef.current!
         );
-        })
+      });
-      );
     },
     [setContext, settings]
   );

packages/react/src/components/SheetTab/SheetItem.tsx

@@ -6,7 +6,6 @@ import React, {
   useRef,
   useCallback,
 } from "react";
-import produce from "immer";
 import WorkbookContext from "../../context";
 import SheetTabContextMenu from "../ContextMenu/SheetTab";
 
@@ -15,7 +14,7 @@ type Props = {
 };
 
 const SheetItem: React.FC<Props> = ({ sheet }) => {
-  const { context, setContext, setContextValue } = useContext(WorkbookContext);
+  const { context, setContext } = useContext(WorkbookContext);
   const [editing, setEditing] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const editable = useRef<HTMLSpanElement>(null);
@@ -53,11 +52,9 @@ const SheetItem: React.FC<Props> = ({ sheet }) => {
   }, [editing]);
 
   const onBlur = useCallback(() => {
-    setContext(
+    setContext((draftCtx) => {
-      produce((draftCtx) => {
       handleSheetTabOnBlur(draftCtx, editable.current!);
-      })
+    });
-    );
     setEditing(false);
   }, [setContext]);
 
@@ -71,7 +68,9 @@ const SheetItem: React.FC<Props> = ({ sheet }) => {
           : ""
       }`}
       onClick={() => {
-        setContextValue("currentSheetIndex", sheet.index);
+        setContext((draftCtx) => {
+          draftCtx.currentSheetIndex = sheet.index!;
+        });
       }}
       onContextMenu={(e) => {
         const rect = containerRef.current!.getBoundingClientRect();

packages/react/src/components/SheetTab/index.tsx

@@ -1,5 +1,4 @@
 import React, { useContext, useRef } from "react";
-import produce from "immer";
 import { updateCell, addSheet } from "@fortune-sheet/core";
 import WorkbookContext from "../../context";
 import SVGIcon from "../SVGIcon";
@@ -21,8 +20,7 @@ const SheetTab: React.FC = () => {
         <div
           className="fortune-sheettab-button"
           onClick={() => {
-            setContext(
+            setContext((draftCtx) => {
-              produce((draftCtx) => {
               if (draftCtx.luckysheetCellUpdate.length > 0) {
                 updateCell(
                   draftCtx,
@@ -32,8 +30,7 @@ const SheetTab: React.FC = () => {
                 );
               }
               addSheet(draftCtx);
-              })
+            });
-            );
           }}
         >
           <SVGIcon name="plus" width={16} height={16} />

packages/react/src/components/Toolbar/index.tsx

@@ -1,5 +1,4 @@
 import React, { useContext, useCallback, useRef } from "react";
-import produce from "immer";
 import {
   getToolbarItemClickHandler,
   handleTextBackground,
@@ -32,14 +31,12 @@ const Toolbar: React.FC = () => {
       }
       if (["text-color", "text-background"].includes(name)) {
         const pick = (color: string) => {
-          setContext(
+          setContext((draftCtx) =>
-            produce((draftCtx) =>
             (name === "text-color" ? handleTextColor : handleTextBackground)(
               draftCtx,
               refs.cellInput.current!,
               color
             )
-            )
           );
           if (name === "text-color") {
             refs.globalCache.recentTextColor = color;
@@ -103,14 +100,12 @@ const Toolbar: React.FC = () => {
                   <Option
                     key={num}
                     onClick={() => {
-                      setContext(
+                      setContext((draftContext) =>
-                        produce((draftContext) =>
                         handleTextSize(
                           draftContext,
                           refs.cellInput.current!,
                           num
                         )
-                        )
                       );
                       setOpen(false);
                     }}
@@ -129,14 +124,12 @@ const Toolbar: React.FC = () => {
           tooltip={name}
           key={name}
           onClick={() =>
-            setContext(
+            setContext((draftCtx) => {
-              produce((draftCtx) => {
               getToolbarItemClickHandler(name)?.(
                 draftCtx,
                 refs.cellInput.current!
               );
             })
-            )
           }
         />
       );

packages/react/src/components/Workbook/index.tsx

@@ -20,7 +20,7 @@ import React, {
   useRef,
 } from "react";
 import "./index.css";
-import produce from "immer";
+import { enablePatches, produceWithPatches } from "immer";
 import _, { assign } from "lodash";
 import Sheet from "../Sheet";
 import WorkbookContext from "../../context";
@@ -30,6 +30,8 @@ import SheetTab from "../SheetTab";
 import ContextMenu from "../ContextMenu";
 import SVGDefines from "../SVGDefines";
 
+enablePatches();
+
 const Workbook: React.FC<
   Settings & { onChange?: (data: SheetType[]) => void }
 > = ({ onChange, ...props }) => {
@@ -45,21 +47,21 @@ const Workbook: React.FC<
     () => assign(defaultSettings, props) as Required<Settings>,
     [props]
   );
-  const setContextValue = useCallback(
+
-    <K extends keyof Context>(key: K, value: Context[K]) => {
+  const setContextWithProduce = useCallback(
-      setContext(
+    (recipe: (ctx: Context) => void) => {
-        produce((draftCtx) => {
+      setContext((ctx_) => {
-          draftCtx[key] = value;
+        const [result] = produceWithPatches(ctx_, recipe);
-        })
+        return result;
-      );
+      });
     },
     []
   );
+
   const providerValue = useMemo(
     () => ({
       context,
-      setContext,
+      setContext: setContextWithProduce,
-      setContextValue,
       settings: mergedSettings,
       refs: {
         globalCache: globalCache.current,
@@ -71,7 +73,7 @@ const Workbook: React.FC<
         workbookContainer,
       },
     }),
-    [context, mergedSettings, setContextValue]
+    [context, mergedSettings, setContextWithProduce]
   );
 
   useEffect(() => {
@@ -79,8 +81,7 @@ const Workbook: React.FC<
   }, [context.luckysheetfile, onChange]);
 
   useEffect(() => {
-    setContext(
+    setContextWithProduce((draftCtx) => {
-      produce((draftCtx) => {
       if (_.isEmpty(draftCtx.luckysheetfile)) {
         // mergedSettings.data at this time may be immutable, causing following modifications to fail,
         // clone it to make it mutable
@@ -121,9 +122,8 @@ const Workbook: React.FC<
         const lastRowNum = lastRow?.r || draftCtx.defaultrowNum;
         const lastColNum = lastCol?.c || draftCtx.defaultcolumnNum;
         if (lastRowNum && lastColNum) {
-            const expandedData: SheetType["data"] = _.times(
+          const expandedData: SheetType["data"] = _.times(lastRowNum + 1, () =>
-              lastRowNum + 1,
+            _.times(lastColNum + 1, () => null)
-              () => _.times(lastColNum + 1, () => null)
           );
           cellData?.forEach((d) => {
             // TODO setCellValue(draftCtx, d.r, d.c, expandedData, d.v);
@@ -196,12 +196,11 @@ const Workbook: React.FC<
       if (!_.isNil(mergedSettings.lang)) {
         localStorage.setItem("lang", mergedSettings.lang);
       }
-      })
+    });
-    );
   }, [
     mergedSettings.data,
     context.currentSheetIndex,
-    context.luckysheetfile?.length,
+    context.luckysheetfile.length,
     mergedSettings.defaultRowHeight,
     mergedSettings.defaultColWidth,
     mergedSettings.column,
@@ -212,11 +211,12 @@ const Workbook: React.FC<
     mergedSettings.allowEdit,
     mergedSettings.limitSheetNameLength,
     mergedSettings.defaultSheetNameMaxLength,
+    setContextWithProduce,
   ]);
 
-  const onKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
+  const onKeyDown = useCallback(
-    setContext(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
-      produce((draftCtx) => {
+      setContextWithProduce((draftCtx) => {
         handleGlobalKeyDown(
           draftCtx,
           cellInput.current!,
@@ -224,17 +224,19 @@ const Workbook: React.FC<
           e.nativeEvent,
           globalCache.current!
         );
-      })
+      });
+    },
+    [setContextWithProduce]
   );
-  }, []);
 
-  const onPaste = useCallback((e: ClipboardEvent) => {
+  const onPaste = useCallback(
-    setContext(
+    (e: ClipboardEvent) => {
-      produce((draftCtx) => {
+      setContextWithProduce((draftCtx) => {
         handlePaste(draftCtx, e);
-      })
+      });
+    },
+    [setContextWithProduce]
   );
-  }, []);
 
   useEffect(() => {
     document.addEventListener("paste", onPaste);
@@ -270,7 +272,9 @@ const Workbook: React.FC<
         {!_.isEmpty(context.contextMenu) && (
           <div
             onMouseDown={() => {
-              setContextValue("contextMenu", undefined);
+              setContextWithProduce((draftCtx) => {
+                draftCtx.contextMenu = undefined;
+              });
             }}
             onMouseMove={(e) => e.stopPropagation()}
             onMouseUp={(e) => e.stopPropagation()}

packages/react/src/context/index.ts

@@ -19,15 +19,13 @@ type RefValues = {
 
 const WorkbookContext = React.createContext<{
   context: Context;
-  setContext: React.Dispatch<React.SetStateAction<Context>>;
+  setContext: (recipe: (ctx: Context) => void) => void;
   // eslint-disable-next-line
-  setContextValue: <K extends keyof Context>(key: K, value: Context[K]) => void;
   settings: Required<Settings>;
   refs: RefValues;
 }>({
   context: defaultContext(),
   setContext: () => {},
-  setContextValue: () => {},
   settings: defaultSettings,
   refs: {
     globalCache: {},

packages/react/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDirs": ["./src", "../core/src"],
-    "outDir": "./lib",
-    "baseUrl": "./",
-    "paths": {
-      "@fortune-sheet/core": ["../core/src"]
-    },
-    "composite": true
-  },
-  "include": [
-    "./src"
-  ],
-  "references": [{ "path": "../core" }]
-}

stories/Workbook.stories.tsx

@@ -11,6 +11,7 @@ export default {
 } as ComponentMeta<typeof Workbook>;
 
 const Template: ComponentStory<typeof Workbook> = ({
+  // eslint-disable-next-line react/prop-types
   data: data0,
   ...args
 }) => {
@@ -26,13 +27,16 @@ const Template: ComponentStory<typeof Workbook> = ({
 };
 
 export const Basic = Template.bind({});
+// @ts-ignore
 Basic.args = { data: [cell] };
 
 export const Formula = Template.bind({});
+// @ts-ignore
 Formula.args = { data: [formula] };
 
 export const Empty = Template.bind({});
 Empty.args = { data: [empty] };
 
 export const Tabs = Template.bind({});
+// @ts-ignore
 Tabs.args = { data: [cell, formula] };

tsconfig.json

@@ -19,7 +19,6 @@
       "@fortune-sheet/react": ["packages/react/src"]
     }
   },
-  "references": [{ "path": "./packages/core" }, { "path": "./packages/react" }],
   "include": ["packages/*/src", "stories/"],
   "exclude": [
     "node_modules",