Skip to content

fix: Table cell colors (BLO-1198) #2770

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
matthewlipski wants to merge 4 commits into
base: main
Choose a base branch
from
Open

fix: Table cell colors (BLO-1198) #2770

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f8ff6d1
Fixed table cell colors not being applied
matthewlipski May 22, 2026
b8bcc8f
Merge branch 'main' into cell-colors-fix
matthewlipski May 22, 2026
3ae4d49
Streamlined CSS rules
matthewlipski May 22, 2026
8ab1ee8
Removed old comments
matthewlipski May 22, 2026
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
18 changes: 18 additions & 0 deletions packages/core/src/editor/Block.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -583,92 +583,110 @@ NESTED BLOCKS

/* TEXT COLORS */
[data-style-type="textColor"][data-value="gray"],
[data-text-color="gray"],
.bn-block:has(> .bn-block-content[data-text-color="gray"]) {
color: #9b9a97;
}

[data-style-type="textColor"][data-value="brown"],
[data-text-color="brown"],
.bn-block:has(> .bn-block-content[data-text-color="brown"]) {
color: #64473a;
}

[data-style-type="textColor"][data-value="red"],
[data-text-color="red"],
.bn-block:has(> .bn-block-content[data-text-color="red"]) {
color: #e03e3e;
}

[data-style-type="textColor"][data-value="orange"],
[data-text-color="orange"],
.bn-block:has(> .bn-block-content[data-text-color="orange"]) {
color: #d9730d;
}

[data-style-type="textColor"][data-value="yellow"],
[data-text-color="yellow"],
.bn-block:has(> .bn-block-content[data-text-color="yellow"]) {
color: #dfab01;
}

[data-style-type="textColor"][data-value="green"],
[data-text-color="green"],
.bn-block:has(> .bn-block-content[data-text-color="green"]) {
color: #4d6461;
}

[data-style-type="textColor"][data-value="blue"],
[data-text-color="blue"],
.bn-block:has(> .bn-block-content[data-text-color="blue"]) {
color: #0b6e99;
}

[data-style-type="textColor"][data-value="purple"],
[data-text-color="purple"],
.bn-block:has(> .bn-block-content[data-text-color="purple"]) {
color: #6940a5;
}

[data-style-type="textColor"][data-value="pink"],
[data-text-color="pink"],
.bn-block:has(> .bn-block-content[data-text-color="pink"]) {
color: #ad1a72;
}

/* BACKGROUND COLORS */
[data-style-type="backgroundColor"][data-value="gray"],
[data-background-color="gray"],
.bn-block:has(> .bn-block-content[data-background-color="gray"]) {
background-color: #ebeced;
}

[data-style-type="backgroundColor"][data-value="brown"],
[data-background-color="brown"],
.bn-block:has(> .bn-block-content[data-background-color="brown"]) {
background-color: #e9e5e3;
}

[data-style-type="backgroundColor"][data-value="red"],
[data-background-color="red"],
.bn-block:has(> .bn-block-content[data-background-color="red"]) {
background-color: #fbe4e4;
}

[data-style-type="backgroundColor"][data-value="orange"],
[data-background-color="orange"],
.bn-block:has(> .bn-block-content[data-background-color="orange"]) {
background-color: #f6e9d9;
}

[data-style-type="backgroundColor"][data-value="yellow"],
[data-background-color="yellow"],
.bn-block:has(> .bn-block-content[data-background-color="yellow"]) {
background-color: #fbf3db;
}

[data-style-type="backgroundColor"][data-value="green"],
[data-background-color="green"],
.bn-block:has(> .bn-block-content[data-background-color="green"]) {
background-color: #ddedea;
}

[data-style-type="backgroundColor"][data-value="blue"],
[data-background-color="blue"],
.bn-block:has(> .bn-block-content[data-background-color="blue"]) {
background-color: #ddebf1;
}

[data-style-type="backgroundColor"][data-value="purple"],
[data-background-color="purple"],
.bn-block:has(> .bn-block-content[data-background-color="purple"]) {
background-color: #eae4f2;
}

[data-style-type="backgroundColor"][data-value="pink"],
[data-background-color="pink"],
.bn-block:has(> .bn-block-content[data-background-color="pink"]) {
background-color: #f4dfeb;
}
Expand Down
36 changes: 18 additions & 18 deletions packages/react/src/editor/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,109 +141,109 @@

