diff --git a/src/components/markdownEditor/styles/markdownEditorStyles.js b/src/components/markdownEditor/styles/markdownEditorStyles.js index 424602086..e9cc7407c 100644 --- a/src/components/markdownEditor/styles/markdownEditorStyles.js +++ b/src/components/markdownEditor/styles/markdownEditorStyles.js @@ -17,7 +17,7 @@ export default EStyleSheet.create({ color: '$primaryBlack', backgroundColor: '$primaryBackgroundColor', textAlignVertical: 'top', - minHeight:isAndroidOreo() ? undefined : '$deviceHeight/2', + minHeight: isAndroidOreo() ? undefined : '$deviceHeight/2', maxHeight: isAndroidOreo() ? '$deviceHeight' : undefined, }, previewContainer: { diff --git a/src/components/postElements/body/view/commentBodyView.tsx b/src/components/postElements/body/view/commentBodyView.tsx index c5453a717..e3da7c41b 100644 --- a/src/components/postElements/body/view/commentBodyView.tsx +++ b/src/components/postElements/body/view/commentBodyView.tsx @@ -153,7 +153,10 @@ const CommentBody = ({ actionLink.current.show(); } - const _handleSetSelectedImage = (imageLink:string) => { + const _handleSetSelectedImage = (imageLink:string, postImgUrls:string[]) => { + if(postImages.length !== postImgUrls.length){ + setPostImages(postImgUrls); + } setSelectedImage(imageLink); actionImage.current.show(); } @@ -282,17 +285,6 @@ const CommentBody = ({ }; - - - - const _onElementIsImage = useCallback((imgUrl) =>{ - if(postImages.indexOf(imgUrl) == -1){ - postImages.push(imgUrl); - setPostImages(postImages); - } - },[postImages]) - - return ( @@ -337,7 +329,6 @@ const CommentBody = ({ contentWidth={_contentWidth} body={body} isComment={true} - onElementIsImage={_onElementIsImage} setSelectedImage={_handleSetSelectedImage} setSelectedLink={_handleSetSelectedLink} handleOnPostPress={_handleOnPostPress} diff --git a/src/components/postElements/body/view/postBodyView.js b/src/components/postElements/body/view/postBodyView.js index 0fc75b2c6..8f4e321aa 100644 --- a/src/components/postElements/body/view/postBodyView.js +++ b/src/components/postElements/body/view/postBodyView.js @@ -256,19 +256,15 @@ const PostBody = ({ navigation, body, dispatch, onLoadEnd, width }) => { } }; - const _onElementIsImage = (imgUrl) => { - if (postImages.indexOf(imgUrl) == -1) { - postImages.push(imgUrl); - setPostImages(postImages); - } - }; - const _handleSetSelectedLink = (link) => { setSelectedLink(link); actionLink.current.show(); }; - const _handleSetSelectedImage = (imageLink) => { + const _handleSetSelectedImage = (imageLink, postImgUrls) => { + if (postImages.length !== postImgUrls.length) { + setPostImages(postImgUrls); + } setSelectedImage(imageLink); actionImage.current.show(); }; @@ -335,7 +331,6 @@ const PostBody = ({ navigation, body, dispatch, onLoadEnd, width }) => { body={html} contentWidth={width ? width : WIDTH - 32} onLoaded={_handleLoadEnd} - onElementIsImage={_onElementIsImage} setSelectedImage={_handleSetSelectedImage} setSelectedLink={_handleSetSelectedLink} handleOnPostPress={_handleOnPostPress} diff --git a/src/components/postHtmlRenderer/postHtmlRenderer.tsx b/src/components/postHtmlRenderer/postHtmlRenderer.tsx index 16b5f8fd4..d70ee2388 100644 --- a/src/components/postHtmlRenderer/postHtmlRenderer.tsx +++ b/src/components/postHtmlRenderer/postHtmlRenderer.tsx @@ -1,4 +1,4 @@ -import React, { memo, useMemo } from 'react'; +import React, { memo, useMemo, useRef } from 'react'; import RenderHTML, { CustomRendererProps, Element, TNode } from 'react-native-render-html'; import { useHtmlIframeProps, iframeModel } from '@native-html/iframe-plugin'; import styles from './postHtmlRendererStyles'; @@ -7,7 +7,6 @@ import VideoThumb from './videoThumb'; import { AutoHeightImage } from '../autoHeightImage/autoHeightImage'; import WebView from 'react-native-webview'; import { VideoPlayer } from '..'; -import { useHtmlTableProps } from '@native-html/table-plugin'; import { ScrollView } from 'react-native-gesture-handler'; import { prependChild, removeElement } from 'htmlparser2/node_modules/domutils'; @@ -16,9 +15,8 @@ interface PostHtmlRendererProps { body: string; isComment?: boolean; onLoaded?: () => void; - setSelectedImage: (imgUrl: string) => void; + setSelectedImage: (imgUrl: string, postImageUrls:string[]) => void; setSelectedLink: (url: string) => void; - onElementIsImage: (imgUrl: string) => void; handleOnPostPress: (permlink: string, authro: string) => void; handleOnUserPress: (username: string) => void; handleTagPress: (tag: string, filter?: string) => void; @@ -34,13 +32,15 @@ export const PostHtmlRenderer = memo( onLoaded, setSelectedImage, setSelectedLink, - onElementIsImage, handleOnPostPress, handleOnUserPress, handleTagPress, handleVideoPress, handleYoutubePress, }: PostHtmlRendererProps) => { + + const postImgUrlsRef = useRef([]); + //new renderer functions body = body.replace(/
/g, '
').replace(/<\/center>/g, '
'); @@ -146,7 +146,9 @@ export const PostHtmlRenderer = memo( if (element.tagName === 'img' && element.attribs.src) { const imgUrl = element.attribs.src; console.log('img element detected', imgUrl); - onElementIsImage(imgUrl); + if(!postImgUrlsRef.current.includes(imgUrl)){ + postImgUrlsRef.current.push(imgUrl) + } } //this avoids invalid rendering of first element of table pushing rest of columsn to extreme right. @@ -235,7 +237,7 @@ export const PostHtmlRenderer = memo( const imgUrl = tnode.attributes.src; const _onPress = () => { console.log('Image Pressed:', imgUrl); - setSelectedImage(imgUrl); + setSelectedImage(imgUrl, postImgUrlsRef.current); }; const isVideoThumb = tnode.classes?.indexOf('video-thumbnail') >= 0;