feat: implement Ctrl+H to replace

packages/core/src/context.ts

@@ -33,7 +33,8 @@ export type Context = {
   editingInsertedImgs?: Image;
   activeImg?: string;
   presences?: Presence[];
-  showSearchReplace?: boolean;
+  showSearch?: boolean;
+  showReplace?: boolean;
   linkCard?: LinkCardProps;
   rangeDialog?: RangeDialogProps; // 坐标选区鼠标选择
   // 提醒弹窗

packages/core/src/events/keyboard.ts

@@ -179,11 +179,10 @@ export function handleWithCtrlOrMetaKey(
     return;
   } else if (e.key === "f") {
     // Ctrl + F  查找
-    ctx.showSearchReplace = true;
-
-    // } else if (e.key === "h") {
-    //   // Ctrl + H  替换
-    //   searchReplace.createDialog(1);
+    ctx.showSearch = true;
+  } else if (e.key === "h") {
+    // Ctrl + H  替换
+    ctx.showReplace = true;
     //   searchReplace.init();
 
     //   $("#luckysheet-search-replace #searchInput input").focus();

packages/core/src/events/mouse.ts

@@ -77,7 +77,8 @@ export function handleGlobalWheel(
   scrollbarX: HTMLDivElement,
   scrollbarY: HTMLDivElement
 ) {
-  if (cache.searchDialog?.mouseEnter && ctx.showSearchReplace) return;
+  if (cache.searchDialog?.mouseEnter && ctx.showSearch && ctx.showReplace)
+    return;
   if (ctx.filterContextMenu != null) return;
   let { scrollLeft } = scrollbarX;
   const { scrollTop } = scrollbarY;

packages/core/src/modules/toolbar.ts

@@ -1594,7 +1594,7 @@ const handlerMap: Record<string, ToolbarItemClickHandler> = {
   "clear-format": handleClearFormat,
   "format-painter": handleFormatPainter,
   search: (ctx: Context) => {
-    ctx.showSearchReplace = true;
+    ctx.showSearch = true;
   },
   link: handleLink,
 };

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

@@ -24,7 +24,7 @@ const SearchReplace: React.FC<{
   const { findAndReplace, button } = locale(context);
   const [searchText, setSearchText] = useState("");
   const [replaceText, setReplaceText] = useState("");
-  const [showReplace, setShowReplace] = useState(false);
+  const [showReplace, setShowReplace] = useState(context.showReplace);
   const [searchResult, setSearchResult] = useState<SearchResult[]>([]);
   const [selectedCell, setSelectedCell] = useState<{ r: number; c: number }>();
   const { showAlert } = useAlert();
@@ -37,7 +37,8 @@ const SearchReplace: React.FC<{
   const closeDialog = useCallback(() => {
     _.set(refs.globalCache, "searchDialog.mouseEnter", false);
     setContext((draftCtx) => {
-      draftCtx.showSearchReplace = false;
+      draftCtx.showSearch = false;
+      draftCtx.showReplace = false;
     });
   }, [refs.globalCache, setContext]);
 

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

@@ -397,7 +397,7 @@ const SheetOverlay: React.FC = () => {
         />
         <ColumnHeader />
       </div>
-      {context.showSearchReplace && (
+      {(context.showSearch || context.showReplace) && (
         <SearchReplace getContainer={() => containerRef.current!} />
       )}
       <div className="fortune-row-body">

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

@@ -70,6 +70,7 @@ const SheetTab: React.FC = () => {
 
   useEffect(() => {
     const tabCurrent = tabContainerRef.current;
+    if (!tabCurrent) return;
     setIsShowScrollBtn(tabCurrent!.scrollWidth - 2 > tabCurrent!.clientWidth);
   }, [context.luckysheetfile]);
 

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

@@ -551,6 +551,12 @@ const Workbook = React.forwardRef<WorkbookInstance, Settings & AdditionalProps>(
           e.stopPropagation();
           return;
         }
+        if ((e.ctrlKey || e.metaKey) && e.key === "y") {
+          handleRedo();
+          e.stopPropagation();
+          e.preventDefault();
+          return;
+        }
         setContextWithProduce((draftCtx) => {
           handleGlobalKeyDown(
             draftCtx,

stories/Features.stories.tsx

@@ -62,8 +62,8 @@ export const MultiInstance: ComponentStory<typeof Workbook> = () => {
       <div
         style={{
           display: "inline-block",
-          width: "100%",
-          height: "50%",
+          width: "50%",
+          height: "100%",
           paddingRight: "12px",
           boxSizing: "border-box",
         }}
@@ -73,8 +73,8 @@ export const MultiInstance: ComponentStory<typeof Workbook> = () => {
       <div
         style={{
           display: "inline-block",
-          width: "100%",
-          height: "50%",
+          width: "50%",
+          height: "100%",
           paddingLeft: "12px",
           boxSizing: "border-box",
         }}