Add text alignment prop for centering image captions

[mchowning]

Description

This PR adds a textAlign property to the ReactAztecManager so the text in image captions can be centered. See the companion gutenberg PR for usage on the React Native side.

This addresses the loss of center alignment for image captions that was introduced when the image caption was switched to use a RichText component.

⚠️ Implementation of the textAlign prop still needs to be completed on iOS.

Test Cases

1. An image caption's text should have center alignment when the image caption is not selected.
2. An image caption's text should have center alignment when the image caption is selected.
3. An image caption's text should have center alignment when the image caption is being edited.
4. When an image with an empty caption is selected, the placeholder text "Write caption..." should appear centered.
5. Image caption lines that are wider than the available space should wrap to a new line.
6. Pressing the enter key while editing an image caption should add a new line to the image caption.
7. It should be possible to add bold, italic, link, and strikethrough styling attributes to an image caption.

Issue Adding New Lines to Styled Text

One issue that exists on Android is that tapping enter to add a new line to a caption that has styles applied will frequently not move the cursor to the newly created line. I think that this is a broader issue with RichText components that span multiple lines (I'm looking at you list blocks), which will be resolved by @hypest's PR Fixing List Block Handling (see my comment on that PR discussing this issue). For that reason, I do not think this issue should block this PR.

[mchowning]

Hey @etoledom ! 👋 Can you look into the iOS implementation for this when you have some time? I'm hoping we can take some inspiration from how Reat native's RCTBaseTextViewManager adds an NSTextAlignment textAlign property to update our RCTAztecViewManager to export a textAlign property to react. Of course, I can't actually test this out, so I'm sure it won't be that easy! 😄

[etoledom]

Thank you @mchowning ! No worries, I'll check the iOS part 👍

[etoledom]

Added a commit that handles text alignment on iOS Aztec Wrapper.

Note: New lines on iOS is not yet handled correctly. ref: WordPress/gutenberg#14883 (review)
Fixed here: #945

@SergioEstevao could you take a look at the iOS part?
And @hypest, @daniloercoli, @marecar3, @mkevins, could any of you review the Android side of this PR?
Thank you! 🙏

[mkevins]

I have tested this via Android emulator (Pixel 2 on API 27). All 7 cases in the description function as expected. However, I observed an issue where the text after the caret is lost after pressing [Backspace] to merge the two lines, followed by pressing [Enter] to split the line back to two.

Steps to reproduce:

1. Tap the image
2. Tap the caption area
3. Type "Test"
4. Press [Enter] (observe that the caret moves to a new line)
5. Type "Test"
6. Tap to the left of the second line (observe that the caret moves to the beginning of the second line)
7. Press [Backspace] (observe that the two lines are merged into one, with the text: "TestTest")
8. Press [Enter]

Expected result:

The caption has 2 lines with the text: "Test" on each line.

Actual result:

The caption has 1 line with the text: "Test", and the 2nd line is empty.

Screencast:

[mchowning]

Thanks for updating the feature branches with the latest from develop @etoledom ! I have merged those changes into both this PR and the gutenberg PR.

@mkevins: this should be ready for retest. In my testing, the issue you observed is fixed by the latest changes that were pulled in from develop.

⚠️ One note on my merge. There was a small conflict on the iOS side that I had to resolve manually. It seemed like a pretty straightforward conflict to resolve (famous last words), but since I cannot check iOS myself, I would like someone to double check that my merge did not break iOS. My manual conflict resolution is in a separate commit from the automatic merge. The conflict arose because a line that was removed on develop got a minor formatting change in this PR.

[mkevins]

I tested the cases again, as well as the previously reported issue, and everything is now working as expected. 🎉

[SergioEstevao]

Tested it on iOS and it's working great.

[etoledom]

There is some issue with UI Tests on PRs from external contributors.
Merging since UITests are passing locally.

[etoledom]

Great job @mchowning ! 🎉