message: Update the height of the iframe sandboxing the markdown content so that it doesn't scroll
  Fixes
diff: +/* eslint-disable no-undef, no-unused-vars */
  +
  import * as React from 'react';
  +import * as _ from 'lodash';
  import { Converter } from 'showdown';
  import * as sanitizeHtml from 'sanitize-html';
  @@ -21,28 +24,40 @@ const markdownConvert = (markdown) => {
  });
  };
  -export const SyncMarkdownView = (props: {content: string}) => {
  - const contents = `
  - <style type="text/css">
  - @font-face {
  - font-family: "Source Sans Pro";
  - src: url(./assets/sourcesanspro-regular-webfont.eot);
  - src: url(./assets/sourcesanspro-regular-webfont.eot) format("embedded-opentype"),url(./assets/sourcesanspro-regular-webfont.woff) format("woff"),url(./assets/sourcesanspro-regular-webfont.ttf) format("truetype"),url(./assets/sourcesanspro-regular-webfont.svg) format("svg");
  - font-weight: 400;
  - font-style: normal;
  - font-stretch: normal;
  +export class SyncMarkdownView extends React.Component<{content: string}, {}> {
  + private frame: any;
  +
  + constructor(props) {
  + super(props);
  }
  + componentDidMount() {
  + this.updateHeight();
  + }
  +
  + updateHeight() {
  + if (!this.frame || !this.frame.contentWindow.document.body) {
  + return;
  + }
  + this.frame.style.height = `${this.frame.contentWindow.document.body.firstChild.offsetHeight + 50}px`;
  + }
  +
  + render() {
  + // Find the app's stylesheet and inject it into the frame to ensure consistent styling.
  + const filteredLinks = Array.from(document.getElementsByTagName('link')).filter((l) => _.includes(l.href, 'app-bundle'));
  +
  + const contents = `
  + <link rel="stylesheet" href="${filteredLinks[0].href}">
  + <style type="text/css">
  body {
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-size: 16px;
  - color: ${props.content ? 'black' : '#999'};
  + color: ${this.props.content ? 'black' : '#999'};
  background-color: transparent !important;
  }
  </style>
  - <div>
  - ${markdownConvert(props.content || 'Not available')}
  - </div>`;
  + <body><div>${markdownConvert(this.props.content || 'Not available')}</div></body>`;
  - return <iframe sandbox="allow-popups allow-same-origin" srcDoc={contents} style={{border: '0px', width: '100%', height: '100%'}} />;
  -};
  + return <iframe sandbox="allow-popups allow-same-origin" srcDoc={contents} style={{border: '0px', width: '100%', height: '100%'}} ref={(r) => this.frame = r} onLoad={() => this.updateHeight()} />;
  + }
  +}
  