Merge pull request #165 from wordpress-mobile/issues/10206-gutenberg-…

…gallery-fix

Text: Removes problematic markup from Gutenberg galleries.

WordPressShared/Core/Utility/RichContentFormatter.swift

@@ -28,6 +28,10 @@ import Foundation
 
         // Trailing BR Tags
         static let trailingBRTags = try! NSRegularExpression(pattern: "(\\s*<br\\s*(/?)\\s*>\\s*)+$", options: .caseInsensitive)
+
+        // Gutenberg Galleries
+        static let gutenbergGalleryList = try! NSRegularExpression(pattern: "(<ul[^>]+>)<li[^>]+gallery-item[^>]+><figure><img .+?</figure></li>", options: .caseInsensitive)
+        static let gutenbergGalleryListItem = try! NSRegularExpression(pattern: "<li[^>]+gallery-item[^>]+>(<figure><img .+?</figure>)</li>", options: .caseInsensitive)
     }
 
 
@@ -50,6 +54,7 @@ import Foundation
         content = normalizeParagraphs(content)
         content = removeInlineStyles(content)
         content = (content as NSString).replacingHTMLEmoticonsWithEmoji() as String
+        content = formatGutenbergGallery(content)
         content = resizeGalleryImageURL(content, isPrivateSite: isPrivate)
 
         return content
@@ -300,4 +305,36 @@ import Foundation
 
         return content
     }
+
+    /// Removes unordered list markup from Gutenberg gallery images.
+    ///
+    /// - Parameters:
+    ///     - string: The content string to format.
+    ///
+    /// - Returns: The formatted string.
+    ///
+    @objc public class func formatGutenbergGallery(_ string: String) -> String {
+        let mString = NSMutableString(string: string)
+
+        // First, remove the gallery UL tags.
+        var matches = RegEx.gutenbergGalleryList.matches(in: mString as String, options: [], range: NSRange(location: 0, length: mString.length))
+        for match in matches.reversed() {
+            if match.numberOfRanges < 2 {
+                continue
+            }
+            mString.replaceCharacters(in: match.range(at: 1), with: "")
+        }
+
+        // Now discard the list item markup
+        matches = RegEx.gutenbergGalleryListItem.matches(in: mString as String, options: [], range: NSRange(location: 0, length: mString.length))
+        for match in matches.reversed() {
+            if match.numberOfRanges < 2 {
+                continue
+            }
+            let image = mString.substring(with: match.range(at: 1))
+            mString.replaceCharacters(in: match.range, with: image)
+        }
+
+        return mString as String
+    }
 }

WordPressSharedTests/RichContentFormatterTests.swift

@@ -45,4 +45,19 @@ class RichContentFormatterTests: XCTestCase {
         let sanitizedStr = RichContentFormatter.removeTrailingBreakTags(styleStr)
         XCTAssertTrue(str == sanitizedStr, "The inline styles were not removed.")
     }
+
+
+    func testRemoveGutenbergGalleryListMarkup() {
+        let str = "Some text. <ul class=\"wp-block-gallery columns-3 is-cropped\"><li class=\"blocks-gallery-item\"><figure><img src=\"https://example.com/wp-content/uploads/2017/05/IMG_1364.jpg\" alt=\"\" data-id=\"103\" data-link=\"https://example.com/img_1364/\" class=\"wp-image-103\" srcset=\"https://example.com/wp-content/uploads/2017/05/IMG_1364.jpg 2048w, https://example.com/wp-content/uploads/2017/05/IMG_1364-300x225.jpg 300w, https://example.com/wp-content/uploads/2017/05/IMG_1364-768x576.jpg 768w, https://example.com/wp-content/uploads/2017/05/IMG_1364-1024x768.jpg 1024w, https://example.com/wp-content/uploads/2017/05/IMG_1364-1200x900.jpg 1200w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" /><figcaption>Plants<br></figcaption></figure></li><li class=\"blocks-gallery-item\"><figure><img src=\"https://example.com/wp-content/uploads/2017/05/IMG_1215.jpg\" alt=\"\" data-id=\"102\" data-link=\"https://example.com/img_1215/\" class=\"wp-image-102\" srcset=\"https://example.com/wp-content/uploads/2017/05/IMG_1215.jpg 2048w, https://example.com/wp-content/uploads/2017/05/IMG_1215-300x225.jpg 300w, https://example.com/wp-content/uploads/2017/05/IMG_1215-768x576.jpg 768w, https://example.com/wp-content/uploads/2017/05/IMG_1215-1024x768.jpg 1024w, https://example.com/wp-content/uploads/2017/05/IMG_1215-1200x900.jpg 1200w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" /></figure></li><li class=\"blocks-gallery-item\"><figure><img src=\"https://example.com/wp-content/uploads/2017/05/img_5918.jpg\" alt=\"\" data-id=\"101\" data-link=\"https://example.com/img_5918-jpg/\" class=\"wp-image-101\" srcset=\"https://example.com/wp-content/uploads/2017/05/img_5918.jpg 1000w, https://example.com/wp-content/uploads/2017/05/img_5918-225x300.jpg 225w, https://example.com/wp-content/uploads/2017/05/img_5918-768x1024.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" /></figure></li></ul> Some text."
+        let sanitizedString = RichContentFormatter.formatGutenbergGallery(str) as NSString
+        // Checks if the UL was removed.
+        var range = sanitizedString.range(of: "block-gallery")
+        XCTAssertTrue(range.location == NSNotFound)
+        // Checks if the LI was removed
+        range = sanitizedString.range(of: "blocks-gallery")
+        XCTAssertTrue(range.location == NSNotFound)
+        // Checks if the FIGCAPTION was kept.
+        range = sanitizedString.range(of: "figcaption")
+        XCTAssertTrue(range.location != NSNotFound)
+    }
 }