/* Highlight color styling */
[data-style-type="textColor"][data-value="gray"],
.bn-color-icon[data-text-color="gray"],
[data-text-color="gray"],
.bn-block:has(> .bn-block-content[data-text-color="gray"]) {
color: var(--bn-colors-highlights-gray-text);
}

[data-style-type="textColor"][data-value="brown"],
.bn-color-icon[data-text-color="brown"],
[data-text-color="brown"],
.bn-block:has(> .bn-block-content[data-text-color="brown"]) {
color: var(--bn-colors-highlights-brown-text);
}

[data-style-type="textColor"][data-value="red"],
.bn-color-icon[data-text-color="red"],
[data-text-color="red"],
.bn-block:has(> .bn-block-content[data-text-color="red"]) {
color: var(--bn-colors-highlights-red-text);
}

[data-style-type="textColor"][data-value="orange"],
.bn-color-icon[data-text-color="orange"],
[data-text-color="orange"],
.bn-block:has(> .bn-block-content[data-text-color="orange"]) {
color: var(--bn-colors-highlights-orange-text);
}

[data-style-type="textColor"][data-value="yellow"],
.bn-color-icon[data-text-color="yellow"],
[data-text-color="yellow"],
.bn-block:has(> .bn-block-content[data-text-color="yellow"]) {
color: var(--bn-colors-highlights-yellow-text);
}

[data-style-type="textColor"][data-value="green"],
.bn-color-icon[data-text-color="green"],
[data-text-color="green"],
.bn-block:has(> .bn-block-content[data-text-color="green"]) {
color: var(--bn-colors-highlights-green-text);
}

[data-style-type="textColor"][data-value="blue"],
.bn-color-icon[data-text-color="blue"],
[data-text-color="blue"],
.bn-block:has(> .bn-block-content[data-text-color="blue"]) {
color: var(--bn-colors-highlights-blue-text);
}

[data-style-type="textColor"][data-value="purple"],
.bn-color-icon[data-text-color="purple"],
[data-text-color="purple"],
.bn-block:has(> .bn-block-content[data-text-color="purple"]) {
color: var(--bn-colors-highlights-purple-text);
}

[data-style-type="textColor"][data-value="pink"],
.bn-color-icon[data-text-color="pink"],
[data-text-color="pink"],
.bn-block:has(> .bn-block-content[data-text-color="pink"]) {
color: var(--bn-colors-highlights-pink-text);
}

[data-style-type="backgroundColor"][data-value="gray"],
.bn-color-icon[data-background-color="gray"],
[data-background-color="gray"],
.bn-block:has(> .bn-block-content[data-background-color="gray"]) {
background-color: var(--bn-colors-highlights-gray-background);
}

[data-style-type="backgroundColor"][data-value="brown"],
.bn-color-icon[data-background-color="brown"],
[data-background-color="brown"],
.bn-block:has(> .bn-block-content[data-background-color="brown"]) {
background-color: var(--bn-colors-highlights-brown-background);
}

[data-style-type="backgroundColor"][data-value="red"],
.bn-color-icon[data-background-color="red"],
[data-background-color="red"],
.bn-block:has(> .bn-block-content[data-background-color="red"]) {
background-color: var(--bn-colors-highlights-red-background);
}

[data-style-type="backgroundColor"][data-value="orange"],
.bn-color-icon[data-background-color="orange"],
[data-background-color="orange"],
.bn-block:has(> .bn-block-content[data-background-color="orange"]) {
background-color: var(--bn-colors-highlights-orange-background);
}

[data-style-type="backgroundColor"][data-value="yellow"],
.bn-color-icon[data-background-color="yellow"],
[data-background-color="yellow"],
.bn-block:has(> .bn-block-content[data-background-color="yellow"]) {
background-color: var(--bn-colors-highlights-yellow-background);
}

[data-style-type="backgroundColor"][data-value="green"],
.bn-color-icon[data-background-color="green"],
[data-background-color="green"],
.bn-block:has(> .bn-block-content[data-background-color="green"]) {
background-color: var(--bn-colors-highlights-green-background);
}

[data-style-type="backgroundColor"][data-value="blue"],
.bn-color-icon[data-background-color="blue"],
[data-background-color="blue"],
.bn-block:has(> .bn-block-content[data-background-color="blue"]) {
background-color: var(--bn-colors-highlights-blue-background);
}

[data-style-type="backgroundColor"][data-value="purple"],
.bn-color-icon[data-background-color="purple"],
[data-background-color="purple"],
.bn-block:has(> .bn-block-content[data-background-color="purple"]) {
background-color: var(--bn-colors-highlights-purple-background);
}

