Prevent extra whitespace in NodeViews

prosemirror/prevent-extra-whitespace-in-nodeviews.md

@@ -0,0 +1,7 @@
+# Prevent extra whitespace in NodeViews
+
+While trying to build a [ProseMirror `NodeView`](https://prosemirror.net/docs/ref/#view.NodeView) using a [Shoelace dropdown](https://shoelace.style/components/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`](https://developer.mozilla.org/en-US/docs/Web/CSS/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.

prosemirror/use-a-svelte-component-as-a-nodeview.md

@@ -2,7 +2,7 @@
 
 The ProseMirror rich text editor library has a concept called `NodeView` for [rendering custom widgets with a document](https://prosemirror.net/docs/guide/#view.node_views).
 
-To use a NodeView, you write a "constructor" function that takes in the ProseMirror `Node`, `EditorView` and a function to get the node's position. That function is expected to set up the DOM for the custom widget and return an object implementing the [`NodeView` interface](https://prosemirror.net/docs/ref/#view.NodeView).
+To use a `NodeView`, you write a "constructor" function that takes in the ProseMirror `Node`, `EditorView` and a function to get the node's position. That function is expected to set up the DOM for the custom widget and return an object implementing the [`NodeView` interface](https://prosemirror.net/docs/ref/#view.NodeView).
 
 The examples set up DOM using vanilla JS, but it's pretty simple to instead create a DOM element and render a framework component inside of it. This general approach should work for any framework — Svelte, React, Solid, etc — as well as with web components.