Handle relative size using containerRelativeFrame modifier

Author: paul1893

Examples/Demo/Demo/ImagesView.swift

@@ -5,14 +5,21 @@ struct ImagesView: View {
   private let content = """
     You can display an image by adding `!` and wrapping the alt text in `[ ]`.
     Then wrap the link for the image in parentheses `()`.
-
+    
     ```
-    ![This is an image](https://picsum.photos/id/91/400/300){width=50px}
+    ![This is a 50 px image](https://picsum.photos/id/91/400/300){width=50px}
     ```
-
-    ![This is an image](https://picsum.photos/id/91/400/300){width=50px}
-
+    
+    ![This is a 50px image](https://picsum.photos/id/91/400/300){width=50px}
+    
     ― Photo by Jennifer Trovato
+    
+     ```
+    ![This is a 50% image](https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_3x2.jpg){width=50%}
+    ```
+    
+    ![This is a 50% image](https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_3x2.jpg){width=50%}
+    
     """
 
   private let inlineImageContent = """

Sources/MarkdownUI/Utility/InlineNode+RawImageData.swift

@@ -25,49 +25,80 @@ extension InlineNode {
     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*)?\\}"
+                // Trying first to found a fixed pattern match
+                let fixedPattern = "\\{(?:width\\s*=\\s*(\\d+)px\\s*)?(?:height\\s*=\\s*(\\d+)px\\s*)?(?:width\\s*=\\s*(\\d+)px\\s*)?(?:height\\s*=\\s*(\\d+)px\\s*)?\\}"
 
-                guard let regex = try? NSRegularExpression(pattern: pattern, options: []) else {
-                    return nil
+                if let (width, height) = extract(regexPattern: fixedPattern, from: input) {
+                    return MarkdownImageSize(value: .fixed(width, height))
                 }
 
-                let range = NSRange(input.startIndex..<input.endIndex, in: input)
-                guard let match = regex.firstMatch(in: input, options: [], range: range) else {
-                    return nil
-                }
-
-                var width: CGFloat?
-                var height: CGFloat?
+                // Trying then to found a relative pattern match
+                let relativePattern = "\\{(?:width\\s*=\\s*(\\d+)%\\s*)?(?:height\\s*=\\s*(\\d+)%\\s*)?(?:width\\s*=\\s*(\\d+)%\\s*)?(?:height\\s*=\\s*(\\d+)%\\s*)?\\}"
 
-                if let widthRange = Range(match.range(at: 1), in: input), let widthValue = Int(input[widthRange]) {
-                    width = CGFloat(widthValue)
-                } else if let widthRange = Range(match.range(at: 3), in: input), let widthValue = Int(input[widthRange]) {
-                    width = CGFloat(widthValue)
+                if let (wRatio, hRatio) = extract(regexPattern: relativePattern, from: input) {
+                    return MarkdownImageSize(value: .relative((wRatio ?? 100)/100, (hRatio ?? 100)/100))
                 }
 
-                if let heightRange = Range(match.range(at: 2), in: input), let heightValue = Int(input[heightRange]) {
-                    height = CGFloat(heightValue)
-                } else if let heightRange = Range(match.range(at: 4), in: input), let heightValue = Int(input[heightRange]) {
-                    height = CGFloat(heightValue)
-                }
-
-                return MarkdownImageSize(width: width, height: height)
+                return nil
             default:
                 return nil
         }
     }
+
+    private func extract(
+        regexPattern pattern: String,
+        from input: String
+    ) -> (width: CGFloat?, height: CGFloat?)? {
+        guard let regex = try? NSRegularExpression(pattern: pattern, options: []) else {
+            return nil
+        }
+
+        let range = NSRange(input.startIndex..<input.endIndex, in: input)
+        guard let match = regex.firstMatch(in: input, options: [], range: range) else {
+            return nil
+        }
+
+        var width: CGFloat?
+        var height: CGFloat?
+
+        if let widthRange = Range(match.range(at: 1), in: input), let widthValue = Int(input[widthRange]) {
+            width = CGFloat(widthValue)
+        } else if let widthRange = Range(match.range(at: 3), in: input), let widthValue = Int(input[widthRange]) {
+            width = CGFloat(widthValue)
+        }
+
+        if let heightRange = Range(match.range(at: 2), in: input), let heightValue = Int(input[heightRange]) {
+            height = CGFloat(heightValue)
+        } else if let heightRange = Range(match.range(at: 4), in: input), let heightValue = Int(input[heightRange]) {
+            height = CGFloat(heightValue)
+        }
+
+        return (width, height)
+    }
 }
 
 /// A value type representating an image size suffix.
 ///
-/// Example: `![This is an image](https://foo/bar.png){width=50px}`
+/// Example:
+///  - `![This is an image](https://foo/bar.png){width=50px}`
+///  - `![This is an image](https://foo/bar.png){width=50%}`
 ///
-/// Suffix can be either
-/// - {width=50px}
-/// - {height=50px}
-/// - {width=50px height=100px}
-/// - {height=50px width=100px}
+/// Suffix can either be:
+/// - `{width=50px}`
+/// - `{height=50px}`
+/// - `{width=50px height=100px}`
+/// - `{height=50px width=100px}`
+/// - `{width=50%}`
+/// - `{height=50%}`
+/// - `{width=50% height=100%}`
+/// - `{height=50% width=100%}`
 struct MarkdownImageSize {
-    let width: CGFloat?
-    let height: CGFloat?
+    let value: Value
+
+    enum Value {
+        /// Represents a fixed value size:`.fixed(width, height)`
+        case fixed(CGFloat?, CGFloat?)
+        /// Represents a relative value size: `.relative(proportionalWidth, proportionalHeight)`
+        case relative(CGFloat, CGFloat)
+    }
 }

Sources/MarkdownUI/Views/Inlines/ImageView.swift

@@ -106,6 +106,21 @@ private struct ImageViewFrameModifier: ViewModifier {
     let size: MarkdownImageSize?
 
     func body(content: Content) -> some View {
-        content.frame(width: size?.width, height: size?.height)
+        if let size {
+            switch size.value {
+                case .fixed(let width, let height):
+                    content.frame(width: width, height: height)
+                case .relative(let wRatio, _):
+                    if #available(iOS 17.0, *) {
+                        content
+                        // .containerRelativeFrame(.vertical) { height, _ in height * hRatio }
+                        .containerRelativeFrame(.horizontal) { width, _ in width * wRatio }
+                    } else {
+                        content
+                    }
+            }
+        } else {
+            content
+        }
     }
 }