# All files / src/components MarkdownEditorPreview.js

58.33% Statements 7/12
100% Branches 0/0
0% Functions 0/1
58.33% Lines 7/12

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    414x
    4x
    4x
    4x

    4x

    4x

    4x
     var React = require('react');
    var ReactDOM = require('react-dom');
    var Markdown = require('markdown').markdown;
    var objectAssign = require('object-assign');

    var MarkdownEditorPreview = React.createClass({
      propTypes: {
        content: React.PropTypes.string.isRequired
      },

      render: function() {
        // Breaklines in markdown are actually when a line is ended with two spaces + carriage-return
        var htmlContent = this.props.content.replace(/[\n]/g, '  \n');
        htmlContent = Markdown.toHTML(htmlContent);

        var styleMarkdownPreviewArea = MarkdownEditorPreview.defaultProps.styles.styleMarkdownPreviewArea
        objectAssign(styleMarkdownPreviewArea, this.props.styles.styleMarkdownPreviewArea);

        return (
          <div
            style={styleMarkdownPreviewArea}
            dangerouslySetInnerHTML={{__html: htmlContent}}
          />
        );
      }
    });

    MarkdownEditorPreview.defaultProps = {
        styles : {
            styleMarkdownPreviewArea : {
                height: '90%',
                width: '100%',
                padding: '30px 10px',
                backgroundColor: '#fff',
                border: 'none'
            }
        }
    }

    module.exports = MarkdownEditorPreview;