Styling empty paragraphs

I want to show empty paragraphs with a background-color.

.ProseMirror-content > p:empty {
  background-color: lightgoldenrodyellow;
}

doesn’t work, because empty paragraphs have <br pm-ignore="trailing-break"> child. Any css tricks to work around this? If no, is there a good way to plug in to listen to changes and add classes to PM children?

I wanted to do that for placeholder text as well.

I don’t think there is a CSS workaround. And at the moment, ProseMirror also doesn’t expose anything helpful in this area. Once we support ‘node decoration’, that might be used for this, by keeping track of empty paragraphs and decorating them.

1 Like

I did manage to get this working, but I have an issue in the updated (0.17.x) version. I also need to listen for Android compositionstart events.

Is there a good way to update decorations outside of the plugin.state.apply flow?


A custom node view for paragraphs, which gives them an extra class when they are empty, is the way I’d currently tackle this issue.

Is there a good way to update decorations outside of the plugin.state.apply flow?

No, there’s not supposed to be any need for such a thing. Compositions are an interesting corner case – I’ve opened #543 to track it.