Render first level inline images (#193)

* Render inline images

* Update demo project with inline images

* Update documentation

Author: gonzalezreal

Examples/Demo/Demo/Assets.xcassets/smallDog.imageset/237-30x40.jpg

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "237-30x40.jpg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Examples/Demo/Demo/Assets.xcassets/smallDog.imageset/Contents.json

@@ -13,18 +13,23 @@ struct ImageProvidersView: View {
     """
 
   private let otherContent = """
-    You can use the built-in `AssetImageProvider` to load images from image assets.
+    You can use the built-in `AssetImageProvider` and `AssetInlineImageProvider`
+    to load images from image assets.
 
     ```swift
     Markdown {
       "![A dog](dog)"
+      "A ![dog](smallDog) within a line of text."
       "― Photo by André Spieker"
     }
     .markdownImageProvider(.asset)
+    .markdownInlineImageProvider(.asset)
     ```
 
     ![A dog](dog)
 
+    An image ![dog](smallDog) within a line of text.
+
     ― Photo by André Spieker
     """
 
@@ -36,6 +41,7 @@ struct ImageProvidersView: View {
       Section("Image Assets") {
         Markdown(self.otherContent)
           .markdownImageProvider(.asset)
+          .markdownInlineImageProvider(.asset)
       }
     }
   }

Examples/Demo/Demo/ImageProvidersView.swift

@@ -15,25 +15,31 @@ struct ImagesView: View {
     ― Photo by Jennifer Trovato
     """
 
-  private let assetContent = """
-    You can configure a `Markdown` view to load images from the asset catalog.
+  private let inlineImageContent = """
+    You can also insert images in a line of text, such as
+    ![](https://picsum.photos/id/237/50/25) or
+    ![](https://picsum.photos/id/433/50/25).
 
-    ```swift
-    Markdown {
-      "![This is an image](237-200x300)"
-    }
-    .markdownImageProvider(.asset)
+    ```
+    You can also insert images in a line of text, such as
+    ![](https://picsum.photos/id/237/50/25) or
+    ![](https://picsum.photos/id/433/50/25).
     ```
 
-    ![This is an image](dog)
+    Note that MarkdownUI **cannot** apply any styling to
+    inline images.
 
-    ― Photo by André Spieker
+    ― Photos by André Spieker and Thomas Lefebvre
     """
 
   var body: some View {
     DemoView {
       Markdown(self.content)
 
+      Section("Inline images") {
+        Markdown(self.inlineImageContent)
+      }
+
       Section("Customization Example") {
         Markdown(self.content)
       }

Examples/Demo/Demo/ImagesView.swift

@@ -82,19 +82,23 @@ extension Array where Element == Inline {
 }
 
 extension Inline {
-  var image: (source: String?, alt: String)? {
-    guard case let .image(source, children) = self else {
-      return nil
-    }
-    return (source, children.text)
+  struct Image: Hashable {
+    var source: String?
+    var alt: String
+    var destination: String?
   }
 
-  var imageLink: (source: String?, alt: String, destination: String?)? {
-    guard case let .link(destination, children) = self, children.count == 1,
-      let (source, alt) = children.first?.image
-    else {
+  var image: Image? {
+    switch self {
+    case let .image(source, children):
+      return .init(source: source, alt: children.text)
+    case let .link(destination, children) where children.count == 1:
+      guard case let .some(.image(source, children)) = children.first else {
+        return nil
+      }
+      return .init(source: source, alt: children.text, destination: destination)
+    default:
       return nil
     }
-    return (source, alt, destination)
   }
 }

Sources/MarkdownUI/Content/Inlines/Inline.swift

@@ -4,13 +4,6 @@ import Foundation
 ///
 /// You can use an image inline to embed an image in a paragraph.
 ///
-/// Note that even if you can compose images and text as part of the same inline content, the ``Markdown``
-/// view is currently limited to displaying image-only paragraphs and will ignore images composed with other
-/// text inlines in the same block.
-///
-/// In the following example, the ``Markdown`` view will not display the image in the last paragraph, as it
-/// is interleaved with other text inline.
-///
 /// ```swift
 /// Markdown {
 ///   Paragraph {
@@ -23,8 +16,9 @@ import Foundation
 ///     }
 ///   }
 ///   Paragraph {
-///     "The following image will be ignored:"
+///     "You can also insert images in a line of text, such as "
 ///     InlineImage(source: URL(string: "https://picsum.photos/id/237/100/150")!)
+///     "."
 ///   }
 /// }
 /// ```

Sources/MarkdownUI/Content/Inlines/InlineImage.swift

@@ -0,0 +1,32 @@
+import SwiftUI
+
+/// An inline image provider that loads images from resources located in an app or a module.
+public struct AssetInlineImageProvider: InlineImageProvider {
+  private let name: (URL) -> String
+  private let bundle: Bundle?
+
+  /// Creates an asset inline image provider.
+  /// - Parameters:
+  ///   - name: A closure that extracts the image resource name from the URL in the Markdown content.
+  ///   - bundle: The bundle where the image resources are located. Specify `nil` to search the app’s main bundle.
+  public init(
+    name: @escaping (URL) -> String = \.lastPathComponent,
+    bundle: Bundle? = nil
+  ) {
+    self.name = name
+    self.bundle = bundle
+  }
+
+  public func image(with url: URL, label: String) async throws -> Image {
+    .init(self.name(url), bundle: self.bundle, label: Text(label))
+  }
+}
+
+extension InlineImageProvider where Self == AssetInlineImageProvider {
+  /// An inline image provider that loads images from resources located in an app or a module.
+  ///
+  /// Use the `markdownInlineImageProvider(_:)` modifier to configure this image provider for a view hierarchy.
+  public static var asset: Self {
+    .init()
+  }
+}

Sources/MarkdownUI/Documentation.docc/Resources/[email protected]

@@ -0,0 +1,29 @@
+import SwiftUI
+
+/// The default inline image provider, which loads images from the network.
+public struct DefaultInlineImageProvider: InlineImageProvider {
+  private let urlSession: URLSession
+
+  /// Creates a default inline image provider.
+  /// - Parameter urlSession: An `URLSession` instance to load images.
+  public init(urlSession: URLSession = .shared) {
+    self.urlSession = urlSession
+  }
+
+  public func image(with url: URL, label: String) async throws -> Image {
+    try await Image(
+      platformImage: DefaultImageLoader.shared
+        .image(with: url, urlSession: self.urlSession)
+    )
+  }
+}
+
+extension InlineImageProvider where Self == DefaultInlineImageProvider {
+  /// The default inline image provider, which loads images from the network.
+  ///
+  /// Use the `markdownInlineImageProvider(_:)` modifier to configure
+  /// this image provider for a view hierarchy.
+  public static var `default`: Self {
+    .init()
+  }
+}