Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,8 @@ function serializeBlock<
) {
const BC_NODE = editor.pmSchema.nodes["blockContainer"];

const id = block.id || "";
const type = block.type || "paragraph";
// set default props in case we were passed a partial block
const props = block.props || {};
for (const [name, spec] of Object.entries(
Expand All @@ -147,14 +149,21 @@ function serializeBlock<
(props as any)[name] = spec.default;
}
}
const content =
editor.schema.blockSchema[type].content === "table"
? { type: "tableContent", rows: [] }
: editor.schema.blockSchema[type].content === "inline"
? []
: undefined;
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,
{ id, type, props, content, children } as any,
editor as any,
);

Expand Down
5 changes: 4 additions & 1 deletion packages/core/src/blocks/ListItem/CheckListItem/block.ts
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,8 @@ export const createCheckListItemBlockSpec = createBlockSpec(
getListItemContent(el, schema, "checkListItem"),
render(block, editor) {
const dom = document.createDocumentFragment();
const checkboxWrapper = document.createElement("div");

const checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.checked = block.props.checked;
Expand All @@ -89,7 +91,8 @@ export const createCheckListItemBlockSpec = createBlockSpec(
// schema.
const paragraph = document.createElement("p");

dom.appendChild(checkbox);
checkboxWrapper.append(checkbox);
dom.appendChild(checkboxWrapper);
dom.appendChild(paragraph);

return {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
Expand Down
14 changes: 2 additions & 12 deletions packages/core/src/editor/Block.css
Original file line number Diff line number Diff line change
Expand Up @@ -233,18 +233,14 @@ NESTED BLOCKS

/* Checked */
.bn-block-content[data-content-type="checkListItem"] > div {
display: flex;
width: 100%;
}

.bn-block-content[data-content-type="checkListItem"] > div > div {
align-items: center;
display: flex;
justify-content: center;
min-width: 24px;
padding-right: 4px;
}

.bn-block-content[data-content-type="checkListItem"] > div > div > input {
.bn-block-content[data-content-type="checkListItem"] > div > input {
margin: 0;
cursor: pointer;
}
Expand All @@ -263,12 +259,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"]
)
Expand Down
34 changes: 34 additions & 0 deletions tests/src/end-to-end/basics/basicblocks.test.ts
Original file line number Diff line number Diff line change
@@ -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(100);
await page
.locator(`${PARAGRAPH_SELECTOR} > p`, {
hasText: "Welcome to this demo!",
})
.click();

// Scroll to top of page.
await page.mouse.wheel(0, -9999);

await page.waitForTimeout(500);
expect(await page.screenshot()).toMatchSnapshot("basic-blocks-top.png");

Check failure on line 24 in tests/src/end-to-end/basics/basicblocks.test.ts

View workflow job for this annotation

GitHub Actions / Playwright Tests - firefox

[firefox] › src/end-to-end/basics/basicblocks.test.ts:11:7 › Check basic text block appearance › Check basic text block appearance

1) [firefox] › src/end-to-end/basics/basicblocks.test.ts:11:7 › Check basic text block appearance › Check basic text block appearance Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(Buffer).toMatchSnapshot(expected) 5108 pixels (ratio 0.01 of all image pixels) are different. Expected: /__w/BlockNote/BlockNote/tests/src/end-to-end/basics/basicblocks.test.ts-snapshots/basic-blocks-top-firefox-linux.png Received: /__w/BlockNote/BlockNote/tests/test-results/basics-basicblocks-Check-b-0319e-basic-text-block-appearance-firefox-retry1/basic-blocks-top-actual.png Diff: /__w/BlockNote/BlockNote/tests/test-results/basics-basicblocks-Check-b-0319e-basic-text-block-appearance-firefox-retry1/basic-blocks-top-diff.png 22 | 23 | await page.waitForTimeout(500); > 24 | expect(await page.screenshot()).toMatchSnapshot("basic-blocks-top.png"); | ^ 25 | 26 | // Scroll to bottom of page. 27 | await page.mouse.wheel(0, 9999); at /__w/BlockNote/BlockNote/tests/src/end-to-end/basics/basicblocks.test.ts:24:37

// Scroll to bottom of page.
await page.mouse.wheel(0, 9999);
// We have to scroll twice because Firefox gets stuck otherwise?
await page.mouse.wheel(0, 9999);

await page.waitForTimeout(500);
expect(await page.screenshot()).toMatchSnapshot("basic-blocks-bottom.png");

Check failure on line 32 in tests/src/end-to-end/basics/basicblocks.test.ts

View workflow job for this annotation

GitHub Actions / Playwright Tests - firefox

[firefox] › src/end-to-end/basics/basicblocks.test.ts:11:7 › Check basic text block appearance › Check basic text block appearance

1) [firefox] › src/end-to-end/basics/basicblocks.test.ts:11:7 › Check basic text block appearance › Check basic text block appearance Retry #2 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(Buffer).toMatchSnapshot(expected) 702 pixels (ratio 0.01 of all image pixels) are different. Expected: /__w/BlockNote/BlockNote/tests/src/end-to-end/basics/basicblocks.test.ts-snapshots/basic-blocks-bottom-firefox-linux.png Received: /__w/BlockNote/BlockNote/tests/test-results/basics-basicblocks-Check-b-0319e-basic-text-block-appearance-firefox-retry2/basic-blocks-bottom-actual.png Diff: /__w/BlockNote/BlockNote/tests/test-results/basics-basicblocks-Check-b-0319e-basic-text-block-appearance-firefox-retry2/basic-blocks-bottom-diff.png 30 | 31 | await page.waitForTimeout(500); > 32 | expect(await page.screenshot()).toMatchSnapshot("basic-blocks-bottom.png"); | ^ 33 | }); 34 | }); 35 | at /__w/BlockNote/BlockNote/tests/src/end-to-end/basics/basicblocks.test.ts:32:37

Check failure on line 32 in tests/src/end-to-end/basics/basicblocks.test.ts

View workflow job for this annotation

GitHub Actions / Playwright Tests - firefox

[firefox] › src/end-to-end/basics/basicblocks.test.ts:11:7 › Check basic text block appearance › Check basic text block appearance

1) [firefox] › src/end-to-end/basics/basicblocks.test.ts:11:7 › Check basic text block appearance › Check basic text block appearance Error: expect(Buffer).toMatchSnapshot(expected) 702 pixels (ratio 0.01 of all image pixels) are different. Expected: /__w/BlockNote/BlockNote/tests/src/end-to-end/basics/basicblocks.test.ts-snapshots/basic-blocks-bottom-firefox-linux.png Received: /__w/BlockNote/BlockNote/tests/test-results/basics-basicblocks-Check-b-0319e-basic-text-block-appearance-firefox/basic-blocks-bottom-actual.png Diff: /__w/BlockNote/BlockNote/tests/test-results/basics-basicblocks-Check-b-0319e-basic-text-block-appearance-firefox/basic-blocks-bottom-diff.png 30 | 31 | await page.waitForTimeout(500); > 32 | expect(await page.screenshot()).toMatchSnapshot("basic-blocks-bottom.png"); | ^ 33 | }); 34 | }); 35 | at /__w/BlockNote/BlockNote/tests/src/end-to-end/basics/basicblocks.test.ts:32:37

