fix: Toggle and check list item blocks

packages/core/src/api/exporters/html/externalHTMLExporter.ts

@@ -48,7 +48,7 @@ export const createExternalHTMLExporter = <
         blocks,
         serializer,
         new Set<string>(["numberedListItem"]),
-        new Set<string>(["bulletListItem", "checkListItem"]),
+        new Set<string>(["bulletListItem", "checkListItem", "toggleListItem"]),
         options,
       );
       const div = document.createElement("div");

packages/core/src/api/exporters/html/util/serializeBlocksInternalHTML.ts

@@ -147,14 +147,15 @@ function serializeBlock<
       (props as any)[name] = spec.default;
     }
   }
+  const children = block.children || [];
 
   const impl = editor.blockImplementations[block.type as any].implementation;
   const ret = impl.render.call(
     {
       renderType: "dom",
       props: undefined,
     },
-    { ...block, props } as any,
+    { ...block, props, children } as any,
     editor as any,
   );
 

packages/core/src/blocks/ListItem/CheckListItem/block.ts

@@ -75,6 +75,7 @@ export const createCheckListItemBlockSpec = createBlockSpec(
       getListItemContent(el, schema, "checkListItem"),
     render(block, editor) {
       const dom = document.createDocumentFragment();
+
       const checkbox = document.createElement("input");
       checkbox.type = "checkbox";
       checkbox.checked = block.props.checked;

packages/core/src/blocks/ToggleWrapper/createToggleWrapper.ts

@@ -28,7 +28,7 @@ export const createToggleWrapper = (
   ignoreMutation?: (mutation: ViewMutationRecord) => boolean;
   destroy?: () => void;
 } => {
-  if (!("isToggleable" in block.props) || !block.props.isToggleable) {
+  if ("isToggleable" in block.props && !block.props.isToggleable) {
     return {
       dom: renderedElement,
     };

packages/core/src/editor/Block.css

@@ -232,21 +232,13 @@ NESTED BLOCKS
 }
 
 /* Checked */
-.bn-block-content[data-content-type="checkListItem"] > div {
-  display: flex;
-  width: 100%;
-}
-
-.bn-block-content[data-content-type="checkListItem"] > div > div {
-  display: flex;
-  justify-content: center;
-  min-width: 24px;
-  padding-right: 4px;
-}
-
-.bn-block-content[data-content-type="checkListItem"] > div > div > input {
-  margin: 0;
+.bn-block-content[data-content-type="checkListItem"] > input {
   cursor: pointer;
+  height: 24px;
+  margin-left: 4px;
+  margin-right: 8px;
+  margin-top: 0;
+  width: 12px;
 }
 
 .bn-block-content[data-content-type="checkListItem"][data-checked="true"]
@@ -263,12 +255,6 @@ NESTED BLOCKS
 }
 
 /* Toggle */
-.bn-block-content:has(.bn-toggle-wrapper) > div {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
 .bn-block:has(
     > .bn-block-content > div > .bn-toggle-wrapper[data-show-children="false"]
   )

tests/src/end-to-end/basics/basicblocks.test.ts

@@ -0,0 +1,34 @@
+import { expect } from "@playwright/test";
+import { test } from "../../setup/setupScript.js";
+import { BASIC_BLOCKS_URL, PARAGRAPH_SELECTOR } from "../../utils/const.js";
+import { focusOnEditor } from "../../utils/editor.js";
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(BASIC_BLOCKS_URL);
+});
+
+test.describe("Check basic text block appearance", () => {
+  test("Check basic text block appearance", async ({ page }) => {
+    focusOnEditor(page);
+    await page.waitForTimeout(500);
+
+    await page.locator(`[data-content-type="audio"] .bn-file-caption`).click();
+    await page.keyboard.press("Backspace");
+    await page.waitForTimeout(500);
+
+    await page.locator(`[data-content-type="video"] .bn-file-caption`).click();
+    await page.keyboard.press("Backspace");
+    await page.waitForTimeout(500);
+
+    await page
+      .locator(`${PARAGRAPH_SELECTOR} > p`, {
+        hasText: "Welcome to this demo!",
+      })
+      .click();
+
+    await page.waitForTimeout(100);
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(
+      "basicblocks.png",
+    );
+  });
+});

tests/src/unit/core/clipboard/copy/__snapshots__/text/html/basicBlocks.html

@@ -13,6 +13,9 @@ <h1>Heading 1</h1>
     <input type="checkbox" />
     <p class="bn-inline-content">Check List Item 1</p>
   </li>
+  <li>
+    <p class="bn-inline-content">Toggle List Item 1</p>
+  </li>
 </ul>
 <pre>
   <code class="bn-inline-content language-text" data-language="text">console.log("Hello World");</code>

tests/src/unit/core/clipboard/copy/__snapshots__/text/html/basicBlocksWithProps.html

@@ -13,6 +13,9 @@ <h2 data-level="2">Heading 1</h2>
     <input type="checkbox" checked="" />
     <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>
+  </li>
 </ul>
 <pre data-language="typescript">
   <code class="bn-inline-content language-typescript" data-language="typescript">console.log("Hello World");</code>

tests/src/unit/core/clipboard/copy/copyTestInstances.ts

@@ -514,6 +514,10 @@ export const copyTestInstancesHTML: TestInstance<
           type: "checkListItem",
           content: "Check List Item 1",
         },
+        {
+          type: "toggleListItem",
+          content: "Toggle List Item 1",
+        },
         {
           type: "codeBlock",
           content: 'console.log("Hello World");',
@@ -588,6 +592,13 @@ export const copyTestInstancesHTML: TestInstance<
           },
           content: "Check List Item 1",
         },
+        {
+          type: "toggleListItem",
+          props: {
+            textAlignment: "right",
+          },
+          content: "Toggle List Item 1",
+        },
         {
           type: "codeBlock",
           props: {

tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/lists/basic.html

@@ -47,4 +47,26 @@
       </div>
     </div>
   </div>
+  <div class="bn-block-outer" data-node-type="blockOuter" data-id="7">
+    <div class="bn-block" data-node-type="blockContainer" data-id="7">
+      <div class="bn-block-content" data-content-type="toggleListItem">
+        <div>
+          <div class="bn-toggle-wrapper" data-show-children="false">
+            <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 1</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>

tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/lists/nested.html

@@ -43,6 +43,30 @@
                     <input type="checkbox" checked="" />
                     <p class="bn-inline-content">Check List Item 2</p>
                   </div>
+                  <div class="bn-block-group" data-node-type="blockGroup">
+                    <div class="bn-block-outer" data-node-type="blockOuter" data-id="7">
+                      <div class="bn-block" data-node-type="blockContainer" data-id="7">
+                        <div class="bn-block-content" data-content-type="toggleListItem">
+                          <div>
+                            <div class="bn-toggle-wrapper" data-show-children="false">
+                              <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 1</p>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>

tests/src/unit/core/formatConversion/export/__snapshots__/html/lists/basic.html

@@ -23,4 +23,7 @@
     <input type="checkbox" checked="" />
     <p class="bn-inline-content">Check List Item 2</p>
   </li>
+  <li>
+    <p class="bn-inline-content">Toggle List Item 1</p>
+  </li>
 </ul>

tests/src/unit/core/formatConversion/export/__snapshots__/html/lists/nested.html

@@ -18,6 +18,11 @@
           <li data-checked="true">
             <input type="checkbox" checked="" />
             <p class="bn-inline-content">Check List Item 2</p>
+            <ul>
+              <li>
+                <p class="bn-inline-content">Toggle List Item 1</p>
+              </li>
+            </ul>
           </li>
         </ul>
       </li>

tests/src/unit/core/formatConversion/export/__snapshots__/markdown/lists/basic.md

@@ -7,4 +7,7 @@
 2. Numbered List Item 2
 
 * [ ] Check List Item 1
+
 * [x] Check List Item 2
+
+* Toggle List Item 1

tests/src/unit/core/formatConversion/export/__snapshots__/markdown/lists/nested.md

@@ -7,4 +7,7 @@
   2. Numbered List Item 2
 
      * [ ] Check List Item 1
+
      * [x] Check List Item 2
+
+       * Toggle List Item 1

tests/src/unit/core/formatConversion/export/__snapshots__/nodes/lists/basic.json

@@ -135,4 +135,26 @@
     ],
     "type": "blockContainer",
   },
+  {
+    "attrs": {
+      "id": "7",
+    },
+    "content": [
+      {
+        "attrs": {
+          "backgroundColor": "default",
+          "textAlignment": "left",
+          "textColor": "default",
+        },
+        "content": [
+          {
+            "text": "Toggle List Item 1",
+            "type": "text",
+          },
+        ],
+        "type": "toggleListItem",
+      },
+    ],
+    "type": "blockContainer",
+  },
 ]

