Kaynağa Gözat

Selecting all content when selection is placed directly on widget.

Szymon Kupś 8 yıl önce
ebeveyn
işleme
8bf1bdcfc1

+ 47 - 14
packages/ckeditor5-widget/src/widget.js

@@ -44,28 +44,32 @@ export default class Widget extends Plugin {
 	init() {
 		const viewDocument = this.editor.editing.view;
 
-		let previouslySelected;
+		this._previouslySelected = new Set();
 
 		// Model to view selection converter.
 		// Converts selection placed over widget element to fake selection
 		this.editor.editing.modelToView.on( 'selection', ( evt, data, consumable, conversionApi ) => {
-			// Remove selected class from previously selected widget.
-			if ( previouslySelected && previouslySelected.hasClass( WIDGET_SELECTED_CLASS_NAME ) ) {
-				previouslySelected.removeClass( WIDGET_SELECTED_CLASS_NAME );
-			}
+			// Remove selected class from previously selected widgets.
+			this._clearPreviouslySelected();
 
 			const viewSelection = conversionApi.viewSelection;
-
-			// Check if widget was clicked or some sub-element.
 			const selectedElement = viewSelection.getSelectedElement();
 
-			if ( !selectedElement || !isWidget( selectedElement ) ) {
-				return;
-			}
+			for ( const range of viewSelection.getRanges() ) {
+				for ( const value of range ) {
+					const node = value.item;
+
+					if ( node.is( 'element' ) && isWidget( node ) ) {
+						node.addClass( WIDGET_SELECTED_CLASS_NAME );
+						this._previouslySelected.add( node );
 
-			viewSelection.setFake( true, { label: getLabel( selectedElement ) } );
-			selectedElement.addClass( WIDGET_SELECTED_CLASS_NAME );
-			previouslySelected = selectedElement;
+						// Check if widget was single element selected.
+						if ( node == selectedElement ) {
+							viewSelection.setFake( true, { label: getLabel( selectedElement ) } );
+						}
+					}
+				}
+			}
 		}, { priority: 'low' } );
 
 		// If mouse down is pressed on widget - create selection over whole widget.
@@ -136,7 +140,8 @@ export default class Widget extends Plugin {
 		} else if ( isArrowKeyCode( keyCode ) ) {
 			wasHandled = this._handleArrowKeys( isForward );
 		} else if ( isSelectAllKeyCode( domEventData ) ) {
-			wasHandled = this._selectAllNestedEditableContent();
+			wasHandled = this._selectAllNestedEditableContent() ||
+				this._selectAllContent();
 		}
 
 		if ( wasHandled ) {
@@ -256,6 +261,26 @@ export default class Widget extends Plugin {
 		return true;
 	}
 
+	_selectAllContent() {
+		const modelDocument = this.editor.document;
+		const modelSelection = modelDocument.selection;
+		const viewDocument = this.editor.editing.view;
+		const viewSelection = viewDocument.selection;
+
+		const selectedElement = viewSelection.getSelectedElement();
+
+		// Only widget is selected.
+		if ( selectedElement && isWidget( selectedElement ) ) {
+			modelDocument.enqueueChanges( () => {
+				modelSelection.setRanges( [ ModelRange.createIn( modelDocument.getRoot() ) ] );
+			} );
+
+			return true;
+		}
+
+		return false;
+	}
+
 	/**
 	 * Sets {@link module:engine/model/selection~Selection document's selection} over given element.
 	 *
@@ -293,6 +318,14 @@ export default class Widget extends Plugin {
 
 		return null;
 	}
+
+	_clearPreviouslySelected() {
+		for ( const widget of this._previouslySelected ) {
+			widget.removeClass( WIDGET_SELECTED_CLASS_NAME );
+		}
+
+		this._previouslySelected.clear();
+	}
 }
 
 // Returns 'true' if provided key code represents one of the arrow keys.

+ 1 - 0
packages/ckeditor5-widget/theme/theme.scss

@@ -17,6 +17,7 @@ $widget-outline-thickness: 3px;
 .ck-widget {
 	margin: ck-spacing() 0;
 	padding: 0;
+	//user-select: none;
 
 	&.ck-widget_selected, &.ck-widget_selected:hover {
 		outline: $widget-outline-thickness solid ck-color( 'border-focus' );