Render markdown

ReactNativeClient/lib/components/screens/note.js

@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
-import { View, Button, TextInput } from 'react-native';
+import { View, Button, TextInput, WebView } from 'react-native';
 import { connect } from 'react-redux'
 import { Log } from 'lib/log.js'
 import { Note } from 'lib/models/note.js'
 import { ScreenHeader } from 'lib/components/screen-header.js';
 import { Checkbox } from 'lib/components/checkbox.js'
 import { _ } from 'lib/locale.js';
+import marked from 'lib/marked.js';
 
 class NoteScreenComponent extends React.Component {
 	
@@ -15,7 +16,10 @@ class NoteScreenComponent extends React.Component {
 
 	constructor() {
 		super();
-		this.state = { note: Note.new() }
+		this.state = {
+			note: Note.new(),
+			mode: 'view',
+		}
 	}
 
 	componentWillMount() {
@@ -79,13 +83,29 @@ class NoteScreenComponent extends React.Component {
 			);
 		}
 
+		let bodyComponent = null;
+		if (this.state.mode == 'view') {
+			const source = {
+				html: note ? marked(note.body, { gfm: true, breaks: true }) : '',
+			};
+
+			bodyComponent = (
+				<View style={{flex:1}}>
+					<WebView source={source}/>
+					<Button title="Edit note" onPress={() => { this.setState({ mode: 'edit' }); }}/>
+				</View>
+			);
+		} else {
+			bodyComponent = <TextInput style={{flex: 1, textAlignVertical: 'top', fontFamily: 'monospace'}} multiline={true} value={note.body} onChangeText={(text) => this.body_changeText(text)} />
+		}
+
 		return (
 			<View style={{flex: 1}}>
 				<ScreenHeader navState={this.props.navigation.state} menuOptions={this.menuOptions()} />
 				<View style={{ flexDirection: 'row' }}>
 					{ isTodo && <Checkbox checked={!!Number(note.todo_completed)} /> }<TextInput style={{flex:1}} value={note.title} onChangeText={(text) => this.title_changeText(text)} />
 				</View>
-				<TextInput style={{flex: 1, textAlignVertical: 'top', fontFamily: 'monospace'}} multiline={true} value={note.body} onChangeText={(text) => this.body_changeText(text)} />
+				{ bodyComponent }		
 				{ todoComponents }
 				<Button title="Save note" onPress={() => this.saveNoteButton_press()} />
 			</View>

ReactNativeClient/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "form-data": "^2.1.4",
     "moment": "^2.18.1",
+    "query-string": "4.3.4",
     "react": "16.0.0-alpha.12",
     "react-native": "0.46.0",
     "react-native-action-button": "^2.6.9",
@@ -18,13 +19,12 @@
     "react-native-fs": "^2.3.3",
     "react-native-popup-menu": "^0.7.4",
     "react-native-side-menu": "^0.20.1",
+    "react-native-sqlite-storage": "3.3.*",
     "react-native-vector-icons": "^2.0.3",
     "react-navigation": "^1.0.0-beta.9",
-    "uuid": "^3.0.1",
-    "redux": "3.6.0",
     "react-redux": "4.4.8",
-    "query-string": "4.3.4",
-    "react-native-sqlite-storage": "3.3.*"
+    "redux": "3.6.0",
+    "uuid": "^3.0.1"
   },
   "devDependencies": {
     "babel-jest": "19.0.0",