From a7c905a301ac64f9aea7ff113f51d97a7e149ffc Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Fri, 31 May 2024 18:22:30 -0400 Subject: [PATCH 1/6] update icon and text --- .../select-and-edit/SelectAndEditModeToggleButton.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/select-and-edit/SelectAndEditModeToggleButton.tsx b/frontend/src/components/select-and-edit/SelectAndEditModeToggleButton.tsx index f076c9b..2f76486 100644 --- a/frontend/src/components/select-and-edit/SelectAndEditModeToggleButton.tsx +++ b/frontend/src/components/select-and-edit/SelectAndEditModeToggleButton.tsx @@ -1,3 +1,4 @@ +import { GiClick } from "react-icons/gi"; import { useAppStore } from "../../store/app-store"; import { Button } from "../ui/button"; @@ -10,7 +11,10 @@ function SelectAndEditModeToggleButton() { className="flex items-center gap-x-2 dark:text-white dark:bg-gray-700 regenerate-btn" variant={inSelectAndEditMode ? "destructive" : "default"} > - {inSelectAndEditMode ? "Exit selection mode" : "🖱️ Select and Edit"} + + + {inSelectAndEditMode ? "Exit selection mode" : "Select and update"} + ); } From 3fbb8f074aefc445c451eb3f5a9efa374be052d6 Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Fri, 31 May 2024 18:27:47 -0400 Subject: [PATCH 2/6] reset should disable select and edit mode --- frontend/src/App.tsx | 4 ++++ frontend/src/store/app-store.ts | 2 ++ 2 files changed, 6 insertions(+) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 77785db..ac76ede 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -41,6 +41,7 @@ import { extractHtml } from "./components/preview/extractHtml"; import useBrowserTabIndicator from "./hooks/useBrowserTabIndicator"; import TipLink from "./components/core/TipLink"; import SelectAndEditModeToggleButton from "./components/select-and-edit/SelectAndEditModeToggleButton"; +import { useAppStore } from "./store/app-store"; const IS_OPENAI_DOWN = false; @@ -55,6 +56,8 @@ function App() { const [updateInstruction, setUpdateInstruction] = useState(""); const [isImportedFromCode, setIsImportedFromCode] = useState(false); + const { disableInSelectAndEditMode } = useAppStore(); + // Settings const [settings, setSettings] = usePersistedState( { @@ -153,6 +156,7 @@ function App() { setAppHistory([]); setCurrentVersion(null); setShouldIncludeResultImage(false); + disableInSelectAndEditMode(); }; const regenerate = () => { diff --git a/frontend/src/store/app-store.ts b/frontend/src/store/app-store.ts index 26b7994..2b52513 100644 --- a/frontend/src/store/app-store.ts +++ b/frontend/src/store/app-store.ts @@ -5,6 +5,7 @@ interface AppStore { inSelectAndEditMode: boolean; inputMode: "image" | "video"; toggleInSelectAndEditMode: () => void; + disableInSelectAndEditMode: () => void; } export const useAppStore = create((set) => ({ @@ -12,4 +13,5 @@ export const useAppStore = create((set) => ({ inSelectAndEditMode: false, toggleInSelectAndEditMode: () => set((state) => ({ inSelectAndEditMode: !state.inSelectAndEditMode })), + disableInSelectAndEditMode: () => set({ inSelectAndEditMode: false }), })); From 423c74bdc9e01ff3a8d332149fc1d69076926cf1 Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Fri, 31 May 2024 18:33:42 -0400 Subject: [PATCH 3/6] focus the textarea when the popup is visible --- frontend/src/components/select-and-edit/EditPopup.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/select-and-edit/EditPopup.tsx b/frontend/src/components/select-and-edit/EditPopup.tsx index 5bc9d42..ca32e65 100644 --- a/frontend/src/components/select-and-edit/EditPopup.tsx +++ b/frontend/src/components/select-and-edit/EditPopup.tsx @@ -98,11 +98,16 @@ const EditPopup: React.FC = ({ // Reset the update text setUpdateText(""); - - // Focus the textarea - textareaRef.current?.focus(); }, [event, iframeRef]); + // Focus the textarea when the popup is visible (we can't do this when handling the click event + // because the textarea is not rendered yet) + useEffect(() => { + if (popupVisible) { + textareaRef.current?.focus(); + } + }, [popupVisible]); + if (!popupVisible) return; return ( From 5f3868f3c9d894a3ef5b2dece862e84e7dfd6622 Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Fri, 31 May 2024 18:36:11 -0400 Subject: [PATCH 4/6] fix bug with focusing textarea --- frontend/src/components/select-and-edit/EditPopup.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/select-and-edit/EditPopup.tsx b/frontend/src/components/select-and-edit/EditPopup.tsx index ca32e65..5b70813 100644 --- a/frontend/src/components/select-and-edit/EditPopup.tsx +++ b/frontend/src/components/select-and-edit/EditPopup.tsx @@ -98,10 +98,14 @@ const EditPopup: React.FC = ({ // Reset the update text setUpdateText(""); + + // Focus the textarea + textareaRef.current?.focus(); }, [event, iframeRef]); - // Focus the textarea when the popup is visible (we can't do this when handling the click event + // Focus the textarea when the popup is visible (we can't do this only when handling the click event // because the textarea is not rendered yet) + // We need to also do it in the click event because popupVisible doesn't change values in that event useEffect(() => { if (popupVisible) { textareaRef.current?.focus(); From e1265b2b7593afc0cab622cbf6fd28aebbc62c9f Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Fri, 31 May 2024 18:45:45 -0400 Subject: [PATCH 5/6] make enter submit the change --- frontend/src/components/select-and-edit/EditPopup.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/frontend/src/components/select-and-edit/EditPopup.tsx b/frontend/src/components/select-and-edit/EditPopup.tsx index 5b70813..c81e023 100644 --- a/frontend/src/components/select-and-edit/EditPopup.tsx +++ b/frontend/src/components/select-and-edit/EditPopup.tsx @@ -124,6 +124,12 @@ const EditPopup: React.FC = ({ value={updateText} onChange={(e) => setUpdateText(e.target.value)} placeholder="Tell the AI what to change about this element..." + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + onUpdate(updateText); + } + }} />
From 9fe32ba6e8ce8e55851c2f9dc893d51f05548475 Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Fri, 31 May 2024 21:39:12 -0400 Subject: [PATCH 6/6] move inSelectAndEditMode to inside EditPopup --- frontend/src/components/Preview.tsx | 10 +----- .../components/select-and-edit/EditPopup.tsx | 36 ++++++++++--------- 2 files changed, 20 insertions(+), 26 deletions(-) diff --git a/frontend/src/components/Preview.tsx b/frontend/src/components/Preview.tsx index 8dc2f22..d601f78 100644 --- a/frontend/src/components/Preview.tsx +++ b/frontend/src/components/Preview.tsx @@ -2,7 +2,6 @@ import { useEffect, useRef, useState } from "react"; import classNames from "classnames"; import useThrottle from "../hooks/useThrottle"; import EditPopup from "./select-and-edit/EditPopup"; -import { useAppStore } from "../store/app-store"; interface Props { code: string; @@ -11,8 +10,6 @@ interface Props { } function Preview({ code, device, doUpdate }: Props) { - const { inSelectAndEditMode } = useAppStore(); - const iframeRef = useRef(null); // Don't update code more often than every 200ms. @@ -51,12 +48,7 @@ function Preview({ code, device, doUpdate }: Props) { } )} > - +
); } diff --git a/frontend/src/components/select-and-edit/EditPopup.tsx b/frontend/src/components/select-and-edit/EditPopup.tsx index c81e023..09192b3 100644 --- a/frontend/src/components/select-and-edit/EditPopup.tsx +++ b/frontend/src/components/select-and-edit/EditPopup.tsx @@ -2,33 +2,40 @@ import React, { useEffect, useRef, useState } from "react"; import { Textarea } from "../ui/textarea"; import { Button } from "../ui/button"; import { addHighlight, getAdjustedCoordinates, removeHighlight } from "./utils"; +import { useAppStore } from "../../store/app-store"; interface EditPopupProps { event: MouseEvent | null; - inSelectAndEditMode: boolean; - doUpdate: (updateInstruction: string, selectedElement?: HTMLElement) => void; iframeRef: React.RefObject; + doUpdate: (updateInstruction: string, selectedElement?: HTMLElement) => void; } const EditPopup: React.FC = ({ event, - inSelectAndEditMode, - doUpdate, iframeRef, + doUpdate, }) => { - // Edit state - const [selectedElement, setSelectedElement] = useState< - HTMLElement | undefined - >(undefined); - const [updateText, setUpdateText] = useState(""); + // App state + const { inSelectAndEditMode } = useAppStore(); + + // Create a wrapper ref to store inSelectAndEditMode so the value is not stale + // in a event listener + const inSelectAndEditModeRef = useRef(inSelectAndEditMode); + + // Update the ref whenever the state changes + useEffect(() => { + inSelectAndEditModeRef.current = inSelectAndEditMode; + }, [inSelectAndEditMode]); // Popup state const [popupVisible, setPopupVisible] = useState(false); const [popupPosition, setPopupPosition] = useState({ x: 0, y: 0 }); - // Create a wrapper ref to store inSelectAndEditMode so the value is not stale - // in a event listener - const inSelectAndEditModeRef = useRef(inSelectAndEditMode); + // Edit state + const [selectedElement, setSelectedElement] = useState< + HTMLElement | undefined + >(undefined); + const [updateText, setUpdateText] = useState(""); // Textarea ref for focusing const textareaRef = useRef(null); @@ -47,11 +54,6 @@ const EditPopup: React.FC = ({ setPopupVisible(false); } - // Update the ref whenever the state changes - useEffect(() => { - inSelectAndEditModeRef.current = inSelectAndEditMode; - }, [inSelectAndEditMode]); - // Remove highlight and reset state when not in select and edit mode useEffect(() => { if (!inSelectAndEditMode) {