瀏覽代碼

Allow widget nested in editable element to be selectable.

Maciej Gołaszewski 7 年之前
父節點
當前提交
3495be64f4
共有 2 個文件被更改,包括 33 次插入2 次删除
  1. 7 2
      packages/ckeditor5-widget/src/widget.js
  2. 26 0
      packages/ckeditor5-widget/tests/widget.js

+ 7 - 2
packages/ckeditor5-widget/src/widget.js

@@ -9,8 +9,8 @@
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import MouseObserver from '@ckeditor/ckeditor5-engine/src/view/observer/mouseobserver';
-import { isWidget, WIDGET_SELECTED_CLASS_NAME, getLabel } from './utils';
-import { keyCodes, getCode, parseKeystroke } from '@ckeditor/ckeditor5-utils/src/keyboard';
+import { getLabel, isWidget, WIDGET_SELECTED_CLASS_NAME } from './utils';
+import { getCode, keyCodes, parseKeystroke } from '@ckeditor/ckeditor5-utils/src/keyboard';
 
 import '../theme/widget.css';
 
@@ -419,6 +419,11 @@ function isInsideNestedEditable( element ) {
 			return true;
 		}
 
+		// Click on nested widget should select it.
+		if ( isWidget( element ) ) {
+			return false;
+		}
+
 		element = element.parent;
 	}
 

+ 26 - 0
packages/ckeditor5-widget/tests/widget.js

@@ -1349,5 +1349,31 @@ describe( 'Widget', () => {
 				'</div>'
 			);
 		} );
+
+		it( 'should select widget in editable', () => {
+			model.schema.extend( 'widget', { allowIn: 'nested' } );
+
+			setModelData( model, '[]<widget><nested><widget></widget></nested></widget>' );
+
+			const widgetInEditable = viewDocument.getRoot().getChild( 0 ).getChild( 0 ).getChild( 0 );
+
+			const domEventDataMock = {
+				target: widgetInEditable,
+				preventDefault: sinon.spy()
+			};
+
+			viewDocument.fire( 'mousedown', domEventDataMock );
+
+			expect( getViewData( view ) ).to.equal(
+				'<div class="ck-widget ck-widget_selectable" contenteditable="false">' +
+					'<figcaption contenteditable="true">' +
+						'[<div class="ck-widget ck-widget_selectable ck-widget_selected" contenteditable="false">' +
+							'<div class="ck ck-widget__selection-handler"></div>' +
+						'</div>]' +
+					'</figcaption>' +
+					'<div class="ck ck-widget__selection-handler"></div>' +
+				'</div>'
+			);
+		} );
 	} );
 } );