feat: add sendCommand, improve typing

src/components/Editor.tsx

@@ -8,7 +8,11 @@ import {
   useScrollToBottom,
 } from "../hooks/editor";
 
-export default function Editor(props: any) {
+export interface EditorHandle {
+  sendCommand: (command: string) => void;
+}
+
+const Editor = React.forwardRef<EditorHandle, any>((props, ref) => {
   const wrapperRef = React.useRef(null);
   const style = React.useContext(StyleContext);
   const themeStyles = React.useContext(ThemeContext);
@@ -28,7 +32,7 @@ export default function Editor(props: any) {
     defaultHandler
   } = props;
 
-  const currentLine = useCurrentLine(
+  const { currentLine, setEditorInput, setProcessCurrentLine } = useCurrentLine(
     caret,
     consoleFocused,
     prompt,
@@ -39,11 +43,20 @@ export default function Editor(props: any) {
     wrapperRef
   );
 
+  React.useImperativeHandle(ref, () => ({
+    sendCommand: (cmd: string) => {
+      setEditorInput(cmd);
+      setProcessCurrentLine(true);
+    }
+  }));
+
   return (
     <div id={"terminalEditor"} ref={wrapperRef} className={`${style.editor} ${!showControlBar ? style.curvedTop : null} ${showControlBar ? style.editorWithTopBar : null}`} style={{ background: themeStyles.themeBGColor }}>
       {welcomeMessage}
       {bufferedContent}
       {currentLine}
     </div>
   );
-}
+});
+
+export default Editor;

src/components/Terminal.tsx

@@ -5,25 +5,27 @@ import { ThemeContext } from "../contexts/ThemeContext";
 import { useClickOutsideEvent } from "../hooks/terminal";
 
 import Controls from "./Controls";
-import Editor from "./Editor";
+import Editor, { EditorHandle } from "./Editor";
 
 import Utils from "../common/Utils";
 
-interface TerminalProps {
+export interface TerminalProps {
   enableInput: boolean
   caret: boolean
   theme: string
   showControlBar: boolean
   showControlButtons: boolean
   controlButtonLabels: string[]
   prompt: string
-  commands: Record<string, (...args: never) => void>
+  commands: Record<string, string | ((...args: never) => void)>
   welcomeMessage: string | (() => void) | React.ReactNode
   errorMessage: string | ((...args: never) => void) | React.ReactNode
-  defaultHandler: ((...args: never) => void) | null
-};
+  defaultHandler: ((...args: never) => void) | null,
+}
+
+export type TerminalHandle = EditorHandle;
 
-const Terminal: React.FC<TerminalProps> = ({
+const Terminal = React.forwardRef<TerminalHandle, TerminalProps>(({
   enableInput = true,
   caret = true,
   theme = "light",
@@ -35,11 +37,12 @@ const Terminal: React.FC<TerminalProps> = ({
   welcomeMessage = "",
   errorMessage = "not found!",
   defaultHandler = null,
-}) => {
+}, ref) => {
   const wrapperRef = React.useRef(null);
   const [consoleFocused, setConsoleFocused] = React.useState(!Utils.isMobile());
   const style = React.useContext(StyleContext);
   const themeStyles = React.useContext(ThemeContext);
+  const editorRef = React.useRef(undefined);
 
   useClickOutsideEvent(wrapperRef, consoleFocused, setConsoleFocused);
 
@@ -49,6 +52,7 @@ const Terminal: React.FC<TerminalProps> = ({
     controlButtonLabels={controlButtonLabels}/> : null;
 
   const editor = <Editor
+    ref={editorRef}
     caret={caret}
     consoleFocused={consoleFocused}
     prompt={prompt}
@@ -60,6 +64,10 @@ const Terminal: React.FC<TerminalProps> = ({
     defaultHandler={defaultHandler}
   />
 
+  React.useImperativeHandle(ref, () => ({
+    sendCommand: editorRef.current.sendCommand
+  }));
+
   return (
     <div
       ref={wrapperRef}
@@ -73,6 +81,6 @@ const Terminal: React.FC<TerminalProps> = ({
       </div>
     </div>
   );
-}
+});
 
-export default Terminal;
+export default Terminal;

src/hooks/editor.tsx

@@ -325,7 +325,11 @@ export const useCurrentLine = (
     defaultHandler
   );
 
-  return currentLine;
+  return {
+    currentLine,
+    setEditorInput,
+    setProcessCurrentLine,
+  };
 };
 
 export const useScrollToBottom = (changesToWatch: any, wrapperRef: any) => {

src/index.tsx

@@ -1,18 +1,28 @@
 import * as React from "react";
 import * as Terminal from "./components/Terminal";
 import * as ContextProvider from "./contexts";
-import { 
+import {
   TerminalContextProvider as _TerminalContextProvider,
   TerminalContext as _TerminalContext
 } from "./contexts/TerminalContext";
 
-export function ReactTerminal(props: any): any {
+export type ReactTerminalHandle = Terminal.TerminalHandle;
+
+export const ReactTerminal = React.forwardRef<ReactTerminalHandle, Partial<Terminal.TerminalProps>>(
+  (props: Terminal.TerminalProps, ref) => {
+  const terminalRef = React.useRef(undefined);
+
+  React.useImperativeHandle(ref, () => ({
+    sendCommand: terminalRef.current?.sendCommand
+  }));
+
   return (
     <ContextProvider.default>
-      <Terminal.default {...props} />
+      <Terminal.default {...props} ref={terminalRef} />
     </ContextProvider.default>
   );
 }
+);
 
 export const TerminalContextProvider = _TerminalContextProvider;
 export const TerminalContext = _TerminalContext;