fix: toggle and check list item blocks (#2071)

Author: matthewlipski

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

@@ -240,21 +240,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"]
@@ -271,12 +263,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/end-to-end/basics/basicblocks.test.ts-snapshots/basicblocks-chromium-linux.png

@@ -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>