[data-style-type="backgroundColor"][data-value="pink"],
.bn-color-icon[data-background-color="pink"],
[data-background-color="pink"],
.bn-block:has(> .bn-block-content[data-background-color="pink"]) {
background-color: var(--bn-colors-highlights-pink-background);
}
Expand Down
23 changes: 18 additions & 5 deletions tests/src/end-to-end/tables/tables.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
import { expect } from "@playwright/test";
import { test } from "../../setup/setupScript.js";
import { BASE_URL, TABLE_SELECTOR } from "../../utils/const.js";
import {
ADVANCED_TABLES_URL,
BASE_URL,
TABLE_SELECTOR,
} from "../../utils/const.js";
import { compareDocToSnapshot, focusOnEditor } from "../../utils/editor.js";
import { executeSlashCommand } from "../../utils/slashmenu.js";

test.beforeEach(async ({ page }) => {
await page.goto(BASE_URL);
});

test.describe("Check Table interactions", () => {
test("Should be able to type in cell", async ({ page }) => {
await page.goto(BASE_URL);
await focusOnEditor(page);
await executeSlashCommand(page, "table");
await page.keyboard.type("Table Cell");

await compareDocToSnapshot(page, "cellTyping.json");
});
test("Tab should cycle cells", async ({ page }) => {
await page.goto(BASE_URL);
await focusOnEditor(page);
await executeSlashCommand(page, "table");
// Cycle to sixth (last) cell.
Expand All @@ -33,6 +35,7 @@ test.describe("Check Table interactions", () => {
await compareDocToSnapshot(page, "tabCells.json");
});
test("Arrow keys should move cells", async ({ page }) => {
await page.goto(BASE_URL);
await focusOnEditor(page);
await executeSlashCommand(page, "table");
// Move down to second (last) cell in column and third (last) cell in row.
Expand All @@ -51,6 +54,7 @@ test.describe("Check Table interactions", () => {
await compareDocToSnapshot(page, "arrowKeyCells.json");
});
test("Enter should move to cell below", async ({ page }) => {
await page.goto(BASE_URL);
await focusOnEditor(page);
await executeSlashCommand(page, "table");
await page.keyboard.type("Top");
Expand All @@ -60,6 +64,7 @@ test.describe("Check Table interactions", () => {
await compareDocToSnapshot(page, "enterMovesToCellBelow.json");
});
test("Shift+Enter should create a new line within cell", async ({ page }) => {
await page.goto(BASE_URL);
await focusOnEditor(page);
await executeSlashCommand(page, "table");
await page.keyboard.type("Line 1");
Expand All @@ -83,6 +88,7 @@ test.describe("Check Table interactions", () => {
"Playwright doesn't correctly simulate drag events in Firefox.",
);

await page.goto(BASE_URL);
await focusOnEditor(page);
await executeSlashCommand(page, "table");

Expand Down Expand Up @@ -184,4 +190,11 @@ test.describe("Check Table interactions", () => {
// Expected: only R2 moved. Buggy (#2691): R3 follows along.
expect(order).toEqual(["R1", "R3", "R4", "R5", "R2"]);
});
// Regression test for table cell colors.
test("Should render table cell colors", async ({ page }) => {
await page.goto(ADVANCED_TABLES_URL, { waitUntil: "networkidle" });
await page.waitForSelector(TABLE_SELECTOR);

expect(await page.screenshot()).toMatchSnapshot("tableCellColors.png");
});
});
Binary file added ...c/end-to-end/tables/tables.test.ts-snapshots/tableCellColors-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...rc/end-to-end/tables/tables.test.ts-snapshots/tableCellColors-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...src/end-to-end/tables/tables.test.ts-snapshots/tableCellColors-webkit-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions tests/src/utils/const.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,10 @@ export const NO_TRAILING_BLOCK_URL = !process.env.RUN_IN_DOCKER
? `http://localhost:${PORT}/basic/no-trailing-block?hideMenu`
: `http://host.docker.internal:${PORT}/basic/no-trailing-block?hideMenu`;

export const ADVANCED_TABLES_URL = !process.env.RUN_IN_DOCKER
? `http://localhost:${PORT}/ui-components/advanced-tables?hideMenu`
: `http://host.docker.internal:${PORT}/ui-components/advanced-tables?hideMenu`;

export const PASTE_ZONE_SELECTOR = "#pasteZone";

export const EDITOR_SELECTOR = `.bn-editor`;
Expand Down
Loading