Prosemirror: Issues with contenteditable=false on Android

[d4rkr00t]

Working on integrating editor based on prosemirror in our mobile products we've faced some critical for us issues with contenteditable=false on Android.

I've tested on:

• Android: 7.1
• Chrome: 56
• Nexus 5X and Emulator in Android Studio

Issues:

• Selection dismisses and keyboard closes when cursor meets contenteditable=false node – which is not good for UX of an editor.
• It's impossible to delete (e.g. Backspace) contenteditable=false node.

Example on CodePen:

http://codepen.io/iamsysoev/pen/ggVOeg

Our use cases:

• mention nodes e.g. @username
• media cards nodes e.g. carousel with images

Changes in prosemirror since 0.10:

Since recently prosemirror automatically adds contenteditable=false https://github.com/ProseMirror/prosemirror-view/blob/master/src/viewdesc.js#L429 which breaks android in aforementioned cases.

In prosemirror 0.10 it was possible to create leaf/inline node without contenteditable=false, but any text you type after such node becomes a part of this node on Android:

Related Chromium bugs:

• https://bugs.chromium.org/p/chromium/issues/detail?id=612446

Some thoughts:

I don't think it's possible to fix both these issues (since browser bug). But maybe you can come up with some workarounds for these issues. Because it's crucial for editor to have none editable nodes in somehow interact with them.

[ccorcos]

Any update on this bug?

[d4rkr00t]

AFAIK issue in Chromium is still open...

[ccorcos]

I solved this by using a zero-width space after the token and detecting when its deleted. I figured it out by using chrome://inspect with Quip ;)

[ccorcos]

I'm not using prosemirror btw. I build a custom editor but noticed that most editors have this problem. :/

[1Jesper1]

Any update?

[1Jesper1]

I experience this bug only while using the Gboard (software keyboard), I don't have this bug while using the Samsung keyboard (hardware keyboard).

[1Jesper1]

@ccorcos Could you please show how you solved this issue?

[ccorcos]

I'm not using prosemirror. I wrote my own editor and am doing some magic with a zero-width space.

[abhicool957]

I solved this by using a zero-width space after the token and detecting when its deleted. I figured it out by using chrome://inspect with Quip ;)

can u share some code examples? It will help us to resolve same.

[buddh4]

I could fix the issue with help of https://github.com/ProseMirror/prosemirror/issues/903 with:

  inline: true, 
  group: 'inline',
  selectable: true,
  draggable: true,

Note that in my tests draggable and selectable had to be set to true.

 toDOM(node) {
   const attrs = {
         contentEditable: 'false',
         style: 'display:inline-block'
      };
     return ['span', attrs, ['span', { style: 'display:block'}, '@'+node.attrs.name] ];
},

Tested with SwiftKey and Gboard, did not test with WebViews.