search

wordpress-mobile / AztecEditor-iOS

A reusable native iOS visual HTML text editor component.
Mozilla Public License 2.0
612 stars 147 forks source link

Text with emojis is not properly aligned with the bullet point #1314

Open fluiddot opened 3 years ago

fluiddot commented 3 years ago

Related to https://github.com/wordpress-mobile/gutenberg-mobile/issues/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

guarani commented 3 years ago

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 commented 3 years ago

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 😊 .