From b7634423cc2e4b98fa11ce9ab683892c30929652 Mon Sep 17 00:00:00 2001
From: Johannes Zillmann <jz@datameer.com>
Date: Mon, 6 Feb 2017 17:13:41 +0100
Subject: [PATCH] Add Markdown view

---
 package.json                                  |  3 +-
 src/javascript/components/DebugView.jsx       |  5 +-
 src/javascript/components/MarkdownView.jsx    | 75 +++++++++++++++++++
 src/javascript/models/ContentView.jsx         |  2 +-
 .../transformations/ToSingleTextPage.jsx      |  2 +-
 5 files changed, 83 insertions(+), 4 deletions(-)
 create mode 100644 src/javascript/components/MarkdownView.jsx

diff --git a/package.json b/package.json
index f4923d0..7d87c49 100644
--- a/package.json
+++ b/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",
diff --git a/src/javascript/components/DebugView.jsx b/src/javascript/components/DebugView.jsx
index 09f7d9f..059cb41 100644
--- a/src/javascript/components/DebugView.jsx
+++ b/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 (
diff --git a/src/javascript/components/MarkdownView.jsx b/src/javascript/components/MarkdownView.jsx
new file mode 100644
index 0000000..87e0cd3
--- /dev/null
+++ b/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>
+            );
+    }
+
+}
\ No newline at end of file
diff --git a/src/javascript/models/ContentView.jsx b/src/javascript/models/ContentView.jsx
index 96e92bf..39c765c 100644
--- a/src/javascript/models/ContentView.jsx
+++ b/src/javascript/models/ContentView.jsx
@@ -2,4 +2,4 @@ import { Enum } from 'enumify';
 
 export default class ContentView extends Enum {
 }
-ContentView.initEnum(['PDF', 'TEXT'])
\ No newline at end of file
+ContentView.initEnum(['PDF', 'TEXT', 'MARKDOWN'])
\ No newline at end of file
diff --git a/src/javascript/models/transformations/ToSingleTextPage.jsx b/src/javascript/models/transformations/ToSingleTextPage.jsx
index 6260409..88372d3 100644
--- a/src/javascript/models/transformations/ToSingleTextPage.jsx
+++ b/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[]) {