diff --git a/packages/core/src/editor/Block.css b/packages/core/src/editor/Block.css index a246b30cdb..6dbf8dc5a8 100644 --- a/packages/core/src/editor/Block.css +++ b/packages/core/src/editor/Block.css @@ -23,6 +23,14 @@ BASIC STYLES */ } +/* We can't set `display: flex` on `.bn-block-content` while it has inline +content (see comment below). However, it's necessary to set alignment of blocks +without content as these can't use `text-align`, so this additional rule is +used. */ +.bn-block-content:not(:has(.bn-inline-content)) { + display: flex; +} + .bn-block-content::before { /* content: ""; */ transition: all 0.2s; @@ -37,6 +45,11 @@ BASIC STYLES } .bn-inline-content { + /* Allows displaying `.bn-block-content:before` elements side-by-side with + inline content. This is used instead of setting `display: flex` on + `.bn-block-content` as that causes selection issues for `.bn-inline-content` + elements when clicking the editor padding. */ + display: inline; width: 100%; } @@ -166,9 +179,8 @@ NESTED BLOCKS } /* Ordered */ -.bn-block-content[data-content-type="numberedListItem"] { - display: flex; - gap: 0.5em; +.bn-block-content[data-content-type="numberedListItem"] .bn-inline-content { + margin-left: 0.5em; } [data-content-type="numberedListItem"] { @@ -192,20 +204,21 @@ NESTED BLOCKS } /* Unordered */ -.bn-block-content[data-content-type="bulletListItem"] { - display: flex; - gap: 0.5em; +.bn-block-content[data-content-type="bulletListItem"] .bn-inline-content { + margin-left: 0.5em; } /* Checked */ -.bn-block-content[data-content-type="checkListItem"] > div { - display: flex; - width: 100%; +.bn-block-content[data-content-type="checkListItem"] .bn-inline-content { + margin-left: 0.5em; +} + +.bn-block-content[data-content-type="checkListItem"] > div > div { + display: inline; } .bn-block-content[data-content-type="checkListItem"] > div > div > input { margin: 0; - margin-inline-end: 0.5em; cursor: pointer; } @@ -214,14 +227,6 @@ NESTED BLOCKS text-decoration: line-through; } -.bn-block-content[data-text-alignment="center"] { - justify-content: center; -} - -.bn-block-content[data-text-alignment="right"] { - justify-content: flex-end; -} - /* No list nesting */ .bn-block-outer[data-prev-type="bulletListItem"] > .bn-block diff --git a/tests/src/end-to-end/static/static.test.ts-snapshots/static-rendering-chromium-linux.png b/tests/src/end-to-end/static/static.test.ts-snapshots/static-rendering-chromium-linux.png index 5f601a1bae..cb5dc2d6c9 100644 Binary files a/tests/src/end-to-end/static/static.test.ts-snapshots/static-rendering-chromium-linux.png and b/tests/src/end-to-end/static/static.test.ts-snapshots/static-rendering-chromium-linux.png differ diff --git a/tests/src/end-to-end/static/static.test.ts-snapshots/static-rendering-firefox-linux.png b/tests/src/end-to-end/static/static.test.ts-snapshots/static-rendering-firefox-linux.png index 6fa9716ead..a0daa1eb59 100644 Binary files a/tests/src/end-to-end/static/static.test.ts-snapshots/static-rendering-firefox-linux.png and b/tests/src/end-to-end/static/static.test.ts-snapshots/static-rendering-firefox-linux.png differ diff --git a/tests/src/end-to-end/static/static.test.ts-snapshots/static-rendering-webkit-linux.png b/tests/src/end-to-end/static/static.test.ts-snapshots/static-rendering-webkit-linux.png index 17468e8149..feffd25fbf 100644 Binary files a/tests/src/end-to-end/static/static.test.ts-snapshots/static-rendering-webkit-linux.png and b/tests/src/end-to-end/static/static.test.ts-snapshots/static-rendering-webkit-linux.png differ