@ckeditor/ckeditor5-merge-fields 0.0.0-nightly-20240826.0 → 0.0.0-nightly-20240828.0

package/dist/index-editor.css

@@ -15,53 +15,105 @@
 	--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){
+.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);
+	}
+.ck .ck-merge-field:hover{
+		transition:none;
+		cursor:default;
+	}
+.ck .ck-merge-field:not( .ck-merge-field-block *){
+		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;
@@ -69,17 +121,32 @@
 		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;
+	}
+
 .ck .ck-merge-fields-form{
 	padding:var(--ck-spacing-medium);
 }
@@ -96,20 +163,9 @@
 		color:var(--ck-color-base-text);
 		background-color:var(--ck-color-merge-fields-form-error-background);
 	}
-.ck pre code .ck-merge-field .ck-merge-field__affix{
-	font-family:inherit;
-	position:relative;
-	top:0;
-	font-size:inherit;
+.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;
-	}
 
 :root{
 	--ck-insert-merge-field-dropdown-view-width:250px;

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.