Avoid selection background highlight within selected node

Hello!

I have implemented a custom math node in my ProseMirror project (using katex). Up until this point, whenever such a node was selected, the content within the node was not highlighted in blue (as usual text selections are). But since I’ve upgraded from 0.18 to 0.21 this started happening.

Any idea how I can I avoid the blue highlighting? I.e. how can I get what’s on the left instead of what’s on the right, when I select a node?

Imgur

When a node is selected (and ProseMirror is focused) the DOM selection will be set across the node. You’ll have to use a CSS hack to hide selection highlighting inside of the node when the editor is focused. See for example the way the footnote demo, which has a similar problem, does it.

1 Like

Would preventing selection background (blue highlight) in the atom NodeView that renders an input component be possible? It seems that every input component gets the highlight. Doesn’t matter if it has pointer-events: none or user-select: none rules applied. Zrzut ekranu 2022-07-19 o 12.52.41

You can in most cases hide that using the ::selection pseudo-selector, setting a transparent background.

1 Like