@ckeditor/ckeditor5-list-multi-level 46.0.0-alpha.3 → 46.0.0-alpha.4

package/theme/multilevellist.css

@@ -9,6 +9,18 @@
 
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
+.ck-editor__editable .multi-level-list {
+	& li {
+		& .multi-level-list__marker {
+			&::before {
+				/* Use CSS to display multi-level list markers to prevent breaking the composition.
+				See https://github.com/cksource/ckeditor5-commercial/issues/6873. */
+				content: attr(data-multi-level-list-marker);
+			}
+		}
+	}
+}
+
 .ck-content .multi-level-list {
 	list-style: none;
 
@@ -16,20 +28,44 @@
 		position: relative;
 
 		& .multi-level-list__marker {
-			position: absolute;
-			padding-inline-end: 5px;
-			transform: translate(-100%, 0);
 			pointer-events: none;
 
-			/* RTL styles */
-			@mixin ck-dir rtl {
-				transform: translate(100%, 0);
-			}
-
 			/* Do not show list markers as selected. */
 			&::selection {
 				background-color: transparent;
 			}
+
+			/* Marker next to a block widget or old marker format (legacy content without span element in marker) */
+			&:not(:has(span)) {
+				position: absolute;
+				padding-inline-end: 5px;
+				transform: translate(-100%, 0);
+
+				/* RTL styles */
+				@mixin ck-dir rtl {
+					transform: translate(100%, 0);
+				}
+			}
+
+			/* Marker next to a paragraph like element in a new marker format with marker styling */
+			&:has(span) {
+				position: relative;
+				width: 0;
+				display: inline-block;
+				text-wrap: nowrap;
+
+				&::before,
+				& > span {
+					position: absolute;
+					padding-inline-end: 5px;
+					transform: translate(-100%, 0);
+
+					/* RTL styles */
+					@mixin ck-dir rtl {
+						transform: translate(100%, 0);
+					}
+				}
+			}
 		}
 
 		&.ck-list-marker-bold > .multi-level-list__marker,
@@ -79,22 +115,13 @@
 	}
 }
 
-.ck-editor__editable .multi-level-list {
-	& li {
-		& .multi-level-list__marker {
-			&::before {
-				/* Use CSS to display multi-level list markers to prevent breaking the composition.
-				See https://github.com/cksource/ckeditor5-commercial/issues/6873. */
-				content: attr(data-multi-level-list-marker);
-			}
-		}
-	}
-}
-
 .ck-content[dir='rtl'] .multi-level-list {
 	& li {
 		& .multi-level-list__marker {
-			transform: translate(100%, 0);
+			&:not(:has(span)),
+			& > span {
+				transform: translate(100%, 0);
+			}
 		}
 	}
 }