@ckeditor/ckeditor5-merge-fields 43.1.0-alpha.1 → 43.1.0-alpha.3

package/dist/index-editor.css

@@ -12,108 +12,115 @@
 	--ck-color-merge-fields-value-outline:hsl(0, 0%, 57%);
 	--ck-color-merge-fields-with-warning-outline:hsl(15, 80%, 59%);
 
+	--ck-color-merge-fields-block-outline:hsl(0, 0%, 87%);
+	--ck-color-merge-fields-block-background:hsl(0, 0%, 98%);
+
 	--ck-color-merge-fields-affix-color:hsl(218, 82%, 57%);
 }
-
 .ck .ck-merge-field-block{
-	display:flex;
 	margin:0.9em auto;
-	align-items:center;
-	justify-content:center;
 }
-
 .ck .ck-merge-field-block:hover{
 		transition:none;
 		cursor:default;
 	}
-
-.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{
+.ck .ck-merge-field-block:not(.ck-merge-field-block_with-warning):not(.ck-merge-field-block_with-value),
+	.ck .ck-merge-field-block.ck-merge-field-block_with-warning_no-default,
+	.ck .ck-merge-field-block.ck-merge-field-block_with-warning_missing-data{
+		display:flex;
+		align-items:center;
+		justify-content:center;
+	}
+.ck .ck-merge-field-block:not(.ck-merge-field-block_with-warning):not(.ck-merge-field-block_with-value):not(.ck-merge-field-block_with-warning_no-default):not(.ck-merge-field-block_with-warning_missing-data), .ck .ck-merge-field-block.ck-merge-field-block_with-warning_no-default:not(.ck-merge-field-block_with-warning_no-default):not(.ck-merge-field-block_with-warning_missing-data), .ck .ck-merge-field-block.ck-merge-field-block_with-warning_missing-data:not(.ck-merge-field-block_with-warning_no-default):not(.ck-merge-field-block_with-warning_missing-data){
+			background-color:var(--ck-color-merge-fields-block-background);
+		}
+.ck .ck-merge-field-block.ck-merge-field-block_with-warning .ck-merge-field, .ck .ck-merge-field-block.ck-merge-field-block_with-value .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{
+.ck .ck-merge-field-block.ck-merge-field-block_with-warning::before, .ck .ck-merge-field-block.ck-merge-field-block_with-value::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);
+			background-color:hsl(0, 0%, 100%);
 		}
-
-.ck .ck-merge-field-block:not(:hover):not(.ck-widget_selected){
-		outline:1px solid var(--ck-color-merge-fields-outline);
-	}
-
-.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-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-block.ck-widget.ck-widget_selected.ck-widget_type-around_show-fake-caret_before,
+.ck .ck-merge-field-block.ck-merge-field-block_with-warning:not(.ck-merge-field-block_with-value)::before, .ck .ck-merge-field-block.ck-merge-field-block_with-value:not(.ck-merge-field-block_with-value)::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-block.ck-merge-field-block_with-warning:not(.ck-merge-field-block_with-warning)::before, .ck .ck-merge-field-block.ck-merge-field-block_with-value:not(.ck-merge-field-block_with-warning)::before{
+				content:attr(data-merge-field-block-label);
+				outline:1px solid var(--ck-color-merge-fields-value-outline);
+			}
+.ck .ck-merge-field-block: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 .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);
+		outline:1px solid var(--ck-color-merge-fields-block-outline);
 	}
-
-.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);
 	}
+
+.ck .ck-merge-field{
+	border-radius:2px;
+}
+
 .ck .ck-merge-field:hover{
 		transition:none;
 		cursor:default;
 	}
-.ck .ck-merge-field:not( .ck-merge-field-block *){
+
+.ck .ck-merge-field:not(.ck-merge-field_with-warning):not(.ck-merge-field_with-value){
 		padding-top:var(--ck-merge-fields-paddings-vertical);
 		padding-bottom:var(--ck-merge-fields-paddings-vertical);
+	}
+
+.ck .ck-merge-field:not(.ck-merge-field_with-warning):not(.ck-merge-field_with-value):not(:hover):not(.ck-widget_selected){
+			outline:1px solid var(--ck-color-merge-fields-outline);
+			line-height:1.1em;
+		}
+
+.ck .ck-merge-field:not(.ck-merge-field-block *){
 		-webkit-user-select:none;
 		white-space:nowrap;
-		outline-offset:0;
 		margin:0 1px 0 2px;
 		line-height:0;
-		border-radius:2px;
+		padding-top:var(--ck-merge-fields-paddings-vertical);
+		padding-bottom:var(--ck-merge-fields-paddings-vertical);
 	}
-.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 *){
+
+.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){
+
+.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 *){
+
+.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){
+
+.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;
@@ -121,10 +128,12 @@
 		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;

package/dist/index.css

@@ -21,113 +21,122 @@
 	--ck-color-merge-fields-value-outline: hsl(0, 0%, 57%);
 	--ck-color-merge-fields-with-warning-outline: hsl(15, 80%, 59%);
 
+	--ck-color-merge-fields-block-outline: hsl(0, 0%, 87%);
+	--ck-color-merge-fields-block-background: hsl(0, 0%, 98%);
+
 	--ck-color-merge-fields-affix-color: hsl(218, 82%, 57%);
 }
 
