Skip to content

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

Merged
nperez0111 merged 3 commits intomainfrom
fix/blo-936-toggle-block-details-summary
Mar 11, 2026
Merged

fix: use <details>/<summary> for toggle block HTML export#2524
nperez0111 merged 3 commits intomainfrom
fix/blo-936-toggle-block-details-summary

Conversation

@YousefED
Copy link
Copy Markdown
Collaborator

@YousefED YousefED commented Feb 26, 2026

Summary

Toggle list items and toggle headings now export to external HTML using semantic <details>/<summary> elements and can be parsed back from them, completing the round-trip.

Closes #1936

Changes

Export (toExternalHTML)

  • types.ts — Added optional childrenDOM property to toExternalHTML return type
  • serializeBlocksExternalHTML.ts — Children appended to childrenDOM when set
  • ToggleListItem/block.ts — Exports as <li><details><summary><p>...</p></summary></details></li>
  • Heading/block.ts — Wraps in <details><summary> when isToggleable: true

Parse (parse / parseContent)

  • getDetailsContent.ts — Shared helper for parsing <details>/<summary> into inline content + nested children, using ProseMirror's fitting algorithm (same pattern as getListItemContent)
  • ToggleListItem/block.ts — Parses standalone <details> and <li> containing <details>
  • Heading/block.ts — Parses <details> containing <summary> with <h1>-<h6>
  • createSpec.tsparseContent can now return undefined to fall through to default inline parsing
  • types.ts — Updated parseContent return type to Fragment | undefined

Testing

  • 7 parse test cases: toggleListItem, toggleListItemWithChildren, toggleListItemWithImage, toggleHeading, toggleHeadingWithoutChildren, standaloneDetailsSummary, mixedToggleAndBulletList
  • 3 export-parse round-trip equality tests
  • All 1118 tests pass

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

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 placed inside the <details> element via
a new childrenDOM return property on toExternalHTML.

Closes BLO-936
@vercel
Copy link
Copy Markdown

vercel bot commented Feb 26, 2026

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

Project Deployment Actions Updated (UTC)
blocknote Ready Ready Preview Mar 6, 2026 5:39pm
blocknote-website Ready Ready Preview Mar 6, 2026 5:39pm

Request Review

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Feb 26, 2026

Open in StackBlitz

@blocknote/ariakit

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

@blocknote/code-block

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

@blocknote/core

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

@blocknote/mantine

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

@blocknote/react

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

@blocknote/server-util

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

@blocknote/shadcn

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

@blocknote/xl-ai

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

@blocknote/xl-docx-exporter

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

@blocknote/xl-email-exporter

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

@blocknote/xl-multi-column

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

@blocknote/xl-odt-exporter

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

@blocknote/xl-pdf-exporter

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

commit: 8b36d1e

| {
dom: HTMLElement | DocumentFragment;
contentDOM?: HTMLElement;
childrenDOM?: HTMLElement;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know about this childrenDOM, maybe it is because we don't have an equivalent for the editor rendered version.

Copy link
Copy Markdown
Contributor

@nperez0111 nperez0111 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's make sure this is the direction we want to go with this

@nperez0111 nperez0111 merged commit bff14ff into main Mar 11, 2026
7 checks passed
@nperez0111 nperez0111 deleted the fix/blo-936-toggle-block-details-summary branch March 11, 2026 19:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

HTML export of the toggle block should use <details><summary>

2 participants