import * as React from "react" ; import { Service } from "../service" ; import { View } from "./editor" ; export interface MarkdownProps { src : string ; } export class Markdown extends React . Component < MarkdownProps , { html : string ; } > { constructor ( props ) { super ( props ) ; this . state = { html : "Loading ..." } ; } async componentDidMount ( ) { const html = await Service . compileMarkdownToHtml ( this . props . src ) ; this . setState ( { html } ) ; } async componentWillReceiveProps ( props ) { if ( this . props . src !== props . src ) { const html = await Service . compileMarkdownToHtml ( props . src ) ; this . setState ( { html } ) ; } } render ( ) { return < div style = { { padding : "8px" , height : "100%" , overflow : "scroll" } } className = "md" dangerouslySetInnerHTML = { { __html : this . state . html } } />; } } export interface MarkdownViewProps { view : View ; } export class MarkdownView extends React . Component < MarkdownViewProps , { markdown : string ; } > { constructor ( props ) { super ( props ) ; this . state = { markdown : this . props . view . file . buffer . getValue ( ) } ; } onDidChangeBuffer = ( ) => { this . setState ( { markdown : this . props . view . file . buffer . getValue ( ) } ) ; } ; componentDidMount ( ) { this . props . view . file . onDidChangeBuffer . register ( this . onDidChangeBuffer ) ; } componentWillUnmount ( ) { this . props . view . file . onDidChangeBuffer . unregister ( this . onDidChangeBuffer ) ; } componentWillReceiveProps ( props ) { const last = this . props . view ; const next = props . view ; if ( last !== next ) { last . file . onDidChangeBuffer . unregister ( this . onDidChangeBuffer ) ; next . file . onDidChangeBuffer . register ( this . onDidChangeBuffer ) ; this . setState ( { markdown : props . view . file . buffer . getValue ( ) } ) ; } } render ( ) { return < Markdown src = { this . state . markdown } />; } }