Add Gutenberg content parser to use in block processors #22886
There are no files selected for viewing
|
There was a problem hiding this comment. The library SwiftSoup is added via the Swift Package Manager. But we could also include it as a Pod. |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -64,6 +64,15 @@ | |
| "version": "0.2.3" | ||
| } | ||
| }, | ||
| { | ||
| "package": "SwiftSoup", | ||
| "repositoryURL": "https://github.com/scinfu/SwiftSoup.git", | ||
|
There was a problem hiding this comment. The size of the dependency is a bit concerning: It should not affect incremental builds, I think it's something to be considered. There was a problem hiding this comment. I would suggest considering wrapping https://developer.wordpress.org/block-editor/reference-guides/packages/packages-blocks/ and other related WordPress JS APIs in Objective-C and invoking them using JavaScriptCore. This way, we'll be able to reuse the existing parser. You can run Javascript in background on iOS to ensure that processing doesn't take a lot of time. A native package that would wrap the existing JS packages could be useful for more scenarios than this. For example, the app could use it for addressing the "dangling" media uploads issue. There was a problem hiding this comment.
I haven't checked how much this library increases the binary. If it's significant we might consider other libraries.
This approach is intriguing and would certainly ensure consistent results when processing a block compared to Gutenberg. As a long-term solution, I'd advocate exploring this approach. However, I believe it would entail significant complexity in implementation, particularly regarding how to bundle the necessary code and potential tweaks to the Gutenberg code. @kean not sure if with your comment you're proposing following this instead of the refactor implemented in this PR. WDYT? There was a problem hiding this comment.
It's more long-term. I worked with JS-based packages before, so I know it should be feasible, but I don't know how much effort it would take.
These packages are already part of the Gutenberg-mobile project, aren't they? There was a problem hiding this comment.
Yes, but we bundled them with Metro and files are compiled with Hermes (the setup for React Native). I presume the output of this setup won't be supported natively. We'd need to generate a new bundle compatible with There was a problem hiding this comment. The app doesn't need to use these JS files directly. It could part of the existing Gutenberg framework. |
||
| "state": { | ||
| "branch": null, | ||
| "revision": "1d39e56d364cba79ce43b341f9661b534cccb18d", | ||
| "version": "2.7.1" | ||
| } | ||
| }, | ||
| { | ||
| "package": "BuildkiteTestCollector", | ||
| "repositoryURL": "https://github.com/buildkite/test-collector-swift", | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,160 @@ | ||
| import Foundation | ||
| import SwiftSoup | ||
|
|
||
| public class GutenbergParsedBlock { | ||
| public let name: String | ||
| public var elements: Elements | ||
| public var blocks: [GutenbergParsedBlock] | ||
| public weak var parentBlock: GutenbergParsedBlock? | ||
|
There was a problem hiding this comment.
|
||
| public let isCloseTag: Bool | ||
|
|
||
| public var attributes: [String: Any] { | ||
| get { | ||
| guard let data = self.attributesData.data(using: .utf8 ), | ||
| let jsonObject = try? JSONSerialization.jsonObject(with: data, options: .allowFragments), | ||
| let attributes = jsonObject as? [String: Any] | ||
| else { | ||
| return [:] | ||
| } | ||
| return attributes | ||
| } | ||
|
|
||
| set(newValue) { | ||
| guard let data = try? JSONSerialization.data(withJSONObject: newValue, options: .sortedKeys), | ||
| let attributes = String(data: data, encoding: .utf8) else { | ||
| return | ||
| } | ||
| self.attributesData = attributes | ||
| // Update comment tag data with new attributes | ||
| try! self.comment.attr("comment", " \(self.name) \(attributes) ") | ||
| } | ||
| } | ||
|
|
||
| public var content: String { | ||
| get { | ||
| (try? elements.outerHtml()) ?? "" | ||
| } | ||
| } | ||
|
|
||
| private var comment: SwiftSoup.Comment | ||
|
There was a problem hiding this comment. This type includes |
||
| private var attributesData: String | ||
|
|
||
| public init?(comment: SwiftSoup.Comment, parentBlock: GutenbergParsedBlock? = nil) { | ||
| let data = comment.getData().trim() | ||
| if let separatorRange = data.range(of: " ") { | ||
| self.name = String(data[data.startIndex..<separatorRange.lowerBound]) | ||
| self.attributesData = String(data[separatorRange.upperBound..<data.endIndex]) | ||
| } | ||
| else { | ||
| self.name = data | ||
| self.attributesData = "" | ||
| } | ||
| self.comment = comment | ||
| self.elements = SwiftSoup.Elements() | ||
| self.blocks = [] | ||
| self.isCloseTag = self.name.hasPrefix("/") | ||
| if !self.isCloseTag { | ||
| self.parentBlock = parentBlock | ||
| parentBlock?.blocks.append(self) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /// Parses content generated in the Gutenberg editor to allow modifications. | ||
| /// | ||
| /// # Parse content | ||
| /// | ||
| /// ``` | ||
| /// let block = """ | ||
| /// <!-- wp:block {"id":1} --> | ||
| /// <div class="wp-block"><p>Hello world!</p></div> | ||
| /// <!-- /wp:block --> | ||
| /// """ | ||
| /// let parser = GutenbergContentParser(for: block) | ||
| /// ``` | ||
| /// | ||
| /// # Get blocks | ||
| /// | ||
| /// ``` | ||
| /// let galleryBlocks = parser.blocks.filter { $0.name == "wp:gallery" } | ||
| /// let nestedImageBlocks = galleryBlocks[0].blocks.filter { $0.name == "wp:image" } | ||
| /// ``` | ||
| /// | ||
| /// > Note: All parsed blocks are in the list, including nested blocks. | ||
| /// | ||
| /// ``` | ||
| /// let allImageBlocks = parser.blocks.filter { $0.name == "wp:gallery" } | ||
| /// ``` | ||
| /// | ||
| /// # Modify an attribute | ||
| /// | ||
| /// ``` | ||
| /// let block = parser.blocks[0] | ||
| /// block.attributes["newId"] = 1001 | ||
| /// ``` | ||
| /// | ||
| /// # Modify HTML | ||
| /// | ||
| /// ``` | ||
| /// let block = parser.blocks[0] | ||
| /// try! block.elements.select("img").first()?.attr("src", "remote-url") | ||
| /// ``` | ||
| /// | ||
| /// More information about querying HTML can be found in [SwiftSoap documentation](https://github.com/scinfu/SwiftSoup?tab=readme-ov-file#use-selector-syntax-to-find-elements). | ||
| /// | ||
| /// # Generate HTML content | ||
| /// | ||
| /// ``` | ||
| /// let contentHTML = parser.html() | ||
| /// ``` | ||
| /// | ||
| public class GutenbergContentParser { | ||
| public var blocks: [GutenbergParsedBlock] | ||
|
|
||
| private let htmlDocument: Document? | ||
|
|
||
| public init(for content: String) { | ||
| self.htmlDocument = try? SwiftSoup.parseBodyFragment(content).outputSettings(OutputSettings().prettyPrint(pretty: false)) | ||
| self.blocks = [] | ||
|
|
||
| guard let htmlContent = self.htmlDocument?.body() else { | ||
| return | ||
| } | ||
| traverseChildNodes(element: htmlContent) | ||
| } | ||
|
|
||
| public func html() -> String { | ||
| return (try? self.htmlDocument?.body()?.html()) ?? "" | ||
| } | ||
|
|
||
| private func traverseChildNodes(element: Element, parentBlock: GutenbergParsedBlock? = nil) { | ||
| var currentBlock: GutenbergParsedBlock? | ||
| element.getChildNodes().forEach { node in | ||
| switch node { | ||
| // Convert comment tag into block | ||
| case let comment as SwiftSoup.Comment: | ||
| guard let block = GutenbergParsedBlock(comment: comment, parentBlock: parentBlock) else { | ||
| return | ||
| } | ||
|
|
||
| // Identify close tag | ||
| if let currrentBlock = currentBlock, block.name == "/\(currrentBlock.name)" { | ||
| currentBlock = nil | ||
| return | ||
| } | ||
|
|
||
| self.blocks.append(block) | ||
| currentBlock = block | ||
| // Insert HTML elements into block being processed | ||
| case let element as SwiftSoup.Element: | ||
| if let currentBlock = currentBlock { | ||
| currentBlock.elements.add(element) | ||
| } | ||
| if element.childNodeSize() > 0 { | ||
| traverseChildNodes(element: element, parentBlock: currentBlock ?? parentBlock) | ||
| } | ||
| default: break | ||
| } | ||
| } | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import Foundation | ||
|
|
||
| public protocol GutenbergProcessor { | ||
| func process(_ blocks: [GutenbergParsedBlock]) | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seems this entry landed in the wrong section, I'll update it in another PR.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Here's the PR with the fix.