diff --git a/src/App/BottomPanel/FindReplace.tsx b/src/App/BottomPanel/FindReplace.tsx index 818dbe2..4ea9326 100644 --- a/src/App/BottomPanel/FindReplace.tsx +++ b/src/App/BottomPanel/FindReplace.tsx @@ -4,6 +4,7 @@ import { usePersistentState } from "@/hooks/usePersistentState"; import CloseIcon from '@mui/icons-material/Close'; import SwapHorizIcon from '@mui/icons-material/SwapHoriz'; +import { useShortcuts } from "@/hooks/useShortcuts"; type FindReplaceProps = { setCS: Dispatch<(oldState: VisualEditorState) => VisualEditorState>, @@ -27,27 +28,15 @@ export function FindReplace({setCS, hide}: FindReplaceProps) { }); }, [findTxt, replaceTxt]); - const onKeyDown = useCallback((e: KeyboardEvent) => { - if (e.key === "Enter") { - e.preventDefault(); - e.stopPropagation(); - onReplace(); - // setModal(null); - } - }, [onReplace]); + useShortcuts([ + {keys: ["Enter"], action: onReplace}, + ]) const onSwap = useCallback(() => { setReplaceTxt(findTxt); setFindText(replaceTxt); }, [findTxt, replaceTxt]); - useEffect(() => { - window.addEventListener("keydown", onKeyDown); - return () => { - window.removeEventListener("keydown", onKeyDown); - } - }, []) - return
setFindText(e.target.value)} style={{width:300}}/> diff --git a/src/App/Modals/TextDialog.tsx b/src/App/Modals/TextDialog.tsx index 6ab731b..ead2abc 100644 --- a/src/App/Modals/TextDialog.tsx +++ b/src/App/Modals/TextDialog.tsx @@ -1,24 +1,20 @@ -import { Dispatch, ReactElement, SetStateAction, useState, KeyboardEvent, useEffect, useRef } from "react"; +import { Dispatch, ReactElement, SetStateAction, useState, useCallback } from "react"; import { cachedParseLabel } from "@/statecharts/parser"; +import { useShortcuts } from "@/hooks/useShortcuts"; export function TextDialog(props: {setModal: Dispatch>, text: string, done: (newText: string|undefined) => void}) { const [text, setText] = useState(props.text); - function onKeyDown(e: KeyboardEvent) { - if (e.key === "Enter") { - if (!e.shiftKey) { - e.preventDefault(); + useShortcuts([ + {keys: ["Enter"], action: useCallback(() => { props.done(text); props.setModal(null); - } - } - if (e.key === "Escape") { - props.setModal(null); - e.stopPropagation(); - } - e.stopPropagation(); - } + }, [text, props.done, props.setModal])}, + {keys: ["Escape"], action: useCallback(() => { + props.setModal(null); + }, [props.setModal])}, + ], false); let parseError = ""; try { @@ -28,7 +24,7 @@ export function TextDialog(props: {setModal: Dispatch + return
{/* Text label:
*/}