ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-21 12:21:31 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #593 from esteemapp/editor/view

Browse Source 
Editor/view
This commit is contained in:
uğur erdal 2019-02-19 21:25:22 +03:00 committed by GitHub
commit c4a2f3f701
5 changed files with 74 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
ios/eSteem.xcworkspace/xcuserdata/ue.xcuserdatad/UserInterfaceState.xcuserstate generated
View File

Binary file not shown.

12
src/components/postElements/body/view/postBodyStyles.js
View File

@ -18,9 +18,6 @@ export default EStyleSheet.create({
// height: 50, // height: 50,
marginTop: 10, marginTop: 10,
}, },
code: {
fontFamily: '$editorFont',
},
commentContainer: { commentContainer: {
paddingHorizontal: 0, paddingHorizontal: 0,
marginTop: 10, marginTop: 10,
@ -44,4 +41,13 @@ export default EStyleSheet.create({
padding: 10, padding: 10,
backgroundColor: '$tableTrColor', backgroundColor: '$tableTrColor',
}, },
blockquote: {
borderLeftWidth: 5,
borderColor: '$darkIconColor',
paddingLeft: 5,
},
code: {
backgroundColor: '$darkIconColor',
fontFamily: '$editorFont',
},
}); });

90
src/screens/editor/container/editorContainer.js
View File

