Introducing prosemirror-details-list and user interaction testing techniques

Show
1

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. https://prosemirror-details-list.vercel.app/

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')))

    fireEvent.click(screen.getByText('toggle'))
    expect(screen.getByRole('group')).toBeVisible()
    fireEvent.click(screen.getByText('toggle'))
    expect(screen.getByRole('group')).not.toBeVisible()
  })

ref: https://github.com/MH4GF/prosemirror-details-list/blob/1300d18dd1299cfc938158825cbcde9e018c577f/src/tests/DetailsView.test.ts

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!

2 Likes
2

Nice, this is very useful to have.

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

3
  • 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
4

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.

renamed!