diff --git a/components/REPL/REPLInput.tsx b/components/REPL/REPLInput.tsx index 2f175fb..a1f02a6 100644 --- a/components/REPL/REPLInput.tsx +++ b/components/REPL/REPLInput.tsx @@ -4,16 +4,23 @@ import { commandCompletion, executeCommand } from "../../lib/commands"; import styles from "../../styles/REPL/REPLInput.module.css"; interface REPLInputParams { - historyCallback: CallableFunction; + historyCallback: CallableFunction; + historyClear: CallableFunction; inputRef: MutableRefObject; } -const REPLInput: NextPage = ({historyCallback, inputRef}) => { +const REPLInput: NextPage = ({historyCallback, historyClear, inputRef}) => { const typed = React.createRef(); const completion = React.createRef(); const [currentCmd, setCurrentCmd] = React.useState([]); const [justTabbed, setJustTabbed] = React.useState(0); + const clearInput = (inputRef: HTMLInputElement) => { + inputRef.value = ""; + if(typed.current) typed.current.innerHTML = ""; + if(completion.current) completion.current.innerHTML = ""; + } + const replinOnChange = (e: React.FormEvent) => { const input = (e.target as HTMLInputElement); const currentInput = input.value.toLowerCase(); @@ -50,22 +57,30 @@ const REPLInput: NextPage = ({historyCallback, inputRef}) => { if (e.key === "Enter") { e.preventDefault(); - const result = executeCommand((e.target as HTMLInputElement).value); - input.value = ""; - if(typed.current) typed.current.innerHTML = ""; - if(completion.current) completion.current.innerHTML = ""; + const command = (e.target as HTMLInputElement).value + if (command === "clear") { + clearInput(input); + historyClear(); + return false; + } + const result = executeCommand(command); + clearInput(input); historyCallback(result); } if (e.key === "d" && e.ctrlKey) { e.preventDefault(); const result = executeCommand("exit"); - input.value = ""; - if(typed.current) typed.current.innerHTML = ""; - if(completion.current) completion.current.innerHTML = ""; + clearInput(input); historyCallback(result); } + if (e.key === "l" && e.ctrlKey) { + e.preventDefault(); + clearInput(input); + historyClear(); + } + return false; }; diff --git a/components/REPL/index.tsx b/components/REPL/index.tsx index ac53d33..109fdba 100644 --- a/components/REPL/index.tsx +++ b/components/REPL/index.tsx @@ -6,6 +6,7 @@ const REPL = () => { const [history, manipulateHistory] = useState([]); const inputRef = useRef(); const onCommandExecuted = (result: string[]) => manipulateHistory(result.reverse().concat(history).slice(0, 1000)); + const onClearHistory = () => manipulateHistory([]); const focusInput = () => { if (inputRef.current) inputRef.current.focus(); @@ -13,7 +14,7 @@ const REPL = () => { return (<> - +
); }; diff --git a/lib/commands/definitions.ts b/lib/commands/definitions.ts index 3347834..38444d9 100644 --- a/lib/commands/definitions.ts +++ b/lib/commands/definitions.ts @@ -195,4 +195,10 @@ const exitCmd: Command = { } } -export const commandList = [about, help, man, project, exitCmd]; \ No newline at end of file +const clear: Command = { + name: "clear", + desc: "Clears the output on screen.", + execute: () => [] +} + +export const commandList = [about, help, man, project, exitCmd, clear]; \ No newline at end of file