Skip to content

Commit 6482904

Browse files
gonzalezrealgonzalezreal
committed
Add a sample that shows how to use Markdown with images inside a LazyVStack
1 parent 39792ad commit 6482904

13 files changed

+131
-10
lines changed

‎Examples/Demo/Demo.xcodeproj/project.pbxproj‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
991E39882950A80C00A3012A /* CodeView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 991E39872950A80C00A3012A /* CodeView.swift */; };
1414
991E398A2950B0DF00A3012A /* TablesView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 991E39892950B0DF00A3012A /* TablesView.swift */; };
1515
994F5D87295821AF00B2BB51 /* SDWebImageSwiftUI in Frameworks */ = {isa = PBXBuildFile; productRef = 994F5D86295821AF00B2BB51 /* SDWebImageSwiftUI */; };
16+
99939E2D298EC9B500E3337E /* LazyLoadingView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 99939E2C298EC9B500E3337E /* LazyLoadingView.swift */; };
1617
99B59C9B29548FCF00390E9B /* Splash in Frameworks */ = {isa = PBXBuildFile; productRef = 99B59C9A29548FCF00390E9B /* Splash */; };
1718
99B59C9E295490B300390E9B /* TextOutputFormat.swift in Sources */ = {isa = PBXBuildFile; fileRef = 99B59C9D295490B300390E9B /* TextOutputFormat.swift */; };
1819
99B59CA02954990B00390E9B /* SplashCodeSyntaxHighlighter.swift in Sources */ = {isa = PBXBuildFile; fileRef = 99B59C9F2954990B00390E9B /* SplashCodeSyntaxHighlighter.swift */; };
@@ -36,6 +37,7 @@
3637
991E39852950A73500A3012A /* QuotesView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = QuotesView.swift; sourceTree = "<group>"; };
3738
991E39872950A80C00A3012A /* CodeView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CodeView.swift; sourceTree = "<group>"; };
3839
991E39892950B0DF00A3012A /* TablesView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TablesView.swift; sourceTree = "<group>"; };
40+
99939E2C298EC9B500E3337E /* LazyLoadingView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LazyLoadingView.swift; sourceTree = "<group>"; };
3941
99B59C9D295490B300390E9B /* TextOutputFormat.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TextOutputFormat.swift; sourceTree = "<group>"; };
4042
99B59C9F2954990B00390E9B /* SplashCodeSyntaxHighlighter.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SplashCodeSyntaxHighlighter.swift; sourceTree = "<group>"; };
4143
99B59CA129549AB600390E9B /* CodeSyntaxHighlightView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CodeSyntaxHighlightView.swift; sourceTree = "<group>"; };
@@ -107,6 +109,7 @@
107109
99DE2A3C294F256A0025E332 /* HeadingsView.swift */,
108110
9902F2B129571D5D003A2DCC /* ImagesView.swift */,
109111
9902F2B629575183003A2DCC /* ImageProvidersView.swift */,
112+
99939E2C298EC9B500E3337E /* LazyLoadingView.swift */,
110113
99DE2A3E294F33030025E332 /* ListsView.swift */,
111114
991E39852950A73500A3012A /* QuotesView.swift */,
112115
99DE2A38294E1B700025E332 /* RepositoryReadmeView.swift */,
@@ -228,6 +231,7 @@
228231
99DE2A39294E1B700025E332 /* RepositoryReadmeView.swift in Sources */,
229232
9902F2B229571D5D003A2DCC /* ImagesView.swift in Sources */,
230233
9902F2B729575183003A2DCC /* ImageProvidersView.swift in Sources */,
234+
99939E2D298EC9B500E3337E /* LazyLoadingView.swift in Sources */,
231235
);
232236
runOnlyForDeploymentPostprocessing = 0;
233237
};

‎Examples/Demo/Demo/CodeSyntaxHighlightView.swift‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,6 @@ struct CodeSyntaxHighlightView: View {
5757
Markdown(self.content)
5858
.markdownCodeSyntaxHighlighter(.splash(theme: self.theme))
5959
}
60-
.navigationTitle("Syntax Highlighting")
6160
}
6261