@ -1,7 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { injectIntl } from 'react-intl'; import { injectIntl } from 'react-intl';
import { Alert } from 'react-native'; import { Alert, AsyncStorage } from 'react-native';
import ImagePicker from 'react-native-image-crop-picker'; import ImagePicker from 'react-native-image-crop-picker';
// Services and Actions // Services and Actions
@ -105,26 +105,33 @@ class EditorContainer extends Component {
this.setState({ autoFocusText: true }); this.setState({ autoFocusText: true });
} }
if (!isReply && !isEdit && !_draft) { if (!isEdit && !_draft) {
this._getDraft(username); this._getDraft(username, isReply);
} }
} }
_getDraft = (username) => { _getDraft = async (username, isReply) => {
getDraftPost(username) if (isReply) {
.then((result) => { const draftReply = await AsyncStorage.getItem('temp-reply');
this.setState({ this.setState({
draftPost: { body: result.body, title: result.title, tags: result.tags.split(',') }, draftPost: { body: draftReply },
});
})
.catch(() => {
// alert(error);
}); });
} else {
await getDraftPost(username)
.then(result => {
this.setState({
draftPost: { body: result.body, title: result.title, tags: result.tags.split(',') },
});
})
.catch(() => {
// alert(error);
});
}
}; };
_getPurePost = (author, permlink) => { _getPurePost = (author, permlink) => {
getPurePost(author, permlink) getPurePost(author, permlink)
.then((result) => { .then(result => {
if (result) { if (result) {
this.setState(prevState => ({ this.setState(prevState => ({
draftPost: { draftPost: {
@ -137,7 +144,7 @@ class EditorContainer extends Component {
.catch(() => {}); .catch(() => {});
}; };
_handleRoutingAction = (routingAction) => { _handleRoutingAction = routingAction => {
this.setState({ isCameraOrPickerOpen: true }); this.setState({ isCameraOrPickerOpen: true });
if (routingAction === 'camera') { if (routingAction === 'camera') {
@ -153,10 +160,10 @@ class EditorContainer extends Component {
ImagePicker.openPicker({ ImagePicker.openPicker({
includeBase64: true, includeBase64: true,
}) })
.then((image) => { .then(image => {
this._handleMediaOnSelected(image); this._handleMediaOnSelected(image);
}) })
.catch((e) => { .catch(e => {
this._handleMediaOnSelectFailure(e); this._handleMediaOnSelectFailure(e);
}); });
}; };
@ -165,15 +172,15 @@ class EditorContainer extends Component {
ImagePicker.openCamera({ ImagePicker.openCamera({
includeBase64: true, includeBase64: true,
}) })
.then((image) => { .then(image => {
this._handleMediaOnSelected(image); this._handleMediaOnSelected(image);
}) })
.catch((e) => { .catch(e => {
this._handleMediaOnSelectFailure(e); this._handleMediaOnSelectFailure(e);
}); });
}; };
_handleMediaOnSelected = (media) => { _handleMediaOnSelected = media => {
this.setState({ isCameraOrPickerOpen: false, isUploading: true }, () => { this.setState({ isCameraOrPickerOpen: false, isUploading: true }, () => {
this._uploadImage(media); this._uploadImage(media);
}); });
@ -185,7 +192,7 @@ class EditorContainer extends Component {
// const data = new Buffer(media.data, 'base64'); // const data = new Buffer(media.data, 'base64');
}; };
_uploadImage = (media) => { _uploadImage = media => {
const { intl } = this.props; const { intl } = this.props;
const file = { const file = {
@ -196,12 +203,12 @@ class EditorContainer extends Component {
}; };
uploadImage(file) uploadImage(file)
.then((res) => { .then(res => {
if (res.data && res.data.url) { if (res.data && res.data.url) {
this.setState({ uploadedImage: res.data, isUploading: false }); this.setState({ uploadedImage: res.data, isUploading: false });
} }
}) })
.catch((error) => { .catch(error => {
Alert.alert( Alert.alert(
intl.formatMessage({ intl.formatMessage({
id: 'alert.fail', id: 'alert.fail',
@ -212,7 +219,7 @@ class EditorContainer extends Component {
}); });
}; };
_handleMediaOnSelectFailure = (error) => { _handleMediaOnSelectFailure = error => {
const { intl } = this.props; const { intl } = this.props;
this.setState({ isCameraOrPickerOpen: false }); this.setState({ isCameraOrPickerOpen: false });
@ -230,7 +237,7 @@ class EditorContainer extends Component {
// Media select functions <- END -> // Media select functions <- END ->
_saveDraftToDB = (fields) => { _saveDraftToDB = fields => {
const { isDraftSaved, draftId } = this.state; const { isDraftSaved, draftId } = this.state;
if (!isDraftSaved) { if (!isDraftSaved) {
const { currentAccount } = this.props; const { currentAccount } = this.props;
@ -250,7 +257,7 @@ class EditorContainer extends Component {
}); });
}); });
} else { } else {
addDraft(draftField).then((response) => { addDraft(draftField).then(response => {
this.setState({ this.setState({
isDraftSaved: true, isDraftSaved: true,
draftId: response._id, draftId: response._id,
@ -264,8 +271,8 @@ class EditorContainer extends Component {
} }
}; };
_saveCurrentDraft = (fields) => { _saveCurrentDraft = async fields => {
const { draftId } = this.state; const { draftId, isReply } = this.state;
if (!draftId) { if (!draftId) {
const { currentAccount } = this.props; const { currentAccount } = this.props;
@ -276,14 +283,16 @@ class EditorContainer extends Component {
tags: fields.tags && fields.tags.length > 0 ? fields.tags.toString() : '', tags: fields.tags && fields.tags.length > 0 ? fields.tags.toString() : '',
}; };
setDraftPost(draftField, username); if (isReply && draftField.body) {
await AsyncStorage.setItem('temp-reply', draftField.body);
} else {
setDraftPost(draftField, username);
}
} }
}; };
_submitPost = async (fields) => { _submitPost = async fields => {
const { const { navigation, currentAccount, pinCode, intl } = this.props;
navigation, currentAccount, pinCode, intl,
} = this.props;
if (currentAccount) { if (currentAccount) {
this.setState({ isPostSending: true }); this.setState({ isPostSending: true });
@ -339,14 +348,16 @@ class EditorContainer extends Component {
}, },
key: permlink, key: permlink,
}); });
setDraftPost({ title: '', body: '', tags: [] }, currentAccount.name);
}) })
.catch((error) => { .catch(error => {
this._handleSubmitFailure(error); this._handleSubmitFailure(error);
}); });
} }
}; };
_submitReply = async (fields) => { _submitReply = async fields => {
const { currentAccount, pinCode } = this.props; const { currentAccount, pinCode } = this.props;
if (currentAccount) { if (currentAccount) {
@ -375,14 +386,15 @@ class EditorContainer extends Component {
) )
.then(() => { .then(() => {
this._handleSubmitSuccess(); this._handleSubmitSuccess();
AsyncStorage.setItem('temp-reply', "");
}) })
.catch((error) => { .catch(error => {
this._handleSubmitFailure(error); this._handleSubmitFailure(error);
}); });
} }
}; };
_submitEdit = async (fields) => { _submitEdit = async fields => {
const { currentAccount, pinCode } = this.props; const { currentAccount, pinCode } = this.props;
const { post } = this.state; const { post } = this.state;
if (currentAccount) { if (currentAccount) {
@ -420,13 +432,13 @@ class EditorContainer extends Component {
.then(() => { .then(() => {
this._handleSubmitSuccess(); this._handleSubmitSuccess();
}) })
.catch((error) => { .catch(error => {
this._handleSubmitFailure(error); this._handleSubmitFailure(error);
}); });
} }
}; };
_handleSubmitFailure = (error) => { _handleSubmitFailure = error => {
const { intl } = this.props; const { intl } = this.props;
Alert.alert( Alert.alert(
@ -454,7 +466,7 @@ class EditorContainer extends Component {
} }
}; };
_handleSubmit = (form) => { _handleSubmit = form => {
const { isReply, isEdit } = this.state; const { isReply, isEdit } = this.state;
if (isReply && !isEdit) { if (isReply && !isEdit) {

2
src/screens/editor/screen/editorScreen.js
View File

@ -141,7 +141,7 @@ class EditorScreen extends Component {
handleFormChanged(); handleFormChanged();
this._handleIsFormValid(); this._handleIsFormValid();
if (isReply) this._saveCurrentDraft(); this._saveCurrentDraft();
}; };
_handleOnTagAdded = (tags) => { _handleOnTagAdded = (tags) => {

15
src/utils/markdownToHtml.js
View File

@ -16,7 +16,7 @@ const authorNameRegex = /(^|[^a-zA-Z0-9_!#$%&*@＠\/]|(^|[^a-zA-Z0-9_+~.-\/]))[@
const tagsRegex = /(^|\s|>)(#[-a-z\d]+)/gi; const tagsRegex = /(^|\s|>)(#[-a-z\d]+)/gi;
const centerRegex = /(<center>)/g; const centerRegex = /(<center>)/g;
const imgRegex = /(https?:\/\/.*\.(?:tiff?|jpe?g|gif|png|svg|ico|PNG|GIF|JPG))/g; const imgRegex = /(https?:\/\/.*\.(?:tiff?|jpe?g|gif|png|svg|ico|PNG|GIF|JPG))/g;
const linkRegex = /[-a-zA-Z0-9@:%+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%+.~#?&//=]*)?/gi; const linkRegex = /[-a-zA-Z0-9@:%+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%+._~#?&//=]*)?/gi;
const markdownImageRegex = /!\[[^\]]*\]\((.*?)\s*("(?:.*[^"])")?\s*\)/g; const markdownImageRegex = /!\[[^\]]*\]\((.*?)\s*("(?:.*[^"])")?\s*\)/g;
const urlRegex = /(http|ftp|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?/gm; const urlRegex = /(http|ftp|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?/gm;
const aTagRegex = /(<\s*a[^>]*>(.*?)<\s*[/]\s*a>)/g; const aTagRegex = /(<\s*a[^>]*>(.*?)<\s*[/]\s*a>)/g;
@ -69,6 +69,10 @@ export const markDown2Html = (input) => {
output = handleIframe(output); output = handleIframe(output);
} }
// if (imgRegex.test(output)) {
// output = handleImageLink(output);
// }
if (linkRegex.test(output)) { if (linkRegex.test(output)) {
output = handleLinks(output); output = handleLinks(output);
} }
@ -169,7 +173,12 @@ const handleLinks = input => input.replace(linkRegex, (link) => {
} }
return link; return link;
} if (link.trim().indexOf('ipfs.busy.org') > 0) { }
if (link.trim().indexOf('ipfs.busy.org') > 0) {
return imageBody(link);
}
if (imgRegex.test(link)) {
return imageBody(link); return imageBody(link);
} }
} }
@ -245,6 +254,8 @@ const createVimeoIframe = input => input.replace(vimeoRegex, (link) => {
return iframeBody(embedLink); return iframeBody(embedLink);
}); });
const handleImageLink = input => input.replace(imgRegex, link => imageBody(link));
const iframeBody = link => `<iframe frameborder='0' allowfullscreen src='${link}'></iframe>`; const iframeBody = link => `<iframe frameborder='0' allowfullscreen src='${link}'></iframe>`;
const imageBody = link => `<center style="text-align: center; align-items: center; justify-content: center;"><img src="${`https://steemitimages.com/600x0/${link}`}"></center>`; const imageBody = link => `<center style="text-align: center; align-items: center; justify-content: center;"><img src="${`https://steemitimages.com/600x0/${link}`}"></center>`;
const gifBody = link => `<img src="${`https://steemitimages.com/0x0/${link}`}">`; const gifBody = link => `<img src="${`https://steemitimages.com/0x0/${link}`}">`;