List block split problem with nested lists

[hypest]

List item creation has an issue that's not easy to describe. Look below for steps to reproduce.

To replicate:

(0. Using an external keyboard (like via Vysor) on Android)

1. Use an example html with nested lists like this one:

<!-- wp:list -->
<ul><li>line 1<ul><li>line 21</li><li>line 22<ul><li>line 31</li><li>line 32</li></ul></li></ul></li><li>line 3</li><li>line 4</li><li>line 5</li></ul>
<!-- /wp:list -->

2. Place the caret at the end of the "line 22" line and tap on Enter
3. Notice the caret going at the start of the "line 31" line.
4. Place the caret at the end of the "line 31" line and tap Enter again
5. Notice a new list item appearing above the "line 32" line but, having a 1 char in it, which is now missing from the line above leaving that as "line 3"

[hypest]

👋 @koke , I think this issue is annoying but not a blocker for the code-freeze to re-enable lists, do you think otherwise perhaps?

[koke]

I don't think it's a blocker right now (we have disabled the nested list buttons, right?), but let's put it on the project and get it sorted out for v2.

[SergioEstevao]

@hypest I tested this on iOS and it now looks ok, are you still seeing this on Android?

[hypest]

The issue is still happening on Android when using an external keyboard, like Vysor. But, step 3 doesn't happen when using the built-in virtual keyboard. Step 5 though does happen always on Android, even with the virtual keyboard.

On iOS, the issue still happens when running the demo app on an iPhone X 12.2 simulator. Gutenberg-mobile hash: 42d8443

[SergioEstevao]

The issue is still happening on Android when using an external keyboard, like Vysor. But, step 3 doesn't happen when using the built-in virtual keyboard. Step 5 though does happen always on Android, even with the virtual keyboard.

On iOS, the issue still happens when running the demo app on an iPhone X 12.2 simulator. Gutenberg-mobile hash: 42d8443

@hypest can you make sure you have the correct version of Aztec iOS by runinng yarn preios. You need to have Aztec version 1.6.0

[hypest]

I tried yarn preios before yarn ios but no change, I can still see the issue on iOS.

[SergioEstevao]

I've been testing this for a while, and my main conclusion is that all this issue happen if there a sync problem between the native version of the HTML and whatever the JS side creates.

If the two string representations are not exactly the same in terms of text when you press Enter or press Delete we send an event from Native to JS that says we pressed Enter and a location. If the text doesn't match in one character the place you are seeing the cursor on the native component is not the same, the format library splits in a different place and we start to see strange results.