DetailsSummary 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

Usage

import { Details, DetailsSummary, DetailsContent } from '@tiptap/extension-details'

const editor = new Editor({
  extensions: [Details, DetailsSummary, DetailsContent],
})

Settings

HTMLAttributes

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

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