Content editable stops selection from working

1

At times, we’ve experienced strange issues around contenteditable=false and text selection with the mouse

To replicate:

  • Go to ProseMirror collab example and highlight a word, add a comment
  • Try selecting the word by click and dragging directly from the start of the comment (where the contenteditable=false is inserted)
  • Expected: The word is highlighted and dragging further will highlight more of the word
  • Actual: The cursor moves along with the mouse, but no text is selected

Browser: Chrome 113

Is contenteditable=false the best way of adding chroming to a ProseMirror editor or are there alternate methods?

2

It is also possible to overlay tooltip-like things by using coordsAtPos to position them over the editor. Firefox seems to handle the case with the uneditable widget fine, but indeed, it seems to completely throw off Chrome’s drag-selection behavior.

3

Thanks marijn, we’ll take a look at coordsAtPos!