iOS selectable text and highlight issue

Ionic Framework ionic-v3
1

There seems to be an issue when you highlight text in iOS and you scroll in the contenteditable element. As you scroll the highlight indicator/selector doesn’t follow the highlighted text and remains in the same place, until you let go and then it will show.

Highlight text before scrolling:
IMG_5715

While scrolling:
IMG_5716

However, if you highlight a few words, then it does follow but is very jerky as you scroll. When you then go back to highlighting a word then it’s jerky instead of delayed like I explained above.

Is there something I need to enable to be able to handle scrolling and highlighting text at the same time?

I hope the above make sense.

2

fist bumping this post up

3

See:

4

thanks for your response.

I previously came across Quill but had no luck with it, but now managed to get it working. However it still has that highlight/scroll issue.

I tried Prosemirror which looks promising and found this https://github.com/urshofer/ng2-prosemirror

But didn’t get far. It seems you have to install different modules separately and the readme isn’t great.

I might give it another go.

5

I also tried this: https://github.com/codiak/angular2-medium-editor but still has the issue.

I even tried https://github.com/chymz/ng2-codemirror but still has that issue.

I wonder if it’s something in Ionic when you scroll in iOS :thinking: because I’ve tested contenteditable + normal textarea and both behave the same when you highlight text, scroll and only when you let go, does the highlight indicator catch up with the text.

6

See: Building a Text Editor for a Digital-First Newsroom | by Sophia Ciocca | NYT Open