bony2023 / react-terminal Goto Github PK

It would be really nice if we could change the size of the font used in the terminal, allowing for more responsive font sizes depending on the size of the screen being used.

An example in README.md of running commands programmatically.

I had checked #63 and #173 but couldn't find a way to run clear when the terminal panel re-opened.

Also is there an option to remove welcomeMessage when clear is called?

Is it possible to run commands via button press?

For example

import React from "react";

function CommandButton() {
	return (
		<button 
			onClick={() => ReactTerminal.cd("home")}
		>
			Run Command
		</button>
	);
}

export default CommandButton;

Hey there,

this one looks great. Is there any chance to remove Google Fonts as a mandatory dependency?

Thanks a lot!

The keyboard does not pop up on mobile devices when you click on the terminal.

Checked on Android 10 and 13.
Browsers: chrome, firefox
Version package: 1.3.0

Tested page: react-terminal.surge.sh

For example, adding push message from event listener to the terminal

The welcomeMessage is output on the same line as what should be the preceeding line.

See: https://x42pi.csb.app/

It adds a text input that blocks the correct usage.

https://github.com/pacocoursey/next-themes

To re-create the bug create a next.js project with next-themes and wrap like so:

import { ThemeProvider } from 'next-themes'
export default function App({ Component, pageProps }: AppProps) {
  return (
      <TerminalContextProvider>
        <ReactTerminal />
      </TerminalContextProvider>
})

For my use case, I had to use the defaulthandler to make an api call to fetch the result for the command and return a promise with the response for the command.
Command response has "\n" characters and its not getting preserved.
Proposed solution:-
The span html element for the default handler output doesnt have a "whitespace" : "pre-wrap" style and hence its not preserving it.

I'd like to be able to run a callback on any string that is input and not have specific commands.

Something like this:

<ReactTerminal
    commands={{
        '*': handleCommand
    }}
/>

My commands are sent to a server which does the validation so I don't know them upfront.

Terminal cursor not show on mobile view until focus on terminal don't have any focus point active i m try multiple way to focus the terminal but not working

When attempting to paste using Firefox the error TypeError: navigator.clipboard.readText is not a function appears and the paste does not succeed. Based on https://stackoverflow.com/questions/67440036/navigator-clipboard-readtext-is-not-working-in-firefox it looks like Firefox requires a different API call for pasting (compared to Chrome).

Is it possible to somehow have multiple function arguments in commands? ie.

const commands = {
  email: (message, address) => `"${message}" sent to "${address}"` 
}

The current behaviour of running email message address just includes the value of both arguments in the first argument, leaving the second undefined. Is there a way to seperate them?

at logCapturedError (node_modules/react-dom/cjs/react-dom.development.js:18687:23) at update.callback (node_modules/react-dom/cjs/react-dom.development.js:18720:5) at callCallback (node_modules/react-dom/cjs/react-dom.development.js:13923:12) at commitUpdateQueue (node_modules/react-dom/cjs/react-dom.development.js:13944:9) at commitLayoutEffectOnFiber (node_modules/react-dom/cjs/react-dom.development.js:23391:13) at commitLayoutMountEffects_complete (node_modules/react-dom/cjs/react-dom.development.js:24688:9) at commitLayoutEffects_begin (node_modules/react-dom/cjs/react-dom.development.js:24674:7)

what should i do ? all of my tests are fails when i render the react-terminal component !

is it possible to add autocomplete and custom styles?

Hi! Your component works great! I am trying to combine it with an auto typing animation. What could be very handy is a prop to disable handleKeyDown functionality entirely or with delay, as well as removing the blinking cursor. I am looking for an open-source project to work on and I would love to take the above issues on as a challenge if you let me!

Hello there, react-terminal is causing some hydration warnings cause I have uploaded a screenshot for further details. It's a simple issue with a simple fix.
I believe the issue is caused by the defaultprops object at /src/components/Terminal.tsx
which can easily be fixed using destructuring of props ( just a quick hacky fix )

import React from 'react';

// Default Props with destructuring
export default function Terminal(props: any) {
  const { prop1 = 'value', prop2 = 'value', ...restProps } = props;
  return(
      <Component/>
  )
}

Styling error messages as a prop on <ReactTerminal> like this errorMessage={<span style={{color: 'red'}}>Command not found</span>}, looks fine on client side, just throws Warning: Failed prop type: Invalid prop `errorMessage` of type `object` supplied to `C`, expected `string`.,

Support on a theme level could be useful. I would imagine something would need to be edited around here in addition to the theme objects, but I'm not really sure how to go about it myself.

In the README picture you have a detailed multiline output, how is this accomplished?

Was it a choice to not make it for mobile? Or does it break something if used on a mobile so mobile usage was let go? I'm really curious. I made a project using react-terminal and later found out that it wouldn't function as expected on my phone. So I had to scrap all the responsiveness for that project and instead just asked the user to please open the app on a desktop. Anyway, amazing work @bony2023 and everyone involved!

Reproduction step

Setup example Component

enter
cd aaaaa bbbbbbb

expected output:
cd aaaaa bbbbbbb
actual output:
cd aaaaa bbbbbbb

Wonder if it is currently possible for additional user prompts. For example, take the following interaction:

>>> create-resource
Name of resource? hello-world
How big is the resource (1-5)?: 4
Resource created!
>>>

In this example, user types in create-resource and is asked additional prompts. I'm willing to do the implementation myself but want to make sure it isn't possible already, and if not, any gotchas/obvious paths to go down for the implementation.

good afternoon, love the terminal! Great job.

Found a quick lil bug with copy/paste. Looked at the code and cannot find it implemented.

Let me know if this is a use-case that is being worked on or point me to the place where I can implemented and ill submit a pr, thanks!

It would be great to have multiline input like the chrome console or even a regular terminal by pasting

Is there a way to remove the top bar with the red/yellow/green buttons? The look clashes with my project, and the buttons don't seem to work.

Uncaught TypeError: Cannot read properties of null (reading 'bufferedContent')

"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.11.47",
"@types/react": "^18.0.17",
"@types/react-dom": "^18.0.6",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"typescript": "^4.7.4",
"web-vitals": "^2.1.4"

my react version is 18.0

at component version v1.28 warning like

Uncaught TypeError: Cannot read properties of null (reading 'bufferedContent')
    at h (index.es.js:1:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)

Is it possible to run commands or just print things to the terminal without actually typing in a command? At the moment the following code runs (console.log works), but just doesnt print anything in the terminal. Seems unusual.

Example:

const welcomeMessage = (
    <span>
        <span style={link} onClick={() => commands.copy()}>
          Click here
        </span>{" "}
        to try to run a function to print to terminal.
      </span>
  );

const commands = {
    copy: () => {
      console.log("success?");
      return <span>Success!</span>;
    }
  };

EDIT ON CODESANDBOX

The documentation says
List of commands to be provided as a key value pair where value can be either a string, JSX/HTML tag or callback
But how to pass this value ?
I'm doing this

 const commands = {
    whoami: "Abhishek Jha",
    about:
      "<h1>I'm Abhishek Jha.</h1> <br/> Competitive programmer & Full stack developer.",
    cd: (directory) => `changed path to ${directory}`,
  };

Am I doing any mistake in syntax or this doesn't work ?

While using the terminal in android chrome, the terminal on focus is not bringing the keyboard into the view.
Only with the soft keyboard, a user can type in commands when using the terminal in smart phones

Tried to figure out what was causing this but could not; behaves as if it is <a href="#" /> or something, page scrolls to top when you focus by clicking the input.

I think it has to do with setClickedInside().