[iOS] Broken auto-capitalization for the first letter in each new line (iPhone)

[zhaoyouliang]

Is this a bug report or feature request? (choose one)

🐞 Bug report
Iphone 7plus : version :11.2.2

💻 Version of CKEditor

ckeditor5-build-inline 3

📋 Steps to reproduce

When composing notes on his iPhone, Damien is used to the auto-capitalization feature his phone normally provides in other text areas. He'd like the first letter in each line to automatically become capitalized.

✅ Expected result

auto-capitalize

❎ Actual result

not

📃 Other details that might be useful

[zhaoyouliang]

Do you have a good way to do it ?@Reinmar
thanks

[Reinmar]

It's a bug so it requires a fix on our side. It's a tricky topic because we don't control this native behaviour (switching the onscreen keyboard to uppercase after a period+space and after a new line).

What we need to do, therefore, is to not get in a browser's way. This is tricky, because we want to handle input by ourselves. But, unless things will start to jump on the screen, we may try to allow the browser to perform its default action. There's a chance that removing this line: https://github.com/ckeditor/ckeditor5-enter/blob/a5ae66e3c590bab3d982bd29f2c869ea84761981/src/enter.js#L45 will help. With the new renderer, there's a chance that we'll even avoid re-inserting the new paragraph.

cc @f1ames could you check it, out of curiosity?

[zhaoyouliang]

@Reinmar I use this for testing：

      .editor p:first-letter {
         text-transform: capitalize;
  }

I found it works on the web, but in the mobile browser. I open the switch of Auto - Capitalization, then found that can't be done in safari Implement capital . It does work on Android machines. That's what I found。thank you very much

[Reinmar]

This would be a workaround. Interesting, but not something that we can ship with. Not every new paragraph must start with an uppercase letter. And this workaround doesn't fix the output data, which would still be lowercased.

[f1ames]

What we need to do, therefore, is to not get in a browser's way. This is tricky, because we want to handle input by ourselves. But, unless things will start to jump on the screen, we may try to allow the browser to perform its default action. There's a chance that removing this line: https://github.com/ckeditor/ckeditor5-enter/blob/a5ae66e3c590bab3d982bd29f2c869ea84761981/src/enter.js#L45 will help. With the new renderer, there's a chance that we'll even avoid re-inserting the new paragraph.

Checked and removing mentioned line helps 👍 Haven't dive deeper what may get broken by this change though.

[derekm228]

After implementing this fix, a new issue arises:

1. Create first-level bulleting, enter a few lines of content.
2. Hit tab to create second-level bulleting, enter content and press enter

The cursor loses focus within the bulleting and immediately jumps to the top. Video attached:

Bulleting_Bug.zip

[josephdpurcell]

Note: I see a similar issue for ckeditor4 here ckeditor/ckeditor4#4180 and one from an old site here https://dev.ckeditor.com/ticket/12142. I identified a similar issue with CodeMirror5 codemirror/codemirror5#7009, though CodeMirror6 seems to not have the issue.

[Reinmar]

It works for me on iPad on ckeditor.com. When I press "." and Space on the keyboard, the autocap is enabled and an uppercased letter is inserted automatically. Same for what happens after pressing "Return" to insert a new line. Probably resolved by the migration to beforeInput.

What doesn't seem to work is autocap after a double space (that should insert a period character) because it inserts a double space. But this is an issue with that double space press.

[josephdpurcell]

@Reinmar your comment is enlightening to me. I just tested on ckeditor.com and see what you're saying, and that exact behavior I've observed with TinyMCE.

If someone were to attempt to address the double space issue not triggering space-period w/autocap, is there a place you would recommend looking first?