Details extension

The Details extension enables you to use the <details> HTML tag in the editor. This is great to show and hide content.

Install

npm install @tiptap/extension-details

This extension requires the DetailsSummary and DetailsContent node.

Specify if the open status should be saved in the document. Defaults to false.

Details.configure({  persist: true, })

Specifies a CSS class that is set when toggling the content. Defaults to is-open.

Details.configure({  openClassName: 'is-open', })

Custom HTML attributes that should be added to the rendered HTML tag.

Details.configure({  HTMLAttributes: {  class: 'my-custom-class',  }, })

Wrap content in a details node.

editor.commands.setDetails()

Unwrap a details node.

editor.commands.unsetDetails()