1
0
mirror of https://github.com/laurent22/joplin.git synced 2025-12-17 23:27:48 +02:00

Render markdown

This commit is contained in:
Laurent Cozic
2017-07-10 22:34:26 +01:00
parent e3e470683b
commit 70c75af225
3 changed files with 1313 additions and 7 deletions

View File

@@ -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>