Issues with contenteditable=false on Android

Author: d4rkr00tCreated Feb 21, 2017Updated Apr 7, 2026

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.

kapture 2017-02-21 at 10 38 14

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:

kapture 2017-02-21 at 11 24 51

Related Chromium bugs:

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.