+/* stylelint-disable no-descending-specificity */
 .ck .ck-merge-field-block {
-	display: flex;
 	margin: 0.9em auto;
-	align-items: center;
-	justify-content: center;
 }
-
 .ck .ck-merge-field-block:hover {
 		transition: none;
 		cursor: default;
 	}
-
-/* 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 {
+/* When there is no actual data in the block, center the content (label or warning).
+	In other cases, the integrator has to style the content as they wish. */
+.ck .ck-merge-field-block:not(.ck-merge-field-block_with-warning):not(.ck-merge-field-block_with-value),
+	.ck .ck-merge-field-block.ck-merge-field-block_with-warning_no-default,
+	.ck .ck-merge-field-block.ck-merge-field-block_with-warning_missing-data {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+.ck .ck-merge-field-block:not(.ck-merge-field-block_with-warning):not(.ck-merge-field-block_with-value):not(.ck-merge-field-block_with-warning_no-default):not(.ck-merge-field-block_with-warning_missing-data), .ck .ck-merge-field-block.ck-merge-field-block_with-warning_no-default:not(.ck-merge-field-block_with-warning_no-default):not(.ck-merge-field-block_with-warning_missing-data), .ck .ck-merge-field-block.ck-merge-field-block_with-warning_missing-data:not(.ck-merge-field-block_with-warning_no-default):not(.ck-merge-field-block_with-warning_missing-data) {
+			background-color: var(--ck-color-merge-fields-block-background);
+		}
+/* Make sure the content in the block does not overflow. */
+.ck .ck-merge-field-block.ck-merge-field-block_with-warning .ck-merge-field, .ck .ck-merge-field-block.ck-merge-field-block_with-value .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 {
+/* Style the merge field label displayed in the corner. */
+.ck .ck-merge-field-block.ck-merge-field-block_with-warning::before, .ck .ck-merge-field-block.ck-merge-field-block_with-value::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);
+			background-color: hsl(0, 0%, 100%);
 		}
-
-.ck .ck-merge-field-block:not(:hover):not(.ck-widget_selected) {
-		outline: 1px solid var(--ck-color-merge-fields-outline);
-	}
-
-.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-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-block.ck-widget.ck-widget_selected.ck-widget_type-around_show-fake-caret_before,
+.ck .ck-merge-field-block.ck-merge-field-block_with-warning:not(.ck-merge-field-block_with-value)::before, .ck .ck-merge-field-block.ck-merge-field-block_with-value:not(.ck-merge-field-block_with-value)::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-block.ck-merge-field-block_with-warning:not(.ck-merge-field-block_with-warning)::before, .ck .ck-merge-field-block.ck-merge-field-block_with-value:not(.ck-merge-field-block_with-warning)::before {
+				content: attr(data-merge-field-block-label);
+				outline: 1px solid var(--ck-color-merge-fields-value-outline);
+			}
+.ck .ck-merge-field-block: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 .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);
+		outline: 1px solid var(--ck-color-merge-fields-block-outline);
 	}
-
-.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 {
+	border-radius: 2px;
+}
+
 .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. */
+
+.ck .ck-merge-field:not(.ck-merge-field_with-warning):not(.ck-merge-field_with-value) {
 		padding-top: var(--ck-merge-fields-paddings-vertical);
 		padding-bottom: var(--ck-merge-fields-paddings-vertical);
+	}
+
+.ck .ck-merge-field:not(.ck-merge-field_with-warning):not(.ck-merge-field_with-value):not(:hover):not(.ck-widget_selected) {
+			outline: 1px solid var(--ck-color-merge-fields-outline);
+			line-height: 1.1em;
+		}
+
+.ck .ck-merge-field:not(.ck-merge-field-block *) {
+		/* Styles for textual (inline) merge fields only. */
 		-webkit-user-select: none;
 		white-space: nowrap;
-		outline-offset: 0;
 		margin: 0 1px 0 2px;
 		line-height: 0;
-		border-radius: 2px;
+		padding-top: var(--ck-merge-fields-paddings-vertical);
+		padding-bottom: var(--ck-merge-fields-paddings-vertical);
 	}
-.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 * ) {
+
+.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) {
+
+.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 * ) {
+
+.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) {
+
+.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;
@@ -135,10 +144,12 @@
 		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;
@@ -160,7 +171,6 @@
 		padding-left: 0.18em;
 		padding-right: 0.15em;
 	}
-/* stylelint-enable no-descending-specificity */
 
 .ck .ck-merge-fields-form {
 	padding: var(--ck-spacing-medium);
@@ -183,6 +193,7 @@
 .ck-editor__editable:not(.ck-read-only) .ck-widget.ck-merge-field-block .ck-merge-field {
 	pointer-events: none;
 }
+/* stylelint-enable no-descending-specificity */
 
 /*
  * What you're currently looking at is the source code of a legally protected, proprietary software.