Discussion: how looks the perfect touch support of medium-editor?

[rvetere]

Hi folks,

i recently started developing some changes to get medium-editor running on touch devices too. As i discovered that contenteditable is working quite nicely on mobile browsers already (the prompt ist there, the keyboard shows up, we can type, select - do all the text things), i thought there must be only a small gap to get all of the rest running too.

Now i've introduced a new branch here "mobile-support" which already got my first code-change in it. I additionally added a new flag supportTouch in toolbar.js, which is turned off by default.

So to actually check it out what mobile support means in this branch - activate the supportTouch flag in your options object when instantiating MediumEditor ;) (Update: AND you have to be on an actual touch device too, the code checks for that)

Now, even when the toolbar is working on mobile - it will overlap the native toolbar of iOS or android, quite annoying. So i went further and did a thing - whenever we realize we are on a real touch device and supportTouch is enabled too - then we set the flag static always to true... Why?

This way, the toolbar will end be positioned statically on every mobile device (doesn't matter what you set for the flag static on your own) - statically positioned, it will not overlap the original toolbar anymore, which is cool so far but not the end solution i would say. I'm now at this point:

-> on the left we see the android emulator with opened toolbar, on the right an iOS simulator in the same state

Things left to do:

• some serious bugs on Android regarding the anchor form opening/editing
• some serious problems to actually debug an android emulator in this area of selecting text
• final decisions how the toolbar should look and behave on mobile
• a solution to dynamically "resize" a mobile toolbar when the available space of the mobile viewport is not sufficient

Now there are already some other threads, discussing some of the points:

• discussion about a toolbar to extend the menu, or show hidden buttons here
• place the toolbar like evernote does, at the bottom right at the keyboard:

-> big image

[steventhanna]

Have there been any updates to this? I would love to see this get merged.

[nmielnik]

I'm not sure if there have been any updates, @rvetere opened this to try to get feedback on what folks would expect the behavior to be. Do you have any expectations/recommendations regarding the questions posed in this issue @steventhanna ?

[steventhanna]

The only thing that I would love to see:

a solution to dynamically "resize" a mobile toolbar when the available space of the mobile viewport is not sufficient

And a suggestion: instead of using the Android Emulator, it might be easier for debugging and usability tests if ngrok is used to port the localhost traffic to an actual URL so it can be viewed on an actual Android device... Now if you don't have an actual Android device I suppose the emulator is the best option.

When I find some time I will dig into the code and try to come up with a solution to dynamically resize. I'm actively using this editor in a project, and so anything I could do to make this editor better would make my own project better. Thanks for all the hard work

[shyamal890]

Any updates on this?

[valpackett]

So I just tested medium-editor on my phone.

In Chromium, long press selection does not summon the toolbar, only double tap does. And then it gets obscured by the system popup:

Double tap does not select in Firefox, so there's no way to even get to the toolbar.

Quill does the right thing and shows up at the bottom (and works in Firefox):

medium-editor should do this as well.

[dhamaniasad]

So? This seems like one of the most basic things a rich text editor should implement, and this is the only problem that I see could keep a lot of people from using this editor. Why isn't there movement in the proper direction with regard to this issue?

[Honzazi]

Dear Developers - @rvetere - of awesome Medium Editor,
please, did you managed to make changes so the editor works on iOS and Android? Or, did you find some solution for it @myfreeweb @shyamal890 @j0k3r @steventhanna @dhamaniasad ??? Thank you very much

[trylovetom]

Any Update?

[dcsaszar]

I agree with @myfreeweb for a pragmatic solution:

Quill does the right thing and shows up at the bottom

MediumEditor already has code for showing the toolbar below the selection (currently used only if the selection is near the top): https://github.com/yabwe/medium-editor/blob/9156a11407451c0ee2e30d971798d6476de4d354/src/js/extensions/toolbar.js#L655-L659

Having a config for the preferred position would be nice.

{
    toolbar: {
        // preferred position of the toolbar relative to the selection, default: 'top'
        position: 'bottom',
    }
}

[thrownness]

@rvetere Hey, did your mobile touch support code ever get merged? Trying to get the toolbar to pop up during selection on iOS is really tricky right now.

[literakl]

What is the current status? This feature is an absolute must in 2020. Mobile first pattern rules now.