Check failure on line 32 in tests/src/end-to-end/basics/basicblocks.test.ts

View workflow job for this annotation

GitHub Actions / Playwright Tests - chromium

[chromium] › src/end-to-end/basics/basicblocks.test.ts:11:7 › Check basic text block appearance › Check basic text block appearance

1) [chromium] › src/end-to-end/basics/basicblocks.test.ts:11:7 › Check basic text block appearance › Check basic text block appearance Retry #2 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(Buffer).toMatchSnapshot(expected) 414 pixels (ratio 0.01 of all image pixels) are different. Expected: /__w/BlockNote/BlockNote/tests/src/end-to-end/basics/basicblocks.test.ts-snapshots/basic-blocks-bottom-chromium-linux.png Received: /__w/BlockNote/BlockNote/tests/test-results/basics-basicblocks-Check-b-0319e-basic-text-block-appearance-chromium-retry2/basic-blocks-bottom-actual.png Diff: /__w/BlockNote/BlockNote/tests/test-results/basics-basicblocks-Check-b-0319e-basic-text-block-appearance-chromium-retry2/basic-blocks-bottom-diff.png 30 | 31 | await page.waitForTimeout(500); > 32 | expect(await page.screenshot()).toMatchSnapshot("basic-blocks-bottom.png"); | ^ 33 | }); 34 | }); 35 | at /__w/BlockNote/BlockNote/tests/src/end-to-end/basics/basicblocks.test.ts:32:37

