Refactor nteract CSS for CodeMirror

[rgbkrk]

We need to rethink our current CSS styling of CodeMirror. Right now it depends on a particular DOM structure and makes our theming less flexible. In an ideal state I'd be able to use our CSS with a runMode version of codemirror like this (see #1454 (comment)):

// Wish I could use this, we need to fix up 
export class StaticCodeMirror extends React.Component {
  props: Props;
  el: HTMLElement;

  componentDidMount(): void {
    console.log(this.props);
    CM.runMode(this.props.text, this.props.mode, this.el);
  }

  shouldComponentUpdate(nextProps: Props): boolean {
    return nextProps.text !== this.props.text || this.props.mode !== nextProps.mode;
  }

  componentDidUpdate(): void {
    console.log('update');
    CM.runMode(this.props.text, this.props.mode, this.el);
  }

  render(): ?React.Element<any> {
    return (
      <div className="input">
        <div className="cell_cm cm-s-composition">
          <pre className="CodeMirror-lines" ref={(el) => { this.el = el; }} />
        </div>
      </div>
    );
  }
}

[rgbkrk]

This was addressed with our adoption of styled-jsx and bringing the codemirror styles in.

[lock]

Howdy! I'm 🔓🤖!

In order to keep information timely (based on the most recent release), we want all activity to be added to either new issues or open issues and PRs. In service to that goal, I, the lock bot close inactive closed issues when they haven't had activity in 120 days.

Feel free to open a new issue for related bugs and link to relevant comments from this thread.