From 956176c42de4b471408f9e4e4119cb671f266948 Mon Sep 17 00:00:00 2001 From: Mustafa Buyukcelebi Date: Thu, 16 May 2019 13:32:22 +0300 Subject: [PATCH 1/3] Update for refactoring markdown --- src/components/postElements/body/view/postBodyView.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/postElements/body/view/postBodyView.js b/src/components/postElements/body/view/postBodyView.js index 01b6281d9..d5286a033 100644 --- a/src/components/postElements/body/view/postBodyView.js +++ b/src/components/postElements/body/view/postBodyView.js @@ -38,12 +38,14 @@ class PostBody extends PureComponent { _handleOnLinkPress = (evt, href, hrefatr) => { const { handleOnUserPress, handleOnPostPress } = this.props; + console.log('href :', href); + console.log('hrefatr :', hrefatr); if (hrefatr.class === 'markdown-author-link') { if (!handleOnUserPress) { - this._handleOnUserPress(href); + this._handleOnUserPress(hrefatr.data_author); } else { - handleOnUserPress(href); + handleOnUserPress(hrefatr.data_author); } } else if (hrefatr.class === 'markdown-post-link') { if (!handleOnPostPress) { @@ -137,6 +139,7 @@ class PostBody extends PureComponent { // node.attribs.height = 216; // } } else if (node.name === 'a') { + console.log('node :', node); node.attribs.style = 'text-decoration: underline'; } From 9067d74d4acd970bf860144ee636f5f24e4df5de Mon Sep 17 00:00:00 2001 From: Mustafa Buyukcelebi Date: Sat, 18 May 2019 13:35:38 +0300 Subject: [PATCH 2/3] updated for refactoring markdown --- package.json | 1 + .../markdownEditor/view/markdownEditorView.js | 4 +- .../postElements/body/view/postBodyStyles.js | 20 ++- .../postElements/body/view/postBodyView.js | 23 ++- src/utils/postParser.js | 9 +- yarn.lock | 135 +++++++++++++++++- 6 files changed, 171 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 2c0ce9cbd..80d3283d2 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ }, "dependencies": { "@babel/runtime": "^7.1.2", + "@esteemapp/esteem-render-helpers": "^1.0.9", "@esteemapp/react-native-scrollable-tab-view": "^0.8.2", "@esteemapp/react-native-tags": "^1.3.1", "appcenter": "^1.10.0", diff --git a/src/components/markdownEditor/view/markdownEditorView.js b/src/components/markdownEditor/view/markdownEditorView.js index ed6ed3d73..ed84a7553 100644 --- a/src/components/markdownEditor/view/markdownEditorView.js +++ b/src/components/markdownEditor/view/markdownEditorView.js @@ -3,9 +3,9 @@ import { View, KeyboardAvoidingView, FlatList, Text, Platform, ScrollView, } from 'react-native'; import ActionSheet from 'react-native-actionsheet'; +import { renderPostBody } from '@esteemapp/esteem-render-helpers'; // Utils -import { markDown2Html } from '../../../utils/markdownToHtml'; import applyImageLink from './formats/applyWebLinkFormat'; import Formats from './formats/formats'; @@ -118,7 +118,7 @@ export default class MarkdownEditorView extends Component { return ( - {text ? : ...} + {text ? : ...} ); }; diff --git a/src/components/postElements/body/view/postBodyStyles.js b/src/components/postElements/body/view/postBodyStyles.js index 0ded04bde..b6816407c 100644 --- a/src/components/postElements/body/view/postBodyStyles.js +++ b/src/components/postElements/body/view/postBodyStyles.js @@ -28,11 +28,6 @@ export default EStyleSheet.create({ h3: { fontSize: 20, }, - img: { - // height: 50, - marginTop: 10, - // left: -15, - }, commentContainer: { paddingHorizontal: 0, marginTop: 10, @@ -65,4 +60,19 @@ export default EStyleSheet.create({ backgroundColor: '$darkIconColor', fontFamily: '$editorFont', }, + center: { + textAlign: 'center', + alignItems: 'center', + justifyContent: 'center', + }, + postImage: { + marginTop: 10, + height: 216, + width: '100%', + }, + commentImage: { + marginTop: 10, + height: 80, + width: '100%', + }, }); diff --git a/src/components/postElements/body/view/postBodyView.js b/src/components/postElements/body/view/postBodyView.js index d5286a033..8ac6d9946 100644 --- a/src/components/postElements/body/view/postBodyView.js +++ b/src/components/postElements/body/view/postBodyView.js @@ -1,7 +1,8 @@ import React, { PureComponent, Fragment } from 'react'; -import { Dimensions, Linking, Alert } from 'react-native'; +import { Dimensions, Linking, Alert, TouchableHighlight, Text } from 'react-native'; import { withNavigation } from 'react-navigation'; import { injectIntl } from 'react-intl'; +import FastImage from 'react-native-fast-image'; import HTML from 'react-native-html-renderer'; import { getParentsTagsRecursively } from 'react-native-html-renderer/src/HTMLUtils'; @@ -14,6 +15,7 @@ import styles from './postBodyStyles'; // Constants import { default as ROUTES } from '../../../../constants/routeNames'; +import DEFAULT_IMAGE from '../../../../assets/no_image.png'; // Components const WIDTH = Dimensions.get('window').width; @@ -43,13 +45,13 @@ class PostBody extends PureComponent { if (hrefatr.class === 'markdown-author-link') { if (!handleOnUserPress) { - this._handleOnUserPress(hrefatr.data_author); + this._handleOnUserPress(hrefatr['data-author']); } else { - handleOnUserPress(hrefatr.data_author); + handleOnUserPress(hrefatr['data-author']); } } else if (hrefatr.class === 'markdown-post-link') { if (!handleOnPostPress) { - this._handleOnPostPress(href, hrefatr.data_author); + this._handleOnPostPress(href, hrefatr['data-author']); } else { handleOnPostPress(href); } @@ -109,7 +111,7 @@ class PostBody extends PureComponent { _handleOnUserPress = (username) => { const { navigation } = this.props; - if (username && validateUsername(username)) { + if (username) { navigation.navigate({ routeName: ROUTES.SCREENS.PROFILE, params: { @@ -200,6 +202,17 @@ class PostBody extends PureComponent { imagesMaxWidth={isComment ? WIDTH - 50 : WIDTH} alterNode={e => this._alterNode(e, isComment)} alterData={e => this._alterData(e)} + renderers={{ + img: (htmlAttribs, children, convertedCSSStyles, passProps) => ( + + ), + a: (htmlAttribs, children, convertedCSSStyles, passProps) => console.log('htmlAttribs, children, convertedCSSStyles, passProps :', htmlAttribs, children, convertedCSSStyles, passProps), + }} /> ); diff --git a/src/utils/postParser.js b/src/utils/postParser.js index 9f297c799..e323a3dd6 100644 --- a/src/utils/postParser.js +++ b/src/utils/postParser.js @@ -1,3 +1,4 @@ +import { postBodySummary, renderPostBody } from '@esteemapp/esteem-render-helpers'; // Utils import { markDown2Html } from './markdownToHtml'; import { getPostSummary } from './formatter'; @@ -23,8 +24,8 @@ export const parsePost = (post, currentUserName) => { post.avatar = `https://steemitimages.com/u/${post.author}/avatar/small`; post.active_votes.sort((a, b) => b.rshares - a.rshares); - post.body = markDown2Html(post.body); - post.summary = getPostSummary(post.body, 150); + post.body = renderPostBody(post); + post.summary = postBodySummary(post, 150); post.is_declined_payout = Number(parseFloat(post.max_accepted_payout)) === 0; if (currentUserName) { @@ -140,8 +141,8 @@ export const parseComments = (comments) => { comment.author_reputation = getReputation(comment.author_reputation); comment.avatar = `https://steemitimages.com/u/${comment.author}/avatar/small`; comment.markdownBody = comment.body; - comment.body = markDown2Html(comment.body); - comment.summary = getPostSummary(comment.body, 100, true); + comment.body = renderPostBody(comment); + comment.summary = `"${getPostSummary(comment.body, 100, true)}"`; }); return comments; }; diff --git a/yarn.lock b/yarn.lock index 8c6a43e97..8ba70fdda 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1090,6 +1090,18 @@ lodash "^4.17.11" to-fast-properties "^2.0.0" +"@esteemapp/esteem-render-helpers@^1.0.9": + version "1.0.9" + resolved "https://registry.yarnpkg.com/@esteemapp/esteem-render-helpers/-/esteem-render-helpers-1.0.9.tgz#c54e0d86b2a6d1a9affd5f11949e75b7b39f65d8" + integrity sha512-uNW5D8ifjc9OImqgYc4uKTXqvMPTJFC378boRGRaAsvIy7foC/G3l4GF33H+zzENTldSa21Hv0SJ/LtTWgUwVg== + dependencies: + he "^1.2.0" + path "^0.12.7" + remarkable "^1.7.1" + sanitize-html "^1.20.1" + url "^0.11.0" + xmldom "^0.1.27" + "@esteemapp/react-native-scrollable-tab-view@^0.8.2": version "0.8.2" resolved "https://registry.yarnpkg.com/@esteemapp/react-native-scrollable-tab-view/-/react-native-scrollable-tab-view-0.8.2.tgz#44c0b0dbfc5dca7361a0c60f21e5e6e95d486742" @@ -1519,6 +1531,11 @@ array-slice@^0.2.3: resolved "https://registry.yarnpkg.com/array-slice/-/array-slice-0.2.3.tgz#dd3cfb80ed7973a75117cdac69b0b99ec86186f5" integrity sha1-3Tz7gO15c6dRF82sabC5nshhhvU= +array-uniq@^1.0.2: + version "1.0.3" + resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6" + integrity sha1-r2rId6Jcx/dOBYiUdThY39sk/bY= + array-unique@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53" @@ -4184,6 +4201,11 @@ hash.js@^1.0.0, hash.js@^1.0.3: inherits "^2.0.3" minimalistic-assert "^1.0.1" +he@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" + integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== + hmac-drbg@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1" @@ -4230,7 +4252,7 @@ html-entities@^1.2.0: resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f" integrity sha1-DfKTUfByEWNRXfueVUPl9u7VFi8= -htmlparser2@^3.9.0: +htmlparser2@^3.10.0, htmlparser2@^3.9.0: version "3.10.1" resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f" integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ== @@ -5579,16 +5601,41 @@ locate-path@^3.0.0: p-locate "^3.0.0" path-exists "^3.0.0" +lodash.clonedeep@^4.5.0: + version "4.5.0" + resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef" + integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8= + lodash.debounce@^4.0.8: version "4.0.8" resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168= +lodash.escaperegexp@^4.1.2: + version "4.1.2" + resolved "https://registry.yarnpkg.com/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz#64762c48618082518ac3df4ccf5d5886dae20347" + integrity sha1-ZHYsSGGAglGKw99Mz11YhtriA0c= + +lodash.isplainobject@^4.0.6: + version "4.0.6" + resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb" + integrity sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs= + +lodash.isstring@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451" + integrity sha1-1SfftUVuynzJu5XV2ur4i6VKVFE= + lodash.merge@^4.6.0: version "4.6.1" resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.1.tgz#adc25d9cb99b9391c59624f379fbba60d7111d54" integrity sha512-AOYza4+Hf5z1/0Hztxpm2/xiPZgi/cjMqdnKTUWTBSKchJlxXXuUSxCCl8rJlf4g6yww/j6mA8nC8Hw/EZWxKQ== +lodash.mergewith@^4.6.1: + version "4.6.1" + resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz#639057e726c3afbdb3e7d42741caa8d6e4335927" + integrity sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ== + lodash.pad@^4.1.0: version "4.5.1" resolved "https://registry.yarnpkg.com/lodash.pad/-/lodash.pad-4.5.1.tgz#4330949a833a7c8da22cc20f6a26c4d59debba70" @@ -6837,6 +6884,14 @@ path-type@^2.0.0: dependencies: pify "^2.0.0" +path@^0.12.7: + version "0.12.7" + resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f" + integrity sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8= + dependencies: + process "^0.11.1" + util "^0.10.3" + pegjs@^0.10.0: version "0.10.0" resolved "https://registry.yarnpkg.com/pegjs/-/pegjs-0.10.0.tgz#cf8bafae6eddff4b5a7efb185269eaaf4610ddbd" @@ -6951,6 +7006,15 @@ posix-character-classes@^0.1.0: resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab" integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs= +postcss@^7.0.5: + version "7.0.16" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.16.tgz#48f64f1b4b558cb8b52c88987724359acb010da2" + integrity sha512-MOo8zNSlIqh22Uaa3drkdIAgUGEL+AD1ESiSdmElLUmE2uVDo1QloiT/IfW9qRw8Gw+Y/w69UVMGwbufMSftxA== + dependencies: + chalk "^2.4.2" + source-map "^0.6.1" + supports-color "^6.1.0" + prelude-ls@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" @@ -7008,6 +7072,11 @@ process-nextick-args@~2.0.0: resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa" integrity sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw== +process@^0.11.1: + version "0.11.10" + resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182" + integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI= + process@~0.5.1: version "0.5.2" resolved "https://registry.yarnpkg.com/process/-/process-0.5.2.tgz#1638d8a8e34c2f440a91db95ab9aeb677fc185cf" @@ -7092,6 +7161,11 @@ pump@^3.0.0: end-of-stream "^1.1.0" once "^1.3.1" +punycode@1.3.2: + version "1.3.2" + resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d" + integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0= + punycode@^1.4.1: version "1.4.1" resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e" @@ -7126,6 +7200,11 @@ query-string@^6.1.0: split-on-first "^1.0.0" strict-uri-encode "^2.0.0" +querystring@0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620" + integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA= + querystringify@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e" @@ -8075,6 +8154,22 @@ sane@^2.0.0: optionalDependencies: fsevents "^1.2.3" +sanitize-html@^1.20.1: + version "1.20.1" + resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-1.20.1.tgz#f6effdf55dd398807171215a62bfc21811bacf85" + integrity sha512-txnH8TQjaQvg2Q0HY06G6CDJLVYCpbnxrdO0WN8gjCKaU5J0KbyGYhZxx5QJg3WLZ1lB7XU9kDkfrCXUozqptA== + dependencies: + chalk "^2.4.1" + htmlparser2 "^3.10.0" + lodash.clonedeep "^4.5.0" + lodash.escaperegexp "^4.1.2" + lodash.isplainobject "^4.0.6" + lodash.isstring "^4.0.1" + lodash.mergewith "^4.6.1" + postcss "^7.0.5" + srcset "^1.0.0" + xtend "^4.0.1" + sax@^1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" @@ -8448,6 +8543,14 @@ sprintf-js@~1.0.2: resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c" integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw= +srcset@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/srcset/-/srcset-1.0.0.tgz#a5669de12b42f3b1d5e83ed03c71046fc48f41ef" + integrity sha1-pWad4StC87HV6D7QPHEEb8SPQe8= + dependencies: + array-uniq "^1.0.2" + number-is-nan "^1.0.0" + sshpk@^1.7.0: version "1.16.1" resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877" @@ -8703,6 +8806,13 @@ supports-color@^5.3.0: dependencies: has-flag "^3.0.0" +supports-color@^6.1.0: + version "6.1.0" + resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3" + integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ== + dependencies: + has-flag "^3.0.0" + symbol-observable@^1.1.0, symbol-observable@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" @@ -9113,6 +9223,14 @@ url-parse@^1.4.4: querystringify "^2.1.1" requires-port "^1.0.0" +url@^0.11.0: + version "0.11.0" + resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1" + integrity sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE= + dependencies: + punycode "1.3.2" + querystring "0.2.0" + use@^3.1.0: version "3.1.1" resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f" @@ -9131,6 +9249,13 @@ util.promisify@^1.0.0: define-properties "^1.1.2" object.getownpropertydescriptors "^2.0.3" +util@^0.10.3: + version "0.10.4" + resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901" + integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A== + dependencies: + inherits "2.0.3" + utils-merge@1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713" @@ -9378,9 +9503,9 @@ xcode@^2.0.0: simple-plist "^1.0.0" uuid "^3.3.2" -"xcode@git+https://github.com/apache/cordova-node-xcode.git#e7646f0680d509b590b839e567c217590451505b": +"xcode@https://github.com/apache/cordova-node-xcode#e7646f0680d509b590b839e567c217590451505b": version "1.0.1-dev" - resolved "git+https://github.com/apache/cordova-node-xcode.git#e7646f0680d509b590b839e567c217590451505b" + resolved "https://github.com/apache/cordova-node-xcode#e7646f0680d509b590b839e567c217590451505b" dependencies: simple-plist "^0.2.1" uuid "3.0.1" @@ -9407,7 +9532,7 @@ xmldoc@^0.4.0: dependencies: sax "~1.1.1" -xmldom@0.1.x: +xmldom@0.1.x, xmldom@^0.1.27: version "0.1.27" resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.27.tgz#d501f97b3bdb403af8ef9ecc20573187aadac0e9" integrity sha1-1QH5ezvbQDr4757MIFcxh6rawOk= @@ -9422,7 +9547,7 @@ xregexp@2.0.0: resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-2.0.0.tgz#52a63e56ca0b84a7f3a5f3d61872f126ad7a5943" integrity sha1-UqY+VsoLhKfzpfPWGHLxJq16WUM= -xtend@^4.0.0, xtend@~4.0.1: +xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af" integrity sha1-pcbVMr5lbiPbgg77lDofBJmNY68= From c7d7a9f3d93cace29b67a23972a07d1e3632963f Mon Sep 17 00:00:00 2001 From: Mustafa Buyukcelebi Date: Fri, 24 May 2019 20:08:34 +0300 Subject: [PATCH 3/3] configured html library for a tag --- .../postElements/body/view/postBodyStyles.js | 4 +- .../postElements/body/view/postBodyView.js | 104 +++++++----------- 2 files changed, 42 insertions(+), 66 deletions(-) diff --git a/src/components/postElements/body/view/postBodyStyles.js b/src/components/postElements/body/view/postBodyStyles.js index b6816407c..b0b601ee3 100644 --- a/src/components/postElements/body/view/postBodyStyles.js +++ b/src/components/postElements/body/view/postBodyStyles.js @@ -67,12 +67,12 @@ export default EStyleSheet.create({ }, postImage: { marginTop: 10, - height: 216, + minHeight: 216, width: '100%', }, commentImage: { marginTop: 10, - height: 80, + minHeight: 80, width: '100%', }, }); diff --git a/src/components/postElements/body/view/postBodyView.js b/src/components/postElements/body/view/postBodyView.js index 8ac6d9946..8fe688c7d 100644 --- a/src/components/postElements/body/view/postBodyView.js +++ b/src/components/postElements/body/view/postBodyView.js @@ -1,5 +1,7 @@ import React, { PureComponent, Fragment } from 'react'; -import { Dimensions, Linking, Alert, TouchableHighlight, Text } from 'react-native'; +import { + Dimensions, Linking, Alert, TouchableOpacity, Text, +} from 'react-native'; import { withNavigation } from 'react-navigation'; import { injectIntl } from 'react-intl'; import FastImage from 'react-native-fast-image'; @@ -7,9 +9,6 @@ import FastImage from 'react-native-fast-image'; import HTML from 'react-native-html-renderer'; import { getParentsTagsRecursively } from 'react-native-html-renderer/src/HTMLUtils'; -// Utils -import { validateUsername } from '../../../../utils/user'; - // Styles import styles from './postBodyStyles'; @@ -19,29 +18,14 @@ import DEFAULT_IMAGE from '../../../../assets/no_image.png'; // Components const WIDTH = Dimensions.get('window').width; -const CUSTOM_RENDERERS = { - // example - // center: () => ugur, -}; -const DEFAULT_PROPS = { - renderers: CUSTOM_RENDERERS, - debug: true, -}; class PostBody extends PureComponent { - constructor(props) { - super(props); - this.state = {}; - } - // Component Life Cycles // Component Functions - _handleOnLinkPress = (evt, href, hrefatr) => { + _handleOnLinkPress = (href, hrefatr) => { const { handleOnUserPress, handleOnPostPress } = this.props; - console.log('href :', href); - console.log('hrefatr :', hrefatr); if (hrefatr.class === 'markdown-author-link') { if (!handleOnUserPress) { @@ -51,9 +35,9 @@ class PostBody extends PureComponent { } } else if (hrefatr.class === 'markdown-post-link') { if (!handleOnPostPress) { - this._handleOnPostPress(href, hrefatr['data-author']); + this._handleOnPostPress(hrefatr['data-permlink'], hrefatr['data-author']); } else { - handleOnPostPress(href); + handleOnPostPress(hrefatr['data-permlink']); } } else { this._handleBrowserLink(href); @@ -62,37 +46,15 @@ class PostBody extends PureComponent { _handleBrowserLink = async (url) => { if (!url) return; - - let author; - let permlink; const { intl } = this.props; - if ( - url.indexOf('esteem') > -1 - || url.indexOf('steemit') > -1 - || url.indexOf('busy') > -1 - || (url.indexOf('steempeak') > -1 && url.indexOf('files') < 0) - ) { - url = url.substring(url.indexOf('@'), url.length); - const routeParams = url && url.indexOf('/') > -1 ? url.split('/') : [url]; - - [, permlink] = routeParams; - author = routeParams[0].indexOf('@') > -1 ? routeParams[0].replace('@', '') : routeParams[0]; - } - - if (author && permlink) { - this._handleOnPostPress(permlink, author); - } else if (author) { - this._handleOnUserPress(author); - } else { - Linking.canOpenURL(url).then((supported) => { - if (supported) { - Linking.openURL(url); - } else { - Alert.alert(intl.formatMessage({ id: 'alert.failed_to_open' })); - } - }); - } + Linking.canOpenURL(url).then((supported) => { + if (supported) { + Linking.openURL(url); + } else { + Alert.alert(intl.formatMessage({ id: 'alert.failed_to_open' })); + } + }); }; _handleOnPostPress = (permlink, author) => { @@ -141,7 +103,6 @@ class PostBody extends PureComponent { // node.attribs.height = 216; // } } else if (node.name === 'a') { - console.log('node :', node); node.attribs.style = 'text-decoration: underline'; } @@ -185,10 +146,35 @@ class PostBody extends PureComponent { ? { width: WIDTH - 50, height: 80 } : { width: WIDTH, height: 216 }; + const _customRenderer = { + img: (htmlAttribs, children, convertedCSSStyles, passProps) => ( + + ), + a: (htmlAttribs, children, convertedCSSStyles, passProps) => { + if (passProps.parentWrapper === 'Text') { + return ( + this._handleOnLinkPress(htmlAttribs['data-href'], htmlAttribs)}> + {children} + + ); + } + return ( + this._handleOnLinkPress(htmlAttribs['data-href'], htmlAttribs)}> + {children} + + ); + }, + }; + return ( this._handleOnLinkPress(evt, href, hrefatr)} containerStyle={isComment ? styles.commentContainer : styles.container} @@ -202,17 +188,7 @@ class PostBody extends PureComponent { imagesMaxWidth={isComment ? WIDTH - 50 : WIDTH} alterNode={e => this._alterNode(e, isComment)} alterData={e => this._alterData(e)} - renderers={{ - img: (htmlAttribs, children, convertedCSSStyles, passProps) => ( - - ), - a: (htmlAttribs, children, convertedCSSStyles, passProps) => console.log('htmlAttribs, children, convertedCSSStyles, passProps :', htmlAttribs, children, convertedCSSStyles, passProps), - }} + renderers={_customRenderer} /> );