@ckeditor/ckeditor5-merge-fields 43.0.0-alpha.6 → 43.1.0-alpha.0

package/theme/mergefields.css

@@ -20,41 +20,114 @@
 	--ck-color-merge-fields-affix-color: hsl(218, 82%, 57%);
 }
 
-.ck .ck-merge-field {
-	white-space: nowrap;
-	margin: 0 1px 0 2px;
-	outline-offset: 0;
-	border-radius: 2px;
-	padding-top: var(--ck-merge-fields-paddings-vertical);
-	padding-bottom: var(--ck-merge-fields-paddings-vertical);
-	line-height: 0;
-	-webkit-user-select: none;
+.ck .ck-merge-field-block {
+	display: flex;
+	margin: 0.9em auto;
+	align-items: center;
+	justify-content: center;
 
 	&:hover {
 		transition: none;
 		cursor: default;
 	}
 
+	&.ck-merge-field-block_with-value, &.ck-merge-field-block_with-warning {
+		/* Make sure the content in the block does not overflow and is still centered. */
+		& .ck-merge-field {
+			overflow: hidden;
+			display: flex;
+			justify-content: center;
+		}
+
+		&::before {
+			position: absolute;
+			z-index: 1;
+			top: var(--ck-spacing-medium);
+			left: var(--ck-spacing-medium);
+			background: hsl(0 0% 98%);
+			padding: var(--ck-spacing-tiny) 1px;
+			border-radius: 2px;
+			line-height: 1em;
+			font-family: var(--ck-font-face);
+		}
+	}
+
 	&:not(:hover):not(.ck-widget_selected) {
 		outline: 1px solid var(--ck-color-merge-fields-outline);
 	}
 
-	&.ck-merge-field_with-warning {
-		white-space: normal;
+	&.ck-merge-field-block_with-warning {
+		&::before {
+			content: attr(data-merge-field-block-label) ' ' url('data:image/svg+xml,%3Csvg width="12" height="12" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM5.27988 2.40003H6.71988V6.72003H5.27988V2.40003ZM6.72009 8.16003H5.28009V9.60003H6.72009V8.16003Z" fill="%23DB3700"/%3E%3C/svg%3E');
+			outline: 1px solid var(--ck-color-merge-fields-with-warning-outline);
+		}
 
 		&:not(:hover):not(.ck-widget_selected) {
 			outline: 1px solid var(--ck-color-merge-fields-with-warning-outline);
 		}
 	}
 
-	&.ck-merge-field_with-value {
-		white-space: normal;
+	&.ck-widget.ck-widget_selected.ck-widget_type-around_show-fake-caret_before,
+	&.ck-widget.ck-widget_selected.ck-widget_type-around_show-fake-caret_after {
+		outline: 1px solid var(--ck-color-merge-fields-outline);
+
+		&.ck-merge-field-block_with-warning {
+			outline: 1px solid var(--ck-color-merge-fields-with-warning-outline);
+		}
+	}
 
-		&:not(:hover):not(.ck-widget_selected) {
+	&.ck-merge-field-block_with-value {
+		&::before {
+			content: attr(data-merge-field-block-label);
 			outline: 1px solid var(--ck-color-merge-fields-value-outline);
 		}
 	}
 
+	&[dir="rtl"]::before {
+		left: auto;
+		right: var(--ck-spacing-medium);
+	}
+}
+
+/* stylelint-disable no-descending-specificity */
+.ck .ck-merge-field {
+	&:hover {
+		transition: none;
+		cursor: default;
+	}
+
+	&:not( .ck-merge-field-block * ) {
+		/* Styles for textual (inline) merge fields only. */
+		padding-top: var(--ck-merge-fields-paddings-vertical);
+		padding-bottom: var(--ck-merge-fields-paddings-vertical);
+		-webkit-user-select: none;
+		white-space: nowrap;
+		outline-offset: 0;
+		margin: 0 1px 0 2px;
+		line-height: 0;
+		border-radius: 2px;
+
+		&:not(:hover):not(.ck-widget_selected) {
+			outline: 1px solid var(--ck-color-merge-fields-outline);
+		}
+
+		&.ck-merge-field_with-warning {
+			white-space: normal;
+
+			&:not(:hover):not(.ck-widget_selected) {
+				outline: 1px solid var(--ck-color-merge-fields-with-warning-outline);
+			}
+		}
+
+		&.ck-merge-field_with-value {
+			white-space: normal;
+
+			&:not(:hover):not(.ck-widget_selected) {
+				outline: 1px solid var(--ck-color-merge-fields-value-outline);
+			}
+		}
+	}
+
 	& .ck-merge-field__icon {
 		padding: 0 0.15em;
 		position: relative;
@@ -85,6 +158,24 @@
 	}
 }
 
+.ck pre code .ck-merge-field .ck-merge-field__affix {
+	font-family: inherit;
+	position: relative;
+	top: 0;
+	font-size: inherit;
+
+	&:first-child {
+		padding-left: 0.15em;
+		padding-right: 0.18em;
+	}
+
+	&:last-child {
+		padding-left: 0.18em;
+		padding-right: 0.15em;
+	}
+}
+/* stylelint-enable no-descending-specificity */
+
 .ck .ck-merge-fields-form {
 	padding: var(--ck-spacing-medium);
 
@@ -102,21 +193,7 @@
 	}
 }
 
-/* stylelint-disable no-descending-specificity */
-.ck pre code .ck-merge-field .ck-merge-field__affix {
-	font-family: inherit;
-	position: relative;
-	top: 0;
-	font-size: inherit;
-
-	&:first-child {
-		padding-left: 0.15em;
-		padding-right: 0.18em;
-	}
-
-	&:last-child {
-		padding-left: 0.18em;
-		padding-right: 0.15em;
-	}
+/* Disable all mouse interaction for block merge field previews as long as the editor is not read–only. */
+.ck-editor__editable:not(.ck-read-only) .ck-widget.ck-merge-field-block .ck-merge-field {
+	pointer-events: none;
 }
-/* stylelint-enable no-descending-specificity */