6362
private var theme: Splash.Theme {

‎Examples/Demo/Demo/CodeView.swift‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,6 @@ struct CodeView: View {
4646
DemoView {
4747
Markdown(self.content)
4848
}
49-
.navigationTitle("Code")
5049
}
5150
}
5251

‎Examples/Demo/Demo/ContentView.swift‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,63 +7,92 @@ struct ContentView: View {
77
Section("Formatting") {
88
NavigationLink {
99
HeadingsView()
10+
.navigationTitle("Headings")
11+
.navigationBarTitleDisplayMode(.inline)
1012
} label: {
1113
Label("Headings", systemImage: "textformat.size")
1214
}
1315
NavigationLink {
1416
ListsView()
17+
.navigationTitle("Lists")
18+
.navigationBarTitleDisplayMode(.inline)
1519
} label: {
1620
Label("Lists", systemImage: "list.bullet")
1721
}
1822
NavigationLink {
1923
TextStylesView()
24+
.navigationTitle("Text Styles")
25+
.navigationBarTitleDisplayMode(.inline)
2026
} label: {
2127
Label("Text Styles", systemImage: "textformat.abc")
2228
}
2329
NavigationLink {
2430
QuotesView()
31+
.navigationTitle("Quotes")
32+
.navigationBarTitleDisplayMode(.inline)
2533
} label: {
2634
Label("Quotes", systemImage: "text.quote")
2735
}
2836
NavigationLink {
2937
CodeView()
38+
.navigationTitle("Code")
39+
.navigationBarTitleDisplayMode(.inline)
3040
} label: {
3141
Label("Code", systemImage: "curlybraces")
3242
}
3343
NavigationLink {
3444
ImagesView()
45+
.navigationTitle("Images")
46+
.navigationBarTitleDisplayMode(.inline)
3547
} label: {
3648
Label("Images", systemImage: "photo")
3749
}
3850
NavigationLink {
3951
TablesView()
52+
.navigationTitle("Tables")
53+
.navigationBarTitleDisplayMode(.inline)
4054
} label: {
4155
Label("Tables", systemImage: "tablecells")
4256
}
4357
}
4458
Section("Extensibility") {
4559
NavigationLink {
4660
CodeSyntaxHighlightView()
61+
.navigationTitle("Syntax Highlighting")
62+
.navigationBarTitleDisplayMode(.inline)
4763
} label: {
4864
Label("Syntax Highlighting", systemImage: "circle.grid.cross.left.filled")
4965
}
5066
NavigationLink {
5167
ImageProvidersView()
68+
.navigationTitle("Image Providers")
69+
.navigationBarTitleDisplayMode(.inline)
5270
} label: {
5371
Label("Image Providers", systemImage: "powerplug")
5472
}
5573
}
5674
Section("Other") {
5775
NavigationLink {
5876
DingusView()
77+
.navigationTitle("Dingus")
78+
.navigationBarTitleDisplayMode(.inline)
5979
} label: {
6080
Label("Dingus", systemImage: "character.cursor.ibeam")
6181
}
6282
NavigationLink {
6383
RepositoryReadmeView()
84+
.navigationTitle("Repository README")
85+
.navigationBarTitleDisplayMode(.inline)
6486
} label: {
6587
Label("Repository README", systemImage: "doc.text")
6688
}
89+
NavigationLink {
90+
LazyLoadingView()
91+
.navigationTitle("Lazy Loading")
92+
.navigationBarTitleDisplayMode(.inline)
93+
} label: {
94+
Label("Lazy Loading", systemImage: "scroll")
95+
}
6796
}
6897
}
6998
.navigationTitle("MarkdownUI")

‎Examples/Demo/Demo/DingusView.swift‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ struct DingusView: View {
2626
Markdown(self.markdown)
2727
}
2828
}
29-
.navigationTitle("Dingus")
3029
}
3130
}
3231

‎Examples/Demo/Demo/HeadingsView.swift‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ struct HeadingsView: View {
3535
}
3636
}
3737
}
38-
.navigationTitle("Headings")
3938
}
4039
}
4140

