Improve text input performance with apply/cancel

src/App.tsx

@@ -42,6 +42,7 @@ export default function App() {
   const positionsRef = useRef<PositionsMap>(savedSettings?.positions || {});
 
   const [text, setText] = useState(() => savedSettings?.text || DEFAULT_TEXT);
+  const [draftText, setDraftText] = useState(() => savedSettings?.text || DEFAULT_TEXT);
   const [words, setWords] = useState(() =>
     splitWords(savedSettings?.text || DEFAULT_TEXT),
   );
@@ -100,6 +101,24 @@ export default function App() {
   const prevTextRef = useRef(text);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
+  const toggleTextInput = useCallback(() => {
+    setShowTextInput((prev) => {
+      const next = !prev;
+      if (next) setDraftText(text);
+      return next;
+    });
+  }, [text]);
+
+  const applyDraftText = useCallback(() => {
+    setText(draftText);
+    setShowTextInput(false);
+  }, [draftText]);
+
+  const cancelDraftText = useCallback(() => {
+    setDraftText(text);
+    setShowTextInput(false);
+  }, [text]);
+
   const togglePlay = useCallback(() => {
     if (currentIndex >= words.length - 1) {
       setCurrentIndex(0);
@@ -281,6 +300,7 @@ export default function App() {
         case "Escape":
           setShowInfo(false);
           setShowShortcuts(false);
+          setDraftText(text);
           setShowTextInput(false);
           setShowSettings(false);
           break;
@@ -389,7 +409,7 @@ export default function App() {
     <div style={styles.container}>
       <TopBar
         showTextInput={showTextInput}
-        onToggleTextInput={() => setShowTextInput((prev) => !prev)}
+        onToggleTextInput={toggleTextInput}
         fileInputRef={fileInputRef}
         onFileUpload={handleFileUpload}
         fileAccept=".epub,.pdf,.txt"
@@ -406,8 +426,17 @@ export default function App() {
 
       {showTextInput && (
         <TextInputOverlay
-          text={text}
-          onChangeText={(e) => setText(e.target.value)}
+          text={draftText}
+          onChangeText={(e) => setDraftText(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+              e.preventDefault();
+              applyDraftText();
+            }
+          }}
+          isDirty={draftText !== text}
+          onApply={applyDraftText}
+          onCancel={cancelDraftText}
         />
       )}