ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2025-01-05 04:28:03 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixed center tags for andorid

Browse Source
This commit is contained in:
u-e 2019-01-15 11:28:06 +03:00
parent d51e3e7fc7
commit 96040775f2
2 changed files with 69 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/postElements/body/view/postBodyView.js
View File

@ -1,10 +1,11 @@
import React, { PureComponent, Fragment } from 'react';
import { Dimensions, Linking, Alert } from 'react-native';
import {
Dimensions, Linking, Alert,
} from 'react-native';
import { withNavigation } from 'react-navigation';
import { injectIntl } from 'react-intl';
import HTML from 'react-native-html-renderer';
// Styles
import styles from './postBodyStyles';
@ -13,6 +14,14 @@ import { default as ROUTES } from '../../../../constants/routeNames';
// Components
const WIDTH = Dimensions.get('window').width;
const CUSTOM_RENDERERS = {
// example
//center: () => <Text style={{ backgroundColor: 'blue', textAlign: 'center'}}>ugur</Text>,
};
const DEFAULT_PROPS = {
renderers: CUSTOM_RENDERERS,
debug: true,
};
class PostBody extends PureComponent {
constructor(props) {
@ -102,6 +111,7 @@ class PostBody extends PureComponent {
return (
<Fragment>
<HTML
{...DEFAULT_PROPS}
html={body}
onLinkPress={(evt, href, hrefatr) => this._handleOnLinkPress(evt, href, hrefatr)}
containerStyle={isComment ? styles.commentContainer : styles.container}

116
src/utils/markdownToHtml.js
View File

@ -2,11 +2,12 @@ import Remarkable from 'remarkable';
// TODO: Refactoring need!
const md = new Remarkable({ html: true, breaks: true, linkify: true });
const imgCenterRegex = /([<center>]http(s?):)([/|.|\w|\s|-])*\.(?:jpg|gif|png|PNG|GIF|JPG)[</center>]/g;
const onlyImageLinkRegex = /([\n]http(s?):)([/|.|\w|\s|-])*\.(?:jpg|gif|png|PNG|GIF|JPG)/g;
const onlyImageDoubleLinkRegex = /(\nhttps)(.*)(?=jpg|gif|png|PNG|GIF|JPG|)/g;
//const imgCenterRegex = /([<center>]http(s?):)([/|.|\w|\s|-])*\.(?:jpg|gif|png|PNG|GIF|JPG)[</center>]/g;
//const onlyImageLinkRegex = /([\n]http(s?):)([/|.|\w|\s|-])*\.(?:jpg|gif|png|PNG|GIF|JPG)/g;
//const onlyImageDoubleLinkRegex = /(\nhttps)(.*)(?=jpg|gif|png|PNG|GIF|JPG|)/g;
//const pullRightLeftRegex = /(<div class="[^"]*?pull-[^"]*?">(.*?)(<[/]div>))/g;
//const copiedPostRegex = /\/(.*)\/(@[\w.\d-]+)\/(.*)/i;
const postRegex = /^https?:\/\/(.*)\/(.*)\/(@[\w.\d-]+)\/(.*)/i;
const copiedPostRegex = /\/(.*)\/(@[\w.\d-]+)\/(.*)/i;
const youTubeRegex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([^& \n<]+)(?:[^ \n<]+)?/g;
const vimeoRegex = /(https?:\/\/)?(www\.)?(?:vimeo)\.com.*(?:videos|video|channels|)\/([\d]+)/i;
const dTubeRegex = /(https?:\/\/d.tube.#!\/v\/)(\w+)\/(\w+)/g;
@ -14,14 +15,12 @@ const authorNameRegex = /(^|[^a-zA-Z0-9_!#$%&*@＠\/]|(^|[^a-zA-Z0-9_+~.-\/]))[@
const tagsRegex = /(^|\s|>)(#[-a-z\d]+)/gi;
const centerRegex = /(<center>)/g;
const imgRegex = /(https?:\/\/.*\.(?:tiff?|jpe?g|gif|png|svg|ico|PNG|GIF|JPG))/g;
const pullRightLeftRegex = /(<div class="[^"]*?pull-[^"]*?">(.*?)(<[/]div>))/g;
const linkRegex = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi;
const markdownImageRegex = /!\[[^\]]*\]\((.*?)\s*("(?:.*[^"])")?\s*\)/g;
const urlRegex = /(http|ftp|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?/gm;
const aTagRegex = /(<\s*a[^>]*>(.*?)<\s*[/]\s*a>)/g;
const imgTagRegex = /(<img[^>]*>)/g;
const iframeRegex = /(?:<iframe[^>]*)(?:(?:\/>)|(?:>.*?<\/iframe>))/g;
//const codeTagRegex= /(?:<code[^>]*)(?:(?:\/>)|(?:>.*?<\/code>))/g;
export const markDown2Html = (input) => {
if (!input) {
@ -69,10 +68,6 @@ export const markDown2Html = (input) => {
output = handleIframe(output);
}
// if (codeTagRegex.test(output)) {
// output = handleCodeTag(output);
// }
if (linkRegex.test(output)) {
output = handleLinks(output);
}
@ -157,33 +152,7 @@ const changeMarkdownImage = input => input.replace(markdownImageRegex, (link) =>
return link;
});
const centerStyling = input => input.replace(centerRegex, () => '<center style="text-align:center;">');
// const handleCodeTag = input => input.replace(codeTagRegex, (tag) => {
// const stringsRegex = /(?<=>)(.*)(?=<)/g;
// const match = tag.match(stringsRegex);
// if (match && match[0]) {
// return `<p class="code" >${match[0]}</p>`;
// }
// return iframeBody(match[0]);
// });
const createCenterImage = input => input.replace(imgCenterRegex, (link) => {
let _link = link;
_link = _link.split('>')[1];
_link = _link.split('<')[0];
return `><img data-href="${`https://steemitimages.com/600x0/${_link}`}" src="${`https://steemitimages.com/600x0/${_link}`}"><`;
});
const changePullRightLeft = input => input.replace(pullRightLeftRegex, (item) => {
const imageLink = item.match(linkRegex)[0];
return `<center style="text-align:center;"><img src="${`https://steemitimages.com/600x0/${imageLink}`}"/></center><br>`;
});
const centerStyling = input => input.replace(centerRegex, () => '<center style="text-align: align-items: center;">');
const steemitUrlHandle = input => input.replace(postRegex, (link) => {
const postMatch = link.match(postRegex);
@ -194,7 +163,6 @@ const steemitUrlHandle = input => input.replace(postRegex, (link) => {
return `<a class="markdown-post-link" href="${permlink}" data_tag={${tag}} data_author="${author}">/${permlink}</a>`;
});
const createImage = input => input.replace(onlyImageLinkRegex, link => imageBody(link));
const handleImageTag = input => input.replace(imgTagRegex, (imgTag) => {
const _imgTag = imgTag.trim();
@ -207,12 +175,6 @@ const handleImageTag = input => input.replace(imgTagRegex, (imgTag) => {
return imgTag;
});
const createFromDoubleImageLink = input => input.replace(onlyImageDoubleLinkRegex, (link) => {
const _link = link.trim();
return imageBody(_link);
});
const createYoutubeIframe = input => input.replace(youTubeRegex, (link) => {
const execVideo = youTubeRegex.exec(link);
const match = link.match(youTubeRegex);
@ -237,21 +199,6 @@ const handleIframe = input => input.replace(iframeRegex, (link) => {
return link;
});
const createDtubeIframe = input => input.replace(dTubeRegex, (link) => {
const execLink = dTubeRegex.exec(link);
const dTubeMatch = link.match(dTubeRegex)[0];
if (execLink[2] && execLink[3]) {
const embedLink = `https://emb.d.tube/#!/${execLink[2]}/${execLink[3]}`;
return iframeBody(embedLink);
}
if (dTubeMatch) {
return iframeBody(dTubeMatch);
}
return link;
});
const createVimeoIframe = input => input.replace(vimeoRegex, (link) => {
const execLink = vimeoRegex.exec(link);
@ -262,3 +209,54 @@ const createVimeoIframe = input => input.replace(vimeoRegex, (link) => {
const iframeBody = link => `<iframe frameborder='0' allowfullscreen src='${link}'></iframe>`;
const imageBody = link => `<img src="${`https://steemitimages.com/600x0/${link}`}">`;
// const handleCodeTag = input => input.replace(codeTagRegex, (tag) => {
// const stringsRegex = /(?<=>)(.*)(?=<)/g;
// const match = tag.match(stringsRegex);
// if (match && match[0]) {
// return `<p class="code" >${match[0]}</p>`;
// }
// return iframeBody(match[0]);
// });
// const createCenterImage = input => input.replace(imgCenterRegex, (link) => {
// let _link = link;
// _link = _link.split('>')[1];
// _link = _link.split('<')[0];
// return `><img data-href="${`https://steemitimages.com/600x0/${_link}`}" src="${`https://steemitimages.com/600x0/${_link}`}"><`;
// });
// const changePullRightLeft = input => input.replace(pullRightLeftRegex, (item) => {
// const imageLink = item.match(linkRegex)[0];
// return `<center style="text-align:center;"><img src="${`https://steemitimages.com/600x0/${imageLink}`}"/></center><br>`;
// });
//const createImage = input => input.replace(onlyImageLinkRegex, link => imageBody(link));
// const createFromDoubleImageLink = input => input.replace(onlyImageDoubleLinkRegex, (link) => {
// const _link = link.trim();
// return imageBody(_link);
// });
// const createDtubeIframe = input => input.replace(dTubeRegex, (link) => {
// const execLink = dTubeRegex.exec(link);
// const dTubeMatch = link.match(dTubeRegex)[0];
// if (execLink[2] && execLink[3]) {
// const embedLink = `https://emb.d.tube/#!/${execLink[2]}/${execLink[3]}`;
// return iframeBody(embedLink);
// }
// if (dTubeMatch) {
// return iframeBody(dTubeMatch);
// }
// return link;
// });