mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-24 10:27:10 +02:00
cb3e1cf1e9
commit2fb6cee901
Merge:4e303be85f
db509955f6
Author: Laurent Cozic <laurent@cozic.net> Date: Fri Oct 16 16:24:07 2020 +0100 Merge branch 'dev' into rn_63 commit4e303be85f
Author: Laurent Cozic <laurent@cozic.net> Date: Fri Oct 16 16:14:39 2020 +0100 Clean up commite3a37ec2d6
Author: Laurent Cozic <laurent@cozic.net> Date: Fri Oct 16 15:57:55 2020 +0100 Use different script for pre-commit and manual start commitbd236648fc
Author: Laurent Cozic <laurent@cozic.net> Date: Fri Oct 16 15:56:45 2020 +0100 Removed RN eslint config commite7feda41c9
Author: Laurent Cozic <laurent@cozic.net> Date: Fri Oct 16 15:27:08 2020 +0100 Revert "Disable git hook for now" This reverts commit89263ac742
. commitcfd63fe46f
Author: Laurent Cozic <laurent@cozic.net> Date: Fri Oct 16 13:02:32 2020 +0100 Ask permission to use geo-location commit66059939a3
Author: Laurent Cozic <laurent@cozic.net> Date: Fri Oct 16 12:26:20 2020 +0100 Fixed WebView race condition commit1e0d2b7b86
Author: Laurent Cozic <laurent@cozic.net> Date: Fri Oct 16 11:56:21 2020 +0100 Fixed webview issues commitf537d22d7f
Author: Laurent Cozic <laurent@cozic.net> Date: Fri Oct 16 11:08:29 2020 +0100 Improve resource file watching commiteec32cf70a
Author: Laurent Cozic <laurent@cozic.net> Date: Thu Oct 15 18:40:13 2020 +0100 Removed cache package dependency and implemented one more suitable for React Native commitefa346fea4
Author: Laurent Cozic <laurent@cozic.net> Date: Thu Oct 15 14:57:21 2020 +0100 iOS: Added fonts to Info.plist although it was working without it commit572b647bc0
Author: Laurent Cozic <laurent@cozic.net> Date: Thu Oct 15 14:56:49 2020 +0100 Specify content-type header for OneDrive to prevent network error commitbcedf6c7f0
Author: Laurent Cozic <laurent@cozic.net> Date: Thu Oct 15 12:45:01 2020 +0100 iOS: Disable long press menu since it is already built-in commit7359dd61d1
Author: Laurent Cozic <laurent@cozic.net> Date: Thu Oct 15 12:37:40 2020 +0100 Removed unused react-native-device-info commit2d63ab36d3
Author: Laurent Cozic <laurent@cozic.net> Date: Thu Oct 15 12:35:54 2020 +0100 iOS: Fixed taking a picture commit8e2875a91c
Author: Laurent Cozic <laurent@cozic.net> Date: Thu Oct 15 12:11:13 2020 +0100 iOS: Restored camera roll functionality commit75f5edf2ad
Author: Laurent Cozic <laurent@cozic.net> Date: Thu Oct 15 11:40:13 2020 +0100 iOS: Fixed build settings commitb220c98419
Author: Laurent Cozic <laurent@cozic.net> Date: Thu Oct 15 11:40:03 2020 +0100 iOS: Got images to work with WebKit commitc34b43e841
Author: Laurent Cozic <laurent@cozic.net> Date: Thu Oct 15 10:24:52 2020 +0100 iOS: Restore more settings commit32997611e6
Author: Laurent Cozic <laurent@cozic.net> Date: Thu Oct 15 10:15:14 2020 +0100 iOS: Added back icons and other properties commitb5811d7f7c
Author: Laurent Cozic <laurent@cozic.net> Date: Wed Oct 14 23:53:14 2020 +0100 Got iOS build to work commitdc6d7c00e0
Author: Laurent Cozic <laurent@cozic.net> Date: Wed Oct 14 18:40:06 2020 +0100 Imported old settings in gradle build commitdff59f5603
Author: Laurent Cozic <laurent@cozic.net> Date: Wed Oct 14 18:20:00 2020 +0100 Restored sharing commit0bdb449e72
Author: Laurent Cozic <laurent@cozic.net> Date: Wed Oct 14 17:25:40 2020 +0100 Updated NoteBodyViewer commit0c0d228815
Author: Laurent Cozic <laurent@cozic.net> Date: Wed Oct 14 16:54:42 2020 +0100 Fixed networking commit6ff45ce485
Author: Laurent Cozic <laurent@cozic.net> Date: Wed Oct 14 13:11:00 2020 +0100 Fixed document picker commitcc889182b6
Author: Laurent Cozic <laurent@cozic.net> Date: Wed Oct 14 12:56:27 2020 +0100 Added back support for alarms commit040261abfa
Author: Laurent Cozic <laurent@cozic.net> Date: Tue Oct 13 22:04:49 2020 +0100 Fixed Clipboard and remove image-picker package commit1077ad8f16
Author: Laurent Cozic <laurent@cozic.net> Date: Tue Oct 13 21:54:52 2020 +0100 Fixed Select Alarm dialog and PoorManIntervals class commit8296676fd5
Author: Laurent Cozic <laurent@cozic.net> Date: Tue Oct 13 21:32:52 2020 +0100 Fixed icons and warnings commit3b0e3f6f43
Author: Laurent Cozic <laurent@cozic.net> Date: Tue Oct 13 17:02:59 2020 +0100 Got app to build again commit89263ac742
Author: Laurent Cozic <laurent@cozic.net> Date: Tue Oct 13 15:41:17 2020 +0100 Disable git hook for now commitd6da162f67
Author: Laurent Cozic <laurent@cozic.net> Date: Tue Oct 13 15:39:12 2020 +0100 Restored back all RN packages commit7f8ce3732c
Author: Laurent Cozic <laurent@cozic.net> Date: Tue Oct 13 15:13:12 2020 +0100 Restored base packages commitea59726eb3
Author: Laurent Cozic <laurent@cozic.net> Date: Tue Oct 13 15:05:17 2020 +0100 Started over from scratch
163 lines
4.7 KiB
JavaScript
163 lines
4.7 KiB
JavaScript
/**
|
|
* Inspired by https://github.com/kunall17/MarkdownEditor
|
|
*/
|
|
|
|
import React from 'react';
|
|
import {
|
|
View,
|
|
StyleSheet,
|
|
TextInput,
|
|
Platform,
|
|
KeyboardAvoidingView,
|
|
TouchableOpacity,
|
|
Image,
|
|
} from 'react-native';
|
|
import { renderFormatButtons } from './renderButtons';
|
|
import NoteBodyViewer from 'lib/components/NoteBodyViewer/NoteBodyViewer';
|
|
|
|
const styles = StyleSheet.create({
|
|
buttonContainer: {
|
|
flex: 0,
|
|
flexDirection: 'row',
|
|
},
|
|
screen: { // Wrapper around the editor and the preview
|
|
flex: 1,
|
|
flexDirection: 'column',
|
|
alignItems: 'stretch',
|
|
},
|
|
});
|
|
|
|
const MarkdownPreviewButton = (props) =>
|
|
<TouchableOpacity
|
|
onPress={props.convertMarkdown}
|
|
style={{ padding: 8, borderRightWidth: 1, borderColor: props.borderColor }}>
|
|
<Image
|
|
style={{ tintColor: props.color, padding: 8 }}
|
|
source={require('./static/visibility.png')}
|
|
resizeMode="cover"
|
|
/>
|
|
</TouchableOpacity>;
|
|
|
|
export default class MarkdownEditor extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
text: props.value,
|
|
selection: { start: 0, end: 0 },
|
|
// Show preview by default
|
|
showPreview: props.showPreview ? props.showPreview : true,
|
|
};
|
|
this.textAreaRef = React.createRef(); // For focusing the textarea
|
|
}
|
|
textInput: TextInput;
|
|
|
|
changeText = (selection: {start: number, end: number}) => (input: string) => {
|
|
let result = input;
|
|
const cursor = selection.start;
|
|
const isOnNewline = '\n' === input.slice(cursor - 1, cursor);
|
|
const isDeletion = input.length < this.state.text.length;
|
|
if (isOnNewline && !isDeletion) {
|
|
const prevLines = input.slice(0, cursor - 1).split('\n');
|
|
const prevLine = prevLines[prevLines.length - 1];
|
|
|
|
const insertListLine = (bullet) => ([
|
|
prevLines.join('\n'), // Previous text
|
|
`\n${bullet} `, // Current line with new bullet point
|
|
input.slice(cursor, input.length), // Following text
|
|
].join(''));
|
|
|
|
const insertedEndListLine = [
|
|
// Previous text (all but last bullet line, which we remove)
|
|
prevLines.slice(0, prevLines.length - 1).join('\n') ,
|
|
'\n\n', // Two newlines to get out of the list
|
|
input.slice(cursor, input.length), // Following text
|
|
].join('');
|
|
|
|
// Add new ordered list line item
|
|
if (prevLine.startsWith('- ') && !prevLine.startsWith('- [ ')) {
|
|
// If the bullet on the previous line isn't empty, add a new bullet.
|
|
if (prevLine.trim() !== '-') {
|
|
result = insertListLine('-');
|
|
} else {
|
|
result = insertedEndListLine;
|
|
}
|
|
}
|
|
|
|
// Add new checklist line item
|
|
if ((prevLine.startsWith('- [ ] ') || prevLine.startsWith('- [x] '))) {
|
|
// If the bullet on the previous line isn't empty, add a new bullet.
|
|
if (prevLine.trim() !== '- [ ]' && prevLine.trim() !== '- [x]') {
|
|
result = insertListLine('- [ ]');
|
|
} else {
|
|
result = insertedEndListLine;
|
|
}
|
|
}
|
|
|
|
// Add new ordered list item
|
|
if (/^\d+\./.test(prevLine)) {
|
|
// If the bullet on the previous line isn't empty, add a new bullet.
|
|
const digit = Number(prevLine.match(/^\d+/)[0]);
|
|
if (prevLine.trim() !== `${digit}.`) {
|
|
result = insertListLine(`${digit + 1}.`);
|
|
} else {
|
|
result = insertedEndListLine;
|
|
}
|
|
}
|
|
}
|
|
// Hide Markdown preview on text change
|
|
this.setState({ text: result, showPreview: false });
|
|
this.props.saveText(result);
|
|
if (this.props.onMarkdownChange) this.props.onMarkdownChange(input);
|
|
};
|
|
|
|
onSelectionChange = event => {
|
|
this.setState({ selection: event.nativeEvent.selection });
|
|
};
|
|
|
|
focus = () => this.textAreaRef.current.focus()
|
|
|
|
convertMarkdown = () => this.setState({ showPreview: !this.state.showPreview })
|
|
|
|
render() {
|
|
const WrapperView = Platform.OS === 'ios' ? KeyboardAvoidingView : View;
|
|
const { Formats, markdownButton } = this.props;
|
|
const { text, selection, showPreview } = this.state;
|
|
return (
|
|
<WrapperView style={styles.screen}>
|
|
<TextInput
|
|
{...this.props}
|
|
multiline
|
|
autoCapitalize="sentences"
|
|
underlineColorAndroid="transparent"
|
|
onChangeText={this.changeText(selection)}
|
|
onSelectionChange={this.onSelectionChange}
|
|
value={text}
|
|
ref={this.textAreaRef}
|
|
selection={selection}
|
|
/>
|
|
{showPreview && <NoteBodyViewer {...this.props.noteBodyViewer} />}
|
|
<View style={styles.buttonContainer}>
|
|
<MarkdownPreviewButton
|
|
convertMarkdown={this.convertMarkdown}
|
|
borderColor={this.props.borderColor}
|
|
color={this.props.markdownButtonsColor}
|
|
/>
|
|
{renderFormatButtons(
|
|
{
|
|
color: this.props.markdownButtonsColor,
|
|
getState: () => this.state,
|
|
setState: (state, callback) => {
|
|
// Hide Markdown preview on text change
|
|
this.setState({ showPreview: false });
|
|
this.setState(state, callback);
|
|
},
|
|
},
|
|
Formats,
|
|
markdownButton
|
|
)}
|
|
</View>
|
|
</WrapperView>
|
|
);
|
|
}
|
|
}
|