Add Markdown view

package.json

@@ -31,7 +31,8 @@
     "react-bootstrap": "^0.30.7",
     "react-dom": "^15.4.2",
     "react-dropzone": "^3.9.2",
-    "react-icons": "^2.2.3"
+    "react-icons": "^2.2.3",
+    "remarkable": "^1.7.1"
   },
   "devDependencies": {
     "babel-core": "^6.22.1",

src/javascript/components/DebugView.jsx

@@ -12,6 +12,7 @@ import Checkbox from 'react-bootstrap/lib/Checkbox'
 import ContentView from '../models/ContentView.jsx';
 import PdfPageView from './PdfPageView.jsx';
 import TextPageView from './TextPageView.jsx';
+import MarkdownView from './MarkdownView.jsx';
 
 // A view which displays the content of the given pages transformed by the given transformations
 export default class DebugView extends React.Component {
@@ -88,9 +89,11 @@ export default class DebugView extends React.Component {
             showModificationCheckbox = true;
             break;
         case ContentView.TEXT:
-            //transformedPages.forEach(p => console.debug(p));
             pageComponents = transformedPages.map(page => <TextPageView key={ page.index } page={ page } />);
             break;
+        case ContentView.MARKDOWN:
+            pageComponents = transformedPages.map(page => <MarkdownView key={ page.index } page={ page } />);
+            break;
         }
 
         return (

src/javascript/components/MarkdownView.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import Remarkable from 'remarkable';
+
+import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar'
+import ButtonGroup from 'react-bootstrap/lib/ButtonGroup'
+import Button from 'react-bootstrap/lib/Button'
+
+export default class MarkdownView extends React.Component {
+
+    static propTypes = {
+        page: React.PropTypes.object.isRequired,
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            preview: true,
+            text: props.page.text
+        };
+    }
+
+    switchToPreview() {
+        this.setState({
+            preview: true
+        });
+    }
+
+    switchToEdit() {
+        this.setState({
+            preview: false
+        });
+    }
+
+    handleChange(event) {
+        this.setState({
+            text: event.target.value
+        });
+    }
+
+    render() {
+        const remarkable = new Remarkable({
+            breaks: true
+        });
+        const {preview, text} = this.state;
+
+        var textComponent;
+        if (preview) {
+            const html = remarkable.render(text);
+            textComponent = <div dangerouslySetInnerHTML={ { __html: html } } />
+        } else {
+            textComponent = <textarea
+                                      rows="45"
+                                      cols="150"
+                                      value={ text }
+                                      onChange={ this.handleChange.bind(this) } />
+        }
+        return (
+            <div>
+              <ButtonToolbar>
+                <ButtonGroup bsSize="medium">
+                  <Button onClick={ this.switchToEdit.bind(this) } className={ !preview ? 'active' : '' }>
+                    Edit
+                  </Button>
+                  <Button onClick={ this.switchToPreview.bind(this) } className={ preview ? 'active' : '' }>
+                    Preview
+                  </Button>
+                </ButtonGroup>
+              </ButtonToolbar>
+              <hr/>
+              { textComponent }
+            </div>
+            );
+    }
+
+}

src/javascript/models/ContentView.jsx

@@ -2,4 +2,4 @@ import { Enum } from 'enumify';
 
 export default class ContentView extends Enum {
 }
-ContentView.initEnum(['PDF', 'TEXT'])
+ContentView.initEnum(['PDF', 'TEXT', 'MARKDOWN'])

src/javascript/models/transformations/ToSingleTextPage.jsx

@@ -13,7 +13,7 @@ export default class ToSingleTextPage extends Transformation {
     }
 
     contentView() {
-        return ContentView.TEXT;
+        return ContentView.MARKDOWN;
     }
 
     transform(pages:TextPage[]) {