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 =