TypeCellOS · YousefED · Feb 26, 2026 · nperez0111 · Feb 28, 2026 · nperez0111
diff --git a/packages/core/src/api/exporters/html/util/serializeBlocksExternalHTML.ts b/packages/core/src/api/exporters/html/util/serializeBlocksExternalHTML.ts
@@ -319,7 +319,13 @@ function serializeBlock<
       }
     }
 
-    if (editor.pmSchema.nodes[block.type as any].isInGroup("blockContent")) {
+    if ("childrenDOM" in ret && ret.childrenDOM) {
+      // block specifies where children should go (e.g. toggle blocks
+      // place children inside <details>)
+      ret.childrenDOM.append(childFragment);
+    } else if (
+      editor.pmSchema.nodes[block.type as any].isInGroup("blockContent")
+    ) {
       // default "blockContainer" style blocks are flattened (no "nested block" support) for externalHTML, so append the child fragment to the outer fragment
       fragment.append(childFragment);
     } else {

diff --git a/packages/core/src/blocks/Heading/block.ts b/packages/core/src/blocks/Heading/block.ts
@@ -1,6 +1,6 @@
-import { createBlockConfig, createBlockSpec } from "../../schema/index.js";
 import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 import { createExtension } from "../../editor/BlockNoteExtension.js";
+import { createBlockConfig, createBlockSpec } from "../../schema/index.js";
 import {
   addDefaultPropsExternalHTML,
   defaultProps,
@@ -110,6 +110,20 @@ export const createHeadingBlockSpec = createBlockSpec(
       const dom = document.createElement(`h${block.props.level}`);
       addDefaultPropsExternalHTML(block.props, dom);
 
+      if ("isToggleable" in block.props && block.props.isToggleable) {
+        const details = document.createElement("details");
+        details.setAttribute("open", "");
+        const summary = document.createElement("summary");
+        summary.appendChild(dom);
+        details.appendChild(summary);
+
+        return {
+          dom: details,
+          contentDOM: dom,
+          childrenDOM: details,
+        };
+      }
+
       return {
         dom,
         contentDOM: dom,

diff --git a/packages/core/src/blocks/ListItem/ToggleListItem/block.ts b/packages/core/src/blocks/ListItem/ToggleListItem/block.ts
@@ -39,13 +39,20 @@ export const createToggleListItemBlockSpec = createBlockSpec(
     },
     toExternalHTML(block) {
       const li = document.createElement("li");
+      const details = document.createElement("details");
+      details.setAttribute("open", "");
+      const summary = document.createElement("summary");
       const p = document.createElement("p");
+      summary.appendChild(p);
+      details.appendChild(summary);
+
       addDefaultPropsExternalHTML(block.props, li);
-      li.appendChild(p);
+      li.appendChild(details);
 
       return {
         dom: li,
         contentDOM: p,
+        childrenDOM: details,
       };
     },
   },

diff --git a/packages/core/src/schema/blocks/types.ts b/packages/core/src/schema/blocks/types.ts
@@ -146,6 +146,7 @@ export type LooseBlockSpec<
       | {
           dom: HTMLElement | DocumentFragment;
           contentDOM?: HTMLElement;
+          childrenDOM?: HTMLElement;
         }
       | undefined;
 
@@ -203,6 +204,7 @@ export type BlockSpecs = {
         | {
             dom: HTMLElement | DocumentFragment;
             contentDOM?: HTMLElement;
+            childrenDOM?: HTMLElement;
           }
         | undefined;
     };
@@ -476,6 +478,7 @@ export type BlockImplementation<
     | {
         dom: HTMLElement | DocumentFragment;
         contentDOM?: HTMLElement;
+        childrenDOM?: HTMLElement;
       }
     | undefined;
 

diff --git a/tests/src/unit/core/clipboard/copy/__snapshots__/text/html/basicBlocks.html b/tests/src/unit/core/clipboard/copy/__snapshots__/text/html/basicBlocks.html
@@ -14,7 +14,11 @@ <h1>Heading 1</h1>
     <p class="bn-inline-content">Check List Item 1</p>
   </li>
   <li>
-    <p class="bn-inline-content">Toggle List Item 1</p>
+    <details open="">
+      <summary>
+        <p class="bn-inline-content">Toggle List Item 1</p>
+      </summary>
+    </details>
   </li>
 </ul>
 <pre>

diff --git a/tests/src/unit/core/clipboard/copy/__snapshots__/text/html/basicBlocksWithProps.html b/tests/src/unit/core/clipboard/copy/__snapshots__/text/html/basicBlocksWithProps.html
@@ -14,7 +14,11 @@ <h2 data-level="2">Heading 1</h2>
     <p class="bn-inline-content">Check List Item 1</p>
   </li>
   <li style="text-align: right;" data-text-alignment="right">
-    <p class="bn-inline-content">Toggle List Item 1</p>
+    <details open="">
+      <summary>
+        <p class="bn-inline-content">Toggle List Item 1</p>
+      </summary>
+    </details>
   </li>
 </ul>
 <pre data-language="typescript">

diff --git a/...it/core/formatConversion/export/__snapshots__/blocknoteHTML/lists/toggleWithChildren.html b/...it/core/formatConversion/export/__snapshots__/blocknoteHTML/lists/toggleWithChildren.html
@@ -0,0 +1,76 @@
+<div class="bn-block-group" data-node-type="blockGroup">
+  <div class="bn-block-outer" data-node-type="blockOuter" data-id="1">
+    <div class="bn-block" data-node-type="blockContainer" data-id="1">
+      <div class="bn-block-content" data-content-type="toggleListItem">
+        <div>
+          <div class="bn-toggle-wrapper" data-show-children="true">
+            <button class="bn-toggle-button" type="button">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height="24px"
+                viewBox="0 -960 960 960"
+                width="24px"
+                fill="CURRENTCOLOR"
+              >
+                <path d="M320-200v-560l440 280-440 280Z"></path>
+              </svg>
+            </button>
+            <p class="bn-inline-content">Toggle List Item</p>
+          </div>
+        </div>
+      </div>
+      <div class="bn-block-group" data-node-type="blockGroup">
+        <div class="bn-block-outer" data-node-type="blockOuter" data-id="2">
+          <div class="bn-block" data-node-type="blockContainer" data-id="2">
+            <div class="bn-block-content" data-content-type="paragraph">
+              <p class="bn-inline-content">Toggle Child 1</p>
+            </div>
+          </div>
+        </div>
+        <div class="bn-block-outer" data-node-type="blockOuter" data-id="3">
+          <div class="bn-block" data-node-type="blockContainer" data-id="3">
+            <div class="bn-block-content" data-content-type="paragraph">
+              <p class="bn-inline-content">Toggle Child 2</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="bn-block-outer" data-node-type="blockOuter" data-id="4">
+    <div class="bn-block" data-node-type="blockContainer" data-id="4">
+      <div
+        class="bn-block-content"
+        data-content-type="heading"
+        data-level="2"
+        data-is-toggleable="true"
+      >
+        <div>
+          <div class="bn-toggle-wrapper" data-show-children="true">
+            <button class="bn-toggle-button" type="button">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height="24px"
+                viewBox="0 -960 960 960"
+                width="24px"
+                fill="CURRENTCOLOR"
+              >
+                <path d="M320-200v-560l440 280-440 280Z"></path>
+              </svg>
+            </button>
+            <h2 class="bn-inline-content">Toggle Heading</h2>
+          </div>
+        </div>
+      </div>
+      <div class="bn-block-group" data-node-type="blockGroup">
+        <div class="bn-block-outer" data-node-type="blockOuter" data-id="5">
+          <div class="bn-block" data-node-type="blockContainer" data-id="5">
+            <div class="bn-block-content" data-content-type="paragraph">
+              <p class="bn-inline-content">Heading Child 1</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/tests/src/unit/core/formatConversion/export/__snapshots__/html/lists/basic.html b/tests/src/unit/core/formatConversion/export/__snapshots__/html/lists/basic.html
@@ -24,6 +24,10 @@
     <p class="bn-inline-content">Check List Item 2</p>
   </li>
   <li>
-    <p class="bn-inline-content">Toggle List Item 1</p>
+    <details open="">
+      <summary>
+        <p class="bn-inline-content">Toggle List Item 1</p>
+      </summary>
+    </details>
   </li>
 </ul>
diff --git a/tests/src/unit/core/formatConversion/export/__snapshots__/html/lists/nested.html b/tests/src/unit/core/formatConversion/export/__snapshots__/html/lists/nested.html
@@ -20,7 +20,11 @@
             <p class="bn-inline-content">Check List Item 2</p>
             <ul>
               <li data-nesting-level="3">
-                <p class="bn-inline-content">Toggle List Item 1</p>
+                <details open="">
+                  <summary>
+                    <p class="bn-inline-content">Toggle List Item 1</p>
+                  </summary>
+                </details>
               </li>
             </ul>
           </li>

diff --git a/tests/src/unit/core/formatConversion/export/__snapshots__/html/lists/toggleWithChildren.html b/tests/src/unit/core/formatConversion/export/__snapshots__/html/lists/toggleWithChildren.html
@@ -0,0 +1,17 @@
+<ul>
+  <li>
+    <details open="">
+      <summary>
+        <p class="bn-inline-content">Toggle List Item</p>
+      </summary>
+      <p data-nesting-level="1">Toggle Child 1</p>
+      <p data-nesting-level="1">Toggle Child 2</p>
+    </details>
+  </li>
+</ul>
+<details open="" data-level="2" data-is-toggleable="true">
+  <summary>
+    <h2 class="bn-inline-content">Toggle Heading</h2>
+  </summary>
+  <p data-nesting-level="1">Heading Child 1</p>
+</details>
diff --git a/...core/formatConversion/export/__snapshots__/markdown/lists/toggleWithChildren.md b/...core/formatConversion/export/__snapshots__/markdown/lists/toggleWithChildren.md
@@ -0,0 +1,9 @@
+* Toggle List Item
+
+  Toggle Child 1
+
+  Toggle Child 2
+
+## Toggle Heading
+
+Heading Child 1
diff --git a/...s/src/unit/core/formatConversion/export/__snapshots__/nodes/lists/toggleWithChildren.json b/...s/src/unit/core/formatConversion/export/__snapshots__/nodes/lists/toggleWithChildren.json
@@ -0,0 +1,124 @@
+[
+  {
+    "attrs": {
+      "id": "1",
+    },
+    "content": [
+      {
+        "attrs": {
+          "backgroundColor": "default",
+          "textAlignment": "left",
+          "textColor": "default",
+        },
+        "content": [
+          {
+            "text": "Toggle List Item",
+            "type": "text",
+          },
+        ],
+        "type": "toggleListItem",
+      },
+      {
+        "content": [
+          {
+            "attrs": {
+              "id": "2",
+            },
+            "content": [
+              {
+                "attrs": {
+                  "backgroundColor": "default",
+                  "textAlignment": "left",
+                  "textColor": "default",
+                },
+                "content": [
+                  {
+                    "text": "Toggle Child 1",
+                    "type": "text",
+                  },
+                ],
+                "type": "paragraph",
+              },
+            ],
+            "type": "blockContainer",
+          },
+          {
+            "attrs": {
+              "id": "3",
+            },
+            "content": [
+              {
+                "attrs": {
+                  "backgroundColor": "default",
+                  "textAlignment": "left",
+                  "textColor": "default",
+                },
+                "content": [
+                  {
+                    "text": "Toggle Child 2",
+                    "type": "text",
+                  },
+                ],
+                "type": "paragraph",
+              },
+            ],
+            "type": "blockContainer",
+          },
+        ],
+        "type": "blockGroup",
+      },
+    ],
+    "type": "blockContainer",
+  },
+  {
+    "attrs": {
+      "id": "4",
+    },
+    "content": [
+      {
+        "attrs": {
+          "backgroundColor": "default",
+          "isToggleable": true,
+          "level": 2,
+          "textAlignment": "left",
+          "textColor": "default",
+        },
+        "content": [
+          {
+            "text": "Toggle Heading",
+            "type": "text",
+          },
+        ],
+        "type": "heading",
+      },
+      {
+        "content": [
+          {
+            "attrs": {
+              "id": "5",
+            },
+            "content": [
+              {
+                "attrs": {
+                  "backgroundColor": "default",
+                  "textAlignment": "left",
+                  "textColor": "default",
+                },
+                "content": [
+                  {
+                    "text": "Heading Child 1",
+                    "type": "text",
+                  },
+                ],
+                "type": "paragraph",
+              },
+            ],
+            "type": "blockContainer",
+          },
+        ],
+        "type": "blockGroup",
+      },
+    ],
+    "type": "blockContainer",
+  },
+]