Explorar el Código

Added support for nested editables when clicking on widget.

Szymon Kupś hace 9 años
padre
commit
5bfdff9d8f

+ 12 - 3
packages/ckeditor5-image/src/widget/widget.js

@@ -13,6 +13,7 @@ import MouseObserver from '@ckeditor/ckeditor5-engine/src/view/observer/mouseobs
 import ModelRange from '@ckeditor/ckeditor5-engine/src/model/range';
 import ModelSelection from '@ckeditor/ckeditor5-engine/src/model/selection';
 import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
+import ViewEditableElement from '@ckeditor/ckeditor5-engine/src/view/editableelement';
 import { isWidget } from './utils';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 
@@ -38,7 +39,7 @@ export default class Widget extends Plugin {
 
 		// If mouse down is pressed on widget - create selection over whole widget.
 		viewDocument.addObserver( MouseObserver );
-		// this.listenTo( viewDocument, 'mousedown', ( ...args ) => this._onMousedown( ...args ) );
+		this.listenTo( viewDocument, 'mousedown', ( ...args ) => this._onMousedown( ...args ) );
 
 		// Handle custom keydown behaviour.
 		this.listenTo( viewDocument, 'keydown', ( ...args ) => this._onKeydown( ...args ), { priority: 'high' } );
@@ -52,13 +53,21 @@ export default class Widget extends Plugin {
 	 * @param {module:engine/view/observer/domeventdata~DomEventData} domEventData
 	 */
 	_onMousedown( eventInfo, domEventData ) {
-		let widgetElement = domEventData.target;
 		const editor = this.editor;
 		const viewDocument = editor.editing.view;
 
+		// Do nothing if inside nested editable.
+		if ( domEventData.target instanceof ViewEditableElement ) {
+			return;
+		}
+
 		// If target is not a widget element - check if one of the ancestors is.
+		let widgetElement = domEventData.target;
+
 		if ( !isWidget( widgetElement ) ) {
-			widgetElement = widgetElement.findAncestor( element => isWidget( element ) );
+			widgetElement = widgetElement.findAncestor( element => {
+				return isWidget( element );
+			} );
 
 			if ( !widgetElement ) {
 				return;

+ 17 - 0
packages/ckeditor5-image/src/widget/widgetengine.js

@@ -34,6 +34,23 @@ export default class WidgetEngine extends Plugin {
 			}
 
 			const viewSelection = conversionApi.viewSelection;
+
+			// If selection is placed inside some nested editable check if it is placed inside widget element.
+			// If yes - add CSS class to that widget element.
+			const editableElement = viewSelection.editableElement;
+
+			if ( editableElement ) {
+				const widget = editableElement.findAncestor( element => isWidget( element ) );
+
+				if ( widget ) {
+					widget.addClass( WIDGET_SELECTED_CLASS_NAME );
+					previouslySelected = widget;
+
+					return;
+				}
+			}
+
+			// Check if widget was clicked or some sub-element.
 			const selectedElement = viewSelection.getSelectedElement();
 
 			if ( !selectedElement || !isWidget( selectedElement ) ) {