Text with emojis is not properly aligned with the bullet point

[fluiddot]

Related to wordpress-mobile/gutenberg-mobile#2935

Describe the bug
Add emoji characters to a list item with text pushes the content some pixels down.

To Reproduce

1. Go to a post/page.
2. Add a List block.
3. Add text with at least one emoji character.

Expected behavior
Text lines should be aligned with the bullet point.

Screenshots

list_block_emoji_bug.mp4

Smartphone (please complete the following information):

• Device: iPhone 8
• OS: iOS 14.0
• Version WordPress 16.3

[guarani]

Just noting that from what I've seen, this bug isn't present in the example app of this Aztec project. It might very well still be an Aztec issue since @fluiddot noted that it's present in both the Classic and the Block editor.

[fluiddot]

I've investigated the issue further and I found out that something similar happens in other apps. For example, I tested on the Slack app and it also happens that when you add an emoji character, the text line gets bigger. In this case the bullet point is properly aligned with the content so there’s no bug, my impression is that this is is the intended behaviour from OS perspective.

However in our case, the problem is that we don't properly aligned the bullet point so the fix could be to change how it’s rendered within Aztec.

Fortunately after the investigations I managed to create the fix, I'm a newbie on iOS TextKit and Aztec so I'd appreciate that someone else verifies the fix 😊 .