Describe the bug
Clicking on another element on the page does not move focus to that element, instead focus remains on the terminal. This is because we are using document.onclick to maintain terminal focus.

To Reproduce

1. Add react-terminal-ui to page
2. Add another element like an input
3. Try to click on the input
4. Notice focus does not go to input, but remains on terminal

Expected behavior
It should be possible to focus on other elements on the page. We should avoid using document.onclick.

Screenshots
N/A

Additional context
Originally discussed in #1.

Is your feature request related to a problem? Please describe.
termynal.js has support for progress bars. Let's add similar functionality.

Describe the solution you'd like
If #3 is implemented. Add child component type like:

<TerminalProgress percentComplete={ 100 } />

Which should render something like the second line here:

Is your feature request related to a problem? Please describe.
The API to the component does not allow much control over input behavior. For example, setting a value or performing some action on input change.

Describe the solution you'd like
Add an InputController prop that allows setting input value and listening for input change. The API could be something like:

class InputController
  + triggerInputChange(String input)
  + onInputChange(String input)
  + onInputReceived(String input)

Describe alternatives you've considered
Some alternatives were discussed in #5

Additional context
See #5

Is your feature request related to a problem? Please describe.
The current API is not great. lineData is passed as a prop, which the Terminal component renders as child props.

Describe the solution you'd like
A better design would be for the Terminal component to take terminal lines as a child component, something like:

<Terminal name='React Terminal Usage Example' colorMode={ ColorMode.Light }>
  <TerminalOutput>Welcome to the React Terminal UI Demo!</TerminalOutput>
  <TerminalInput>Some input received</TerminalInput>
</Terminal>

Describe alternatives you've considered
Leave as is. The existing solution works. However, it is not in line with best practices for React.

Describe the solution you'd like
Add support for left/right arrows to move terminal line cursor.

Describe the solution you'd like
Add support for up/down arrows to toggle through history.

Describe the bug
I'm creating a platform with the terminal, and I'd include the component at the bottom of the website when we enter the first time the platform scrolls to the position of the terminal. I tried to fixed with the overflow-anchor: none but didn't work.

To Reproduce
Steps to reproduce the behavior:

1. Create a website with different sections that needs to scroll to the position of you're react-terminal-ui
2. Load the website
3. The website is going to scroll automatically to the terminal.

Expected behavior
I don't want this to automatically scroll to the terminal. How can I configure it to avoid this?

Upgrade dependencies so CVE is not present; see: https://github.com/jonmbake/react-terminal-ui/security/dependabot/5.

Hi,

Continuing my suggestion from the issue #12 , the scrolldown event on is triggered onClick when the pages has a height more than 100vh.

I made a video showing this using the demo terminal, I putted a div element test before the terminal and increased the height of the body, making a bigger site, and you will see the scrolldown animation to the final line in the terminal, thats what I suggest to remove, soo the dev's can implement it manually and optionally.

is there a way to edit the font size, color, height etc..? if there is, sorry I haven't found it

Is your feature request related to a problem? Please describe.
Yes and no.
When user is asked to fill a password, the input is visible, I think either blank or * should appeared instead of the caracters

Describe the solution you'd like
Maybe a props passwordField or hideField set to true passed to the Terminal so when the parent component knows that the next input is a password, you can set the field to true until next input so that Terminal could replace the visible caracters with * or blank

Its kind of a pain to override some of the styles.

Is it possible to have the CSS separate from the code?

An ambiguous behavior happens when I write some characters in the terminal and click on the left arrow, the cursor position indicates that I am at the last character, but actually it's behind it.

The issue will be clear when i tried to clean what was written and press the backspace, it will leave some characters unremoved

To Reproduce

1. write some characters to the terminal :ex 'ABCD'
2. press the left arrow 3 times
3. wrie another characters ex: 'EFG'
4. the terminal shows (AEFGBCD)
5. press down and hold the backspace to remove all
6. The terminal will shows "BCD" and the cursor blinking after the "D"

Expected behavior
clear indication for the cursor position

Screenshots
If applicable, add screenshots to help explain your problem.

Is your feature request related to a problem? Please describe.
I'm trying to simulate a command execution that takes several inputs throughout its lifecycle. To give a more realistic feel to the simulation, I want to toggle the input prompt off while the command is executing and doesn't require any input, however, as soon as an input is required I turn the input prompt on.

Describe the solution you'd like
A state that enables/disables the input prompt.

Describe alternatives you've considered
I would probably have to use a use effect hook to hide/show the input element, but it would be more convenient if this solution can be implemented.

Describe the bug
If I define an output like

{type: LineType.Output, value: 'Output with           multiple spaces!'},

The terminal outputs:

Output with multiple spaces!

It should respect multiple spaces.

To Reproduce

1. Add Line output containing value with multiple concurrent spaces

Notice that the terminal output does not show the extra spaces.

Expected behavior
Terminal output should respect all spaces.

Screenshots
N/A

Additional context
N/A

Describe the bug
When using the component, the onInput can be set to 0 from the client usage, even though it errors saying that it should be a callback function, its possible to, at least in dev mode, display the 0 in terminal as visible in the attached screenshot.

To Reproduce
pass 0 to onInput prop when rendering

Expected behavior
The short-circuit verification on the lib should check if onInput is indeed a function to prevent this from happening.

