feat(mobile): implement native image preview with QuickLook on iOS

- Add ImagePreview helper class for displaying images using QuickLook
- Extend HelperModule with previewImage function to load and display images
- Update WebView bridge to support image preview from web content
- Implement MarkdownImage component with base64 image conversion
- Add cross-platform quickLookImage method for native image preview

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

apps/mobile/native/ios/Helper/Helper+Image.swift

@@ -0,0 +1,66 @@
+//
+//  Helper+Image.swift
+//  FollowNative
+//
+//  Created by Innei on 2025/2/7.
+//
+
+import ObjectiveC
+import QuickLook
+import UIKit
+
+class PreviewControllerClass: NSObject, QLPreviewControllerDataSource, QLPreviewControllerDelegate {
+  private var imageDataArray: [Data] = []
+
+  init(images: [Data]) {
+    self.imageDataArray = images
+    super.init()
+  }
+
+  func numberOfPreviewItems(in controller: QLPreviewController) -> Int {
+    return imageDataArray.count
+  }
+
+  func previewController(_ controller: QLPreviewController, previewItemAt index: Int)
+    -> QLPreviewItem
+  {
+    let tempURL = FileManager.default.temporaryDirectory.appendingPathComponent(
+      "preview_image_\(index).jpg")
+    try? imageDataArray[index].write(to: tempURL)
+    return tempURL as QLPreviewItem
+  }
+
+  private func cleanupTempFiles() {
+    for index in 0..<imageDataArray.count {
+      let tempURL = FileManager.default.temporaryDirectory.appendingPathComponent(
+        "preview_image_\(index).jpg")
+      try? FileManager.default.removeItem(at: tempURL)
+    }
+  }
+
+  func previewControllerDidDismiss(_ controller: QLPreviewController) {
+    cleanupTempFiles()
+  }
+ 
+}
+
+
+class ImagePreview: NSObject {
+  public static func quickLookImage(_ images: [Data]) {
+    guard let rootViewController = UIApplication.shared.keyWindow?.rootViewController else {
+      return
+    }
+
+    if images.count == 0 {
+      print("no preview data")
+      return
+    }
+    let previewController = QLPreviewController()
+    let previewControllerClass = PreviewControllerClass(images: images)
+    previewController.view.tintColor = Utils.accentColor
+    previewController.dataSource = previewControllerClass
+    previewController.delegate = previewControllerClass
+
+    rootViewController.present(previewController, animated: true)
+  }
+}

apps/mobile/native/ios/Helper/HelperModule.swift

@@ -18,7 +18,18 @@ public class HelperModule: Module {
         guard let rootVC = UIApplication.shared.windows.first?.rootViewController else { return }
         WebViewManager.presentModalWebView(url: url, from: rootVC)
       }
+    }
 
+    Function("previewImage") { (images: [String]) in
+      let imagesData: [Data] =
+        images.compactMap { image in
+          let url = URL(string: image)
+          let data = try? Data(contentsOf: url!)
+          return data
+        }
+      DispatchQueue.main.async {
+        ImagePreview.quickLookImage(imagesData)
+      }
     }
   }
 }

apps/mobile/native/ios/SharedWebView/Injected/at_start.js

@@ -11,7 +11,7 @@
     window.webkit.messageHandlers.message.postMessage?.(JSON.stringify(data))
   }
 
-  Object.assign(window.webkit, {
+  window.bridge = {
     measure: () => {
       send({
         type: "measure",
@@ -23,5 +23,11 @@
         payload: height,
       })
     },
-  })
+    previewImage: (base64) => {
+      send({
+        type: "previewImage",
+        payload: base64,
+      })
+    },
+  }
 })()

apps/mobile/native/ios/SharedWebView/SharedWebView+BridgeData.swift

@@ -18,3 +18,8 @@ struct SetContentHeightPayload: Hashable, Codable, BasePayload {
 struct BridgeDataBasePayload: Hashable, Codable {
   var type: String
 }
+
+struct PreviewImagePayload: Hashable, Codable, BasePayload {
+  var type: String
+  var payload: [String]
+}

apps/mobile/native/ios/SharedWebView/WebViewManager.swift

@@ -212,6 +212,16 @@ private class WebViewDelegate: NSObject, WKNavigationDelegate, WKScriptMessageHa
                 case "measure":
                     self.measureWebView(SharedWebViewModule.sharedWebView!)
 
+                case "previewImage":
+                    let data = try? JSONDecoder().decode(
+                        PreviewImagePayload.self, from: decode)
+
+                    guard let data = data else { return }
+                    DispatchQueue.main.async {
+                        ImagePreview.quickLookImage(
+                            data.payload.compactMap { Data(base64Encoded: $0) })
+                    }
+
                 default:
                     break
                 }

apps/mobile/src/lib/native/index.ios.ts

@@ -2,8 +2,12 @@ import { requireNativeModule } from "expo"
 
 interface NativeModule {
   openLink: (url: string) => void
+  previewImage: (images: Uint8Array[]) => void
 }
 const nativeModule = requireNativeModule("Helper") as NativeModule
 export const openLink = (url: string) => {
   nativeModule.openLink(url)
 }
+export const quickLookImage = (images: string[]) => {
+  nativeModule.previewImage(images)
+}

apps/mobile/src/lib/native/index.ts

@@ -3,3 +3,5 @@ import { openURL } from "expo-linking"
 export const openLink = (url: string) => {
   openURL(url)
 }
+
+export const quickLookImage = (_images: string[]) => {}

apps/mobile/src/screens/(headless)/debug.tsx

@@ -21,6 +21,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context"
 import { getDbPath } from "@/src/database"
 import { cookieKey, getCookie, sessionTokenKey, signOut } from "@/src/lib/auth"
 import { loading } from "@/src/lib/loading"
+import { quickLookImage } from "@/src/lib/native"
 import { toast } from "@/src/lib/toast"
 
 interface MenuSection {
@@ -107,6 +108,16 @@ export default function DebugPanel() {
             })
           },
         },
+        {
+          title: "Quick Look Image",
+          onPress: () => {
+            quickLookImage([
+              "https://picsum.photos/200/300",
+              "https://picsum.photos/200/300?grayscale",
+              "https://picsum.photos/200/300?blur",
+            ])
+          },
+        },
       ],
     },
 

apps/mobile/web-app/html-renderer/global.d.ts

@@ -5,12 +5,11 @@ import "../../../../packages/types/global"
 interface Bridge {
   measure: () => void
   setContentHeight: (height: number) => void
+  previewImage: (base64: string[]) => void
 }
 
 declare global {
-  interface Window {
-    webkit: Bridge
-  }
+  export const bridge: Bridge
 }
 
 export {}

apps/mobile/web-app/html-renderer/src/App.tsx

@@ -23,11 +23,11 @@ const entryAtom = atom<EntryModel | null>(null)
 Object.assign(window, {
   setEntry(entry: EntryModel) {
     store.set(entryAtom, entry)
-    window.webkit.measure()
+    bridge.measure()
   },
   reset() {
     store.set(entryAtom, null)
-    window.webkit.measure()
+    bridge.measure()
   },
 })