tests/src/unit/core/formatConversion/export/__snapshots__/nodes/lists/nested.json

@@ -130,6 +130,33 @@
                         ],
                         "type": "checkListItem",
                       },
+                      {
+                        "content": [
+                          {
+                            "attrs": {
+                              "id": "7",
+                            },
+                            "content": [
+                              {
+                                "attrs": {
+                                  "backgroundColor": "default",
+                                  "textAlignment": "left",
+                                  "textColor": "default",
+                                },
+                                "content": [
+                                  {
+                                    "text": "Toggle List Item 1",
+                                    "type": "text",
+                                  },
+                                ],
+                                "type": "toggleListItem",
+                              },
+                            ],
+                            "type": "blockContainer",
+                          },
+                        ],
+                        "type": "blockGroup",
+                      },
                     ],
                     "type": "blockContainer",
                   },

tests/src/unit/core/formatConversion/export/exportTestInstances.ts

@@ -151,6 +151,10 @@ export const exportTestInstancesBlockNoteHTML: TestInstance<
           },
           content: "Check List Item 2",
         },
+        {
+          type: "toggleListItem",
+          content: "Toggle List Item 1",
+        },
       ],
     },
     executeTest: testExportBlockNoteHTML,
@@ -185,6 +189,12 @@ export const exportTestInstancesBlockNoteHTML: TestInstance<
                     checked: true,
                   },
                   content: "Check List Item 2",
+                  children: [
+                    {
+                      type: "toggleListItem",
+                      content: "Toggle List Item 1",
+                    },
+                  ],
                 },
               ],
             },

tests/src/utils/const.ts

@@ -15,6 +15,10 @@ export const STATIC_URL = !process.env.RUN_IN_DOCKER
   ? `http://localhost:${PORT}/backend/rendering-static-documents?hideMenu`
   : `http://host.docker.internal:${PORT}/backend/rendering-static-documents?hideMenu`;
 
+export const BASIC_BLOCKS_URL = !process.env.RUN_IN_DOCKER
+  ? `http://localhost:${PORT}/basic/default-blocks?hideMenu`
+  : `http://host.docker.internal:${PORT}/basic/default-blocks?hideMenu`;
+
 export const CUSTOM_BLOCKS_VANILLA_URL = !process.env.RUN_IN_DOCKER
   ? `http://localhost:${PORT}/vanilla-js/react-vanilla-custom-blocks`
   : `http://host.docker.internal:${PORT}/vanilla-js/react-vanilla-custom-blocks`;