Skip to content

Commit ba403cb

Browse files
nperez0111nperez0111
authored
fix: arrow up on a checklist item should move to the element above BLO-362 (#2306)
arrow up on a checklist item should move to the element above BLO-362
1 parent 484d7da commit ba403cb

File tree

11 files changed

+249
-6
lines changed

11 files changed

+249
-6
lines changed

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,10 @@ export const createCheckListItemBlockSpec = createBlockSpec(
9090
// schema.
9191
const paragraph = document.createElement("p");
9292

93-
dom.appendChild(checkbox);
93+
const div = document.createElement("div");
94+
div.contentEditable = "false";
95+
div.appendChild(checkbox);
96+
dom.appendChild(div);
9497
dom.appendChild(paragraph);
9598

9699
return {

‎packages/core/src/editor/Block.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,7 @@ NESTED BLOCKS
240240
}
241241

242242
/* Checked */
243-
.bn-block-content[data-content-type="checkListItem"] > input {
243+
.bn-block-content[data-content-type="checkListItem"] > div > input {
244244
cursor: pointer;
245245
height: 24px;
246246
margin-left: 4px;

‎tests/src/end-to-end/basics/basicblocks.test.ts-snapshots/basicblocks-chromium-linux.png‎

-2 Bytes
Loading

‎tests/src/end-to-end/basics/basicblocks.test.ts-snapshots/basicblocks-firefox-linux.png‎

142 Bytes
Loading

‎tests/src/end-to-end/basics/basicblocks.test.ts-snapshots/basicblocks-webkit-linux.png‎

72 Bytes
Loading

‎tests/src/end-to-end/keyboardhandlers/keyboardhandlers.test.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,25 @@ test.describe("Check Keyboard Handlers' Behaviour", () => {
171171

172172
await compareDocToSnapshot(page, "checkedListItemShortcut.json");
173173
});
174+
test("Check arrow up on checklist item moves to element above", async ({
175+
page,
176+
}) => {
177+
await focusOnEditor(page);
178+
await insertParagraph(page);
179+
await page.keyboard.press("ControlOrMeta+Shift+9");
180+
await page.keyboard.type("Checklist item");
181+
182+
await page.waitForTimeout(150);
183+
// Move cursor to the start of the checklist item
184+
await page.keyboard.press("Control+ArrowLeft");
185+
// Press arrow up - should move to the paragraph above
186+
await page.keyboard.press("ArrowUp");
187+
// Type to verify cursor is in the paragraph above
188+
await page.keyboard.type("Above");
189+
190+
await compareDocToSnapshot(page, "arrowUpChecklistItem.json");
191+
});
192+
174193
test("Check checkListItem inputRule preserves content", async ({ page }) => {
175194
await focusOnEditor(page);
176195
// Type [ ] followed by space at the start to trigger inputRule, then add content

‎tests/src/end-to-end/keyboardhandlers/keyboardhandlers.test.ts-snapshots/arrowUpChecklistItem-json-chromium-linux.json‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
{
2+
"type": "doc",
3+
"content": [
4+
{
5+
"type": "blockGroup",
6+
"content": [
7+
{
8+
"type": "blockContainer",
9+
"attrs": {
10+
"id": "0"
11+
},
12+
"content": [
13+
{
14+
"type": "paragraph",
15+
"attrs": {
16+
"backgroundColor": "default",
17+
"textColor": "default",
18+
"textAlignment": "left"
19+
},
20+
"content": [
21+
{
22+
"type": "text",
23+
"text": "ParagraphAbove"
24+
}
25+
]
26+
}
27+
]
28+
},
29+
{
30+
"type": "blockContainer",
31+
"attrs": {
32+
"id": "2"
33+
},
34+
"content": [
35+
{
36+
"type": "checkListItem",
37+
"attrs": {
38+
"backgroundColor": "default",
39+
"textColor": "default",
40+
"textAlignment": "left",
41+
"checked": false
42+
},
43+
"content": [
44+
{
45+
"type": "text",
46+
"text": "Checklist item"
47+
}
48+
]
49+
}
50+
]
51+
},
52+
{
53+
"type": "blockContainer",
54+
"attrs": {
55+
"id": "4"
56+
},
57+
"content": [
58+
{
59+
"type": "paragraph",
60+
"attrs": {
61+
"backgroundColor": "default",
62+
"textColor": "default",
63+
"textAlignment": "left"
64+
}
65+
}
66+
]
67+
}
68+
]
69+
}
70+
]
71+
}

‎tests/src/end-to-end/keyboardhandlers/keyboardhandlers.test.ts-snapshots/arrowUpChecklistItem-json-firefox-linux.json‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
{
2+
"type": "doc",
3+
"content": [
4+
{
5+
"type": "blockGroup",
6+
"content": [
7+
{
8+
"type": "blockContainer",
9+
"attrs": {
10+
"id": "0"
11+
},
12+
"content": [
13+
{
14+
"type": "paragraph",
15+
"attrs": {
16+
"backgroundColor": "default",
17+
"textColor": "default",
18+
"textAlignment": "left"
19+
},
20+
"content": [
21+
{
22+
"type": "text",
23+
"text": "ParagraphAbove"
24+
}
25+
]
26+
}
27+
]
28+
},
29+
{
30+
"type": "blockContainer",
31+
"attrs": {
32+
"id": "2"
33+
},
34+
"content": [
35+
{
36+
"type": "checkListItem",
37+
"attrs": {
38+
"backgroundColor": "default",
39+
"textColor": "default",
40+
"textAlignment": "left",
41+
"checked": false
42+
},
43+
"content": [
44+
{
45+
"type": "text",
46+
"text": "Checklist item"
47+
}
48+
]
49+
}
50+
]
51+
},
52+
{
53+
"type": "blockContainer",
54+
"attrs": {
55+
"id": "4"
56+
},
57+
"content": [
58+
{
59+
"type": "paragraph",
60+
"attrs": {
61+
"backgroundColor": "default",
62+
"textColor": "default",
63+
"textAlignment": "left"
64+
}
65+
}
66+
]
67+
}
68+
]
69+
}
70+
]
71+
}

‎tests/src/end-to-end/keyboardhandlers/keyboardhandlers.test.ts-snapshots/arrowUpChecklistItem-json-webkit-linux.json‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
{
2+
"type": "doc",
3+
"content": [
4+
{
5+
"type": "blockGroup",
6+
"content": [
7+
{
8+
"type": "blockContainer",
9+
"attrs": {
10+
"id": "0"
11+
},
12+
"content": [
13+
{
14+
"type": "paragraph",
15+
"attrs": {
16+
"backgroundColor": "default",
17+
"textColor": "default",
18+
"textAlignment": "left"
19+
},
20+
"content": [
21+
{
22+
"type": "text",
23+
"text": "ParagraphAbove"
24+
}
25+
]
26+
}
27+
]
28+
},
29+
{
30+
"type": "blockContainer",
31+
"attrs": {
32+
"id": "2"
33+
},
34+
"content": [
35+
{
36+
"type": "checkListItem",
37+
"attrs": {
38+
"backgroundColor": "default",
39+
"textColor": "default",
40+
"textAlignment": "left",
41+
"checked": false
42+
},
43+
"content": [
44+
{
45+
"type": "text",
46+
"text": "Checklist item"
47+
}
48+
]
49+
}
50+
]
51+
},
52+
{
53+
"type": "blockContainer",
54+
"attrs": {
55+
"id": "4"
56+
},
57+
"content": [
58+
{
59+
"type": "paragraph",
60+
"attrs": {
61+
"backgroundColor": "default",
62+
"textColor": "default",
63+
"textAlignment": "left"
64+
}
65+
}
66+
]
67+
}
68+
]
69+
}
70+
]
71+
}

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@
3030
<div class="bn-block-outer" data-node-type="blockOuter" data-id="5">
3131
<div class="bn-block" data-node-type="blockContainer" data-id="5">
3232
<div class="bn-block-content" data-content-type="checkListItem">
33-
<input type="checkbox" />
33+
<div>
34+
<input type="checkbox" />
35+
</div>
3436
<p class="bn-inline-content">Check List Item 1</p>
3537
</div>
3638
</div>
@@ -42,7 +44,9 @@
4244
data-content-type="checkListItem"
4345
data-checked="true"
4446
>
45-
<input type="checkbox" checked="" />
47+
<div>
48+
<input type="checkbox" checked="" />
49+
</div>
4650
<p class="bn-inline-content">Check List Item 2</p>
4751
</div>
4852
</div>

0 commit comments

Comments
 (0)