Sfoglia il codice sorgente

Merge pull request #8322 from ckeditor/i/8321

Internal: Added a label and an outline to the HTML embed widget to improve contrast and set the minimal width to fix the problem when an embed is displayed in tight places like e.g. tables. Closes #8321. Closes #8331.
Piotrek Koszuliński 5 anni fa
parent
commit
5ff8ebd0d6

+ 2 - 1
packages/ckeditor5-html-embed/src/htmlembedediting.js

@@ -132,7 +132,8 @@ export default class HtmlEmbedEditing extends Plugin {
 				let domContentWrapper, state, props;
 
 				const viewContainer = writer.createContainerElement( 'div', {
-					class: 'raw-html-embed'
+					class: 'raw-html-embed',
+					'data-html-embed-label': t( 'HTML snippet' )
 				} );
 				// Widget cannot be a raw element because the widget system would not be able
 				// to add its UI to it. Thus, we need this wrapper.

+ 7 - 0
packages/ckeditor5-html-embed/tests/htmlembedediting.js

@@ -242,6 +242,13 @@ describe( 'HtmlEmbedEditing', () => {
 				expect( contentWrapper.hasClass( 'raw-html-embed__content-wrapper' ) );
 			} );
 
+			it( 'the widget should have the data-html-embed-label attribute for the CSS label', () => {
+				setModelData( model, '<rawHtml></rawHtml>' );
+				const widget = viewDocument.getRoot().getChild( 0 );
+
+				expect( widget.getAttribute( 'data-html-embed-label' ) ).to.equal( 'HTML snippet' );
+			} );
+
 			it( 'the main element should expose rawHtmlApi custom property', () => {
 				setModelData( model, '<rawHtml></rawHtml>' );
 				const widget = viewDocument.getRoot().getChild( 0 );

+ 15 - 0
packages/ckeditor5-html-embed/theme/htmlembed.css

@@ -10,6 +10,17 @@
 	position: relative;
 	clear: both;
 
+	/* ----- Emebed label in the upper left corner ----------------------------------------------- */
+
+	&::before {
+		position: absolute;
+
+		/* Make sure the content does not cover the label. */
+		z-index: 1;
+	}
+
+	/* ----- Emebed internals --------------------------------------------------------------------- */
+
 	/* The switch mode button wrapper. */
 	& .raw-html-embed__buttons-wrapper {
 		position: absolute;
@@ -21,4 +32,8 @@
 .ck-content .raw-html-embed {
 	/* Give the embed some air. */
 	margin: 1em auto;
+
+	/* Give the html embed some minimal width in the content to prevent them
+	from being "squashed" in tight spaces, e.g. in table cells (https://github.com/ckeditor/ckeditor5/issues/8331) */
+	min-width: 15em;
 }

+ 42 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-html-embed/htmlembed.css

@@ -6,6 +6,7 @@
 :root {
 	--ck-html-embed-content-width: calc(100% - 1.5 * var(--ck-icon-size));
 	--ck-html-embed-source-height: 10em;
+	--ck-html-embed-unfocused-outline-width: 1px;
 	--ck-html-embed-content-min-height: calc(var(--ck-icon-size) + var(--ck-spacing-standard));
 }
 
@@ -14,6 +15,47 @@
 	font-size: var(--ck-font-size-base);
 	background-color: var(--ck-color-base-foreground);
 
+	&:not(.ck-widget_selected):not(:hover) {
+		outline: var(--ck-html-embed-unfocused-outline-width) dashed var(--ck-color-widget-blurred-border);
+	}
+
+	& .ck-widget__type-around .ck-widget__type-around__button.ck-widget__type-around__button_before {
+		margin-left: 50px;
+	}
+
+	/* ----- Emebed label in the upper left corner ----------------------------------------------- */
+
+	&::before {
+		content: attr(data-html-embed-label);
+		top: calc(-1 * var(--ck-html-embed-unfocused-outline-width));
+		left: var(--ck-spacing-standard);
+		background: hsl(0deg 0% 60%);
+		transition: background var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
+		padding: calc(var(--ck-spacing-tiny) + var(--ck-html-embed-unfocused-outline-width)) var(--ck-spacing-small) var(--ck-spacing-tiny);
+		border-radius: 0 0 var(--ck-border-radius) var(--ck-border-radius);
+		color: var(--ck-color-base-background);
+		font-size: var(--ck-font-size-tiny);
+		font-family: var(--ck-font-face);
+	}
+
+	@nest .ck.ck-editor__editable.ck-blurred &.ck-widget_selected::before {
+		top: 0px;
+		padding: var(--ck-spacing-tiny) var(--ck-spacing-small);
+	}
+
+	@nest .ck.ck-editor__editable:not(.ck-blurred) &.ck-widget_selected::before {
+		top: 0;
+		padding: var(--ck-spacing-tiny) var(--ck-spacing-small);
+		background: var(--ck-color-focus-border);
+	}
+
+	@nest .ck.ck-editor__editable &:not(.ck-widget_selected):hover::before {
+		top: 0px;
+		padding: var(--ck-spacing-tiny) var(--ck-spacing-small);
+	}
+
+	/* ----- Emebed internals --------------------------------------------------------------------- */
+
 	& .raw-html-embed__content-wrapper {
 		padding: var(--ck-spacing-standard);
 	}