Support for image resize inside markdown

Author: paul1893

Examples/Demo/Demo/ImagesView.swift

@@ -7,10 +7,10 @@ struct ImagesView: View {
     Then wrap the link for the image in parentheses `()`.
 
     ```
-    ![This is an image](https://picsum.photos/id/91/400/300)
+    ![This is an image](https://picsum.photos/id/91/400/300){width=50px}
     ```
 
-    ![This is an image](https://picsum.photos/id/91/400/300)
+    ![This is an image](https://picsum.photos/id/91/400/300){width=50px}
 
     ― Photo by Jennifer Trovato
     """
@@ -45,6 +45,7 @@ struct ImagesView: View {
       }
       .markdownBlockStyle(\.image) { configuration in
         configuration.label
+          .scaledToFit()
           .clipShape(RoundedRectangle(cornerRadius: 8))
           .shadow(radius: 8, y: 8)
           .markdownMargin(top: .em(1.6), bottom: .em(1.6))

Package.swift

@@ -1,4 +1,4 @@
-// swift-tools-version:5.6
+// swift-tools-version:5.8
 
 import PackageDescription
 
@@ -29,6 +29,9 @@ let package = Package(
         .product(name: "cmark-gfm", package: "swift-cmark"),
         .product(name: "cmark-gfm-extensions", package: "swift-cmark"),
         .product(name: "NetworkImage", package: "NetworkImage"),
+      ],
+      swiftSettings: [
+        .enableUpcomingFeature("BareSlashRegexLiterals"),
       ]
     ),
     .testTarget(

Sources/MarkdownUI/Utility/InlineNode+RawImageData.swift

@@ -20,3 +20,41 @@ extension InlineNode {
     }
   }
 }
+
+extension InlineNode {
+    @available(iOS 16.0, macOS 13.0, tvOS 13.0, watchOS 6.0, *)
+    var size: MarkdownImageSize? {
+        switch self {
+            case .text(let input):
+                let pattern = /{(?:width\s*=\s*(\d+)px\s*)?(?:height\s*=\s*(\d+)px\s*)?(?:width\s*=\s*(\d+)px\s*)?(?:height\s*=\s*(\d+)px\s*)?\}/
+
+                if let match = input.wholeMatch(of: pattern) {
+                    let widthParts = [match.output.1, match.output.3].compactMap { $0 }
+                    let heightParts = [match.output.2, match.output.4].compactMap { $0 }
+
+                    let width = widthParts.compactMap { Float(String($0)) }.last
+                    let height = heightParts.compactMap { Float(String($0)) }.last
+
+                    return MarkdownImageSize(width: width.map(CGFloat.init), height: height.map(CGFloat.init))
+                }
+
+                return nil
+            default:
+                return nil
+        }
+    }
+}
+
+/// A value type representating an image size suffix.
+///
+/// Example: `![This is an image](https://foo/bar.png){width=50px}`
+///
+/// Suffix can be either
+/// - {width=50px}
+/// - {height=50px}
+/// - {width=50px height=100px}
+/// - {height=50px width=100px}
+struct MarkdownImageSize {
+    let width: CGFloat?
+    let height: CGFloat?
+}

Sources/MarkdownUI/Views/Inlines/ImageView.swift

@@ -6,9 +6,11 @@ struct ImageView: View {
   @Environment(\.imageBaseURL) private var baseURL
 
   private let data: RawImageData
+  private let size: MarkdownImageSize?
 
-  init(data: RawImageData) {
+  init(data: RawImageData, size: MarkdownImageSize? = nil) {
     self.data = data
+    self.size = size
   }
 
   var body: some View {
@@ -18,6 +20,7 @@ struct ImageView: View {
         content: .init(block: self.content)
       )
     )
+    .frame(size: size)
   }
 
   private var label: some View {
@@ -49,12 +52,16 @@ struct ImageView: View {
 }
 
 extension ImageView {
-  init?(_ inlines: [InlineNode]) {
-    guard inlines.count == 1, let data = inlines.first?.imageData else {
-      return nil
+    init?(_ inlines: [InlineNode]) {
+        if inlines.count == 2, #available(iOS 16.0, macOS 13.0, tvOS 16.0, *), let data = inlines.first?.imageData, let size = inlines.last?.size {
+            self.init(data: data, size: size)
+        }
+        else if inlines.count == 1, let data = inlines.first?.imageData {
+            self.init(data: data)
+        } else {
+            return nil
+        }
     }
-    self.init(data: data)
-  }
 }
 
 extension View {
@@ -88,3 +95,29 @@ private struct LinkModifier: ViewModifier {
     }
   }
 }
+
+extension View {
+    fileprivate func frame(size: MarkdownImageSize?) -> some View {
+        self.modifier(ImageViewFrameModifier(size: size))
+    }
+}
+
+private struct ImageViewFrameModifier: ViewModifier {
+    let size: MarkdownImageSize?
+
+    func body(content: Content) -> some View {
+        if let size {
+            if let width = size.width, let height = size.height {
+                content.frame(width: width, height: height)
+            } else if let width = size.width, size.height == nil {
+                content.frame(width: width)
+            } else if let height = size.height, size.width == nil {
+                content.frame(height: height)
+            } else {
+                content
+            }
+        } else {
+            content
+        }
+    }
+}