Thank you so much! You should see it now – people are losing their minds!
\n") +} + +@available(iOS 17, *) +#Preview("Gutenberg") { + makeView(comment: """ +Thank you for putting this together, I’m in support of all proposed improvements, we know that the current experience is less-than-ideal.
Get rid of This. We’re moving everything to That anyway, and this is our last remaining This instance in Jetpack. It’s not performing great, so let’s remove it.
@tester‘s most recent review found it failed to provide a valid response in more than half of interactions.
+ """) +} + +@MainActor +private func makeView(comment: String) -> UIView { + let webView = CommentWebView(comment: comment) + webView.layer.borderColor = UIColor.opaqueSeparator.withAlphaComponent(0.66).cgColor + webView.layer.borderWidth = 0.5 + + let container = UIView() + container.addSubview(webView) + webView.pinEdges(insets: UIEdgeInsets(.all, 16)) + + return container +} diff --git a/Modules/Sources/WordPressReader/Comments/Views/WebCommentContentRenderer.swift b/Modules/Sources/WordPressReader/Comments/Views/WebCommentContentRenderer.swift new file mode 100644 index 000000000000..d0820ec6f876 --- /dev/null +++ b/Modules/Sources/WordPressReader/Comments/Views/WebCommentContentRenderer.swift @@ -0,0 +1,158 @@ +import WebKit +import WordPressShared +import WordPressUI + +/// Renders the comment body with a web view. Provides the best visual experience but has the highest performance cost. +@MainActor +public final class WebCommentContentRenderer: NSObject, CommentContentRenderer { + // MARK: Properties + + public weak var delegate: CommentContentRendererDelegate? + + private let webView = WKWebView(frame: .zero, configuration: { + let configuration = WKWebViewConfiguration() + configuration.allowsInlineMediaPlayback = true + configuration.defaultWebpagePreferences.allowsContentJavaScript = false + return configuration + }()) + + private var comment: String? + + /// It can't be changed at the moment, but this capability was included from the + /// start, and this implementation continues supporting it. + private var displaySetting = ReaderDisplaySettings.standard + + /// - warning: This has to be configured _before_ you render. + public var tintColor: UIColor { + get { webView.tintColor } + set { + webView.tintColor = newValue + cachedHead = nil + } + } + + private var cachedHead: String? + + // MARK: Methods + + public required override init() { + super.init() + + if #available(iOS 16.4, *) { + webView.isInspectable = true + } + webView.backgroundColor = .clear + webView.isOpaque = false // gets rid of the white flash upon content load in dark mode. + webView.translatesAutoresizingMaskIntoConstraints = false + webView.navigationDelegate = self + webView.scrollView.bounces = false + webView.scrollView.showsVerticalScrollIndicator = false + webView.scrollView.backgroundColor = .clear + } + + public func render(comment: String) -> UIView { + guard self.comment != comment else { + return webView // Already rendering this comment + } + self.comment = comment + + // - important: `wordPressSharedBundle` contains custom fonts + webView.loadHTMLString(formattedHTMLString(for: comment), baseURL: Bundle.wordPressSharedBundle.bundleURL) + return webView + } +} + +// MARK: - WKNavigationDelegate + +extension WebCommentContentRenderer: WKNavigationDelegate { + public func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { + // Wait until the HTML document finished loading. + // This also waits for all of resources within the HTML (images, video thumbnail images) to be fully loaded. + webView.evaluateJavaScript("document.readyState") { complete, _ in + guard complete != nil else { + return + } + + // To capture the content height, the methods to use is either `document.body.scrollHeight` or `document.documentElement.scrollHeight`. + // `document.body` does not capture margins on tag, so we'll use `document.documentElement` instead. + webView.evaluateJavaScript("document.documentElement.scrollHeight") { [weak self] height, _ in + guard let self, let height = height as? CGFloat else { + return + } + + /// The display setting's custom size is applied through the HTML's initial-scale property + /// in the meta tag. The `scrollHeight` value seems to return the height as if it's at 1.0 scale, + /// so we'll need to add the custom scale into account. + let actualHeight = round(height * self.displaySetting.size.scale) + self.delegate?.renderer(self, asyncRenderCompletedWithHeight: actualHeight) + } + } + } + + public func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction) async -> WKNavigationActionPolicy { + switch navigationAction.navigationType { + case .other: + // allow local file requests. + return .allow + default: + guard let destinationURL = navigationAction.request.url else { + return .allow + } + self.delegate?.renderer(self, interactedWithURL: destinationURL) + return .cancel + } + } +} + +private extension WebCommentContentRenderer { + /// Returns a formatted HTML string by loading the template for rich comment. + /// + /// The method will try to return cached content if possible, by detecting whether the content matches the previous content. + /// If it's different (e.g. due to edits), it will reprocess the HTML string. + /// + /// - Parameter content: The content value from the `Comment` object. + /// - Returns: Formatted HTML string to be displayed in the web view. + /// + func formattedHTMLString(for comment: String) -> String { + // remove empty HTML elements from the `content`, as the content often contains empty paragraph elements which adds unnecessary padding/margin. + // `rawContent` does not have this problem, but it's not used because `rawContent` gets rid of links ( tags) for mentions. + let comment = comment + .replacingOccurrences(of: Self.emptyElementRegexPattern, with: "", options: [.regularExpression]) + .trimmingCharacters(in: .whitespacesAndNewlines) + return """ + + \(makeHead()) + + \(comment) + + + """ + } + + static let emptyElementRegexPattern = "<[a-z]+>()+<\\/[a-z]+>" + + /// Returns HTML page with the preconfigured styles and scripts. + private func makeHead() -> String { + if let cachedHead { + return cachedHead + } + let head = actuallyMakeHead() + cachedHead = head + return head + } + + private func actuallyMakeHead() -> String { + let meta = "width=device-width,initial-scale=\(displaySetting.size.scale),maximum-scale=\(displaySetting.size.scale),user-scalable=no,shrink-to-fit=no" + let styles = displaySetting.makeStyles(tintColor: webView.tintColor) + return String(format: Self.headTemplate, meta, styles) + } + + private static let headTemplate: String = { + guard let fileURL = Bundle.module.url(forResource: "gutenbergCommentHeadTemplate", withExtension: "html"), + let string = try? String(contentsOf: fileURL) else { + assertionFailure("template missing") + return "" + } + return string + }() +} diff --git a/WordPress/Resources/HTML/richCommentTemplate.html b/Modules/Sources/WordPressReader/Resources/gutenbergCommentHeadTemplate.html similarity index 94% rename from WordPress/Resources/HTML/richCommentTemplate.html rename to Modules/Sources/WordPressReader/Resources/gutenbergCommentHeadTemplate.html index 46427605d94c..d73c5f3a3962 100644 --- a/WordPress/Resources/HTML/richCommentTemplate.html +++ b/Modules/Sources/WordPressReader/Resources/gutenbergCommentHeadTemplate.html @@ -1,4 +1,3 @@ -