Merge pull request #187 from gonzalezreal/fix-default-image-provider

gonzalezreal · web-flow · commit 5e15c0d75e42 · 2023-02-05T08:47:16.000+01:00
diff --git a/Examples/Demo/Demo.xcodeproj/project.pbxproj b/Examples/Demo/Demo.xcodeproj/project.pbxproj
@@ -13,6 +13,7 @@
 		991E39882950A80C00A3012A /* CodeView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 991E39872950A80C00A3012A /* CodeView.swift */; };
 		991E398A2950B0DF00A3012A /* TablesView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 991E39892950B0DF00A3012A /* TablesView.swift */; };
 		994F5D87295821AF00B2BB51 /* SDWebImageSwiftUI in Frameworks */ = {isa = PBXBuildFile; productRef = 994F5D86295821AF00B2BB51 /* SDWebImageSwiftUI */; };
+		99939E2D298EC9B500E3337E /* LazyLoadingView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 99939E2C298EC9B500E3337E /* LazyLoadingView.swift */; };
 		99B59C9B29548FCF00390E9B /* Splash in Frameworks */ = {isa = PBXBuildFile; productRef = 99B59C9A29548FCF00390E9B /* Splash */; };
 		99B59C9E295490B300390E9B /* TextOutputFormat.swift in Sources */ = {isa = PBXBuildFile; fileRef = 99B59C9D295490B300390E9B /* TextOutputFormat.swift */; };
 		99B59CA02954990B00390E9B /* SplashCodeSyntaxHighlighter.swift in Sources */ = {isa = PBXBuildFile; fileRef = 99B59C9F2954990B00390E9B /* SplashCodeSyntaxHighlighter.swift */; };
@@ -36,6 +37,7 @@
 		991E39852950A73500A3012A /* QuotesView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = QuotesView.swift; sourceTree = "<group>"; };
 		991E39872950A80C00A3012A /* CodeView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CodeView.swift; sourceTree = "<group>"; };
 		991E39892950B0DF00A3012A /* TablesView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TablesView.swift; sourceTree = "<group>"; };
+		99939E2C298EC9B500E3337E /* LazyLoadingView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LazyLoadingView.swift; sourceTree = "<group>"; };
 		99B59C9D295490B300390E9B /* TextOutputFormat.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TextOutputFormat.swift; sourceTree = "<group>"; };
 		99B59C9F2954990B00390E9B /* SplashCodeSyntaxHighlighter.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SplashCodeSyntaxHighlighter.swift; sourceTree = "<group>"; };
 		99B59CA129549AB600390E9B /* CodeSyntaxHighlightView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CodeSyntaxHighlightView.swift; sourceTree = "<group>"; };
@@ -107,6 +109,7 @@
 				99DE2A3C294F256A0025E332 /* HeadingsView.swift */,
 				9902F2B129571D5D003A2DCC /* ImagesView.swift */,
 				9902F2B629575183003A2DCC /* ImageProvidersView.swift */,
+				99939E2C298EC9B500E3337E /* LazyLoadingView.swift */,
 				99DE2A3E294F33030025E332 /* ListsView.swift */,
 				991E39852950A73500A3012A /* QuotesView.swift */,
 				99DE2A38294E1B700025E332 /* RepositoryReadmeView.swift */,
@@ -228,6 +231,7 @@
 				99DE2A39294E1B700025E332 /* RepositoryReadmeView.swift in Sources */,
 				9902F2B229571D5D003A2DCC /* ImagesView.swift in Sources */,
 				9902F2B729575183003A2DCC /* ImageProvidersView.swift in Sources */,
