Ignoring nodes inside of a Prosemirror instance


#1

Is it possible to manually insert a node inside of a Prosemirror instance, have it not be a part of Prosemirror’s internal state, and also have Prosemirror not render over that node?

My use case is the following:

  1. Our app has multiple ways to edit content, one of which is inline text content where we are using Prosemirror
  2. In our editor we’re adding functionality to have inline UI with options of what content are addable given the context (paragraphs, images, etc)
  3. Our goal is to re-use the same code for this adding experience both in and outside of Prosemirror

Outside of Prosemirror, our implementation finds the domNode where we want this “inline adder” to render, and we mount a react component (that has the buttons for what you can add) inline after that node. Ideally we could use the same functionality for inside of our Prosemirror instance and render this component between two <p>s for example

Is there a way to have something like a:

<div prosemirror-ignore-me-please>...</div>

Where Prosemirror won’t render over that node or include it in its internal state? And having the node mount and unmount won’t trigger a change event?

Or is the only way to accomplish this inline behavior, where a node isn’t controlled by Prosemirror or represented in the state object, to utilize Decoration.Widget API?


#2

This is basically what widget decorations do, I think, so yeah, that’s what you should probably use.