astralarya/react-console

Simple react console emulator

react-console's Issues

Request for a non-blinking cursor

I'd like to have a way to configure a non-blinking cursor. Thanks!

First call to `.log()` can throw an exception?

I've modified the simple echo demo to include a button which calls .log() with some text when pressed.

The app will throw an exception if the very first thing I do is press the button. If, however, I first enter some text (including a CR) the button works correctly.

The exception is:

TypeError: Cannot read property 'message' of undefined
default_1.log
C:/Users/Admin/Documents/Work/console-bug/node_modules/react-console-component/lib/react-console.js:151
  148 |     messages[_i - 0] = arguments[_i];
  149 | }
  150 | var log = _this.state.log;
> 151 | log[_this.state.log.length - 1].message.push({ value: messages });
  152 | _this.setState({
  153 |     log: log,
  154 | }, _this.scrollIfBottom());

Source for App.js (using react-console-component 0.6.1):

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Console from 'react-console-component'
import 'react-console-component/main.css'

class App extends Component {
  child: { console?: Console } = {}
  echo = (text) => {
    this.child.console.log(text)
    this.child.console.return()
  }
  click = () => {
    this.echo("I was clicked!!!")
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <Console ref={ (r) => this.child.console = r}
                 handler={this.echo} autofocus={true} />
        <button onClick={this.click}>Click Me</button>
      </div>
    );
  }
}

export default App;

Question: Can you insert a command from code?

Hi,
I'd like to insert a command from code. e.g. when a user clicks a macro-button, I want to pre-fill the console with a command. Is that possible?
Thanks!

Clear Console

Is there a way to clear the console?

Runtime error is thrown if first command is triggered outside of the component via the public log method

https://github.com/autochthe/react-console/blob/0d5d0834b2131cc86f1fa6342fe3d52130c636ad/src/react-console.tsx#L180

In the case when this.state.log is empty array, JS runtime error is thrown.
"Uncaught TypeError: Cannot read property 'message' of undefined"

Cannot write a line without handler

I want to put some strings to the console without user input. But it crashes with

Uncaught TypeError: Cannot read property 'message' of undefined
    at default_1.log (react-console.js:151)

If I input something in the console, and then use a method to call

myconsole.log('blablabla');
myconsole.return();

without input handler to log a line to the console. It can show but the length seems some problem, it can show the blablabla and return a new line. But if I call this method once again, the new blablabla is append to the old one, ahead of the label

Paste

Any chance of being able to paste things in with Ctrl+V?

Where would be a good spot to start looking to integrate that?

Crtl+C to start a new line

Not really an issue but rather a feature request.

I really like this little console and almost the only thing I miss after the latest update is a way to clear my input:

In bash I can cancel the command I typed by pressing Crtl+C, a new line will be startet and the result will looks like this:

> asdf^C
> 

What do you think?