Text with emojis is not properly aligned with the bullet point in List block

[fluiddot]

Describe the bug
Add emoji characters to List block pushes the text lines 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

[fluiddot]

This issue can be reproduced in the Paragraph block too so most likely is related to how emojis are rendered.

[fluiddot]

As far as I investigated the issue looks like it's coming from Aztec, actually I managed to reproduce it when switching to classic editor.

[guarani]

I can reproduce this on WPiOS all the way back to 15.8. It could be present in earlier versions but that's the oldest version I could find on TestFlight. I checked WPAndroid and issue is not there.

As far as I investigated the issue looks like it's coming from Aztec, actually I managed to reproduce it when switching to classic editor.

I tested the example app that comes with Aztec and couldn't reproduce the issue (there's a Carthage issue that breaks the build but a fix is here).

[fluiddot]

Thanks @guarani for checking it 👍 !

I'm going to check it too in the example app and investigate further, by the way after testing it in the WordPress app I managed to produce a fix, you can check the PR 😃 .

[fluiddot]

I tested the example app that comes with Aztec and couldn't reproduce the issue (there's a Carthage issue that breaks the build but a fix is here).

I spotted that the font family is different in the example, maybe that's why the issue can't be reproduced there.

Besides the height of the text looks different in each case:
WordPress app:

Aztec example:

[fluiddot]

I tried to change the font family of the example and it confirm that the issue can be reproduced.

You can try it by changing line the default content font in:
https://github.com/wordpress-mobile/AztecEditor-iOS/blob/develop/Example/Example/EditorDemoController.swift#L1119

In my case I used as value:
UIFont(name: "HelveticaNeue-Medium", size: 14) ?? UIFont.systemFont(ofSize: 14)