Details

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

Installation

Pro Extension

All Tiptap Pro extensions require access to our private registry, set this up first.

Once done, you can install the extension from our private registry:

npm install @tiptap-pro/extension-details

This extension requires the DetailsSummary and DetailsContent node.

Settings

persist

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

Details.configure({
  persist: true,
})

openClassName

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

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

HTMLAttributes

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

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

Commands

setDetails()

Wrap content in a details node.

editor.commands.setDetails()

unsetDetails()

Unwrap a details node.

editor.commands.unsetDetails()

Usage