{"size": 788, "ext": "js", "max_stars_repo_path": "packages/transforms/src/latex.js", "max_stars_repo_name": "jdetle/nteract", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "packages/transforms/src/latex.js", "max_issues_repo_name": "jdetle/nteract", "max_issues_repo_issues_event_min_datetime": "2018-10-21T18:43:40.000Z", "max_issues_repo_issues_event_max_datetime": "2018-10-21T18:53:30.000Z", "max_forks_repo_path": "packages/transforms/src/latex.js", "max_forks_repo_name": "lgeiger/nteract", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 20.2051282051, "max_line_length": 66, "alphanum_fraction": 0.6281725888}
/* @flow */
import React from "react";
import mathjaxHelper from "mathjax-electron";

type Props = {
  data: string
};

export default class LaTeXDisplay extends React.Component<Props> {
  el: ?HTMLElement;
  static MIMETYPE = "text/latex";

  componentDidMount(): void {
    if (!this.el) return;
    this.el.innerHTML = this.props.data;
    mathjaxHelper.loadAndTypeset(document, this.el);
  }

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

  componentDidUpdate() {
    if (!this.el) return;
    this.el.innerHTML = this.props.data;
    mathjaxHelper.loadAndTypeset(document, this.el);
  }

  render(): ?React$Element<any> {
    return (
      <div
        ref={el => {
          this.el = el;
        }}
      />
    );
  }
}
