Details extension
Pro Extension
The Details extension enables you to use the <details>
HTML tag in the editor. This is great to show and hide content.
Install
Set up access to Tiptap’s private repository
Gain access to this pro extension by registering for a free Tiptap account and following our access guide to Tiptap’s private repository.
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()