Merge pull request #9457 from ckeditor/i/9453

Fix (widget): Hide selection handle in the nested widget, if the outer widget is hovered or selected. Closes #9453.

packages/ckeditor5-table/tests/manual/table.md

@@ -75,3 +75,5 @@ Nested tables:
 4. Verify that it is possible to copy & paste nested table inside other table cell.
   * Copying & pasting a table only (in the clipboard there is only a table with no siblings) should merge content of this table with the nearest ancestor table. In other words: pasted table is not inserted as a table (as a widget) in table cell, but it is merged with the first found table ancestor.
   * Copying & pasting a table with any sibling (e.g. a paragraph) should paste exactly what has been copied.
+5. Hover the outer table with the mouse cursor. Verify that the yellow border and selection handle on the inner table is not visible (they should be visible only for the hovered table).
+6. Select the outer table. Verify that the blue selection handle on the inner table is not visible (it should be visible only for the selected table).

packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css

@@ -94,16 +94,16 @@
 		}
 	}
 
-	/* Show the selection handler on mouse hover over the widget. */
-	&:hover .ck-widget__selection-handle {
+	/* Show the selection handler on mouse hover over the widget, but not for nested widgets. */
+	&:hover > .ck-widget__selection-handle {
 		opacity: 1;
 		background-color: var(--ck-color-widget-hover-border);
 	}
 
-	/* Show the selection handler when the widget is selected. */
+	/* Show the selection handler when the widget is selected, but not for nested widgets. */
 	&.ck-widget_selected,
 	&.ck-widget_selected:hover {
-		& .ck-widget__selection-handle {
+		& > .ck-widget__selection-handle {
 			opacity: 1;
 			background-color: var(--ck-color-focus-border);
 
@@ -153,8 +153,8 @@
 		outline-color: var(--ck-color-widget-blurred-border);
 
 		&.ck-widget_with-selection-handle {
-			& .ck-widget__selection-handle,
-			& .ck-widget__selection-handle:hover {
+			& > .ck-widget__selection-handle,
+			& > .ck-widget__selection-handle:hover {
 				background: var(--ck-color-widget-blurred-border);
 			}
 		}

packages/ckeditor5-widget/tests/widget.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* global document */
+/* global document, window */
 
 import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
 import Enter from '@ckeditor/ckeditor5-enter/src/enter';
@@ -1538,5 +1538,30 @@ describe( 'Widget', () => {
 				'</div>'
 			);
 		} );
+
+		it( 'should show the selection handle only for selected widget if widgets are nested', () => {
+			setModelData( model, '<widget><widget></widget><widget></widget></widget>' );
+
+			// The top-outer widget.
+			const viewWidgetSelectionHandle = viewDocument.getRoot().getChild( 0 );
+
+			const target = view.domConverter.mapViewToDom( viewWidgetSelectionHandle );
+
+			const domEventDataMock = new DomEventData( view, {
+				target,
+				preventDefault: sinon.spy()
+			} );
+
+			viewDocument.fire( 'mousedown', domEventDataMock );
+
+			// Get all selection handles for all widgets nested inside the top-most one.
+			const selectionHandles = target.querySelectorAll( ':scope .ck-widget .ck-widget__selection-handle' );
+
+			for ( const selectionHandle of selectionHandles ) {
+				const opacity = window.getComputedStyle( selectionHandle ).getPropertyValue( 'opacity' );
+
+				expect( opacity ).to.equal( '0' );
+			}
+		} );
 	} );
 } );

packages/ckeditor5-widget/theme/widget.css

@@ -31,15 +31,13 @@
 		}
 	}
 
-	/* Show the selection handle on mouse hover over the widget. */
-	&:hover {
-		& .ck-widget__selection-handle {
-			visibility: visible;
-		}
+	/* Show the selection handle on mouse hover over the widget, but not for nested widgets. */
+	&:hover > .ck-widget__selection-handle {
+		visibility: visible;
 	}
 
-	/* Show the selection handle when the widget is selected. */
-	&.ck-widget_selected .ck-widget__selection-handle {
+	/* Show the selection handle when the widget is selected, but not for nested widgets. */
+	&.ck-widget_selected > .ck-widget__selection-handle {
 		visibility: visible;
 	}
 }