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 => );
break;
+ case ContentView.MARKDOWN:
+ pageComponents = transformedPages.map(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 =
+ } else {
+ textComponent =
+ }
+ return (
+
+
+
+
+
+
+
+
+ { textComponent }
+
+ );
+ }
+
+}
\ 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[]) {