Introducing prosemirror-details-list and user interaction testing techniques

Hi there!

I am developing a rich text editor at work that uses ProseMirror, where we need support for open/closeable toggles using the html details tag.

Since the solution was generic and product-independent, we decided to release it as OSS. I’m publishing it on npm also so you can use it!

I also deploy to vercel, so you can touch the demo.

The implementation is simple using NodeView, but what I want to introduce to the community is that user interactions on the editor based on ProseMirror can be expressed as automated tests using testing-library. like this:

  it('can open and close when click summary tag', () => {
    setupView(doc(details(summary('toggle')), paragraph('inner text'), paragraph('outer text')))'toggle'))


This technique can be used, for example, for displaying decorations and handling paste events.

It is good to be able to prepare automated tests to accelerate development while maintaining quality. I hope this helpful!


Nice, this is very useful to have.

(Why is it called ‘details-list’ though? It doesn’t seem to involve lists.)

  • open/collapse ui like you provide is very useful.
  • the schema you provide is customizable; it supports custom content including list.
  • it’s better to rename this pkg.
  • tiptap just call it Details

thanks for reply! I had named it “list” because I thought it was the same thing as ordered list and unordered list, but it seems to me that just details would be fine.