octobercms / october

Self-hosted CMS platform based on the Laravel PHP Framework.

Home Page:https://octobercms.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Issues with editor on mobile devices

andysh-uk opened this issue · comments

I have some usability issues with the rich text and markdown editors when used on a mobile device (iPhone 12).

On both editors when they are maximised and there is more content to fit in the editor (so you need to scroll) you cannot put the cursor in the bottom line - you can only drag it to the second-to-last line.

In the rich text editor, when it is not maximised and there is a decent amount of content in it, I lose the cursor. Like the cursor just never shows any more and then weird things start happening. Like pressing and holding to get the copy & paste doesn’t work, pressing Enter deletes a block of text.

From what I can tell, this only happens after I’ve previously started to copy & paste text from earlier in the content, but once it’s happened, it remains in that article - closing the browser, logging out of October and back in - doesn’t fix it.

commented

Hi @andysh-uk

This sounds like a JavaScript error has halted the editor's UI. Can I confirm are you using Safari or Chrome on iPhone 12?

Hi @daftspunk

Aah ok. I’m using Safari, latest version 17.0.2, although it was happening before on 16 too.

commented

If you don't mind, can you check to see if it happens using Chrome's app?

Of course!

Just tried Chrome and the following still applies:

  • cursor is not visible until you maximise the editor window - to qualify this a bit more: the cursor seems to stop being available after you’ve scrolled down 2 or 3 times the size of the editor, then wherever you tap, it doesn’t seem to place the cursor. Scroll back up a bit and tap and it’s back! It seems like there is a cut off or maybe something overlaid further down the editor
  • after maximising, the cursor works fine for all but the last line of content: then you can’t select anything or put the cursor on the last line

However:

  • copy & paste seems to still work fine
  • the “pressing enter deletes a block of text” is a bit more obvious what’s happening: when you tap at the end of a paragraph it seems to highlight the last word or few words (I don’t see this in safari) so when you press enter, it replaces the words that were highlighted with a new (blank) paragraph

This last point doesn’t happen to the end of a line where it’s not a paragraph end (e.g. a BR tag)

I’ve tried to show you this in a video while working on a new piece of content. There is definitely a cut off point when the cursor disappears and it stops working as expected.

In the video, keep an eye on the return key when the cursor disappears (around 00:29). After mistyping and deleting some letters, when I then press SHIFT+Return it seems to put back my deleted letters.

After 00:47, you don’t see, but I’m tapping around the last paragraph but the cursor never registers (and typing puts letters in the last place the cursor was) but scrolling back up before the “cut off” is fine, the cursor comes back.

I have looked at this in Chrome desktop and there are no obvious JavaScript errors (but equally it works fine on desktop.)

RPReplay_Final1696447793.mp4
commented

This is fixed in v3.6.11