show images in comments and posts

components/ui/CommentItem.tsx

@@ -9,8 +9,6 @@ import {depthToColor} from "../../helpers/ColorHelper";
 import {GestureHandlerRootView, PanGestureHandler,} from "react-native-gesture-handler";
 import {trigger} from "react-native-haptic-feedback";
 import {useAppDispatch, useAppSelector} from "../../store";
-import RenderHTML from "react-native-render-html";
-import {parseMarkdown} from "../../helpers/MarkdownHelper";
 import Animated, {
     runOnJS,
     useAnimatedGestureHandler,
@@ -25,7 +23,6 @@ import {NativeStackNavigationProp} from "@react-navigation/native-stack";
 import {getBaseUrl} from "../../helpers/LinkHelper";
 import {selectSettings} from "../../slices/settings/settingsSlice";
 import RenderMarkdown from "./markdown/RenderMarkdown";
-import {compiler} from "markdown-to-jsx";
 
 interface CommentItemProps {
     comment: ILemmyComment,
@@ -258,7 +255,7 @@ const CommentItem = ({comment, depth = 1}: CommentItemProps) => {
                                                             <Text fontStyle={"italic"} color={"gray.500"}>Comment was deleted :(</Text>
                                                         ) : (
                                                             <VStack pr={2}>
-                                                                <RenderMarkdown text={comment.top.comment.content} />
+                                                                <RenderMarkdown text={comment.top.comment.content} addImages={true} />
                                                             </VStack>
                                                         )
                                                     }

components/ui/ContentView.tsx

@@ -5,9 +5,7 @@ import {Text, useTheme, VStack} from "native-base";
 import {truncatePost} from "../../helpers/TextHelper";
 import LinkButton from "./LinkButton";
 import {Dimensions, StyleSheet} from "react-native";
-import {parseMarkdown} from "../../helpers/MarkdownHelper";
-import RenderHTML from "react-native-render-html";
-import ImageModal from "react-native-image-modal";
+import ImageModal from "@dreamwalk-os/react-native-image-modal";
 import RenderMarkdown from "./markdown/RenderMarkdown";
 
 interface ContentViewProps {
@@ -56,7 +54,7 @@ const ContentView = ({post, truncate = false, showBody = false, showTitle = fals
             {
                 (linkInfo.extType === ExtensionType.NONE || showBody) && (
                     <VStack px={4}>
-                        <RenderMarkdown text={body} />
+                        <RenderMarkdown text={body} addImages={showTitle}/>
                     </VStack>
                 )
             }

components/ui/ImageButton.tsx

@@ -0,0 +1,64 @@
+import React, {useRef, useState} from "react";
+import {openLink} from "../../helpers/LinkHelper";
+import {ChevronRightIcon, HStack, Icon, Pressable, Spacer, Text} from "native-base";
+import {truncateImageLink, truncateLink} from "../../helpers/TextHelper";
+import ImageModal, {ImageDetail} from "@dreamwalk-os/react-native-image-modal";
+import FastImage from "react-native-fast-image";
+import ImageModalScreen from "../screens/image/ImageModalScreen";
+import {Dimensions} from "react-native";
+
+interface ImageButtonProps {
+    src: string
+}
+
+const ImageButton = ({src}: ImageButtonProps) => {
+    const [visible, setVisible] = useState(false);
+
+    const onPress = () => {
+        setVisible(true);
+        console.log("sup");
+    };
+
+    return (
+        <>
+            <Pressable onPress={onPress}>
+                <HStack
+                    backgroundColor={"screen.700"}
+                    borderRadius={5}
+                    padding={2}
+                    flexDirection={"row"}
+                    alignItems={"center"}
+                    space={2}
+                    my={4}
+                    mx={5}
+                >
+                    <FastImage
+                        style={{
+                            height: 50,
+                            width: 50,
+                        }}
+                        resizeMode={"contain"}
+                        source={{
+                            uri: src
+                        }}
+                    />
+                    <Spacer />
+                    <Text>
+                        {truncateImageLink(src)}
+                    </Text>
+                    <Spacer />
+                    <ChevronRightIcon />
+                </HStack>
+            </Pressable>
+
+            <ImageDetail source={{uri: src}} origin={{
+                x: Dimensions.get("window").width / 2,
+                y: Dimensions.get("window").height / 2,
+                width: 100,
+                height: 100
+            }} resizeMode={"contain"} swipeToDismiss={true} onClose={() => setVisible(false)} isOpen={visible} />
+        </>
+    );
+};
+
+export default ImageButton;

components/ui/markdown/RenderMarkdown.tsx

@@ -1,12 +1,28 @@
-import React from "react";
-import {useTheme} from "native-base";
-import Markdown from "@ronradtke/react-native-markdown-display";
+import React, {useCallback, useEffect, useMemo, useState} from "react";
+import {useTheme, VStack} from "native-base";
+import Markdown, {MarkdownIt} from "@ronradtke/react-native-markdown-display";
+import {openLink} from "../../../helpers/LinkHelper";
+import {findImages} from "../../../helpers/MarkdownHelper";
+import ImageButton from "../ImageButton";
 
 interface MarkdownProps {
-    text: string
+    text: string,
+    addImages?: boolean
 }
 
-const RenderMarkdown = ({text}: MarkdownProps) => {
+const RenderMarkdown = ({text, addImages = false}: MarkdownProps) => {
+    const [ready, setReady] = useState(false);
+
+    useEffect(() => {
+        findImages(text);
+        console.log("Running...");
+
+    }, []);
+
+    const onLinkPress = (url) => {
+        openLink(url);
+    };
+
     const theme = useTheme();
 
     const styles = {
@@ -97,11 +113,28 @@ const RenderMarkdown = ({text}: MarkdownProps) => {
         }
     };
 
-    return (
-        <Markdown style={styles}>
-            {text.toString()}
-        </Markdown>
-    );
+    const markdown = useMemo(() => {
+        const src = findImages(text);
+
+        return (
+            <VStack flex={1}>
+                <Markdown
+                    style={styles}
+                    onLinkPress={openLink}
+                    markdownit={MarkdownIt({typographer: true}).disable(["image"])}
+                >
+                    {text ?? ""}
+                </Markdown>
+                {
+                    addImages && src && (
+                        <ImageButton src={src} />
+                    )
+                }
+            </VStack>
+        );
+    }, []);
+
+    return markdown;
 };
 
 export default RenderMarkdown;

helpers/MarkdownHelper.ts

@@ -1,10 +1,14 @@
-import sanitizeHtml from "sanitize-html";
-import showdown from "showdown";
+export const findImages = (text: string) => {
+    const pattern = /!\[(.*?)\]\((.*?)\)/g;
 
-export const parseMarkdown = (text: string): string => {
-    //const parsed = marked.parse(text);
-    //return sanitizeHtml(parsed);
-    //return parsed;
-    const converter = new showdown.Converter();
-    return sanitizeHtml(converter.makeHtml(text));
+    let match;
+    let imageUrl = null;
+
+    while ((match = pattern.exec(text)) !== null) {
+        const altText = match[1];
+        imageUrl = match[2];
+        break;
+    }
+
+    return imageUrl;
 };

helpers/TextHelper.ts

@@ -10,6 +10,12 @@ export const truncateLink = (link: string): string => {
     return link.slice(0,36) + "...";
 };
 
+export const truncateImageLink = (link: string): string => {
+    if(link.length <= 36) return link;
+
+    return link.slice(0,24) + "...";
+};
+
 export const truncatePost = (post: string, truncLength = 500): string => {
     if(!post) return "";