feat(article): Add MD support (#1451)

Co-authored-by: hthieu1110 <[email protected]>

package.json

@@ -76,6 +76,8 @@
     "@types/crypto-js": "^4.2.2",
     "@types/leaflet": "^1.9.12",
     "@types/leaflet.markercluster": "^1.5.4",
+    "@types/markdown-it-emoji": "^3.0.1",
+    "@types/markdown-it-footnote": "^3.0.4",
     "@types/papaparse": "^5.3.14",
     "@types/pluralize": "^0.0.33",
     "assert": "^2.1.0",
@@ -121,6 +123,8 @@
     "long": "^5.2.1",
     "lottie-react-native": "6.5.1",
     "markdown-it": "^14.1.0",
+    "markdown-it-emoji": "^3.0.0",
+    "markdown-it-footnote": "^4.0.0",
     "merkletreejs": "^0.4.0",
     "metamask-react": "^2.4.1",
     "moment": "^2.29.4",
@@ -157,6 +161,7 @@
     "react-native-reanimated": "^3.6.2",
     "react-native-reanimated-carousel": "4.0.0-alpha.9",
     "react-native-reanimated-table": "^0.0.2",
+    "react-native-render-html": "^6.3.4",
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "~3.29.0",
     "react-native-smooth-slider": "^1.3.6",
@@ -197,7 +202,7 @@
     "@types/draft-convert": "^2.1.4",
     "@types/draft-js": "^0.11.9",
     "@types/html-to-draftjs": "^1.4.0",
-    "@types/markdown-it": "^13.0.7",
+    "@types/markdown-it": "^14.1.2",
     "@types/node": "^20.9.1",
     "@types/react": "~18.2.45",
     "@types/react-native-countdown-component": "^2.7.0",

packages/components/gradientText/GradientText.tsx

@@ -123,6 +123,8 @@ const gradient = (type: GradientType): LinearGradientProps => {
       return getMapPostTextGradient(PostCategory.Normal);
     case getMapPostTextGradientType(PostCategory.Article):
       return getMapPostTextGradient(PostCategory.Article);
+    case getMapPostTextGradientType(PostCategory.ArticleMarkdown):
+      return getMapPostTextGradient(PostCategory.Article);
     case getMapPostTextGradientType(PostCategory.Video):
       return getMapPostTextGradient(PostCategory.Video);
     case getMapPostTextGradientType(PostCategory.Picture):

packages/components/gradientText/GradientText.web.tsx

@@ -48,6 +48,8 @@ const gradient = (type: GradientType) => {
       return getMapPostTextGradientString(PostCategory.Normal);
     case getMapPostTextGradientType(PostCategory.Article):
       return getMapPostTextGradientString(PostCategory.Article);
+    case getMapPostTextGradientType(PostCategory.ArticleMarkdown):
+      return getMapPostTextGradientString(PostCategory.Article);
     case getMapPostTextGradientType(PostCategory.Video):
       return getMapPostTextGradientString(PostCategory.Video);
     case getMapPostTextGradientType(PostCategory.Picture):

packages/components/socialFeed/Map/Map.web.tsx

@@ -287,6 +287,10 @@ export const Map: FC<MapProps> = ({
                 <Popup closeButton={false} className="marker-popup">
                   <PictureMapPost post={marker.post} />
                 </Popup>
+              ) : marker.post.category === PostCategory.ArticleMarkdown ? (
+                <Popup closeButton={false} className="marker-popup">
+                  <ArticleMapPost post={marker.post} />
+                </Popup>
               ) : marker.post.category === PostCategory.Article ? (
                 <Popup closeButton={false} className="marker-popup">
                   <ArticleMapPost post={marker.post} />

packages/components/socialFeed/Map/MapPosts/ArticleMapPost.tsx

@@ -48,7 +48,9 @@ export const ArticleMapPost: FC<{
   return (
     <MapPostWrapper post={post} style={{ minWidth: 185 }}>
       <View>
-        <BrandText style={fontSemibold10}>{title}</BrandText>
+        <BrandText style={fontSemibold10} numberOfLines={2}>
+          {title}
+        </BrandText>
         <SpacerColumn size={0.5} />
 
         <Separator color={withAlpha(neutralFF, 0.24)} />

packages/components/socialFeed/NewsFeed/LocationButton.tsx

@@ -1,5 +1,6 @@
 import { FC } from "react";
-import { ColorValue } from "react-native";
+import { ColorValue, StyleProp, ViewStyle } from "react-native";
+import { MouseEvent } from "react-native/Libraries/Types/CoreEventTypes";
 
 import locationRefinedSVG from "@/assets/icons/location-refined.svg";
 import { SVG } from "@/components/SVG";
@@ -9,9 +10,17 @@ export const LocationButton: FC<{
   onPress: () => void;
   color?: ColorValue;
   stroke?: ColorValue;
-}> = ({ onPress, stroke, color }) => {
+  style?: StyleProp<ViewStyle>;
+  onHoverIn?: (event: MouseEvent) => void;
+  onHoverOut?: (event: MouseEvent) => void;
+}> = ({ onPress, stroke, color, style, onHoverIn, onHoverOut }) => {
   return (
-    <CustomPressable onPress={onPress}>
+    <CustomPressable
+      onPress={onPress}
+      style={style}
+      onHoverIn={onHoverIn}
+      onHoverOut={onHoverOut}
+    >
       <SVG
         source={locationRefinedSVG}
         height={20}

packages/components/socialFeed/NewsFeed/NewsFeed.tsx

@@ -31,6 +31,7 @@ import { SocialArticleCard } from "../SocialCard/cards/SocialArticleCard";
 import { SocialThreadCard } from "../SocialCard/cards/SocialThreadCard";
 import { SocialVideoCard } from "../SocialCard/cards/SocialVideoCard";
 
+import { SocialArticleMarkdownCard } from "@/components/socialFeed/SocialCard/cards/SocialArticleMarkdownCard";
 import { useMaxResolution } from "@/hooks/useMaxResolution";
 import { DeepPartial } from "@/utils/typescript";
 
@@ -183,6 +184,12 @@ export const NewsFeed: React.FC<NewsFeedProps> = ({
               style={cardStyle}
               refetchFeed={refetch}
             />
+          ) : post.category === PostCategory.ArticleMarkdown ? (
+            <SocialArticleMarkdownCard
+              post={post}
+              style={cardStyle}
+              refetchFeed={refetch}
+            />
           ) : post.category === PostCategory.Video ? (
             <SocialVideoCard
               post={post}