Markdown editor on Chrome for Android largely unusable

exentio commented 1 year ago

Describe the Bug

When trying to edit text with the markdown editor on Chrome for Android, the cursor skips all over the place, the scroll jumps back to the previous position of the cursor, selecting (especially select all) is often pointless, and other major annoyances that make it impossible to use. The issue doesn't happen with the WYSIWYG editor, and it doesn't seem to happen with Firefox. Also confirmed not to happen on iPad OS 16.3.1 using Chrome (on SlideOver to force the mobile interface).
My keyboard is Gboard and my device is a Google Pixel 6 on Android 13 (stock firmware).

Steps to Reproduce

Open the markdown editor on any text
Try to delete and write characters, scroll up or down

Expected Behaviour

The editing process should happen normally.

Screenshots or Additional Context

https://user-images.githubusercontent.com/14871029/224539657-0a1c8ff9-0a88-47ec-a8d8-d02402b5134c.mp4

Browser Details

Chrome (Android) 110.0.5481.153

Exact BookStack Version

BookStack v23.02

PHP Version

No response

Hosting Environment

Arch Linux, using the LinuxServer.io docker image and Nginx as a reverse proxy

jaymeh commented 1 year ago

I'm also having a similar issue using Chrome on a Samsung Galaxy S20FE. For the most part, I'm not quite experiencing exactly the same issues as above but I don't have much content currently.

One of the major annoyances for me is that when I hit the backspace button in the markdown editor on mobile, the line doesn't get removed and the keyboard disappears.

exentio commented 1 year ago

when I hit the backspace button in the markdown editor on mobile, the line doesn't get removed and the keyboard disappears.

Yup, having the same issue too. I have a feeling that it might interpret every line as an independent textbox. Doesn't explain all the other issues, but it explains this one

exentio commented 1 year ago

I'm bumping this because it's a severe usability issue. Yesterday I wrote a new page from my phone and I had no way to write a new line by pressing enter.

It's seriously keeping me from using the application, and I don't want to look for an alternative after having spent a lot of time moving my notes from a different service.

ssddanbrown commented 1 year ago

This may just be due to how the library used (CodeMirror 5) behaves on certain mobile device/browser scenarios to be honest, I don't think it was intended for mobile use.

I don't see much point spending the time to investigate and (if possible) fix the reported issues at this time since:

This has a low user impact.
This has likely been a pre-existing issue.
You reported this is not an issue on Firefox so there's a potential workaround.
I'm currently spending a lot of effort updating the library used to CodeMirror 6 which I think may be more mobile friendly, but is a very different editor so would make any additional work on the current editor redundant.

I'm waiting until after the CodeMirror 6 upgrade to check back on this to see how things work on mobile.

If this is really a big deal right now, it might be possible to add in a hack to show a plain text area input (With no syntax highlighting and no working preview) on mobile screen sizes instead of the current editor. Just let me know if that would help.

exentio commented 1 year ago

Thank you for your reply. If the CodeMirror 6 is supposed to fix the issue then I'll wait for the update and work around the issue for a while, at least I know that I don't have to consider switching: even without the time needed to switch to something else I wouldn't want to, I really like Bookstack and it's the only software that checks all the boxes, it's just that mobile and markdown are both part of my workflow

it might be possible to add in a hack to show a plain text area input

I guess it depends on how complex it is to add. If it doesn't take much time to add and can be enabled using a toggle in the settings I guess it can be useful for other people too. But if it takes a considerable amount of time away from other development and it makes Bookstack worse for those without the issue then I'd rather wait for the library update

ssddanbrown commented 1 year ago

Here's a hack if you want it:

<script type="module">
    const textArea = document.querySelector('#markdown-editor-input');
    if (textArea && window.innerWidth < 820) {
        setTimeout(() => {
            const cmEditor = document.querySelector('#markdown-editor .CodeMirror');
            if (!cmEditor) {
                return;
            }

            cmEditor.style.display = 'none';
            textArea.style.display = 'flex';
            textArea.style.flex = '1';
            textArea.style.height = '100%';
        }, 100);
    }
</script>

Just add that to the "Custom HTML Head Content" customization setting. Will hide the editor and use a plain text area on smaller screen sizes. Note: may break on updates, not official or supported.

exentio commented 1 year ago

Thank you, I also added textArea.style.WebkitOverflowScrolling = 'touch'; from here because I kept having some scroll issues

ssddanbrown commented 1 year ago

With the release of v23.05 the editor (and other code blocks) now use CodeMirror 6 which is a major overhaul & significant change these blocks, and I believe mobile usability has been built CodeMirror 6 to some degree.

From my testing, on FireFox and Chrome on Android, I encountered no issues while editing a markdown page. Therefore I'm going to go ahead and close this off but if you have new issues on v23.05 feel free to open as a new issue.

BookStackApp / BookStack