Speed up text editor for large inputs

src/App.tsx

@@ -42,7 +42,6 @@ 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,24 +99,15 @@ export default function App() {
   const timeoutRef = useRef<number | null>(null);
   const prevTextRef = useRef(text);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const [textEditorSession, setTextEditorSession] = useState(0);
 
   const toggleTextInput = useCallback(() => {
     setShowTextInput((prev) => {
       const next = !prev;
-      if (next) setDraftText(text);
+      if (next) setTextEditorSession((s) => s + 1);
       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) {
@@ -300,7 +290,6 @@ export default function App() {
         case "Escape":
           setShowInfo(false);
           setShowShortcuts(false);
-          setDraftText(text);
           setShowTextInput(false);
           setShowSettings(false);
           break;
@@ -426,17 +415,13 @@ export default function App() {
 
       {showTextInput && (
         <TextInputOverlay
-          text={draftText}
-          onChangeText={(e) => setDraftText(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
-              e.preventDefault();
-              applyDraftText();
-            }
+          key={textEditorSession}
+          initialText={text}
+          onApply={(nextText) => {
+            setText(nextText);
+            setShowTextInput(false);
           }}
-          isDirty={draftText !== text}
-          onApply={applyDraftText}
-          onCancel={cancelDraftText}
+          onCancel={() => setShowTextInput(false)}
         />
       )}