Firefox contenteditable="false" cursor bug

1

Hi! I came here after spending considerable time implementing a simple autocomplete input with embedded entities. This is very similar to the ProseMirror’s dino demo.

I have a question and a bug report :blush:

The bug: I can see that you have the same issue that I’ve encountered: whenever there is a contententeditable="false" right inside of the contenteditable, the cursor disappears in Firefox. For example, in the dino demo you can remove (backspace) all the text before the dino to see that the cursor is invisible. It’s there in Chrome.

The question: what is the reasonable approach to implement my use case? I need just a single line of plain text + the “dinos” (not exactly images, but interactive nodes that will be handled by the outside code). I’ve created a simple demo using ProseMirror that already works better that my own code:

image
image2388×410 88.1 KB

My concern is that ProseMirror is a pretty large package — 250KB of JS seems excessive. What I like about ProseMirror is that it already has a lot of knowledge about the peculiarities of the contenteditable. So far the attempts to fix my own tiny codebase seem endless.

2

This is a browser bug that ProseMirror unfortunately cannot do much about. Often it works to add kludges to your rendered nodes to avoid it—for example a wrapper element with zero-width space on both sides of the real widget.

3

Thanks, that’s basically what I’m doing, but keep finding new bugs. My approach is to bracket all the elements with contentless tags (I use imgs) that pretend to be spaces.