Custom Fields: Refactor AztecEditorView to be reusable

[hafizrahman]

This PR continues the feedback in #13863 to make AztecEditorView reusable.

Description

With the Custom Fields Editing project, we want to be able to use the Aztec Editor within SwiftUI, as the custom fields editing area are built with it. This is done by creating AztecEditorView as UIViewControllerRepresentable.

What this PR adds:

1. AztecEditorView moved to its own file for reusability.
2. EditorFactory updated with customFieldRichTextEditor() function and made more generic for non-product contexts.
3. Added onContentChanged to retrieve the latest content in Aztec.
4. Adds implementation of the AztecEditorView in CustomFieldEditorView.
5. Adds logic to check whether there's a recent change in the content of Key / Value field. It is used to enable/disable "Save" button.

In hindsight, the implementation could probably be better in a separate PR, but I hope this is small enough to check both.

Text	HTML

Steps to reproduce

1. Go to Orders and open an Order that has custom fields in it,
2. Tap View Custom Fields, ensure the Custom Fields list screen is shown,
3. Tap a custom field, ensure the editor is loaded with the key and value shown properly
4. [Testing related to this PR starts here] Use the "Text"/"HTML" toggle and switch to "HTML"
5. Ensure that the Aztec Editor is loaded with the value of the custom field shown
6. Add some changes to the value, ensure the "Save" button is now enabled,
7. Switch back to "Text",
8. Ensure that the Text Editor shows the latest value,
9. Do the same Aztec test with other custom fields that has HTML string value. Aztec should render the HTML correctly.

** Known behavior / possible issue **

• When switching from Text to HTML, Aztec will automatically try to format things the way it wants and it will trigger a value change. You can see this in the video below where the <p> tag is automatically stripped. This is still being discussed and if any change is needed, it will be handled in a separate PR. Feel free to ignore for now.
• Some strings are not translatable yet, these are functionality-related strings and I'm keeping them that way to keep it flexible in case we need to change them. They will be updated in later PRs.

Testing information

I tested this in Simulator for iPhone with iOS 17.5. Check video below for more details.

As suggested downthread, I also smoke-tested Aztec editor in Product Description and Short Description and they worked fine in my test. Check video below also.

Video

Aztec Editor:

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-09-24.at.14.48.10.mp4

Smoke tests in Products:

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-09-24.at.19.54.39.mp4

Reviewer (or Author, in the case of optional code reviews):

Please make sure these conditions are met before approving the PR, or request changes if the PR needs improvement:

• The PR is small and has a clear, single focus, or a valid explanation is provided in the description. If needed, please request to split it into smaller PRs.
• Ensure Adequate Unit Test Coverage: The changes are reasonably covered by unit tests or an explanation is provided in the PR description.
• Manual Testing: The author listed all the tests they ran, including smoke tests when needed (e.g., for refactorings). The reviewer confirmed that the PR works as expected on all devices (phone/tablet) and no regressions are added.

[dangermattic]

	1 Warning
⚠️	This PR is assigned to the milestone 20.2.1. The due date for this milestone has already passed. Please assign it to a milestone with a later deadline or check whether the release for this milestone has already been finished.

Generated by 🚫 Danger

[itsmeichigo]

@hafizrahman Is this PR ready for another review yet?

[hafizrahman]

@itsmeichigo thanks for the ping! I left this PR this week for HACK week, but I'll get back to you on this on Monday. At the very least I still need to update this with the latest trunk

[wpmobilebot]

📲 You can test the changes from this Pull Request in WooCommerce iOS by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce iOS
	Build Number	pr13925-13b7bec
	Version	20.6
	Bundle ID	com.automattic.alpha.woocommerce
	Commit	13b7bec
	App Center Build	WooCommerce - Prototype Builds #11054

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

[hafizrahman]

@itsmeichigo We had a last minute design change yesterday so I had to rework everything. This should be good to review again.

I have updated the original post with the latest instruction and screenshots/video, so perhaps it's easiest to treat this as a new review.

In terms of reviewing by commits, I had a few revert commits to undo the previous work, and the latest ones to review are the commits starting from 31cf7e3

[itsmeichigo]

Thanks for the updates @hafizrahman. Since you updated some code in EditorFactory affecting Product description and short description, it's worth it to do smoke test on the features to ensure they still work as expected.

I left some other comments for improvements below.

[itsmeichigo]

❓ Could you explain the need for using DispatchQueue.main.async here?

[hafizrahman]

Ah, I added this in the commit message but it wasn't obvious:

Also fixes "Modifying state during view update" in AztecEditorView

This fixes the same issue as in the 314a522 commit.

[itsmeichigo]

That error hints an incorrect use of SwiftUI. Using DispatchQueue.main.async is just a workaround, and I'm unsure it actually fixes the problem.

Instead, try using @Binding only:

struct AztecEditorView: UIViewControllerRepresentable {
    @Binding var content: String

    func makeUIViewController(context: Context) -> AztecEditorViewController {
        let controller = EditorFactory().customFieldRichTextEditor(initialValue: content)

        guard let aztecController = controller as? AztecEditorViewController else {
            fatalError("EditorFactory must return an AztecEditorViewController, but returned \(type(of: controller))")
        }

        aztecController.onContentChanged = { content in
            self.content = content
        }
        return aztecController
    }
}

[hafizrahman]

Thanks, that solution makes sense to me but it's showing the same issue:

(The warning only appears when actually tapping the "HTML" switcher in the Simulator).

[itsmeichigo]

This happens because content is updated immediately upon view creation. A workaround:

[hafizrahman]

Updated in 60d5f4b

[itsmeichigo]

Also, I tried this sample HTML code in the HTML mode but the body content does not show up. Is that an issue with Aztec, should we raise an issue for the library?

Simulator.Screen.Recording.-.iPad.10th.generation.-.2024-09-24.at.17.00.37.mp4

[hafizrahman]

Also, I tried this sample HTML code in the HTML mode but the body content does not show up. Is that an issue with Aztec, should we raise an issue for the library?

That is indeed Aztec's default behavior, it:

• only accepts certain subset of HTML tags, and others are stripped off.
• some tags are changed to square bracket/shortcode format.

Here's the same behavior from Short Descriptions in Products. I'm using the Code icon toggle in the toolbar to switch from code to rich text mode, and the autoformatting happened there too:

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-09-24.at.18.39.07.mp4

This seems to stem from the fact that Aztec is meant for writing blog posts, thus tags like html or body should be stripped off as it would create issue in a blog post context.

We discussed this in Slack p1725529996823859/1724862433.885169-slack-C03L1NF1EA3 . Initially we wanted to use Aztec immediately if HTML content is detected, but the issue you saw made us change it so that merchants have to intentionally choose HTML editor for this to happen. Our hypothesis also is that HTML editing is going to be a small subset of the usage, and it's more like a nice-to-have feature. This is just the i1 decision though, and we should listen to users for future iterations.

[hafizrahman]

Thanks for your reviews @itsmeichigo , this is good for another round.

Update: I also updated the original post with my smoke testing Aztec on Product. Thank you for the suggestion!

[itsmeichigo]

I left some responses in the discussions above, could you take a look? They were not set as a new round of review.

[hafizrahman]

@itsmeichigo This is good for another review, thanks. Do let me know if I miss something.

[itsmeichigo]

Thanks for the updates!