diff --git a/components/REPL/REPLHistory.tsx b/components/REPL/REPLHistory.tsx index 894f1ec..fbe289e 100644 --- a/components/REPL/REPLHistory.tsx +++ b/components/REPL/REPLHistory.tsx @@ -1,8 +1,16 @@ import { NextPage } from "next"; +import { MutableRefObject } from "react"; import styles from "../../styles/REPL/REPLHistory.module.css"; -const REPLHistory: NextPage<{history: string[]}> = ({history}) => { - return
+interface REPLHistoryParams { + history: string[]; + inputRef: MutableRefObject; +} + +const REPLHistory: NextPage = ({history, inputRef}) => { + const focusInput = () => {if (inputRef.current) inputRef.current.focus();}; + + return
{ history.map((value, idx) =>
{value === "" ? "\u00A0" : value}
) }
; }; diff --git a/components/REPL/REPLInput.tsx b/components/REPL/REPLInput.tsx index b83b458..11b07c4 100644 --- a/components/REPL/REPLInput.tsx +++ b/components/REPL/REPLInput.tsx @@ -1,9 +1,14 @@ import type { NextPage } from "next"; -import React from "react"; +import React, { MutableRefObject } from "react"; import { commandCompletion, executeCommand } from "../../lib/commands"; import styles from "../../styles/REPL/REPLInput.module.css"; -const REPLInput: NextPage<{historyCallback: CallableFunction}> = ({historyCallback}) => { +interface REPLInputParams { + historyCallback: CallableFunction; + inputRef: MutableRefObject; +} + +const REPLInput: NextPage = ({historyCallback, inputRef}) => { const typed = React.createRef(); const completion = React.createRef(); const [currentCmd, setCurrentCmd] = React.useState([]); @@ -41,7 +46,7 @@ const REPLInput: NextPage<{historyCallback: CallableFunction}> = ({historyCallba return
- + } className={styles.in} type={"text"} onChange={replinOnChange} onKeyDown={tabComplete} spellCheck={"false"} autoFocus />
; diff --git a/components/REPL/index.tsx b/components/REPL/index.tsx index e1a5a5b..5dc955b 100644 --- a/components/REPL/index.tsx +++ b/components/REPL/index.tsx @@ -1,14 +1,15 @@ -import { useState } from "react"; +import { useRef, useState } from "react"; import REPLInput from "./REPLInput"; import REPLHistory from "./REPLHistory"; const REPL = () => { const [history, manipulateHistory] = useState([]); + const inputRef = useRef(); const onCommandExecuted = (result: string[]) => manipulateHistory(result.reverse().concat(history).slice(0, 1000)); return (<> - - + + ); };