‎Examples/Demo/Demo/ImagesView.swift‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ struct ImagesView: View {
4444
.markdownMargin(top: .em(1.6), bottom: .em(1.6))
4545
}
4646
}
47-
.navigationTitle("Images")
4847
}
4948
}
5049

‎Examples/Demo/Demo/LazyLoadingView.swift‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import MarkdownUI
2+
import SwiftUI
3+
4+
struct LazyLoadingView: View {
5+
struct Item: Identifiable {
6+
let id = UUID()
7+
let content = MarkdownContent {
8+
Heading(.level2) {
9+
"Try MarkdownUI"
10+
}
11+
Paragraph {
12+
Strong("MarkdownUI")
13+
" is a native Markdown renderer for SwiftUI"
14+
" compatible with the "
15+
InlineLink(
16+
"GitHub Flavored Markdown Spec",
17+
destination: URL(string: "https://github.github.com/gfm/")!
18+
)
19+
"."
20+
}
21+
Paragraph {
22+
InlineImage(source: .randomImage())
23+
}
24+
}
25+
}
26+
27+
private let about = """
28+
This screen demonstrates how you can use the `Markdown` view inside a `LazyVStack` and
29+
avoid re-layouts when scrolling up content. By using a custom `ImageProvider` that
30+
shows a placeholder while the image is loading and fixing the height of the images,
31+
you can avoid jumps and other weird effects caused by re-layouts when scrolling up.
32+
33+
> Note that this applies only when you plan to show Markdown content with images inside
34+
> a `LazyVStack` or a `List`.
35+
"""
36+
37+
let items = Array(repeating: (), count: 100).map(Item.init)
38+
39+
var body: some View {
40+
ScrollView {
41+
LazyVStack {
42+
DisclosureGroup("About this demo") {
43+
Markdown {
44+
self.about
45+
}
46+
.frame(maxWidth: .infinity, alignment: .leading)
47+
}
48+
ForEach(self.items) { item in
49+
Markdown(item.content)
50+
.padding()
51+
}
52+
}
53+
.padding()
54+
}
55+
.markdownTheme(.gitHub)
56+
// Comment this line to see the effect of having re-layouts while scrolling up.
57+
.markdownImageProvider(.lazyImage(aspectRatio: 4 / 3))
58+
}
59+
}
60+
61+
struct LazyLoadingView_Previews: PreviewProvider {
62+
static var previews: some View {
63+
LazyLoadingView()
64+
}
65+
}
66+
67+
struct LazyImageProvider: ImageProvider {
68+
let aspectRatio: CGFloat
69+
70+
func makeImage(url: URL?) -> some View {
71+
AsyncImage(url: url) { phase in
72+
switch phase {
73+
case .empty, .failure:
74+
Color(.secondarySystemBackground)
75+
case .success(let image):
76+
image.resizable().scaledToFill()
77+
@unknown default:
78+
Color.clear
79+
}
80+
}
81+
.aspectRatio(self.aspectRatio, contentMode: .fill)
82+
}
83+
}
84+
85+
extension ImageProvider where Self == LazyImageProvider {
86+
static func lazyImage(aspectRatio: CGFloat) -> Self {
87+
LazyImageProvider(aspectRatio: aspectRatio)
88+
}
89+
}
90+
91+
extension URL {
92+
static func randomImage() -> URL {
93+
let id: String = [
94+
"11", "23", "26", "31", "34", "58", "63", "91", "103", "119",
95+
].randomElement()!
96+
return URL(string: "https://picsum.photos/id/\(id)/400/300")!
97+
}
98+
}

‎Examples/Demo/Demo/ListsView.swift‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,6 @@ struct ListsView: View {
8888
.relativeFrame(minWidth: .em(1.5), alignment: .trailing)
8989
}
9090
}
91-
.navigationTitle("Lists")
9291
}
9392
}
9493

‎Examples/Demo/Demo/QuotesView.swift‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ struct QuotesView: View {
3434
.background(Color.teal.opacity(0.5))
3535
}
3636
}
37-
.navigationTitle("Quotes")
3837
}
3938
}
4039

0 commit comments

Comments
 (0)