How do I display a MathJax String in a SwiftUI ScrollView? - swift

Question

I receive a MathJax String from an API response which needs to be shown in a WKWebView in SwiftUI. Here's a sample String
"<img alt=\"\" height=\"2305\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/infinitestudent-images\/ckeditor_assets\/pictures\/37732\/content_types_of_combustion.jpg\" width=\"800\" \/>"
Here's the code that I've tried:
import SwiftUI
import WebKit
struct Model: Codable {
var mathjaxBody: String?
var answer: Answer
}
struct MathJaxView: View {
let model: Model
var body: some View {
ScrollView {
AnswerSectionView(answer: model.answer)
HTMLView(htmlString: model.mathjaxBody)
.frame(minWidth: 100, maxWidth: .infinity, minHeight: 100, maxHeight: .infinity)
}
}
}
struct HTMLView: UIViewRepresentable {
var htmlString: String?
func makeUIView(context: Context) -> WKWebView {
WKWebView(frame: .zero)
}
func updateUIView(_ uiView: WKWebView, context: Context) {
guard let string = htmlString else { return }
uiView.loadHTMLString(string, baseURL: nil)
}
}
It need to be in a ScrollView with a few different details on top of it, which is displayed properly in the ScrollView. But, the HTMLView doesn't show up. I tried adding .frame(minWidth: 100, maxWidth: .infinity, minHeight: 100, maxHeight: .infinity) But still doesn't show up.

Answer 1

The solution was to simply calculate the required height from evaluateJavaScript("document.body.scrollHeight") method and apply it to the WebView component with a few other methods.
struct WebView: UIViewRepresentable {
var htmlString: String?
#EnvironmentObject var viewModel: WebViewModel
func makeUIView(context: Context) -> WKWebView {
let webView = WKWebView(frame: .zero)
webView.backgroundColor = .clear
webView.navigationDelegate = context.coordinator
webView.scrollView.isScrollEnabled = false
return webView
}
func updateUIView(_ uiView: WKWebView, context: Context) {
guard let string = htmlString else { return }
uiView.loadHTMLString(string, baseURL: nil)
}
class Coordinator: NSObject, WKNavigationDelegate {
private var viewModel: WebViewModel
init(viewModel: WebViewModel) {
self.viewModel = viewModel
}
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
webView.evaluateJavaScript("document.readyState") { (complete, error) in
if complete != nil {
webView.evaluateJavaScript("document.body.scrollHeight") { (height, error) in
if let height = height as? CGFloat, self.viewModel.contentHeight == 0 {
self.viewModel.contentHeight = height * 0.4
}
}
}
}
}
}
func makeCoordinator() -> Coordinator {
Coordinator(viewModel: viewModel)
}
}
class WebViewModel: ObservableObject {
#Published var contentHeight: CGFloat = 0
}
struct MathJaxView: View {
let model: Model
var body: some View {
ScrollView {
AnswerSectionView(answer: model.answer)
WebView(htmlString: model.mathjaxBody)
.environmentObject(webViewModel)
.frame(height: webViewModel.contentHeight)
.frame(maxWidth: .infinity)
.fixedSize(horizontal: false, vertical: true)
}
}
}