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

package/dist/index.css

@@ -24,53 +24,110 @@
 	--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;
 }
 
-.ck .ck-merge-field:hover {
+.ck .ck-merge-field-block:hover {
 		transition: none;
 		cursor: default;
 	}
 
-.ck .ck-merge-field:not(:hover):not(.ck-widget_selected) {
+/* Make sure the content in the block does not overflow and is still centered. */
+
+.ck .ck-merge-field-block.ck-merge-field-block_with-value .ck-merge-field, .ck .ck-merge-field-block.ck-merge-field-block_with-warning .ck-merge-field {
+			overflow: hidden;
+			display: flex;
+			justify-content: center;
+		}
+
+.ck .ck-merge-field-block.ck-merge-field-block_with-value::before, .ck .ck-merge-field-block.ck-merge-field-block_with-warning::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);
+		}
+
+.ck .ck-merge-field-block:not(:hover):not(.ck-widget_selected) {
 		outline: 1px solid var(--ck-color-merge-fields-outline);
 	}
 
-.ck .ck-merge-field.ck-merge-field_with-warning {
-		white-space: normal;
-	}
+.ck .ck-merge-field-block.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);
+		}
 
-.ck .ck-merge-field.ck-merge-field_with-warning:not(:hover):not(.ck-widget_selected) {
+.ck .ck-merge-field-block.ck-merge-field-block_with-warning:not(:hover):not(.ck-widget_selected) {
 			outline: 1px solid var(--ck-color-merge-fields-with-warning-outline);
 		}
 
-.ck .ck-merge-field.ck-merge-field_with-value {
-		white-space: normal;
+.ck .ck-merge-field-block.ck-widget.ck-widget_selected.ck-widget_type-around_show-fake-caret_before,
+	.ck .ck-merge-field-block.ck-widget.ck-widget_selected.ck-widget_type-around_show-fake-caret_after {
+		outline: 1px solid var(--ck-color-merge-fields-outline);
 	}
 
-.ck .ck-merge-field.ck-merge-field_with-value:not(:hover):not(.ck-widget_selected) {
+.ck .ck-merge-field-block.ck-widget.ck-widget_selected.ck-widget_type-around_show-fake-caret_before.ck-merge-field-block_with-warning, .ck .ck-merge-field-block.ck-widget.ck-widget_selected.ck-widget_type-around_show-fake-caret_after.ck-merge-field-block_with-warning {
+			outline: 1px solid var(--ck-color-merge-fields-with-warning-outline);
+		}
+
+.ck .ck-merge-field-block.ck-merge-field-block_with-value::before {
+			content: attr(data-merge-field-block-label);
 			outline: 1px solid var(--ck-color-merge-fields-value-outline);
 		}
 
+.ck .ck-merge-field-block[dir="rtl"]::before {
+		left: auto;
+		right: var(--ck-spacing-medium);
+	}
+
+/* stylelint-disable no-descending-specificity */
+.ck .ck-merge-field:hover {
+		transition: none;
+		cursor: default;
+	}
+.ck .ck-merge-field: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;
+	}
+.ck .ck-merge-field:not( .ck-merge-field-block * ):not(:hover):not(.ck-widget_selected) {
+			outline: 1px solid var(--ck-color-merge-fields-outline);
+		}
+.ck .ck-merge-field.ck-merge-field_with-warning:not( .ck-merge-field-block * ) {
+			white-space: normal;
+		}
+.ck .ck-merge-field.ck-merge-field_with-warning:not( .ck-merge-field-block * ):not(:hover):not(.ck-widget_selected) {
+				outline: 1px solid var(--ck-color-merge-fields-with-warning-outline);
+			}
+.ck .ck-merge-field.ck-merge-field_with-value:not( .ck-merge-field-block * ) {
+			white-space: normal;
+		}
+.ck .ck-merge-field.ck-merge-field_with-value:not( .ck-merge-field-block * ):not(:hover):not(.ck-widget_selected) {
+				outline: 1px solid var(--ck-color-merge-fields-value-outline);
+			}
 .ck .ck-merge-field .ck-merge-field__icon {
 		padding: 0 0.15em;
 		position: relative;
 		top: -1px;
 	}
-
 .ck .ck-merge-field .ck.ck-icon {
 		height: var(--ck-merge-fields-icon-size);
 		width: var(--ck-merge-fields-icon-size);
 	}
-
 .ck .ck-merge-field .ck-merge-field__affix {
 		font-family: Arial, sans-serif;
 		position: relative;
@@ -78,17 +135,33 @@
 		font-size: 0.85em;
 		color: var(--ck-color-merge-fields-affix-color);
 	}
-
 .ck .ck-merge-field .ck-merge-field__affix:first-child {
 			padding-left: 0.25em;
 			padding-right: 0.15em;
 		}
-
 .ck .ck-merge-field .ck-merge-field__affix:last-child {
 			padding-left: 0.15em;
 			padding-right: 0.25em;
 		}
 
+.ck pre code .ck-merge-field .ck-merge-field__affix {
+	font-family: inherit;
+	position: relative;
+	top: 0;
+	font-size: inherit;
+}
+
+.ck pre code .ck-merge-field .ck-merge-field__affix:first-child {
+		padding-left: 0.15em;
+		padding-right: 0.18em;
+	}
+
+.ck pre code .ck-merge-field .ck-merge-field__affix: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);
 }
@@ -106,22 +179,10 @@
 		background-color: var(--ck-color-merge-fields-form-error-background);
 	}
 
-/* 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;
+/* 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;
 }
-.ck pre code .ck-merge-field .ck-merge-field__affix:first-child {
-		padding-left: 0.15em;
-		padding-right: 0.18em;
-	}
-.ck pre code .ck-merge-field .ck-merge-field__affix:last-child {
-		padding-left: 0.18em;
-		padding-right: 0.15em;
-	}
-/* stylelint-enable no-descending-specificity */
 
 /*
  * What you're currently looking at is the source code of a legally protected, proprietary software.