Merge pull request #49250 from software-mansion-labs/@Skalakid/inline…

…-images-feature

Add inline images preview to the Live Markdown Input on the web

ios/Podfile.lock

@@ -2360,7 +2360,7 @@ PODS:
   - RNGoogleSignin (10.0.1):
     - GoogleSignIn (~> 7.0)
     - React-Core
-  - RNLiveMarkdown (0.1.143):
+  - RNLiveMarkdown (0.1.159):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2380,9 +2380,9 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNLiveMarkdown/common (= 0.1.143)
+    - RNLiveMarkdown/common (= 0.1.159)
     - Yoga
-  - RNLiveMarkdown/common (0.1.143):
+  - RNLiveMarkdown/common (0.1.159):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -3229,7 +3229,7 @@ SPEC CHECKSUMS:
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
   RNGestureHandler: 8781e2529230a1bc3ea8d75e5c3cd071b6c6aed7
   RNGoogleSignin: ccaa4a81582cf713eea562c5dd9dc1961a715fd0
-  RNLiveMarkdown: e44918843c2638692348f39eafc275698baf0444
+  RNLiveMarkdown: 2d97e3f4952c642cdd31bc05555e44dc5edcdba1
   RNLocalize: d4b8af4e442d4bcca54e68fc687a2129b4d71a81
   rnmapbox-maps: 460d6ff97ae49c7d5708c3212c6521697c36a0c4
   RNPermissions: 0b1429b55af59d1d08b75a8be2459f65a8ac3f28

package.json

@@ -68,7 +68,7 @@
   },
   "dependencies": {
     "@dotlottie/react-player": "^1.6.3",
-    "@expensify/react-native-live-markdown": "0.1.143",
+    "@expensify/react-native-live-markdown": "0.1.159",
     "@expo/metro-runtime": "~3.2.3",
     "@firebase/app": "^0.10.10",
     "@firebase/performance": "^0.6.8",

src/hooks/useMarkdownStyle.ts

@@ -75,6 +75,19 @@ function useMarkdownStyle(message: string | null = null, excludeStyles: Array<ke
                 color: theme.mentionText,
                 backgroundColor: theme.mentionBG,
             },
+            inlineImage: {
+                minWidth: variables.inlineImagePreviewMinSize,
+                minHeight: variables.inlineImagePreviewMinSize,
+                maxWidth: variables.inlineImagePreviewMaxSize,
+                maxHeight: variables.inlineImagePreviewMaxSize,
+                borderRadius: variables.componentBorderRadius,
+                marginTop: 4,
+            },
+            loadingIndicator: {
+                primaryColor: theme.spinner,
+                secondaryColor: `${theme.spinner}33`,
+            },
+            loadingIndicatorContainer: {},
         };
 
         if (excludeStyles.length) {

src/styles/variables.ts

@@ -248,6 +248,9 @@ export default {
 
     searchTypeColumnWidth: 52,
 
+    inlineImagePreviewMinSize: 64,
+    inlineImagePreviewMaxSize: 148,
+
     composerTooltipShiftHorizontal: 10,
     composerTooltipShiftVertical: -10,
     gbrTooltipShiftHorizontal: -20,