diff --git a/prosemirror/prevent-extra-whitespace-in-nodeviews.md b/prosemirror/prevent-extra-whitespace-in-nodeviews.md new file mode 100644 index 0000000..851024b --- /dev/null +++ b/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. diff --git a/prosemirror/use-a-svelte-component-as-a-nodeview.md b/prosemirror/use-a-svelte-component-as-a-nodeview.md index f0931d6..73890f1 100644 --- a/prosemirror/use-a-svelte-component-as-a-nodeview.md +++ b/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.