Creating a switchable list

1

Hi, guys! I need to create such schema type:

1

2

The title and description are editable. What is the best way to make it? Should I use here NodeView API? Or is it possible only with the description of the scheme?

1 Like
2

Or isn’t possible? Because we can only have one contentDOM element

3

The schema for this is pretty straightforward (assuming summary will be inline only here):

 details: {
    content: "summary block*",
    group: "block",
    parseDOM: [{tag: "details"}],
    toDOM(): {
      return ["details", 0]
    }
},
summary: {
    content: "inline*",
    parseDOM: [{tag: "summary"}],
    toDOM() {
      return ["summary", 0]
    }
}

but the difficulty is more about UI interactions. The details will remain closed here, and clicking on them will have to effect. I assume this should be fixed through NodeViews to handle the open attribute or something, but I have no enough expertise to answer about this.

4

Maybe a little late, but I ran into a similar problem. I have created a simple library that uses NodeView to implement a details tag that can open/close. I hope this is helpful.