Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

support enter to update, shift + enter to create a new line and focus on update textarea after coding

Browse Source
This commit is contained in:
Abi Raja 2024-07-11 13:53:49 -04:00
parent 9ec3adad19
commit 24a7462c9f
1 changed files with 15 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/App.tsx
View File

@ -56,6 +56,8 @@ function App() {
const [updateInstruction, setUpdateInstruction] = useState(""); const [updateInstruction, setUpdateInstruction] = useState("");
const [isImportedFromCode, setIsImportedFromCode] = useState<boolean>(false); const [isImportedFromCode, setIsImportedFromCode] = useState<boolean>(false);
const textareaRef = useRef<HTMLTextAreaElement>(null);
const { disableInSelectAndEditMode } = useAppStore(); const { disableInSelectAndEditMode } = useAppStore();
// Settings // Settings
@ -403,6 +405,13 @@ function App() {
setAppState(AppState.CODE_READY); setAppState(AppState.CODE_READY);
} }
// When coding is complete, focus on the update instruction textarea
useEffect(() => {
if (appState === AppState.CODE_READY && textareaRef.current) {
textareaRef.current.focus();
}
}, [appState]);
return ( return (
<div className="mt-2 dark:bg-black dark:text-white"> <div className="mt-2 dark:bg-black dark:text-white">
{IS_RUNNING_ON_CLOUD && <PicoBadge />} {IS_RUNNING_ON_CLOUD && <PicoBadge />}
@ -501,8 +510,14 @@ function App() {
<div> <div>
<div className="grid w-full gap-2"> <div className="grid w-full gap-2">
<Textarea <Textarea
ref={textareaRef}
placeholder="Tell the AI what to change..." placeholder="Tell the AI what to change..."
onChange={(e) => setUpdateInstruction(e.target.value)} onChange={(e) => setUpdateInstruction(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter" && !e.shiftKey) {
doUpdate(updateInstruction);
}
}}
value={updateInstruction} value={updateInstruction}
/> />
<div className="flex justify-between items-center gap-x-2"> <div className="flex justify-between items-center gap-x-2">