From 3e0990684095a17941b3b3fd62c10f11d0f0fe23 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Tue, 28 Apr 2026 15:36:13 +0200 Subject: [PATCH 1/3] Changed "Default" color name to "Auto" --- packages/core/src/i18n/locales/ar.ts | 2 +- packages/core/src/i18n/locales/de.ts | 2 +- packages/core/src/i18n/locales/en.ts | 2 +- packages/core/src/i18n/locales/es.ts | 2 +- packages/core/src/i18n/locales/fa.ts | 2 +- packages/core/src/i18n/locales/fr.ts | 2 +- packages/core/src/i18n/locales/he.ts | 2 +- packages/core/src/i18n/locales/hr.ts | 2 +- packages/core/src/i18n/locales/is.ts | 2 +- packages/core/src/i18n/locales/it.ts | 2 +- packages/core/src/i18n/locales/ja.ts | 2 +- packages/core/src/i18n/locales/ko.ts | 2 +- packages/core/src/i18n/locales/nl.ts | 2 +- packages/core/src/i18n/locales/no.ts | 2 +- packages/core/src/i18n/locales/pl.ts | 2 +- packages/core/src/i18n/locales/pt.ts | 2 +- packages/core/src/i18n/locales/ru.ts | 2 +- packages/core/src/i18n/locales/sk.ts | 2 +- packages/core/src/i18n/locales/uk.ts | 2 +- packages/core/src/i18n/locales/uz.ts | 2 +- packages/core/src/i18n/locales/vi.ts | 2 +- packages/core/src/i18n/locales/zh-tw.ts | 2 +- packages/core/src/i18n/locales/zh.ts | 2 +- 23 files changed, 23 insertions(+), 23 deletions(-) diff --git a/packages/core/src/i18n/locales/ar.ts b/packages/core/src/i18n/locales/ar.ts index 00574debed..78710460af 100644 --- a/packages/core/src/i18n/locales/ar.ts +++ b/packages/core/src/i18n/locales/ar.ts @@ -214,7 +214,7 @@ export const ar: Dictionary = { text_title: "نص", background_title: "خلفية", colors: { - default: "افتراضي", + default: "تلقائي", gray: "رمادي", brown: "بني", red: "أحمر", diff --git a/packages/core/src/i18n/locales/de.ts b/packages/core/src/i18n/locales/de.ts index cac48dd80a..6c067d48ca 100644 --- a/packages/core/src/i18n/locales/de.ts +++ b/packages/core/src/i18n/locales/de.ts @@ -249,7 +249,7 @@ export const de: Dictionary = { text_title: "Text", background_title: "Hintergrund", colors: { - default: "Standard", + default: "Automatisch", gray: "Grau", brown: "Braun", red: "Rot", diff --git a/packages/core/src/i18n/locales/en.ts b/packages/core/src/i18n/locales/en.ts index af7927d207..2bbd73f433 100644 --- a/packages/core/src/i18n/locales/en.ts +++ b/packages/core/src/i18n/locales/en.ts @@ -229,7 +229,7 @@ export const en = { text_title: "Text", background_title: "Background", colors: { - default: "Default", + default: "Auto", gray: "Gray", brown: "Brown", red: "Red", diff --git a/packages/core/src/i18n/locales/es.ts b/packages/core/src/i18n/locales/es.ts index 9e830b406b..69b6e2bbc9 100644 --- a/packages/core/src/i18n/locales/es.ts +++ b/packages/core/src/i18n/locales/es.ts @@ -228,7 +228,7 @@ export const es: Dictionary = { text_title: "Texto", background_title: "Fondo", colors: { - default: "Por defecto", + default: "Automático", gray: "Gris", brown: "Marrón", red: "Rojo", diff --git a/packages/core/src/i18n/locales/fa.ts b/packages/core/src/i18n/locales/fa.ts index f72270e04e..ef4ad35a78 100644 --- a/packages/core/src/i18n/locales/fa.ts +++ b/packages/core/src/i18n/locales/fa.ts @@ -197,7 +197,7 @@ export const fa = { text_title: "متن", background_title: "پس‌زمینه", colors: { - default: "پیش‌فرض", + default: "خودکار", gray: "خاکستری", brown: "قهوه‌ای", red: "قرمز", diff --git a/packages/core/src/i18n/locales/fr.ts b/packages/core/src/i18n/locales/fr.ts index b56e6942f6..92cabcf44e 100644 --- a/packages/core/src/i18n/locales/fr.ts +++ b/packages/core/src/i18n/locales/fr.ts @@ -275,7 +275,7 @@ export const fr: Dictionary = { text_title: "Texte", background_title: "Fond", colors: { - default: "Défaut", + default: "Auto", gray: "Gris", brown: "Marron", red: "Rouge", diff --git a/packages/core/src/i18n/locales/he.ts b/packages/core/src/i18n/locales/he.ts index 553fc42941..4b13c2152e 100644 --- a/packages/core/src/i18n/locales/he.ts +++ b/packages/core/src/i18n/locales/he.ts @@ -230,7 +230,7 @@ export const he: Dictionary = { text_title: "טקסט", background_title: "רקע", colors: { - default: "ברירת מחדל", + default: "אוטומטי", gray: "אפור", brown: "חום", red: "אדום", diff --git a/packages/core/src/i18n/locales/hr.ts b/packages/core/src/i18n/locales/hr.ts index 31c0b71159..520d6f1cdd 100644 --- a/packages/core/src/i18n/locales/hr.ts +++ b/packages/core/src/i18n/locales/hr.ts @@ -242,7 +242,7 @@ export const hr: Dictionary = { text_title: "Tekst", background_title: "Pozadina", colors: { - default: "Zadano", + default: "Automatski", gray: "Siva", brown: "Smeđa", red: "Crvena", diff --git a/packages/core/src/i18n/locales/is.ts b/packages/core/src/i18n/locales/is.ts index 25060d651f..8be3887076 100644 --- a/packages/core/src/i18n/locales/is.ts +++ b/packages/core/src/i18n/locales/is.ts @@ -242,7 +242,7 @@ export const is: Dictionary = { text_title: "Texti", background_title: "Bakgrunnur", colors: { - default: "Sjálfgefið", + default: "Sjálfvirkt", gray: "Grár", brown: "Brúnn", red: "Rauður", diff --git a/packages/core/src/i18n/locales/it.ts b/packages/core/src/i18n/locales/it.ts index 45d9dcd277..f2ffc41431 100644 --- a/packages/core/src/i18n/locales/it.ts +++ b/packages/core/src/i18n/locales/it.ts @@ -251,7 +251,7 @@ export const it: Dictionary = { text_title: "Testo", background_title: "Sfondo", colors: { - default: "Predefinito", + default: "Automatico", gray: "Grigio", brown: "Marrone", red: "Rosso", diff --git a/packages/core/src/i18n/locales/ja.ts b/packages/core/src/i18n/locales/ja.ts index 236b834443..8c1b5f35cf 100644 --- a/packages/core/src/i18n/locales/ja.ts +++ b/packages/core/src/i18n/locales/ja.ts @@ -269,7 +269,7 @@ export const ja: Dictionary = { text_title: "文字色", background_title: "背景色", colors: { - default: "デフォルト", + default: "自動", gray: "グレー", brown: "茶色", red: "赤", diff --git a/packages/core/src/i18n/locales/ko.ts b/packages/core/src/i18n/locales/ko.ts index cce4c8f7c6..5b7ee597ae 100644 --- a/packages/core/src/i18n/locales/ko.ts +++ b/packages/core/src/i18n/locales/ko.ts @@ -242,7 +242,7 @@ export const ko: Dictionary = { text_title: "텍스트", background_title: "배경", colors: { - default: "기본", + default: "자동", gray: "회색", brown: "갈색", red: "빨간색", diff --git a/packages/core/src/i18n/locales/nl.ts b/packages/core/src/i18n/locales/nl.ts index 6d1f48cde2..731c877fb1 100644 --- a/packages/core/src/i18n/locales/nl.ts +++ b/packages/core/src/i18n/locales/nl.ts @@ -230,7 +230,7 @@ export const nl: Dictionary = { text_title: "Tekst", background_title: "Achtergrond", colors: { - default: "Standaard", + default: "Automatisch", gray: "Grijs", brown: "Bruin", red: "Rood", diff --git a/packages/core/src/i18n/locales/no.ts b/packages/core/src/i18n/locales/no.ts index c28cac2b9f..8d88d81f52 100644 --- a/packages/core/src/i18n/locales/no.ts +++ b/packages/core/src/i18n/locales/no.ts @@ -247,7 +247,7 @@ export const no: Dictionary = { text_title: "Tekst", background_title: "Bakgrunn", colors: { - default: "Standard", + default: "Automatisk", gray: "Grå", brown: "Brun", red: "Rød", diff --git a/packages/core/src/i18n/locales/pl.ts b/packages/core/src/i18n/locales/pl.ts index 35bf1f255a..1b85ff785c 100644 --- a/packages/core/src/i18n/locales/pl.ts +++ b/packages/core/src/i18n/locales/pl.ts @@ -220,7 +220,7 @@ export const pl: Dictionary = { text_title: "Tekst", background_title: "Tło", colors: { - default: "Domyślny", + default: "Automatyczny", gray: "Szary", brown: "Brązowy", red: "Czerwony", diff --git a/packages/core/src/i18n/locales/pt.ts b/packages/core/src/i18n/locales/pt.ts index 7801cd2d36..131002efd4 100644 --- a/packages/core/src/i18n/locales/pt.ts +++ b/packages/core/src/i18n/locales/pt.ts @@ -221,7 +221,7 @@ export const pt: Dictionary = { text_title: "Texto", background_title: "Fundo", colors: { - default: "Padrão", + default: "Automático", gray: "Cinza", brown: "Marrom", red: "Vermelho", diff --git a/packages/core/src/i18n/locales/ru.ts b/packages/core/src/i18n/locales/ru.ts index 0c7537b1bc..bf893ec8e5 100644 --- a/packages/core/src/i18n/locales/ru.ts +++ b/packages/core/src/i18n/locales/ru.ts @@ -272,7 +272,7 @@ export const ru: Dictionary = { text_title: "Текст", background_title: "Задний фон", colors: { - default: "По умолчанию", + default: "Авто", gray: "Серый", brown: "Коричневый", red: "Красный", diff --git a/packages/core/src/i18n/locales/sk.ts b/packages/core/src/i18n/locales/sk.ts index cbdd0b706f..00a40cdfc7 100644 --- a/packages/core/src/i18n/locales/sk.ts +++ b/packages/core/src/i18n/locales/sk.ts @@ -228,7 +228,7 @@ export const sk = { text_title: "Text", background_title: "Pozadie", colors: { - default: "Predvolená", + default: "Automaticky", gray: "Sivá", brown: "Hnedá", red: "Červená", diff --git a/packages/core/src/i18n/locales/uk.ts b/packages/core/src/i18n/locales/uk.ts index a99a4259c6..892d5582bf 100644 --- a/packages/core/src/i18n/locales/uk.ts +++ b/packages/core/src/i18n/locales/uk.ts @@ -254,7 +254,7 @@ export const uk: Dictionary = { text_title: "Текст", background_title: "Фон", colors: { - default: "За замовчуванням", + default: "Авто", gray: "Сірий", brown: "Коричневий", red: "Червоний", diff --git a/packages/core/src/i18n/locales/uz.ts b/packages/core/src/i18n/locales/uz.ts index 8330db43b4..ac35c734c5 100644 --- a/packages/core/src/i18n/locales/uz.ts +++ b/packages/core/src/i18n/locales/uz.ts @@ -294,7 +294,7 @@ export const uz: Dictionary = { text_title: "Matn", background_title: "Fon", colors: { - default: "Standart", + default: "Avtomatik", gray: "Kulrang", brown: "Jigarrang", red: "Qizil", diff --git a/packages/core/src/i18n/locales/vi.ts b/packages/core/src/i18n/locales/vi.ts index b300fdcfd0..daf49fa89d 100644 --- a/packages/core/src/i18n/locales/vi.ts +++ b/packages/core/src/i18n/locales/vi.ts @@ -228,7 +228,7 @@ export const vi: Dictionary = { text_title: "Văn bản", background_title: "Nền", colors: { - default: "Mặc định", + default: "Tự động", gray: "Xám", brown: "Nâu", red: "Đỏ", diff --git a/packages/core/src/i18n/locales/zh-tw.ts b/packages/core/src/i18n/locales/zh-tw.ts index e9aa1e8ac6..6b2c35b96c 100644 --- a/packages/core/src/i18n/locales/zh-tw.ts +++ b/packages/core/src/i18n/locales/zh-tw.ts @@ -270,7 +270,7 @@ export const zhTW: Dictionary = { text_title: "文字", background_title: "背景色", colors: { - default: "預設", + default: "自動", gray: "灰色", brown: "棕色", red: "紅色", diff --git a/packages/core/src/i18n/locales/zh.ts b/packages/core/src/i18n/locales/zh.ts index b44c81aa36..14920815a4 100644 --- a/packages/core/src/i18n/locales/zh.ts +++ b/packages/core/src/i18n/locales/zh.ts @@ -270,7 +270,7 @@ export const zh: Dictionary = { text_title: "文本", background_title: "背景色", colors: { - default: "默认", + default: "自动", gray: "灰色", brown: "棕色", red: "红色", From e587cb0b01a49a19c722384dbd312256bbed669b Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Tue, 28 Apr 2026 15:36:29 +0200 Subject: [PATCH 2/3] Fixed block color CSS issues --- packages/core/src/editor/Block.css | 18 -------------- packages/react/src/editor/styles.css | 36 ++++++++++++++-------------- 2 files changed, 18 insertions(+), 36 deletions(-) diff --git a/packages/core/src/editor/Block.css b/packages/core/src/editor/Block.css index 6a079f7863..a5d8229b0a 100644 --- a/packages/core/src/editor/Block.css +++ b/packages/core/src/editor/Block.css @@ -561,110 +561,92 @@ 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; } diff --git a/packages/react/src/editor/styles.css b/packages/react/src/editor/styles.css index d659be3671..c2393a319f 100644 --- a/packages/react/src/editor/styles.css +++ b/packages/react/src/editor/styles.css @@ -141,92 +141,92 @@ /* Highlight color styling */ [data-style-type="textColor"][data-value="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"], -[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"], -[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"], -[data-text-color="orange"] { +.bn-block:has(> .bn-block-content[data-text-color="broorangewn"]) { color: var(--bn-colors-highlights-orange-text); } [data-style-type="textColor"][data-value="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"], -[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"], -[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"], -[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"], -[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"], -[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"], -[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"], -[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"], -[data-background-color="orange"] { +.bn-block:has(> .bn-block-content[data-background-color="broorangewn"]) { background-color: var(--bn-colors-highlights-orange-background); } [data-style-type="backgroundColor"][data-value="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"], -[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"], -[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"], -[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"], -[data-background-color="pink"] { +.bn-block:has(> .bn-block-content[data-background-color="pink"]) { background-color: var(--bn-colors-highlights-pink-background); } From 3939d3b338a8c7ecde9f598cfccfc6b4623557df Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Tue, 28 Apr 2026 16:48:03 +0200 Subject: [PATCH 3/3] Fixed rendering issues --- .../04-rendering-static-documents/src/App.tsx | 12 ++++++------ packages/react/src/editor/styles.css | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/examples/02-backend/04-rendering-static-documents/src/App.tsx b/examples/02-backend/04-rendering-static-documents/src/App.tsx index b6ffd098a0..3a5db9891b 100644 --- a/examples/02-backend/04-rendering-static-documents/src/App.tsx +++ b/examples/02-backend/04-rendering-static-documents/src/App.tsx @@ -22,17 +22,17 @@ This example has the HTML hard-coded, but shows at least how the document will b export default function App() { // This HTML is generated by the ServerBlockNoteEditor.blocksToFullHTML method const html = `
-
-
-
+
+
+

Heading 2

-
-
-
+
+
+

Paragraph

diff --git a/packages/react/src/editor/styles.css b/packages/react/src/editor/styles.css index c2393a319f..702116d310 100644 --- a/packages/react/src/editor/styles.css +++ b/packages/react/src/editor/styles.css @@ -156,7 +156,7 @@ } [data-style-type="textColor"][data-value="orange"], -.bn-block:has(> .bn-block-content[data-text-color="broorangewn"]) { +.bn-block:has(> .bn-block-content[data-text-color="orange"]) { color: var(--bn-colors-highlights-orange-text); } @@ -201,7 +201,7 @@ } [data-style-type="backgroundColor"][data-value="orange"], -.bn-block:has(> .bn-block-content[data-background-color="broorangewn"]) { +.bn-block:has(> .bn-block-content[data-background-color="orange"]) { background-color: var(--bn-colors-highlights-orange-background); }