Screenshots

Additional context
Add any other context about the problem here.

Is your feature request related to a problem? Please describe.
Every time a build happens, docs are committed to this repo, polluting the commit history.

Describe the solution you'd like
Build the docs, including demo and test coverage reports, to a separate repo.

Describe the bug
The linetypes directory is missing from the production build

Screenshots

Is your feature request related to a problem? Please describe.
There is no way to add click listeners to the macOS-style buttons on the terminal window.

Describe the solution you'd like
A way to pass a callback for when the buttons are pressed to the Terminal component.

Describe alternatives you've considered
Fork the project and add the listeners.

Additional context
An example use case is closing, minimizing and maximizing the terminal window when the buttons are passed.

Is your feature request related to a problem? Please describe.
I'm trying to make my terminal full screen, unlike the way it currently is:

Describe the solution you'd like
From a quick glance in your repo, it seems that the style.css limits the width and the height for the terminal itself, I'd like to have the option to provide a css or at least properties with the Terminal component.
Describe alternatives you've considered
Tried providing my own css, it got overridden by the default one.

Is your feature request related to a problem? Please describe.
Hello, I was wondering if there is an option to remove the top border and Mac inspired colored buttons ?

Describe the bug
In PR #37, we added an id attribute in order to be able to reference cursor and hidden input elements. This breaks when multiple terminal are rendered to the page.

To Reproduce
Render multiple terminals to the the page; things are broken.

Expected behavior
Support rendering multiple terminals to the pages.

Screenshots
N/A

Additional context
See discussion here: https://github.com/jonmbake/react-terminal-ui/pull/37/files#r1183577988

Help improve react-terminal-ui by answering the following questions:

1. What do you like most about react-terminal-ui? What features do you find most useful?
2. What features do you feel are missing from react-terminal-ui? How could this project be improved?
3. Why are you using react-terminal-ui? i.e. What is the use case?

Is your feature request related to a problem? Please describe.
Is there a way to render HTML elements and tags inside the terminal text?

Describe the solution you'd like
Maybe some documentation or an example that would describe what I want to do.

Describe alternatives you've considered
None so far.

Additional context
I've tried this:

{
      type: LineType.Output,
      value:
        "Hi 👋🏽, my name is Fares, and I'm a backend software engineer!\n" +
        "I love challenges, and live for the thrill of solving problems!\n" +
        'If you wish to contact me, please reach out via email: <a href="[email protected]">here!</a>\n' +
        "So far, I've had the opportunity to work in 2 different organizations.\n" +
        "Please type 'exp' to see my professional experience 💼\n",
}

And unfortunately I haven't managed to make it work. Maybe I'm missing something?
Either way, big fan!
Fares

Can the package work with those symbols?

I'm loading multiple terminals in one page and my page jumps down to the last terminal on inital load.
I read the source code and find that this behavior is done on purpose by scrollIntoViewRef. Why is this the case? Can you just remove it?

Describe the bug
the 'Terminal hidden input' div is visible in the terminal (as of the latest version)

To Reproduce

1. Create a new instance of the terminal
   This issue can also be viewed on the demo site.
   Expected behavior
   This div shouldn't be visible

Screenshots

Additional context
This issue can be resolved by rolling back to version 0.1.10

I use a support of react-hot-key so I can intercept such keys like ctrl+c
So in my case, I'd like to be able to manipulate the input field when user hit ctrl+c (or ctrl+d or maybe get history of command with up arrow. .) so I could add the interrupt information on last line and reset the input:

prompt> echo "foo" ^C
prompt>

Maybe we could have a props acting like a wrapper :

const [wrapper, setWrapper] = useState((value) => return value);

const clearInput = () => {
  setWrapper((value) => return '')
}
// On ctrl+c hit, call clearInput

<Terminal valueWrapper={wrapper} />

And in Terminal, the updateCurrentLineInput would have to call the wrapper to transform the value if valueWrapper is set.

I'm not sure about the method, you may have a better solution.

Hello, love this package, abuse it in my projects haha.

just wondering, is there a way to make the terminal disable to writing. like only output, not even being able to have the input marker when focusing on the terminal div.

Describe the bug
When there are multiple terminals, and they are being updated with the same state, only one terminal will scroll to the bottom

To Reproduce
Steps to reproduce the behavior:
Make more then one terminal, and have them to use from the same array of lines, that updates on input or something like that

Expected behavior
Both of the terminal scroll to the bottom and show new lines written

Screenshots

Additional context
Add any other context about the problem here.

I'm making a simulated unix terminal with this UI in ReactJS but the component was setted in my Landing Page, soo the component auto scrolls down when the page loads and click in the terminal sends the user to the final line. I think that is a simple configuration but I tried to find in the .js file inside the modules folder, the code seems to be a obfuscated javascript, so it's hard to understand.

Otherwise, I went to the documentation page of termynal at github and found out the setting:

noInit | boolean | false | Don't initialise the animation on load. This means you can call Termynal.init() yourself whenever and however you want.

, thats some like my objective, just need to disable the scroll down to the final line when triggered the click feature too.

If you know some settings that I need to make to solve this problem, sorry but I didn't found out this information in the repo or others wiki's for the React terminal ui. But if doesn't have a especific setting for this, my suggestion is to make, soo the project can be more configurable.

Thnks.