fix: use <details>/<summary> for toggle block HTML export

[YousefED]

Summary

Toggle list items and toggle headings now export to external HTML using semantic <details>/<summary> elements instead of plain <div>/<li> tags. Children of toggle blocks are correctly placed inside the <details> element.

Closes #1936

Rationale

When exporting toggle blocks to HTML, the output rendered as plain <div> tags, making the toggle functionality completely lost. The <details>/<summary> HTML elements provide native, semantic toggle behavior that works without JavaScript.

Changes

• types.ts — Added optional childrenDOM property to toExternalHTML return type, allowing blocks to specify where children should be placed during serialization
• serializeBlocksExternalHTML.ts — When childrenDOM is set, children are appended there instead of being flattened into the parent document
• ToggleListItem/block.ts — toExternalHTML now produces <li><details open><summary><p>...</p></summary></details></li>
• Heading/block.ts — toExternalHTML wraps in <details><summary> when isToggleable: true

Impact

• Toggle list items and toggle headings now produce semantically correct HTML with native expand/collapse behavior
• Non-toggleable headings are unaffected
• The childrenDOM property is a general-purpose extension point that custom blocks can also use

Testing

• Added new lists/toggleWithChildren test case covering toggle list items and toggle headings with children
• All 509 tests pass (format conversion, clipboard, React)
• Updated snapshots for affected test cases

Checklist

• Code follows the project's coding standards.
• Unit tests covering the new feature have been added.
• All existing tests pass.
• The documentation has been updated to reflect the new feature

Additional Notes

The childrenDOM mechanism is generic — any custom block can return childrenDOM from toExternalHTML to control where children are placed in the exported HTML, instead of having them flattened.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
blocknote	Building	Preview	Feb 26, 2026 6:17pm
blocknote-website	Building	Preview	Feb 26, 2026 6:17pm

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/ariakit@2524

@blocknote/code-block

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/code-block@2524

@blocknote/core

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/core@2524

@blocknote/mantine

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/mantine@2524

@blocknote/react

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/react@2524

@blocknote/server-util

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/server-util@2524

@blocknote/shadcn

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/shadcn@2524

@blocknote/xl-ai

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-ai@2524

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-docx-exporter@2524

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-email-exporter@2524

@blocknote/xl-multi-column

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-multi-column@2524

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-odt-exporter@2524

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-pdf-exporter@2524

commit: 0653326