Theme level styling for error messages about react-terminal HOT 5 OPEN

#38 should fix this.

But it would also be nice to allow a function prop to include the errored command in the error message, to replicate real CLI's better, something like:
errorMessage={(err) => <span style={{color: 'red'}}>Command not found: {err}</span> would be perfect.

Currently this only returns something if the errored command has a whitespace in it, and it returns everything after the first whitespace, like its being split there or something... ie

>>> first second third etc
Unknown command: second third etc

from react-terminal.

In the meantime I've been using something like this, which actually works fine.

const themes = {
  ocean: {
    themeBGColor: "#224fbc",
    themeToolbarColor: "#216dff",
    themeColor: "#e5e5e5",
    themePromptColor: "#00e5e5",
    errorColor: "#e5e500",
    linkColor: "#e5e5e5"
  }
  // etc etc
};

const error = {
  color: themes[theme].errorColor,
  fontWeight: "bold"
};
const success = {
  color: themes[theme].successColor,
  fontWeight: "bold"
};

const commands = {
  send: (input) => {
    if (!input) {
      return <span style={error}>Nothing to send</span>;
    }
       
     return <span style={success}>Sent succesfully</span> 
}

<ReactTerminal
    commands={commands}
    errorMessage={<span style={error}>Command not found</span>}
    themes={themes}
    theme={theme}
  />

from react-terminal.

This looks like a great feature. I think we can modify the caller function to include extra terminal-related arguments which can include a bunch of data including the command.

from react-terminal.

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.

You are absolutely correct. More specifically here, we need to pass the command as well along with commandArguments

from react-terminal.

This can be a quick fix, but more future proof approach would be to go with the extra data passed on to the callback function.

from react-terminal.