Check failure on line 32 in tests/src/end-to-end/basics/basicblocks.test.ts

View workflow job for this annotation

GitHub Actions / Playwright Tests - chromium

[chromium] › src/end-to-end/basics/basicblocks.test.ts:11:7 › Check basic text block appearance › Check basic text block appearance

1) [chromium] › src/end-to-end/basics/basicblocks.test.ts:11:7 › Check basic text block appearance › Check basic text block appearance Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(Buffer).toMatchSnapshot(expected) 414 pixels (ratio 0.01 of all image pixels) are different. Expected: /__w/BlockNote/BlockNote/tests/src/end-to-end/basics/basicblocks.test.ts-snapshots/basic-blocks-bottom-chromium-linux.png Received: /__w/BlockNote/BlockNote/tests/test-results/basics-basicblocks-Check-b-0319e-basic-text-block-appearance-chromium-retry1/basic-blocks-bottom-actual.png Diff: /__w/BlockNote/BlockNote/tests/test-results/basics-basicblocks-Check-b-0319e-basic-text-block-appearance-chromium-retry1/basic-blocks-bottom-diff.png 30 | 31 | await page.waitForTimeout(500); > 32 | expect(await page.screenshot()).toMatchSnapshot("basic-blocks-bottom.png"); | ^ 33 | }); 34 | }); 35 | at /__w/BlockNote/BlockNote/tests/src/end-to-end/basics/basicblocks.test.ts:32:37

Check failure on line 32 in tests/src/end-to-end/basics/basicblocks.test.ts

View workflow job for this annotation

GitHub Actions / Playwright Tests - chromium

[chromium] › src/end-to-end/basics/basicblocks.test.ts:11:7 › Check basic text block appearance › Check basic text block appearance

1) [chromium] › src/end-to-end/basics/basicblocks.test.ts:11:7 › Check basic text block appearance › Check basic text block appearance Error: expect(Buffer).toMatchSnapshot(expected) 414 pixels (ratio 0.01 of all image pixels) are different. Expected: /__w/BlockNote/BlockNote/tests/src/end-to-end/basics/basicblocks.test.ts-snapshots/basic-blocks-bottom-chromium-linux.png Received: /__w/BlockNote/BlockNote/tests/test-results/basics-basicblocks-Check-b-0319e-basic-text-block-appearance-chromium/basic-blocks-bottom-actual.png Diff: /__w/BlockNote/BlockNote/tests/test-results/basics-basicblocks-Check-b-0319e-basic-text-block-appearance-chromium/basic-blocks-bottom-diff.png 30 | 31 | await page.waitForTimeout(500); > 32 | expect(await page.screenshot()).toMatchSnapshot("basic-blocks-bottom.png"); | ^ 33 | }); 34 | }); 35 | at /__w/BlockNote/BlockNote/tests/src/end-to-end/basics/basicblocks.test.ts:32:37
});
});
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
11 changes: 11 additions & 0 deletions tests/src/unit/core/clipboard/copy/copyTestInstances.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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");',
Expand Down Expand Up @@ -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: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,9 @@
<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="checkListItem">
<input type="checkbox" />
<div>
<input type="checkbox" />
</div>
<p class="bn-inline-content">Check List Item 1</p>
</div>
</div>
Expand All @@ -42,9 +44,33 @@
data-content-type="checkListItem"
data-checked="true"
>
<input type="checkbox" checked="" />
<div>
<input type="checkbox" checked="" />
</div>
<p class="bn-inline-content">Check List Item 2</p>
</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>
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,9 @@
<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="checkListItem">
<input type="checkbox" />
<div>
<input type="checkbox" />
</div>
<p class="bn-inline-content">Check List Item 1</p>
</div>
</div>
Expand All @@ -40,9 +42,35 @@
data-content-type="checkListItem"
data-checked="true"
>
<input type="checkbox" checked="" />
<div>
<input type="checkbox" checked="" />
</div>
<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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,7 @@
2. Numbered List Item 2

* [ ] Check List Item 1

* [x] Check List Item 2

* Toggle List Item 1
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,7 @@
2. Numbered List Item 2

* [ ] Check List Item 1

* [x] Check List Item 2

* Toggle List Item 1
Original file line number Diff line number Diff line change
Expand Up @@ -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",
},
]
Original file line number Diff line number Diff line change
Expand Up @@ -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",
},
Expand Down
Loading
Loading