Prevent extra whitespace in NodeViews
While trying to build a ProseMirror NodeView
using a Shoelace dropdown, I kept getting a ton of extra vertical space around the dropdown trigger.
The fix turned out to be really simple. ProseMirror sets some styles on its root element. The culprit turned out to be white-space: break-spaces
— an inherited style which preserves newline characters.
gi
I didn’t want to override that style for the whole ProseMirror element, but setting white-space: normal
on the NodeView
element fixed it easily.