jonmbake / react-terminal-ui

A terminal react component with support for light and dark modes.
https://jonmbake.github.io/react-terminal-ui/demo/
MIT License
205 stars 30 forks source link

add a new line symbol and tab symbol (\n, \t) #22

Closed MeyerBuaharon closed 2 years ago

MeyerBuaharon commented 2 years ago

Can the package work with those symbols?

github-actions[bot] commented 2 years ago

Thank you for taking the time to submit an Issue! You should get a response to this issue within one to two days.

jonmbake commented 2 years ago

Currently, new line (\n) causes the input to be accepted and tab (\t) causes focus to move to other elements on the page (the default behavior for HTML inputs). If we add support for new line and tab, we'd have to change this current behavior. What is your use case for \n and \t?

MeyerBuaharon commented 2 years ago

Thank you for the quick response @jonmbake

The main idea is that we get from API a response that is usually viewed on a terminal. the text contain \n and \t to make it look more readable. When I asked about the symbols, it is more like if it can work as an output like that {text:"hello world\r\n this is a test \t\t"} and the terminal shows tabs and new line and such

jonmbake commented 2 years ago

From my testing, \n and \t is supported. Here's the test lineData:

const [lineData, setLineData] = useState([
    {type: LineType.Output, value: 'Welcome to the React Terminal UI Demo!'},
    {type: LineType.Output, value: "hello world\r\n this is a test \t\ttext after tab."},
  ]);

, which renders:

Screen Shot 2022-06-27 at 9 47 21 PM

In https://github.com/jonmbake/react-terminal-ui/issues/23, we'll add support for rendering arbitrary HTML, which will add more flexibility in what can get rendered. E.g. you could render multiple paragraph (p) elements instead of \n.

MeyerBuaharon commented 2 years ago

Sounds great! Looking forward to it! and thank you for the help.