+				99939E2D298EC9B500E3337E /* LazyLoadingView.swift in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
diff --git a/Examples/Demo/Demo/CodeSyntaxHighlightView.swift b/Examples/Demo/Demo/CodeSyntaxHighlightView.swift
@@ -57,7 +57,6 @@ struct CodeSyntaxHighlightView: View {
       Markdown(self.content)
         .markdownCodeSyntaxHighlighter(.splash(theme: self.theme))
     }
-    .navigationTitle("Syntax Highlighting")
   }
 
   private var theme: Splash.Theme {
diff --git a/Examples/Demo/Demo/CodeView.swift b/Examples/Demo/Demo/CodeView.swift
@@ -46,7 +46,6 @@ struct CodeView: View {
     DemoView {
       Markdown(self.content)
     }
-    .navigationTitle("Code")
   }
 }
 
diff --git a/Examples/Demo/Demo/ContentView.swift b/Examples/Demo/Demo/ContentView.swift
@@ -7,63 +7,92 @@ struct ContentView: View {
         Section("Formatting") {
           NavigationLink {
             HeadingsView()
+              .navigationTitle("Headings")
+              .navigationBarTitleDisplayMode(.inline)
           } label: {
             Label("Headings", systemImage: "textformat.size")
           }
           NavigationLink {
             ListsView()
+              .navigationTitle("Lists")
+              .navigationBarTitleDisplayMode(.inline)
           } label: {
             Label("Lists", systemImage: "list.bullet")
           }
           NavigationLink {
             TextStylesView()
+              .navigationTitle("Text Styles")
+              .navigationBarTitleDisplayMode(.inline)
           } label: {
             Label("Text Styles", systemImage: "textformat.abc")
           }
           NavigationLink {
             QuotesView()
+              .navigationTitle("Quotes")
+              .navigationBarTitleDisplayMode(.inline)
           } label: {
             Label("Quotes", systemImage: "text.quote")
           }
           NavigationLink {
             CodeView()
+              .navigationTitle("Code")
+              .navigationBarTitleDisplayMode(.inline)
           } label: {
             Label("Code", systemImage: "curlybraces")
           }
           NavigationLink {
             ImagesView()
+              .navigationTitle("Images")
+              .navigationBarTitleDisplayMode(.inline)
           } label: {
             Label("Images", systemImage: "photo")
           }
           NavigationLink {
             TablesView()
+              .navigationTitle("Tables")
+              .navigationBarTitleDisplayMode(.inline)
           } label: {
             Label("Tables", systemImage: "tablecells")
           }
         }
         Section("Extensibility") {
           NavigationLink {
             CodeSyntaxHighlightView()
+              .navigationTitle("Syntax Highlighting")
+              .navigationBarTitleDisplayMode(.inline)
           } label: {
             Label("Syntax Highlighting", systemImage: "circle.grid.cross.left.filled")
           }
           NavigationLink {
             ImageProvidersView()
+              .navigationTitle("Image Providers")
+              .navigationBarTitleDisplayMode(.inline)
           } label: {
             Label("Image Providers", systemImage: "powerplug")
           }
         }
         Section("Other") {
           NavigationLink {
             DingusView()
+              .navigationTitle("Dingus")
+              .navigationBarTitleDisplayMode(.inline)
           } label: {
             Label("Dingus", systemImage: "character.cursor.ibeam")
           }
           NavigationLink {
             RepositoryReadmeView()
+              .navigationTitle("Repository README")
+              .navigationBarTitleDisplayMode(.inline)
           } label: {
             Label("Repository README", systemImage: "doc.text")
           }
+          NavigationLink {
+            LazyLoadingView()
+              .navigationTitle("Lazy Loading")
+              .navigationBarTitleDisplayMode(.inline)
+          } label: {
+            Label("Lazy Loading", systemImage: "scroll")
+          }
         }
       }
       .navigationTitle("MarkdownUI")
diff --git a/Examples/Demo/Demo/DingusView.swift b/Examples/Demo/Demo/DingusView.swift
@@ -26,7 +26,6 @@ struct DingusView: View {
         Markdown(self.markdown)
       }
     }
-    .navigationTitle("Dingus")
   }
 }
 
diff --git a/Examples/Demo/Demo/HeadingsView.swift b/Examples/Demo/Demo/HeadingsView.swift
@@ -35,7 +35,6 @@ struct HeadingsView: View {
           }
       }
     }
-    .navigationTitle("Headings")
   }
 }
 
diff --git a/Examples/Demo/Demo/ImagesView.swift b/Examples/Demo/Demo/ImagesView.swift
@@ -44,7 +44,6 @@ struct ImagesView: View {
           .markdownMargin(top: .em(1.6), bottom: .em(1.6))
       }
     }
-    .navigationTitle("Images")
   }
 }
 
diff --git a/Examples/Demo/Demo/LazyLoadingView.swift b/Examples/Demo/Demo/LazyLoadingView.swift
@@ -0,0 +1,98 @@
+import MarkdownUI
+import SwiftUI
+
+struct LazyLoadingView: View {
+  struct Item: Identifiable {
+    let id = UUID()
+    let content = MarkdownContent {
+      Heading(.level2) {
+        "Try MarkdownUI"
+      }
+      Paragraph {
+        Strong("MarkdownUI")
+        " is a native Markdown renderer for SwiftUI"
+        " compatible with the "
+        InlineLink(
+          "GitHub Flavored Markdown Spec",
+          destination: URL(string: "https://github.github.com/gfm/")!
+        )
+        "."
+      }
+      Paragraph {
+        InlineImage(source: .randomImage())
+      }
+    }
+  }
+
+  private let about = """
+    This screen demonstrates how you can use the `Markdown` view inside a `LazyVStack` and
+    avoid re-layouts when scrolling up content. By using a custom `ImageProvider` that
+    shows a placeholder while the image is loading and fixing the height of the images,
+    you can avoid jumps and other weird effects caused by re-layouts when scrolling up.
+
+    > Note that this applies only when you plan to show Markdown content with images inside
+    > a `LazyVStack` or a `List`.
+    """
+
+  let items = Array(repeating: (), count: 100).map(Item.init)
+
+  var body: some View {
+    ScrollView {
+      LazyVStack {
+        DisclosureGroup("About this demo") {
+          Markdown {
+            self.about
+          }
+          .frame(maxWidth: .infinity, alignment: .leading)
+        }
+        ForEach(self.items) { item in
+          Markdown(item.content)
+            .padding()
+        }
+      }
+      .padding()
+    }
+    .markdownTheme(.gitHub)
+    // Comment this line to see the effect of having re-layouts while scrolling up.
+    .markdownImageProvider(.lazyImage(aspectRatio: 4 / 3))
+  }
+}
+
+struct LazyLoadingView_Previews: PreviewProvider {
+  static var previews: some View {
+    LazyLoadingView()
+  }
+}
+
+struct LazyImageProvider: ImageProvider {
+  let aspectRatio: CGFloat
+
+  func makeImage(url: URL?) -> some View {
+    AsyncImage(url: url) { phase in
+      switch phase {
+      case .empty, .failure:
+        Color(.secondarySystemBackground)
+      case .success(let image):
+        image.resizable().scaledToFill()
+      @unknown default:
+        Color.clear
+      }
+    }
+    .aspectRatio(self.aspectRatio, contentMode: .fill)
+  }
+}
+
+extension ImageProvider where Self == LazyImageProvider {
+  static func lazyImage(aspectRatio: CGFloat) -> Self {
+    LazyImageProvider(aspectRatio: aspectRatio)
+  }
+}
+
+extension URL {
+  static func randomImage() -> URL {
+    let id: String = [
+      "11", "23", "26", "31", "34", "58", "63", "91", "103", "119",
+    ].randomElement()!
+    return URL(string: "https://picsum.photos/id/\(id)/400/300")!
+  }
+}
diff --git a/Examples/Demo/Demo/ListsView.swift b/Examples/Demo/Demo/ListsView.swift
@@ -88,7 +88,6 @@ struct ListsView: View {
           .relativeFrame(minWidth: .em(1.5), alignment: .trailing)
       }
     }
-    .navigationTitle("Lists")
   }
 }
 
diff --git a/Examples/Demo/Demo/QuotesView.swift b/Examples/Demo/Demo/QuotesView.swift
@@ -34,7 +34,6 @@ struct QuotesView: View {
           .background(Color.teal.opacity(0.5))
       }
     }
-    .navigationTitle("Quotes")
   }
 }
 
diff --git a/Examples/Demo/Demo/RepositoryReadmeView.swift b/Examples/Demo/Demo/RepositoryReadmeView.swift
@@ -32,7 +32,6 @@ struct RepositoryReadmeView: View {
       .autocapitalization(.none)
       .disableAutocorrection(true)
     }
-    .navigationTitle("Repository README")
   }
 }
 
diff --git a/Examples/Demo/Demo/TablesView.swift b/Examples/Demo/Demo/TablesView.swift
@@ -44,7 +44,6 @@ struct TablesView: View {
     DemoView {
       Markdown(self.content)
     }
-    .navigationTitle("Tables")
   }
 }
 
diff --git a/Examples/Demo/Demo/TextStylesView.swift b/Examples/Demo/Demo/TextStylesView.swift
@@ -63,7 +63,6 @@ struct TextStylesView: View {
         UnderlineStyle(.init(pattern: .dot))
       }
     }
-    .navigationTitle("Text Styles")
   }
 }
 
diff --git a/Sources/MarkdownUI/Extensions/DefaultImageProvider.swift b/Sources/MarkdownUI/Extensions/DefaultImageProvider.swift
diff --git a/Sources/MarkdownUI/Extensions/DefaultImageView/DefaultImageLoader.swift b/Sources/MarkdownUI/Extensions/DefaultImageView/DefaultImageLoader.swift
diff --git a/Sources/MarkdownUI/Extensions/DefaultImageView/DefaultImageView.swift b/Sources/MarkdownUI/Extensions/DefaultImageView/DefaultImageView.swift
diff --git a/Sources/MarkdownUI/Extensions/DefaultImageView/DefaultImageViewModel.swift b/Sources/MarkdownUI/Extensions/DefaultImageView/DefaultImageViewModel.swift

Original file line number	Diff line number	Diff line change
`@@ -57,7 +57,6 @@ struct CodeSyntaxHighlightView: View {`
`57`	`57`	`Markdown(self.content)`
`58`	`58`	`.markdownCodeSyntaxHighlighter(.splash(theme: self.theme))`
`59`	`59`	`}`
`60`		`- .navigationTitle("Syntax Highlighting")`
`61`	`60`	`}`
`62`	`61`
`63`	`62`	`private var theme: Splash.Theme {`
Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,6 @@ struct CodeView: View {`
`46`	`46`	`DemoView {`
`47`	`47`	`Markdown(self.content)`
`48`	`48`	`}`
`49`		`- .navigationTitle("Code")`
`50`	`49`	`}`
`51`	`50`	`}`
`52`	`51`
Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,6 @@ struct DingusView: View {`
`26`	`26`	`Markdown(self.markdown)`
`27`	`27`	`}`
`28`	`28`	`}`
`29`		`- .navigationTitle("Dingus")`
`30`	`29`	`}`
`31`	`30`	`}`
`32`	`31`
Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,6 @@ struct HeadingsView: View {`
`35`	`35`	`}`
`36`	`36`	`}`
`37`	`37`	`}`
`38`		`- .navigationTitle("Headings")`
`39`	`38`	`}`
`40`	`39`	`}`
`41`	`40`
Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,6 @@ struct ImagesView: View {`
`44`	`44`	`.markdownMargin(top: .em(1.6), bottom: .em(1.6))`
`45`	`45`	`}`
`46`	`46`	`}`
`47`		`- .navigationTitle("Images")`
`48`	`47`	`}`
`49`	`48`	`}`
`50`	`49`
Original file line number	Diff line number	Diff line change
`@@ -88,7 +88,6 @@ struct ListsView: View {`
`88`	`88`	`.relativeFrame(minWidth: .em(1.5), alignment: .trailing)`
`89`	`89`	`}`
`90`	`90`	`}`
`91`		`- .navigationTitle("Lists")`
`92`	`91`	`}`
`93`	`92`	`}`
`94`	`93`
Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,6 @@ struct QuotesView: View {`
`34`	`34`	`.background(Color.teal.opacity(0.5))`
`35`	`35`	`}`
`36`	`36`	`}`
`37`		`- .navigationTitle("Quotes")`
`38`	`37`	`}`
`39`	`38`	`}`
`40`	`39`