tags) for mentions.
+ let sanitizedContent = comment.content
+ .trimmingCharacters(in: .whitespacesAndNewlines)
+ .replacingOccurrences(of: String.emptyElementRegexPattern, with: String(), options: [.regularExpression])
+
+ webView.loadHTMLString(.init(format: templateFormat, sanitizedContent), baseURL: nil)
// TODO: Configure component visibility
}
@@ -227,4 +235,7 @@ private extension String {
+ "%1$d is a placeholder for the number of Likes.")
static let pluralLikesFormat = NSLocalizedString("%1$d Likes", comment: "Plural button title to Like a comment. "
+ "%1$d is a placeholder for the number of Likes.")
+
+ // pattern that detects empty HTML elements (including HTML comments within).
+ static let emptyElementRegexPattern = "<[a-z]+>()+<\\/[a-z]+>"
}
From c123b05cf2e3749348f81adf45c45681f42cdfa7 Mon Sep 17 00:00:00 2001
From: David Christiandy <1299411+dvdchr@users.noreply.github.com>
Date: Tue, 7 Sep 2021 17:31:57 +0700
Subject: [PATCH 10/29] Recalculate cell height on orientation change.
Also improve styling for and .
---
.../CommentContentTableViewCell.swift | 23 +++++++++++-
WordPress/richCommentTemplate.html | 37 +++++++++++++++++--
2 files changed, 54 insertions(+), 6 deletions(-)
diff --git a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
index e18c5f3fa1a7..7435e6afc06d 100644
--- a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
+++ b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
@@ -42,7 +42,7 @@ class CommentContentTableViewCell: UITableViewCell, NibReusable {
@IBOutlet private weak var likeButton: UIButton!
/// Cache the HTML template format. We only need read the template once.
- private static var htmlTemplateFormat: String? = {
+ private static let htmlTemplateFormat: String? = {
guard let templatePath = Bundle.main.path(forResource: "richCommentTemplate", ofType: "html"),
let templateString = try? String(contentsOfFile: templatePath) else {
return nil
@@ -51,6 +51,9 @@ class CommentContentTableViewCell: UITableViewCell, NibReusable {
return templateString
}()
+ /// Caches the HTML content, to be reused when the orientation changed.
+ private var htmlContentCache: String? = nil
+
// MARK: Lifecycle
override func awakeFromNib() {
@@ -60,6 +63,7 @@ class CommentContentTableViewCell: UITableViewCell, NibReusable {
override func prepareForReuse() {
onContentLoaded = nil
+ htmlContentCache = nil
}
// MARK: Public Methods
@@ -70,6 +74,7 @@ class CommentContentTableViewCell: UITableViewCell, NibReusable {
/// - comment: The `Comment` object to display.
/// - onContentLoaded: Callback to be called once the content has been loaded. Provides the new content height as parameter.
func configure(with comment: Comment, onContentLoaded: ((CGFloat) -> Void)?) {
+ print(">>>> CONFIGURE WITH COMMENT CALLED FOR CELL: \(self)")
nameLabel?.setText(comment.authorForDisplay())
dateLabel?.setText(comment.dateForDisplay()?.toMediumString() ?? String())
@@ -93,11 +98,25 @@ class CommentContentTableViewCell: UITableViewCell, NibReusable {
let sanitizedContent = comment.content
.trimmingCharacters(in: .whitespacesAndNewlines)
.replacingOccurrences(of: String.emptyElementRegexPattern, with: String(), options: [.regularExpression])
+ let htmlString = String(format: templateFormat, sanitizedContent)
- webView.loadHTMLString(.init(format: templateFormat, sanitizedContent), baseURL: nil)
+ webView.loadHTMLString(htmlString, baseURL: nil)
+ self.htmlContentCache = htmlString
// TODO: Configure component visibility
}
+
+ override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
+ // when screen orientation changed, reload the HTML content to ensure that the content height accounts for the new width.
+ guard let cachedContent = htmlContentCache,
+ traitCollection.verticalSizeClass != previousTraitCollection?.verticalSizeClass
+ || traitCollection.horizontalSizeClass != previousTraitCollection?.horizontalSizeClass else {
+ return
+ }
+
+ webViewHeightConstraint.constant = 1
+ webView.loadHTMLString(cachedContent, baseURL: nil)
+ }
}
// MARK: - WKNavigationDelegate
diff --git a/WordPress/richCommentTemplate.html b/WordPress/richCommentTemplate.html
index 4179d72999f4..e4723c06f514 100644
--- a/WordPress/richCommentTemplate.html
+++ b/WordPress/richCommentTemplate.html
@@ -64,8 +64,16 @@
/** IMAGES **/
.wp-block-image > img {
- -webkit-border-radius: 3pt;
+ display: block;
+ margin: 0 auto; /* align center */
max-width: 100%;
+ -webkit-border-radius: 3pt;
+ }
+
+ figcaption {
+ font: -apple-system-caption1;
+ color: -apple-system-secondary-label;
+ text-align: center;
}
/* set custom emoji images to be match current font size, and align it to the text baseline. */
@@ -77,6 +85,7 @@
/** BLOCKQUOTES **/
blockquote {
+ font-size: 1rem;
margin: auto 0;
padding: 10pt;
background-color: -apple-system-secondary-background;
@@ -88,16 +97,36 @@
padding-top: 0;
}
+ blockquote cite {
+ display: block;
+ font: -apple-system-footnote;
+ text-align: right;
+ }
+
+ blockquote cite::before {
+ content: "— "
+ }
+
/** CODE SNIPPETS **/
- code {
+ code,
+ pre {
font-family: var(--monospace-font);
font-size: 0.85rem;
- padding: 1px 3px;
- -webkit-border-radius: 3px;
+ -webkit-border-radius: 3pt;
background-color: -apple-system-secondary-background;
}
+ code {
+ padding: 1px 3px;
+ }
+
+ pre {
+ padding: 10pt 5pt 10pt;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ }
+
/* TABLES */
table {
From 6fcbc09b0e54cb042c8a4e7674b89f69016a2d8e Mon Sep 17 00:00:00 2001
From: David Christiandy <1299411+dvdchr@users.noreply.github.com>
Date: Tue, 7 Sep 2021 18:32:41 +0700
Subject: [PATCH 11/29] Fix white flash for web view in dark mode
---
.../ViewRelated/Comments/CommentContentTableViewCell.swift | 1 +
1 file changed, 1 insertion(+)
diff --git a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
index 7435e6afc06d..883f0c5aaf22 100644
--- a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
+++ b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
@@ -177,6 +177,7 @@ private extension CommentContentTableViewCell {
webView.scrollView.isScrollEnabled = false
webView.scrollView.contentInset = .zero
webView.backgroundColor = .clear
+ webView.isOpaque = false // gets rid of the white flash upon content load in dark mode.
replyButton?.tintColor = Style.buttonTintColor
replyButton?.titleLabel?.font = Style.reactionButtonFont
From b5f0f22a39e3ca6e15c0b85806b7825a64ead753 Mon Sep 17 00:00:00 2001
From: David Christiandy <1299411+dvdchr@users.noreply.github.com>
Date: Tue, 7 Sep 2021 18:38:35 +0700
Subject: [PATCH 12/29] Allow overflowing table to scroll horizontally
---
.../ViewRelated/Comments/CommentContentTableViewCell.swift | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
index 883f0c5aaf22..4a3b41efc320 100644
--- a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
+++ b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
@@ -174,8 +174,8 @@ private extension CommentContentTableViewCell {
webView.navigationDelegate = self
webView.scrollView.bounces = false
- webView.scrollView.isScrollEnabled = false
webView.scrollView.contentInset = .zero
+ webView.scrollView.showsVerticalScrollIndicator = false
webView.backgroundColor = .clear
webView.isOpaque = false // gets rid of the white flash upon content load in dark mode.
From 08a4db684d2b86a63b732e3cdbe4480d0ac2c5de Mon Sep 17 00:00:00 2001
From: David Christiandy <1299411+dvdchr@users.noreply.github.com>
Date: Tue, 7 Sep 2021 19:07:48 +0700
Subject: [PATCH 13/29] Remove print statement
---
.../ViewRelated/Comments/CommentContentTableViewCell.swift | 5 ++---
1 file changed, 2 insertions(+), 3 deletions(-)
diff --git a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
index 4a3b41efc320..e3ed694baf50 100644
--- a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
+++ b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
@@ -74,7 +74,6 @@ class CommentContentTableViewCell: UITableViewCell, NibReusable {
/// - comment: The `Comment` object to display.
/// - onContentLoaded: Callback to be called once the content has been loaded. Provides the new content height as parameter.
func configure(with comment: Comment, onContentLoaded: ((CGFloat) -> Void)?) {
- print(">>>> CONFIGURE WITH COMMENT CALLED FOR CELL: \(self)")
nameLabel?.setText(comment.authorForDisplay())
dateLabel?.setText(comment.dateForDisplay()?.toMediumString() ?? String())
@@ -99,9 +98,9 @@ class CommentContentTableViewCell: UITableViewCell, NibReusable {
.trimmingCharacters(in: .whitespacesAndNewlines)
.replacingOccurrences(of: String.emptyElementRegexPattern, with: String(), options: [.regularExpression])
let htmlString = String(format: templateFormat, sanitizedContent)
+ self.htmlContentCache = htmlString
webView.loadHTMLString(htmlString, baseURL: nil)
- self.htmlContentCache = htmlString
// TODO: Configure component visibility
}
@@ -131,7 +130,7 @@ extension CommentContentTableViewCell: WKNavigationDelegate {
}
// To capture the content height, the methods to use is either `document.body.scrollHeight` or `document.documentElement.scrollHeight`.
- // However, `document.body` does not capture margins on tag, so we'll use `document.documentElement` instead.
+ // `document.body` does not capture margins on tag, so we'll use `document.documentElement` instead.
webView.evaluateJavaScript("document.documentElement.scrollHeight") { height, _ in
guard let height = height as? CGFloat else {
return
From 7416de707298c7b0347daf43924b84d5c3d29140 Mon Sep 17 00:00:00 2001
From: David Christiandy <1299411+dvdchr@users.noreply.github.com>
Date: Tue, 7 Sep 2021 22:18:16 +0700
Subject: [PATCH 14/29] Improve styling for image and code snippets
---
.../Comments/CommentContentTableViewCell.swift | 2 +-
WordPress/richCommentTemplate.html | 18 ++++++++++++------
2 files changed, 13 insertions(+), 7 deletions(-)
diff --git a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
index e3ed694baf50..dbe9c3dc727a 100644
--- a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
+++ b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
@@ -98,8 +98,8 @@ class CommentContentTableViewCell: UITableViewCell, NibReusable {
.trimmingCharacters(in: .whitespacesAndNewlines)
.replacingOccurrences(of: String.emptyElementRegexPattern, with: String(), options: [.regularExpression])
let htmlString = String(format: templateFormat, sanitizedContent)
- self.htmlContentCache = htmlString
+ self.htmlContentCache = htmlString
webView.loadHTMLString(htmlString, baseURL: nil)
// TODO: Configure component visibility
diff --git a/WordPress/richCommentTemplate.html b/WordPress/richCommentTemplate.html
index e4723c06f514..c71be41d9e66 100644
--- a/WordPress/richCommentTemplate.html
+++ b/WordPress/richCommentTemplate.html
@@ -58,15 +58,20 @@
text-decoration: none;
background-color: var(--mention-background-color);
padding: 0 3px;
- -webkit-border-radius: 3px;
+ -webkit-border-radius: 3pt;
}
/** IMAGES **/
- .wp-block-image > img {
+ .wp-block-image {
+ background-color: -apple-system-blue;
+ }
+
+ .wp-block-image img {
display: block;
margin: 0 auto; /* align center */
- max-width: 100%;
+ width: auto;
+ max-width: 100vw;
-webkit-border-radius: 3pt;
}
@@ -104,7 +109,7 @@
}
blockquote cite::before {
- content: "— "
+ content: "— ";
}
/** CODE SNIPPETS **/
@@ -118,11 +123,12 @@
}
code {
- padding: 1px 3px;
+ padding: 0 3pt;
}
pre {
- padding: 10pt 5pt 10pt;
+ padding: 10pt;
+ padding-right: 5pt;
white-space: pre-wrap;
word-wrap: break-word;
}
From a14b931afcfb21356aac7ffc6a72b38f81e5c705 Mon Sep 17 00:00:00 2001
From: David Christiandy <1299411+dvdchr@users.noreply.github.com>
Date: Tue, 7 Sep 2021 22:30:15 +0700
Subject: [PATCH 15/29] Override hardcoded block styles
---
WordPress/richCommentTemplate.html | 24 ++++++++++++++++++------
1 file changed, 18 insertions(+), 6 deletions(-)
diff --git a/WordPress/richCommentTemplate.html b/WordPress/richCommentTemplate.html
index c71be41d9e66..504f93ab5a23 100644
--- a/WordPress/richCommentTemplate.html
+++ b/WordPress/richCommentTemplate.html
@@ -43,6 +43,10 @@
margin-bottom: 0;
}
+ p {
+ word-wrap: break-word;
+ }
+
/* remove the default left/right margin for figures, as some elements (tables, images) are often embedded in . */
figure {
margin: 0
@@ -63,10 +67,6 @@
/** IMAGES **/
- .wp-block-image {
- background-color: -apple-system-blue;
- }
-
.wp-block-image img {
display: block;
margin: 0 auto; /* align center */
@@ -133,7 +133,7 @@
word-wrap: break-word;
}
- /* TABLES */
+ /** TABLES **/
table {
min-width: 100vw;
@@ -152,12 +152,24 @@
vertical-align: top;
}
- /* VIDEOS */
+ /** VIDEOS **/
video {
width: 100vw;
height: auto;
}
+
+ /** BLOCK OVERRIDES **/
+
+ /* override hardcoded background color to system default. */
+ .has-background {
+ background-color: -apple-system-background !important;
+ }
+
+ /* forcefully remove gaps from custom vertical spacers. */
+ .wp-block-spacer {
+ height: 0px !important;
+ }
From 96362a4cd4ab777f9cd068b97411dc5f06a19bc1 Mon Sep 17 00:00:00 2001
From: David Christiandy <1299411+dvdchr@users.noreply.github.com>
Date: Tue, 7 Sep 2021 23:20:32 +0700
Subject: [PATCH 16/29] Extract styles to a standalone CSS file.
---
.../CommentContentTableViewCell.swift | 7 +-
WordPress/WordPress.xcodeproj/project.pbxproj | 6 +
WordPress/richCommentStyle.css | 168 +++++++++++++++++
WordPress/richCommentTemplate.html | 171 +-----------------
4 files changed, 181 insertions(+), 171 deletions(-)
create mode 100644 WordPress/richCommentStyle.css
diff --git a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
index dbe9c3dc727a..37f9c4c69d68 100644
--- a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
+++ b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
@@ -51,6 +51,11 @@ class CommentContentTableViewCell: UITableViewCell, NibReusable {
return templateString
}()
+ /// Used for the web view's `baseURL`, to reference any local files (i.e. CSS) linked from the HTML.
+ private static let resourceURL: URL? = {
+ Bundle.main.resourceURL
+ }()
+
/// Caches the HTML content, to be reused when the orientation changed.
private var htmlContentCache: String? = nil
@@ -100,7 +105,7 @@ class CommentContentTableViewCell: UITableViewCell, NibReusable {
let htmlString = String(format: templateFormat, sanitizedContent)
self.htmlContentCache = htmlString
- webView.loadHTMLString(htmlString, baseURL: nil)
+ webView.loadHTMLString(htmlString, baseURL: Self.resourceURL)
// TODO: Configure component visibility
}
diff --git a/WordPress/WordPress.xcodeproj/project.pbxproj b/WordPress/WordPress.xcodeproj/project.pbxproj
index 2825e013f977..9caa9fefe56d 100644
--- a/WordPress/WordPress.xcodeproj/project.pbxproj
+++ b/WordPress/WordPress.xcodeproj/project.pbxproj
@@ -4352,6 +4352,8 @@
FE06AC8526C3C2F800B69DE4 /* ShareAppTextActivityItemSource.swift in Sources */ = {isa = PBXBuildFile; fileRef = FE06AC8426C3C2F800B69DE4 /* ShareAppTextActivityItemSource.swift */; };
FE23EB4226E7508D005A1698 /* richCommentTemplate.html in Resources */ = {isa = PBXBuildFile; fileRef = FE23EB4126E7508D005A1698 /* richCommentTemplate.html */; };
FE23EB4326E7508D005A1698 /* richCommentTemplate.html in Resources */ = {isa = PBXBuildFile; fileRef = FE23EB4126E7508D005A1698 /* richCommentTemplate.html */; };
+ FE23EB4526E7BD22005A1698 /* richCommentStyle.css in Resources */ = {isa = PBXBuildFile; fileRef = FE23EB4426E7BD22005A1698 /* richCommentStyle.css */; };
+ FE23EB4626E7BD22005A1698 /* richCommentStyle.css in Resources */ = {isa = PBXBuildFile; fileRef = FE23EB4426E7BD22005A1698 /* richCommentStyle.css */; };
FE39C135269C37C900EFB827 /* ListTableViewCell.xib in Resources */ = {isa = PBXBuildFile; fileRef = FE39C133269C37C900EFB827 /* ListTableViewCell.xib */; };
FE39C136269C37C900EFB827 /* ListTableViewCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = FE39C134269C37C900EFB827 /* ListTableViewCell.swift */; };
FE3D057E26C3D5C1002A51B0 /* ShareAppContentPresenterTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = FE3D057D26C3D5C1002A51B0 /* ShareAppContentPresenterTests.swift */; };
@@ -7544,6 +7546,7 @@
FE06AC8226C3BD0900B69DE4 /* ShareAppContentPresenter.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShareAppContentPresenter.swift; sourceTree = ""; };
FE06AC8426C3C2F800B69DE4 /* ShareAppTextActivityItemSource.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShareAppTextActivityItemSource.swift; sourceTree = ""; };
FE23EB4126E7508D005A1698 /* richCommentTemplate.html */ = {isa = PBXFileReference; lastKnownFileType = text.html; path = richCommentTemplate.html; sourceTree = ""; };
+ FE23EB4426E7BD22005A1698 /* richCommentStyle.css */ = {isa = PBXFileReference; lastKnownFileType = text.css; path = richCommentStyle.css; sourceTree = ""; };
FE39C133269C37C900EFB827 /* ListTableViewCell.xib */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.xib; path = ListTableViewCell.xib; sourceTree = ""; };
FE39C134269C37C900EFB827 /* ListTableViewCell.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = ListTableViewCell.swift; sourceTree = ""; };
FE3D057D26C3D5C1002A51B0 /* ShareAppContentPresenterTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShareAppContentPresenterTests.swift; sourceTree = ""; };
@@ -13209,6 +13212,7 @@
E61507E12220A0FE00213D33 /* richEmbedTemplate.html */,
E61507E32220A13B00213D33 /* richEmbedScript.js */,
FE23EB4126E7508D005A1698 /* richCommentTemplate.html */,
+ FE23EB4426E7BD22005A1698 /* richCommentStyle.css */,
);
name = HTML;
sourceTree = "";
@@ -15390,6 +15394,7 @@
1761F17526209AEE000815EF /* open-source-dark-icon-app-76x76@2x.png in Resources */,
1761F18A26209AEE000815EF /* hot-pink-icon-app-60x60@2x.png in Resources */,
9A9E3FB4230EC4F700909BC4 /* StatsGhostPostingActivityCell.xib in Resources */,
+ FE23EB4526E7BD22005A1698 /* richCommentStyle.css in Resources */,
435B762A2297484200511813 /* ColorPalette.xcassets in Resources */,
FAB800C225AEE3D200D5D54A /* RestoreCompleteView.xib in Resources */,
1761F18526209AEE000815EF /* pride-icon-app-60x60@3x.png in Resources */,
@@ -15686,6 +15691,7 @@
9856A38A261FC206008D6354 /* UserProfileUserInfoCell.xib in Resources */,
FABB1FC72602FC2C00C8785C /* RegisterDomainDetailsFooterView.xib in Resources */,
FABB1FC82602FC2C00C8785C /* EpilogueSectionHeaderFooter.xib in Resources */,
+ FE23EB4626E7BD22005A1698 /* richCommentStyle.css in Resources */,
FABB1FC92602FC2C00C8785C /* reader.css in Resources */,
FABB1FCB2602FC2C00C8785C /* AlertView.xib in Resources */,
FABB1FCC2602FC2C00C8785C /* SiteStatsTableHeaderView.xib in Resources */,
diff --git a/WordPress/richCommentStyle.css b/WordPress/richCommentStyle.css
new file mode 100644
index 000000000000..1b2d1e11ecc7
--- /dev/null
+++ b/WordPress/richCommentStyle.css
@@ -0,0 +1,168 @@
+:root {
+ /* informs WebKit that this template supports both appearance modes. */
+ color-scheme: light dark;
+
+ /* custom variables. */
+ --wordpress-blue-color: rgba(6, 117, 196, 1);
+ --mention-background-color: rgba(2, 103, 255, .1);
+ --monospace-font: ui-monospace, monospace;
+}
+
+/* overrides for dark color scheme. */
+@media(prefers-color-scheme: dark) {
+ :root {
+ --wordpress-blue-color: rgba(57, 156, 227, 1);
+ --mention-background-color: rgba(2, 103, 255, .15);
+ }
+}
+
+/* disable WebKit text inflation algorithm to prevent text size increase on orientation change. */
+html {
+ -webkit-text-size-adjust: none;
+}
+
+/* use Apple's standard style to match the native look. */
+body {
+ font: -apple-system-body;
+ color: -apple-system-label;
+ background-color: -apple-system-background;
+}
+
+/* get rid of the container default margins and paddings. */
+html, body {
+ margin: 0;
+ padding: 0;
+}
+
+/* remove the bottom margin of ANY element that's placed last within the tag. */
+body :last-child {
+ margin-bottom: 0;
+}
+
+p {
+ word-wrap: break-word;
+}
+
+/* remove the default left/right margin for figures, as some elements (tables, images) are often embedded in . */
+figure {
+ margin: 0
+}
+
+/** LINKS **/
+
+a {
+ color: var(--wordpress-blue-color);
+}
+
+a.mention {
+ text-decoration: none;
+ background-color: var(--mention-background-color);
+ padding: 0 3px;
+ -webkit-border-radius: 3pt;
+}
+
+/** IMAGES **/
+
+.wp-block-image img {
+ display: block;
+ margin: 0 auto; /* align center */
+ width: auto;
+ max-width: 100vw;
+ -webkit-border-radius: 3pt;
+}
+
+figcaption {
+ font: -apple-system-caption1;
+ color: -apple-system-secondary-label;
+ text-align: center;
+}
+
+/* set custom emoji images to be match current font size, and align it to the text baseline. */
+img.emoji {
+ vertical-align: baseline;
+ max-width: 1rem;
+}
+
+/** BLOCKQUOTES **/
+
+blockquote {
+ font-size: 1rem;
+ margin: auto 0;
+ padding: 10pt;
+ background-color: -apple-system-secondary-background;
+ -webkit-border-radius: 3pt;
+}
+
+blockquote > p:first-child {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+blockquote cite {
+ display: block;
+ font: -apple-system-footnote;
+ text-align: right;
+}
+
+blockquote cite::before {
+ content: "— ";
+}
+
+/** CODE SNIPPETS **/
+
+code,
+pre {
+ font-family: var(--monospace-font);
+ font-size: 0.85rem;
+ -webkit-border-radius: 3pt;
+ background-color: -apple-system-secondary-background;
+}
+
+code {
+ padding: 0 3pt;
+}
+
+pre {
+ padding: 10pt;
+ padding-right: 5pt;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+}
+
+/** TABLES **/
+
+table {
+ min-width: 100vw;
+ margin: auto 0;
+ padding: 0;
+ overflow-x: scroll;
+ border-collapse: collapse;
+}
+
+table, tr, td {
+ border: 1px solid -apple-system-separator;
+}
+
+td {
+ padding: 6pt;
+ vertical-align: top;
+}
+
+/** VIDEOS **/
+
+video {
+ width: 100vw;
+ height: auto;
+}
+
+/** BLOCK OVERRIDES **/
+
+/* override hardcoded background color to system default. */
+.has-background {
+ background-color: -apple-system-background !important;
+}
+
+/* forcefully remove gaps from custom vertical spacers. */
+.wp-block-spacer {
+ height: 0px !important;
+}
diff --git a/WordPress/richCommentTemplate.html b/WordPress/richCommentTemplate.html
index 504f93ab5a23..6ae90265ed9a 100644
--- a/WordPress/richCommentTemplate.html
+++ b/WordPress/richCommentTemplate.html
@@ -1,176 +1,7 @@
-
+
%@
From e6bf25a6796ac45d196e3d5dc63a4c416fdcee57 Mon Sep 17 00:00:00 2001
From: David Christiandy <1299411+dvdchr@users.noreply.github.com>
Date: Tue, 7 Sep 2021 23:22:11 +0700
Subject: [PATCH 17/29] Fix resources location
---
.../{ => Resources/HTML}/richCommentStyle.css | 0
.../HTML}/richCommentTemplate.html | 0
WordPress/WordPress.xcodeproj/project.pbxproj | 24 +++++++++----------
3 files changed, 12 insertions(+), 12 deletions(-)
rename WordPress/{ => Resources/HTML}/richCommentStyle.css (100%)
rename WordPress/{ => Resources/HTML}/richCommentTemplate.html (100%)
diff --git a/WordPress/richCommentStyle.css b/WordPress/Resources/HTML/richCommentStyle.css
similarity index 100%
rename from WordPress/richCommentStyle.css
rename to WordPress/Resources/HTML/richCommentStyle.css
diff --git a/WordPress/richCommentTemplate.html b/WordPress/Resources/HTML/richCommentTemplate.html
similarity index 100%
rename from WordPress/richCommentTemplate.html
rename to WordPress/Resources/HTML/richCommentTemplate.html
diff --git a/WordPress/WordPress.xcodeproj/project.pbxproj b/WordPress/WordPress.xcodeproj/project.pbxproj
index 9caa9fefe56d..55aa791906d0 100644
--- a/WordPress/WordPress.xcodeproj/project.pbxproj
+++ b/WordPress/WordPress.xcodeproj/project.pbxproj
@@ -4350,10 +4350,10 @@
FE02F95F269DC14A00752A44 /* Comment+Interface.swift in Sources */ = {isa = PBXBuildFile; fileRef = FE02F95E269DC14A00752A44 /* Comment+Interface.swift */; };
FE06AC8326C3BD0900B69DE4 /* ShareAppContentPresenter.swift in Sources */ = {isa = PBXBuildFile; fileRef = FE06AC8226C3BD0900B69DE4 /* ShareAppContentPresenter.swift */; };
FE06AC8526C3C2F800B69DE4 /* ShareAppTextActivityItemSource.swift in Sources */ = {isa = PBXBuildFile; fileRef = FE06AC8426C3C2F800B69DE4 /* ShareAppTextActivityItemSource.swift */; };
- FE23EB4226E7508D005A1698 /* richCommentTemplate.html in Resources */ = {isa = PBXBuildFile; fileRef = FE23EB4126E7508D005A1698 /* richCommentTemplate.html */; };
- FE23EB4326E7508D005A1698 /* richCommentTemplate.html in Resources */ = {isa = PBXBuildFile; fileRef = FE23EB4126E7508D005A1698 /* richCommentTemplate.html */; };
- FE23EB4526E7BD22005A1698 /* richCommentStyle.css in Resources */ = {isa = PBXBuildFile; fileRef = FE23EB4426E7BD22005A1698 /* richCommentStyle.css */; };
- FE23EB4626E7BD22005A1698 /* richCommentStyle.css in Resources */ = {isa = PBXBuildFile; fileRef = FE23EB4426E7BD22005A1698 /* richCommentStyle.css */; };
+ FE23EB4926E7C91F005A1698 /* richCommentTemplate.html in Resources */ = {isa = PBXBuildFile; fileRef = FE23EB4726E7C91F005A1698 /* richCommentTemplate.html */; };
+ FE23EB4A26E7C91F005A1698 /* richCommentTemplate.html in Resources */ = {isa = PBXBuildFile; fileRef = FE23EB4726E7C91F005A1698 /* richCommentTemplate.html */; };
+ FE23EB4B26E7C91F005A1698 /* richCommentStyle.css in Resources */ = {isa = PBXBuildFile; fileRef = FE23EB4826E7C91F005A1698 /* richCommentStyle.css */; };
+ FE23EB4C26E7C91F005A1698 /* richCommentStyle.css in Resources */ = {isa = PBXBuildFile; fileRef = FE23EB4826E7C91F005A1698 /* richCommentStyle.css */; };
FE39C135269C37C900EFB827 /* ListTableViewCell.xib in Resources */ = {isa = PBXBuildFile; fileRef = FE39C133269C37C900EFB827 /* ListTableViewCell.xib */; };
FE39C136269C37C900EFB827 /* ListTableViewCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = FE39C134269C37C900EFB827 /* ListTableViewCell.swift */; };
FE3D057E26C3D5C1002A51B0 /* ShareAppContentPresenterTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = FE3D057D26C3D5C1002A51B0 /* ShareAppContentPresenterTests.swift */; };
@@ -7545,8 +7545,8 @@
FE02F95E269DC14A00752A44 /* Comment+Interface.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Comment+Interface.swift"; sourceTree = ""; };
FE06AC8226C3BD0900B69DE4 /* ShareAppContentPresenter.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShareAppContentPresenter.swift; sourceTree = ""; };
FE06AC8426C3C2F800B69DE4 /* ShareAppTextActivityItemSource.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShareAppTextActivityItemSource.swift; sourceTree = ""; };
- FE23EB4126E7508D005A1698 /* richCommentTemplate.html */ = {isa = PBXFileReference; lastKnownFileType = text.html; path = richCommentTemplate.html; sourceTree = ""; };
- FE23EB4426E7BD22005A1698 /* richCommentStyle.css */ = {isa = PBXFileReference; lastKnownFileType = text.css; path = richCommentStyle.css; sourceTree = ""; };
+ FE23EB4726E7C91F005A1698 /* richCommentTemplate.html */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.html; name = richCommentTemplate.html; path = Resources/HTML/richCommentTemplate.html; sourceTree = ""; };
+ FE23EB4826E7C91F005A1698 /* richCommentStyle.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; name = richCommentStyle.css; path = Resources/HTML/richCommentStyle.css; sourceTree = ""; };
FE39C133269C37C900EFB827 /* ListTableViewCell.xib */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.xib; path = ListTableViewCell.xib; sourceTree = ""; };
FE39C134269C37C900EFB827 /* ListTableViewCell.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = ListTableViewCell.swift; sourceTree = ""; };
FE3D057D26C3D5C1002A51B0 /* ShareAppContentPresenterTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShareAppContentPresenterTests.swift; sourceTree = ""; };
@@ -13211,8 +13211,8 @@
2FAE97080E33B21600CA8540 /* xhtmlValidatorTemplate.xhtml */,
E61507E12220A0FE00213D33 /* richEmbedTemplate.html */,
E61507E32220A13B00213D33 /* richEmbedScript.js */,
- FE23EB4126E7508D005A1698 /* richCommentTemplate.html */,
- FE23EB4426E7BD22005A1698 /* richCommentStyle.css */,
+ FE23EB4826E7C91F005A1698 /* richCommentStyle.css */,
+ FE23EB4726E7C91F005A1698 /* richCommentTemplate.html */,
);
name = HTML;
sourceTree = "";
@@ -15231,7 +15231,7 @@
17222D81261DDDF90047B163 /* celadon-classic-icon-app-76x76@2x.png in Resources */,
931DF4D618D09A2F00540BDD /* InfoPlist.strings in Resources */,
D88106F820C0C9A8001D2F00 /* ReaderSavedPostUndoCell.xib in Resources */,
- FE23EB4226E7508D005A1698 /* richCommentTemplate.html in Resources */,
+ FE23EB4926E7C91F005A1698 /* richCommentTemplate.html in Resources */,
1761F18826209AEE000815EF /* pride-icon-app-76x76.png in Resources */,
17222D8A261DDDF90047B163 /* black-classic-icon-app-76x76@2x.png in Resources */,
5D5A6E941B613CA400DAF819 /* ReaderPostCardCell.xib in Resources */,
@@ -15394,7 +15394,7 @@
1761F17526209AEE000815EF /* open-source-dark-icon-app-76x76@2x.png in Resources */,
1761F18A26209AEE000815EF /* hot-pink-icon-app-60x60@2x.png in Resources */,
9A9E3FB4230EC4F700909BC4 /* StatsGhostPostingActivityCell.xib in Resources */,
- FE23EB4526E7BD22005A1698 /* richCommentStyle.css in Resources */,
+ FE23EB4B26E7C91F005A1698 /* richCommentStyle.css in Resources */,
435B762A2297484200511813 /* ColorPalette.xcassets in Resources */,
FAB800C225AEE3D200D5D54A /* RestoreCompleteView.xib in Resources */,
1761F18526209AEE000815EF /* pride-icon-app-60x60@3x.png in Resources */,
@@ -15691,7 +15691,7 @@
9856A38A261FC206008D6354 /* UserProfileUserInfoCell.xib in Resources */,
FABB1FC72602FC2C00C8785C /* RegisterDomainDetailsFooterView.xib in Resources */,
FABB1FC82602FC2C00C8785C /* EpilogueSectionHeaderFooter.xib in Resources */,
- FE23EB4626E7BD22005A1698 /* richCommentStyle.css in Resources */,
+ FE23EB4C26E7C91F005A1698 /* richCommentStyle.css in Resources */,
FABB1FC92602FC2C00C8785C /* reader.css in Resources */,
FABB1FCB2602FC2C00C8785C /* AlertView.xib in Resources */,
FABB1FCC2602FC2C00C8785C /* SiteStatsTableHeaderView.xib in Resources */,
@@ -15778,7 +15778,7 @@
FABB203E2602FC2C00C8785C /* QuickStartListTitleCell.xib in Resources */,
FEC3B81A26C2915A00A395C7 /* SingleButtonTableViewCell.xib in Resources */,
FABB203F2602FC2C00C8785C /* ReaderRecommendedSiteCardCell.xib in Resources */,
- FE23EB4326E7508D005A1698 /* richCommentTemplate.html in Resources */,
+ FE23EB4A26E7C91F005A1698 /* richCommentTemplate.html in Resources */,
FABB20402602FC2C00C8785C /* Nunito-Bold.ttf in Resources */,
FABB20412602FC2C00C8785C /* ImageCropViewController.xib in Resources */,
FABB20422602FC2C00C8785C /* Reader.storyboard in Resources */,
From 5b315017733726ee79584e64e9a0a5501a127038 Mon Sep 17 00:00:00 2001
From: David Christiandy <1299411+dvdchr@users.noreply.github.com>
Date: Tue, 7 Sep 2021 23:22:36 +0700
Subject: [PATCH 18/29] Patch blocks gallery grid appearance
---
WordPress/Resources/HTML/richCommentStyle.css | 21 +++++++++++++++++++
1 file changed, 21 insertions(+)
diff --git a/WordPress/Resources/HTML/richCommentStyle.css b/WordPress/Resources/HTML/richCommentStyle.css
index 1b2d1e11ecc7..a238b053fc2e 100644
--- a/WordPress/Resources/HTML/richCommentStyle.css
+++ b/WordPress/Resources/HTML/richCommentStyle.css
@@ -83,6 +83,27 @@ img.emoji {
max-width: 1rem;
}
+ul.blocks-gallery-grid {
+ list-style-type: none;
+ margin: auto 0;
+ padding: 0;
+ max-width: 100vw;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.blocks-gallery-item {
+ max-width: 50vw;
+}
+
+.blocks-gallery-item img {
+ max-width: 100%;
+ height: auto;
+ object-fit: contain;
+}
+
/** BLOCKQUOTES **/
blockquote {
From b08fb475317be5dd67ed7e5cf69fcfdbe79a180c Mon Sep 17 00:00:00 2001
From: David Christiandy <1299411+dvdchr@users.noreply.github.com>
Date: Tue, 7 Sep 2021 23:26:39 +0700
Subject: [PATCH 19/29] Reject all web view navigation requests for now.
---
.../ViewRelated/Comments/CommentContentTableViewCell.swift | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
index 37f9c4c69d68..2621014507c4 100644
--- a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
+++ b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
@@ -146,6 +146,12 @@ extension CommentContentTableViewCell: WKNavigationDelegate {
}
}
}
+
+ func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
+ // TODO: Offload the decision making to the delegate.
+ // For now, all navigation requests will be rejected.
+ decisionHandler(.cancel)
+ }
}
// MARK: - Helpers
From 920d0942a872fa011f31f553db185f2dc4499a7e Mon Sep 17 00:00:00 2001
From: David Christiandy <1299411+dvdchr@users.noreply.github.com>
Date: Wed, 8 Sep 2021 00:51:36 +0700
Subject: [PATCH 20/29] Fix navigation policy to allow loading local files
---
.../Comments/CommentContentTableViewCell.swift | 9 +++++++--
1 file changed, 7 insertions(+), 2 deletions(-)
diff --git a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
index 2621014507c4..87098a0f697e 100644
--- a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
+++ b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
@@ -149,8 +149,13 @@ extension CommentContentTableViewCell: WKNavigationDelegate {
func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
// TODO: Offload the decision making to the delegate.
- // For now, all navigation requests will be rejected.
- decisionHandler(.cancel)
+ // For now, all navigation requests will be rejected (except for loading local files).
+ switch navigationAction.navigationType {
+ case .other:
+ decisionHandler(.allow)
+ default:
+ decisionHandler(.cancel)
+ }
}
}
From cb74ee7c88d9805d382367fa23dca48141118f60 Mon Sep 17 00:00:00 2001
From: David Christiandy <1299411+dvdchr@users.noreply.github.com>
Date: Wed, 8 Sep 2021 15:08:20 +0700
Subject: [PATCH 21/29] Implement a smarter cache for the HTML string
processing.
---
.../CommentContentTableViewCell.swift | 53 ++++++++++++++-----
1 file changed, 39 insertions(+), 14 deletions(-)
diff --git a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
index 87098a0f697e..c0374f7a4c4b 100644
--- a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
+++ b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
@@ -56,6 +56,9 @@ class CommentContentTableViewCell: UITableViewCell, NibReusable {
Bundle.main.resourceURL
}()
+ /// Used to determine whether the cache is still valid or not.
+ private var commentContentCache: String? = nil
+
/// Caches the HTML content, to be reused when the orientation changed.
private var htmlContentCache: String? = nil
@@ -91,21 +94,8 @@ class CommentContentTableViewCell: UITableViewCell, NibReusable {
updateLikeButton(liked: comment.isLiked, numberOfLikes: comment.numberOfLikes())
// configure comment content
- guard let templateFormat = Self.htmlTemplateFormat else {
- return
- }
-
self.onContentLoaded = onContentLoaded
-
- // 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 sanitizedContent = comment.content
- .trimmingCharacters(in: .whitespacesAndNewlines)
- .replacingOccurrences(of: String.emptyElementRegexPattern, with: String(), options: [.regularExpression])
- let htmlString = String(format: templateFormat, sanitizedContent)
-
- self.htmlContentCache = htmlString
- webView.loadHTMLString(htmlString, baseURL: Self.resourceURL)
+ webView.loadHTMLString(formattedHTMLString(for: comment.content), baseURL: Self.resourceURL)
// TODO: Configure component visibility
}
@@ -231,6 +221,41 @@ private extension CommentContentTableViewCell {
avatarImageView.downloadGravatarWithEmail(someEmail, placeholderImage: Style.placeholderImage)
}
+ /// 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 content: String) -> String {
+ // return the previous HTML string if the comment content is unchanged.
+ if let previousCommentContent = commentContentCache,
+ let previousHTMLString = htmlContentCache,
+ previousCommentContent == content {
+ return previousHTMLString
+ }
+
+ // otherwise: sanitize the content, cache it, and then return it.
+ guard let htmlTemplateFormat = Self.htmlTemplateFormat else {
+ DDLogError("\(Self.classNameWithoutNamespaces()): Failed to load HTML template format for comment content.")
+ return 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 htmlContent = String(format: htmlTemplateFormat, content
+ .trimmingCharacters(in: .whitespacesAndNewlines)
+ .replacingOccurrences(of: String.emptyElementRegexPattern, with: String(), options: [.regularExpression]))
+
+ // cache the contents.
+ commentContentCache = content
+ htmlContentCache = htmlContent
+
+ return htmlContent
+ }
+
func likeButtonTitle(for numberOfLikes: Int) -> String {
switch numberOfLikes {
case .zero:
From 550a4d2732c9643ee2cd23e60bb09dafdcba6101 Mon Sep 17 00:00:00 2001
From: David Christiandy <1299411+dvdchr@users.noreply.github.com>
Date: Wed, 8 Sep 2021 15:08:51 +0700
Subject: [PATCH 22/29] Use viewWillTransition to react to orientation changes.
Additionally, the RowType enum is refactored; the .text case no longer provides a closure as associated value, in order to make the enum class conform to Equatable without manual implementation. Row actions are now implemented in the didSelectRow method instead.
---
.../CommentContentTableViewCell.swift | 12 ----------
.../CommentDetailViewController.swift | 22 ++++++++++++++-----
2 files changed, 16 insertions(+), 18 deletions(-)
diff --git a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
index c0374f7a4c4b..b620104c41fe 100644
--- a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
+++ b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
@@ -99,18 +99,6 @@ class CommentContentTableViewCell: UITableViewCell, NibReusable {
// TODO: Configure component visibility
}
-
- override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
- // when screen orientation changed, reload the HTML content to ensure that the content height accounts for the new width.
- guard let cachedContent = htmlContentCache,
- traitCollection.verticalSizeClass != previousTraitCollection?.verticalSizeClass
- || traitCollection.horizontalSizeClass != previousTraitCollection?.horizontalSizeClass else {
- return
- }
-
- webViewHeightConstraint.constant = 1
- webView.loadHTMLString(cachedContent, baseURL: nil)
- }
}
// MARK: - WKNavigationDelegate
diff --git a/WordPress/Classes/ViewRelated/Comments/CommentDetailViewController.swift b/WordPress/Classes/ViewRelated/Comments/CommentDetailViewController.swift
index 6f0ad760fd8e..a7479b647066 100644
--- a/WordPress/Classes/ViewRelated/Comments/CommentDetailViewController.swift
+++ b/WordPress/Classes/ViewRelated/Comments/CommentDetailViewController.swift
@@ -68,6 +68,16 @@ class CommentDetailViewController: UITableViewController {
configureRows()
}
+ override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
+ super.viewWillTransition(to: size, with: coordinator)
+
+ // when an orientation change is triggered, recalculate the content cell's height.
+ guard let contentRowIndex = rows.firstIndex(where: { $0 == .content }) else {
+ return
+ }
+ tableView.reloadRows(at: [.init(row: contentRowIndex, section: .zero)], with: .fade)
+ }
+
// MARK: Table view data source
override func numberOfSections(in tableView: UITableView) -> Int {
@@ -117,8 +127,8 @@ class CommentDetailViewController: UITableViewController {
// TODO: Navigate to the comment reply.
break
- case .text(_, _, _, let action):
- action?()
+ case .text(let title, _, _) where title == .webAddressLabelText:
+ visitAuthorURL()
default:
break
@@ -133,11 +143,11 @@ private extension CommentDetailViewController {
typealias Style = WPStyleGuide.CommentDetail
- enum RowType {
+ enum RowType: Equatable {
case header
case content
case replyIndicator
- case text(title: String, detail: String, image: UIImage? = nil, action: (() -> Void)? = nil)
+ case text(title: String, detail: String, image: UIImage? = nil)
}
struct Constants {
@@ -167,7 +177,7 @@ private extension CommentDetailViewController {
.header,
.content,
.replyIndicator, // TODO: Conditionally add this when user has replied to the comment.
- .text(title: .webAddressLabelText, detail: comment.authorUrlForDisplay(), image: Style.externalIconImage, action: visitAuthorURL),
+ .text(title: .webAddressLabelText, detail: comment.authorUrlForDisplay(), image: Style.externalIconImage),
.text(title: .emailAddressLabelText, detail: comment.author_email),
.text(title: .ipAddressLabelText, detail: comment.author_ip)
]
@@ -183,7 +193,7 @@ private extension CommentDetailViewController {
}
func configuredTextCell(for row: RowType) -> UITableViewCell {
- guard case let .text(title, detail, image, _) = row else {
+ guard case let .text(title, detail, image) = row else {
return .init()
}
From ee2d6b1c041d2dfa03b88493541b1dfad867e9bf Mon Sep 17 00:00:00 2001
From: David Christiandy <1299411+dvdchr@users.noreply.github.com>
Date: Wed, 8 Sep 2021 17:20:12 +0700
Subject: [PATCH 23/29] Disable shrinkToFit behavior on iPad
---
WordPress/Resources/HTML/richCommentTemplate.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/WordPress/Resources/HTML/richCommentTemplate.html b/WordPress/Resources/HTML/richCommentTemplate.html
index 6ae90265ed9a..5bfc2b9ab937 100644
--- a/WordPress/Resources/HTML/richCommentTemplate.html
+++ b/WordPress/Resources/HTML/richCommentTemplate.html
@@ -1,6 +1,6 @@
-
+
From 1337847fbee3cd3240a33469a7a30c25b4d643f6 Mon Sep 17 00:00:00 2001
From: David Christiandy <1299411+dvdchr@users.noreply.github.com>
Date: Wed, 8 Sep 2021 17:20:51 +0700
Subject: [PATCH 24/29] Improve styling for several components.
* All elements now have max-width: 100vw to prevent content overflow, unless explicitly overridden (e.g. table). This should fix unexpected content overflows e.g. from YouTube embeds.
* Stylize img tags that aren't part of Gutenberg blocks.
---
WordPress/Resources/HTML/richCommentStyle.css | 30 ++++++++++++++++---
1 file changed, 26 insertions(+), 4 deletions(-)
diff --git a/WordPress/Resources/HTML/richCommentStyle.css b/WordPress/Resources/HTML/richCommentStyle.css
index a238b053fc2e..371a11d9fbb4 100644
--- a/WordPress/Resources/HTML/richCommentStyle.css
+++ b/WordPress/Resources/HTML/richCommentStyle.css
@@ -39,10 +39,22 @@ body :last-child {
margin-bottom: 0;
}
+/*
+ prevent ALL elements from exceeding viewport width.
+ individual elements can override this style as needed since it _should_ have higher specificity.
+*/
+* {
+ max-width: 100vw;
+}
+
p {
word-wrap: break-word;
}
+div {
+ margin-bottom: 5pt;
+}
+
/* remove the default left/right margin for figures, as some elements (tables, images) are often embedded in . */
figure {
margin: 0
@@ -63,11 +75,12 @@ a.mention {
/** IMAGES **/
-.wp-block-image img {
+.wp-block-image img,
+p > img:not(.emoji) {
display: block;
margin: 0 auto; /* align center */
width: auto;
- max-width: 100vw;
+ height: auto;
-webkit-border-radius: 3pt;
}
@@ -87,7 +100,6 @@ ul.blocks-gallery-grid {
list-style-type: none;
margin: auto 0;
padding: 0;
- max-width: 100vw;
display: flex;
-webkit-flex-wrap: wrap;
align-items: center;
@@ -153,10 +165,12 @@ pre {
/** TABLES **/
table {
+ /* allow tables to span outside the viewport, since it is scrollable. */
+ max-width: initial;
+ overflow-x: scroll;
min-width: 100vw;
margin: auto 0;
padding: 0;
- overflow-x: scroll;
border-collapse: collapse;
}
@@ -187,3 +201,11 @@ video {
.wp-block-spacer {
height: 0px !important;
}
+
+/*
+ forcefully assign default text color.
+ some contents apply inline text color styling which may lead to low contrast.
+ */
+p, em, strong, b {
+ color: -apple-system-label !important;
+}
From a0dab47de9dbb8322a4b90833c673a7fa255add4 Mon Sep 17 00:00:00 2001
From: David Christiandy <1299411+dvdchr@users.noreply.github.com>
Date: Wed, 8 Sep 2021 17:57:39 +0700
Subject: [PATCH 25/29] Set the webview back to opaque after content has
finished loading.
The web view needs to be translucent initially, because otherwise the web view might show a short, white flash. This is noticeable in dark color schemes, and a tad annoying. On the other hand, a translucent webview causes scroll indicator to be invisible, regardless of the indicator style.
Therefore, the solution is to set the webview to translucent initially, and set it back to opaque once the content has finished loading.
---
.../Comments/CommentContentTableViewCell.swift | 8 +++++---
1 file changed, 5 insertions(+), 3 deletions(-)
diff --git a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
index b620104c41fe..5764fd7a32ce 100644
--- a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
+++ b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
@@ -95,6 +95,7 @@ class CommentContentTableViewCell: UITableViewCell, NibReusable {
// configure comment content
self.onContentLoaded = onContentLoaded
+ webView.isOpaque = false // gets rid of the white flash upon content load in dark mode.
webView.loadHTMLString(formattedHTMLString(for: comment.content), baseURL: Self.resourceURL)
// TODO: Configure component visibility
@@ -118,6 +119,10 @@ extension CommentContentTableViewCell: WKNavigationDelegate {
guard let height = height as? CGFloat else {
return
}
+
+ // reset the webview to opaque again so the scroll indicator is visible.
+ webView.isOpaque = true
+
// update the web view height obtained from the evaluated Javascript.
self.webViewHeightConstraint.constant = height
self.onContentLoaded?(height)
@@ -167,10 +172,7 @@ private extension CommentContentTableViewCell {
webView.navigationDelegate = self
webView.scrollView.bounces = false
- webView.scrollView.contentInset = .zero
webView.scrollView.showsVerticalScrollIndicator = false
- webView.backgroundColor = .clear
- webView.isOpaque = false // gets rid of the white flash upon content load in dark mode.
replyButton?.tintColor = Style.buttonTintColor
replyButton?.titleLabel?.font = Style.reactionButtonFont
From 29e1ba8e4bfd93570a121a7418ff2fc7a0a3c205 Mon Sep 17 00:00:00 2001
From: David Christiandy <1299411+dvdchr@users.noreply.github.com>
Date: Wed, 8 Sep 2021 18:18:42 +0700
Subject: [PATCH 26/29] Increase background color visibility on mentions in
dark mode
---
WordPress/Resources/HTML/richCommentStyle.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/WordPress/Resources/HTML/richCommentStyle.css b/WordPress/Resources/HTML/richCommentStyle.css
index 371a11d9fbb4..6fe0e59e7320 100644
--- a/WordPress/Resources/HTML/richCommentStyle.css
+++ b/WordPress/Resources/HTML/richCommentStyle.css
@@ -12,7 +12,7 @@
@media(prefers-color-scheme: dark) {
:root {
--wordpress-blue-color: rgba(57, 156, 227, 1);
- --mention-background-color: rgba(2, 103, 255, .15);
+ --mention-background-color: rgba(2, 103, 255, .2);
}
}
From 2c0ae96da04e1f7de9dedbce7851f4be27ca7ccc Mon Sep 17 00:00:00 2001
From: David Christiandy <1299411+dvdchr@users.noreply.github.com>
Date: Wed, 8 Sep 2021 19:16:36 +0700
Subject: [PATCH 27/29] Improve regex pattern to remove empty elements
---
.../Comments/CommentContentTableViewCell.swift | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
index 5764fd7a32ce..27c5fd3526e4 100644
--- a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
+++ b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
@@ -236,13 +236,13 @@ private extension CommentContentTableViewCell {
// 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 htmlContent = String(format: htmlTemplateFormat, content
- .trimmingCharacters(in: .whitespacesAndNewlines)
- .replacingOccurrences(of: String.emptyElementRegexPattern, with: String(), options: [.regularExpression]))
+ .replacingOccurrences(of: String.emptyElementRegexPattern, with: String(), options: [.regularExpression])
+ .trimmingCharacters(in: .whitespacesAndNewlines))
// cache the contents.
commentContentCache = content
htmlContentCache = htmlContent
-
+
return htmlContent
}
@@ -287,5 +287,5 @@ private extension String {
+ "%1$d is a placeholder for the number of Likes.")
// pattern that detects empty HTML elements (including HTML comments within).
- static let emptyElementRegexPattern = "<[a-z]+>()+<\\/[a-z]+>"
+ static let emptyElementRegexPattern = "<[a-z]+>()+<\\/[a-z]+>"
}
From c37a44efe2b13a6a2f2af665a0045fdfb1aa8664 Mon Sep 17 00:00:00 2001
From: David Christiandy <1299411+dvdchr@users.noreply.github.com>
Date: Wed, 8 Sep 2021 19:16:54 +0700
Subject: [PATCH 28/29] Improve component margins
---
.../Comments/CommentContentTableViewCell.swift | 2 +-
WordPress/Resources/HTML/richCommentStyle.css | 13 ++++++++++++-
2 files changed, 13 insertions(+), 2 deletions(-)
diff --git a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
index 27c5fd3526e4..22a2a8933aaa 100644
--- a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
+++ b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
@@ -242,7 +242,7 @@ private extension CommentContentTableViewCell {
// cache the contents.
commentContentCache = content
htmlContentCache = htmlContent
-
+
return htmlContent
}
diff --git a/WordPress/Resources/HTML/richCommentStyle.css b/WordPress/Resources/HTML/richCommentStyle.css
index 6fe0e59e7320..b6b20a8c7d02 100644
--- a/WordPress/Resources/HTML/richCommentStyle.css
+++ b/WordPress/Resources/HTML/richCommentStyle.css
@@ -39,6 +39,11 @@ body :last-child {
margin-bottom: 0;
}
+/* remove the top margin of ANY element that's placed first within the tag. */
+body :first-child {
+ margin-top: 0;
+}
+
/*
prevent ALL elements from exceeding viewport width.
individual elements can override this style as needed since it _should_ have higher specificity.
@@ -81,6 +86,12 @@ p > img:not(.emoji) {
margin: 0 auto; /* align center */
width: auto;
height: auto;
+}
+
+/* apply border radius to all image elements. */
+.wp-block-image img,
+p > img:not(.emoji),
+.tiled-gallery__item > img {
-webkit-border-radius: 3pt;
}
@@ -120,7 +131,7 @@ ul.blocks-gallery-grid {
blockquote {
font-size: 1rem;
- margin: auto 0;
+ margin: 15pt 0;
padding: 10pt;
background-color: -apple-system-secondary-background;
-webkit-border-radius: 3pt;
From a7c7fe80e33f0253802308f666fed4710835f889 Mon Sep 17 00:00:00 2001
From: David Christiandy <1299411+dvdchr@users.noreply.github.com>
Date: Wed, 8 Sep 2021 19:28:45 +0700
Subject: [PATCH 29/29] Mark onContentLoaded property as private.
---
.../ViewRelated/Comments/CommentContentTableViewCell.swift | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
index 22a2a8933aaa..ebf5462e787d 100644
--- a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
+++ b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
@@ -12,9 +12,6 @@ class CommentContentTableViewCell: UITableViewCell, NibReusable {
var accessoryButtonAction: (() -> Void)? = nil
- /// Called when the cell has finished loading and calculating the height of the HTML content. Passes the new content height as parameter.
- var onContentLoaded: ((CGFloat) -> Void)? = nil
-
var replyButtonAction: (() -> Void)? = nil
var likeButtonAction: (() -> Void)? = nil
@@ -41,6 +38,9 @@ class CommentContentTableViewCell: UITableViewCell, NibReusable {
@IBOutlet private weak var replyButton: UIButton!
@IBOutlet private weak var likeButton: UIButton!
+ /// Called when the cell has finished loading and calculating the height of the HTML content. Passes the new content height as parameter.
+ private var onContentLoaded: ((CGFloat) -> Void)? = nil
+
/// Cache the HTML template format. We only need read the template once.
private static let htmlTemplateFormat: String? = {
guard let templatePath = Bundle.main.path(forResource: "richCommentTemplate", ofType: "html"),