diff --git a/components/Html/ImageRenderer.tsx b/components/Html/ImageRenderer.tsx
index 831d6ea..8265b81 100644
--- a/components/Html/ImageRenderer.tsx
+++ b/components/Html/ImageRenderer.tsx
@@ -4,18 +4,24 @@ import { Pressable } from 'react-native'
import { CustomBlockRenderer } from 'react-native-render-html'
import { isSvgURL } from '@/utils/url'
+import { useScreenWidth } from '@/utils/useScreenWidth'
import StyledImage from '../StyledImage'
import { HtmlContext } from './HtmlContext'
const ImageRenderer: CustomBlockRenderer = ({ tnode, style }) => {
- const { onPreview } = useContext(HtmlContext)
+ const { onPreview, paddingX } = useContext(HtmlContext)
const url = useMemo(() => {
const $ = load(tnode.domNode as unknown as string)
return $('img').attr('src')
}, [tnode.domNode])
+ const screenWidth = useScreenWidth()
+ const containerWidth = !ancestorHasTdTag(tnode)
+ ? screenWidth - paddingX
+ : undefined
+
if (url && isSvgURL(url))
return
@@ -26,9 +32,19 @@ const ImageRenderer: CustomBlockRenderer = ({ tnode, style }) => {
if (url) onPreview(url)
}}
>
-
+
)
}
+function ancestorHasTdTag(parent: any): boolean {
+ if (!parent) return false
+ if (parent.tagName === 'td') return true
+ return ancestorHasTdTag(parent.parent)
+}
+
export default ImageRenderer
diff --git a/components/StyledImage.tsx b/components/StyledImage.tsx
index 16de8f1..52bec40 100644
--- a/components/StyledImage.tsx
+++ b/components/StyledImage.tsx
@@ -19,7 +19,18 @@ import { isSvgURL, resolveURL } from '@/utils/url'
const uriToSize = new Map()
-function CustomImage({ style, source, onLoad, onError, ...props }: ImageProps) {
+export interface StyledImageProps extends ImageProps {
+ containerWidth?: number
+}
+
+function CustomImage({
+ style,
+ source,
+ onLoad,
+ onError,
+ containerWidth,
+ ...props
+}: StyledImageProps) {
const uri =
isObject(source) && !isArray(source) && isString(source.uri)
? resolveURL(source.uri)
@@ -31,10 +42,6 @@ function CustomImage({ style, source, onLoad, onError, ...props }: ImageProps) {
const hadPassedSize = hasSize(style)
- const isMiniImage = hasSize(size)
- ? size.width < 100 && size.height < 100
- : false
-
return (