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