diff --git a/packages/core/src/editor/Block.css b/packages/core/src/editor/Block.css index cf28b2a26..a600452bb 100644 --- a/packages/core/src/editor/Block.css +++ b/packages/core/src/editor/Block.css @@ -14,16 +14,11 @@ BASIC STYLES } .bn-block-content { + display: flex; transition: font-size 0.2s; width: 100%; } -.bn-block-content::before { - /* content: ""; */ - transition: all 0.2s; - /*margin: 0px;*/ -} - .bn-block-content.ProseMirror-selectednode > *, /* Case for node view renderers */ .ProseMirror-selectednode > .bn-block-content > * { @@ -31,6 +26,20 @@ BASIC STYLES outline: 4px solid rgb(100, 160, 255); } +.bn-block-content::before { + transition: all 0.2s; + /* Workaround for selection issue on Chrome, see #1588 and also here: + https://discuss.prosemirror.net/t/mouse-down-selection-behaviour-different-on-chrome/8426 + The :before element causes the selection to be set in the wrong place vs + other browsers. Setting no height fixes this, while list item indicators are + still displayed fine as overflow is not hidden. */ + height: 0; + /* Also have to center the text vertically to ensure alignment at different + line heights (which we change for `.bn-inline-content` below). */ + display: flex; + align-items: center; +} + .bn-inline-content { width: 100%; /* We use line height on `.bn-inline-content` to mimic padding on @@ -182,11 +191,11 @@ NESTED BLOCKS .bn-block-content::before { margin-right: 0; content: ""; - display: inline; } /* Ordered */ .bn-block-content[data-content-type="numberedListItem"] { + align-items: center; display: flex; gap: 0.5em; } @@ -213,12 +222,14 @@ NESTED BLOCKS /* Unordered */ .bn-block-content[data-content-type="bulletListItem"] { + align-items: center; display: flex; gap: 0.5em; } /* Checked */ .bn-block-content[data-content-type="checkListItem"] > div { + align-items: center; display: flex; width: 100%; }