(["bulletListItem", "checkListItem", "toggleListItem"]),
options,
);
const div = document.createElement("div");
diff --git a/packages/core/src/api/exporters/html/util/serializeBlocksInternalHTML.ts b/packages/core/src/api/exporters/html/util/serializeBlocksInternalHTML.ts
index bc39d70008..0f890b77ab 100644
--- a/packages/core/src/api/exporters/html/util/serializeBlocksInternalHTML.ts
+++ b/packages/core/src/api/exporters/html/util/serializeBlocksInternalHTML.ts
@@ -147,6 +147,7 @@ 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(
@@ -154,7 +155,7 @@ function serializeBlock<
renderType: "dom",
props: undefined,
},
- { ...block, props } as any,
+ { ...block, props, children } as any,
editor as any,
);
diff --git a/packages/core/src/blocks/ListItem/CheckListItem/block.ts b/packages/core/src/blocks/ListItem/CheckListItem/block.ts
index af04233736..7887144b1b 100644
--- a/packages/core/src/blocks/ListItem/CheckListItem/block.ts
+++ b/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;
diff --git a/packages/core/src/blocks/ToggleWrapper/createToggleWrapper.ts b/packages/core/src/blocks/ToggleWrapper/createToggleWrapper.ts
index dfae8fbcae..1c80d4346e 100644
--- a/packages/core/src/blocks/ToggleWrapper/createToggleWrapper.ts
+++ b/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,
};
diff --git a/packages/core/src/editor/Block.css b/packages/core/src/editor/Block.css
index f882ba0559..7c408b26e6 100644
--- a/packages/core/src/editor/Block.css
+++ b/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"]
)
diff --git a/tests/src/end-to-end/basics/basicblocks.test.ts b/tests/src/end-to-end/basics/basicblocks.test.ts
new file mode 100644
index 0000000000..5874903c21
--- /dev/null
+++ b/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",
+ );
+ });
+});
diff --git a/tests/src/end-to-end/basics/basicblocks.test.ts-snapshots/basicblocks-chromium-linux.png b/tests/src/end-to-end/basics/basicblocks.test.ts-snapshots/basicblocks-chromium-linux.png
new file mode 100644
index 0000000000..4aff1da777
Binary files /dev/null and b/tests/src/end-to-end/basics/basicblocks.test.ts-snapshots/basicblocks-chromium-linux.png differ
diff --git a/tests/src/end-to-end/basics/basicblocks.test.ts-snapshots/basicblocks-firefox-linux.png b/tests/src/end-to-end/basics/basicblocks.test.ts-snapshots/basicblocks-firefox-linux.png
new file mode 100644
index 0000000000..f4b213ca8a
Binary files /dev/null and b/tests/src/end-to-end/basics/basicblocks.test.ts-snapshots/basicblocks-firefox-linux.png differ
diff --git a/tests/src/end-to-end/basics/basicblocks.test.ts-snapshots/basicblocks-webkit-linux.png b/tests/src/end-to-end/basics/basicblocks.test.ts-snapshots/basicblocks-webkit-linux.png
new file mode 100644
index 0000000000..ace3921767
Binary files /dev/null and b/tests/src/end-to-end/basics/basicblocks.test.ts-snapshots/basicblocks-webkit-linux.png differ
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
index 3659da8923..0a7dce8d5e 100644
--- a/tests/src/unit/core/clipboard/copy/__snapshots__/text/html/basicBlocks.html
+++ b/tests/src/unit/core/clipboard/copy/__snapshots__/text/html/basicBlocks.html
@@ -13,6 +13,9 @@ Heading 1
Check List Item 1
+
+ Toggle List Item 1
+
console.log("Hello World");
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
index 9c30cd19ad..a9bfc4b643 100644
--- a/tests/src/unit/core/clipboard/copy/__snapshots__/text/html/basicBlocksWithProps.html
+++ b/tests/src/unit/core/clipboard/copy/__snapshots__/text/html/basicBlocksWithProps.html
@@ -13,6 +13,9 @@ Heading 1
Check List Item 1
+
+ Toggle List Item 1
+
console.log("Hello World");
diff --git a/tests/src/unit/core/clipboard/copy/copyTestInstances.ts b/tests/src/unit/core/clipboard/copy/copyTestInstances.ts
index 9e709ab630..49947290be 100644
--- a/tests/src/unit/core/clipboard/copy/copyTestInstances.ts
+++ b/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: {
diff --git a/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/lists/basic.html b/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/lists/basic.html
index d4f5ec9f79..e35232e9f3 100644
--- a/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/lists/basic.html
+++ b/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/lists/basic.html
@@ -47,4 +47,26 @@
+
+
+
+
+
+
+
+
+
+
Toggle List Item 1
+
+
+
+
+
Check List Item 2
+
+
+
+
+
+
+
+
+
+
+
Toggle List Item 1
+
+
+
+
+
+
Check List Item 2
+
+ Toggle List Item 1
+
\ No newline at end of file
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
index 19733be107..9ceaf0a660 100644
--- a/tests/src/unit/core/formatConversion/export/__snapshots__/html/lists/nested.html
+++ b/tests/src/unit/core/formatConversion/export/__snapshots__/html/lists/nested.html
@@ -18,6 +18,11 @@
Check List Item 2
+
+
+ Toggle List Item 1
+
+
diff --git a/tests/src/unit/core/formatConversion/export/__snapshots__/markdown/lists/basic.md b/tests/src/unit/core/formatConversion/export/__snapshots__/markdown/lists/basic.md
index ae6392a26d..f092d8bf95 100644
--- a/tests/src/unit/core/formatConversion/export/__snapshots__/markdown/lists/basic.md
+++ b/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
diff --git a/tests/src/unit/core/formatConversion/export/__snapshots__/markdown/lists/nested.md b/tests/src/unit/core/formatConversion/export/__snapshots__/markdown/lists/nested.md
index bb6af59913..c43ddb13ef 100644
--- a/tests/src/unit/core/formatConversion/export/__snapshots__/markdown/lists/nested.md
+++ b/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
diff --git a/tests/src/unit/core/formatConversion/export/__snapshots__/nodes/lists/basic.json b/tests/src/unit/core/formatConversion/export/__snapshots__/nodes/lists/basic.json
index 6641f05caa..7a7d1b00e1 100644
--- a/tests/src/unit/core/formatConversion/export/__snapshots__/nodes/lists/basic.json
+++ b/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",
+ },
]
\ No newline at end of file
diff --git a/tests/src/unit/core/formatConversion/export/__snapshots__/nodes/lists/nested.json b/tests/src/unit/core/formatConversion/export/__snapshots__/nodes/lists/nested.json
index b2afe1e965..d51adf974b 100644
--- a/tests/src/unit/core/formatConversion/export/__snapshots__/nodes/lists/nested.json
+++ b/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",
},
diff --git a/tests/src/unit/core/formatConversion/export/exportTestInstances.ts b/tests/src/unit/core/formatConversion/export/exportTestInstances.ts
index d27cbfad64..cf8d088395 100644
--- a/tests/src/unit/core/formatConversion/export/exportTestInstances.ts
+++ b/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",
+ },
+ ],
},
],
},
diff --git a/tests/src/utils/const.ts b/tests/src/utils/const.ts
index 0682e383f8..e4be292de1 100644
--- a/tests/src/utils/const.ts
+++ b/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`;