Skip to content

Commit 035c4ed

Browse files
matthewlipskimatthewlipski
authored
fix: Typing in empty table cells (#1973)
* Changed cell min height to be set using CSS instead of line break * Added tests
1 parent 7a66f11 commit 035c4ed

13 files changed

+1473
-5
lines changed

‎packages/core/src/blocks/TableBlockContent/TableBlockContent.ts‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -170,11 +170,8 @@ const TableParagraph = createStronglyTypedTiptapNode({
170170
];
171171
},
172172

173-
renderHTML({ node, HTMLAttributes }) {
174-
// Insert a line break if there is no content, in order to preserve the
175-
// correct cell height. Otherwise, the cell will have a height of zero +
176-
// padding.
177-
return ["p", HTMLAttributes, node.childCount ? 0 : ["br"]];
173+
renderHTML({ HTMLAttributes }) {
174+
return ["p", HTMLAttributes, 0];
178175
},
179176
});
180177

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,11 @@ Tippy popups that are appended to document.body directly
176176
text-align: left;
177177
}
178178

179+
.bn-editor [data-content-type="table"] th > p,
180+
.bn-editor [data-content-type="table"] td > p {
181+
min-height: 1.5rem;
182+
}
183+
179184
/* tiptap uses colwidth instead of data-colwidth, se we need to adjust this style from prosemirror-tables */
180185
.ProseMirror td,
181186
.ProseMirror th {

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { test } from "../../setup/setupScript.js";
2+
import { BASE_URL } from "../../utils/const.js";
3+
import { compareDocToSnapshot, focusOnEditor } from "../../utils/editor.js";
4+
import { executeSlashCommand } from "../../utils/slashmenu.js";
5+
6+
test.beforeEach(async ({ page }) => {
7+
await page.goto(BASE_URL);
8+
});
9+
10+
test.describe("Check Table interactions", () => {
11+
test("Should be able to type in cell", async ({ page }) => {
12+
await focusOnEditor(page);
13+
await executeSlashCommand(page, "table");
14+
await page.keyboard.type("Table Cell");
15+
16+
await compareDocToSnapshot(page, "cellTyping.json");
17+
});
18+
test("Tab should cycle cells", async ({ page }) => {
19+
await focusOnEditor(page);
20+
await executeSlashCommand(page, "table");
21+
// Cycle to sixth (last) cell.
22+
for (let i = 0; i < 5; i++) {
23+
await page.keyboard.press("Tab");
24+
}
25+
await page.keyboard.type("Table Cell");
26+
// Cycle back to first cell.
27+
for (let i = 0; i < 5; i++) {
28+
await page.keyboard.press("Shift+Tab");
29+
}
30+
await page.keyboard.type("Table Cell");
31+
32+
await compareDocToSnapshot(page, "tabCells.json");
33+
});
34+
test("Arrow keys should move cells", async ({ page }) => {
35+
await focusOnEditor(page);
36+
await executeSlashCommand(page, "table");
37+
// Move down to second (last) cell in column and third (last) cell in row.
38+
page.keyboard.press("ArrowDown");
39+
for (let i = 0; i < 2; i++) {
40+
await page.keyboard.press("ArrowRight");
41+
}
42+
await page.keyboard.type("Table Cell");
43+
// Cycle back to first cell.
44+
page.keyboard.press("ArrowUp");
45+
for (let i = 0; i < 2; i++) {
46+
await page.keyboard.press("ArrowLeft");
47+
}
48+
await page.keyboard.type("Table Cell");
49+
50+
await compareDocToSnapshot(page, "arrowKeyCells.json");
51+
});
52+
});

‎tests/src/end-to-end/tables/tables.test.ts-snapshots/arrowKeyCells-json-chromium-linux.json‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
{
2+
"type": "doc",
3+
"content": [
4+
{
5+
"type": "blockGroup",
6+
"content": [
7+
{
8+
"type": "blockContainer",
9+
"attrs": {
10+
"id": "0",
11+
"textColor": "default",
12+
"backgroundColor": "default"
13+
},
14+
"content": [
15+
{
16+
"type": "table",
17+
"content": [
18+
{
19+
"type": "tableRow",
20+
"content": [
21+
{
22+
"type": "tableCell",
23+
"attrs": {
24+
"textColor": "default",
25+
"backgroundColor": "default",
26+
"textAlignment": "left",
27+
"colspan": 1,
28+
"rowspan": 1,
29+
"colwidth": null
30+
},
31+
"content": [
32+
{
33+
"type": "tableParagraph",
34+
"content": [
35+
{
36+
"type": "text",
37+
"text": "Table Cell"
38+
}
39+
]
40+
}
41+
]
42+
},
43+
{
44+
"type": "tableCell",
45+
"attrs": {
46+
"textColor": "default",
47+
"backgroundColor": "default",
48+
"textAlignment": "left",
49+
"colspan": 1,
50+
"rowspan": 1,
51+
"colwidth": null
52+
},
53+
"content": [
54+
{
55+
"type": "tableParagraph"
56+
}
57+
]
58+
},
59+
{
60+
"type": "tableCell",
61+
"attrs": {
62+
"textColor": "default",
63+
"backgroundColor": "default",
64+
"textAlignment": "left",
65+
"colspan": 1,
66+
"rowspan": 1,
67+
"colwidth": null
68+
},
69+
"content": [
70+
{
71+
"type": "tableParagraph"
72+
}
73+
]
74+
}
75+
]
76+
},
77+
{
78+
"type": "tableRow",
79+
"content": [
80+
{
81+
"type": "tableCell",
82+
"attrs": {
83+
"textColor": "default",
84+
"backgroundColor": "default",
85+
"textAlignment": "left",
86+
"colspan": 1,
87+
"rowspan": 1,
88+
"colwidth": null
89+
},
90+
"content": [
91+
{
92+
"type": "tableParagraph"
93+
}
94+
]
95+
},
96+
{
97+
"type": "tableCell",
98+
"attrs": {
99+
"textColor": "default",
100+
"backgroundColor": "default",
101+
"textAlignment": "left",
102+
"colspan": 1,
103+
"rowspan": 1,
104+
"colwidth": null
105+
},
106+
"content": [
107+
{
108+
"type": "tableParagraph"
109+
}
110+
]
111+
},
112+
{
113+
"type": "tableCell",
114+
"attrs": {
115+
"textColor": "default",
116+
"backgroundColor": "default",
117+
"textAlignment": "left",
118+
"colspan": 1,
119+
"rowspan": 1,
120+
"colwidth": null
121+
},
122+
"content": [
123+
{
124+
"type": "tableParagraph",
125+
"content": [
126+
{
127+
"type": "text",
128+
"text": "Table Cell"
129+
}
130+
]
131+
}
132+
]
133+
}
134+
]
135+
}
136+
]
137+
}
138+
]
139+
},
140+
{
141+
"type": "blockContainer",
142+
"attrs": {
143+
"id": "1",
144+
"textColor": "default",
145+
"backgroundColor": "default"
146+
},
147+
"content": [
148+
{
149+
"type": "paragraph",
150+
"attrs": {
151+
"textAlignment": "left"
152+
}
153+
}
154+
]
155+
}
156+
]
157+
}
158+
]
159+
}

0 commit comments

Comments
 (0)