Browse Source

Updated widget tests for integration with nested editables.

Szymon Kupś 8 years ago
parent
commit
36408b619c

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

@@ -8,6 +8,7 @@
  */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import RootEditable from '@ckeditor/ckeditor5-engine/src/view/rooteditableelement';
 import { WIDGET_SELECTED_CLASS_NAME, isWidget } from './utils';
 
 /**
@@ -35,11 +36,10 @@ 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.
+			// Add CSS class if selection is placed inside nested editable that belongs to widget.
 			const editableElement = viewSelection.editableElement;
 
-			if ( editableElement ) {
+			if ( editableElement && !( editableElement instanceof RootEditable ) ) {
 				const widget = editableElement.findAncestor( element => isWidget( element ) );
 
 				if ( widget ) {

+ 23 - 0
packages/ckeditor5-image/tests/widget/widget.js

@@ -9,6 +9,7 @@ import MouseObserver from '@ckeditor/ckeditor5-engine/src/view/observer/mouseobs
 import buildModelConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildmodelconverter';
 import { widgetize } from '../../src/widget/utils';
 import ViewContainer from '@ckeditor/ckeditor5-engine/src/view/containerelement';
+import ViewEditable from '@ckeditor/ckeditor5-engine/src/view/editableelement';
 import DomEventData from '@ckeditor/ckeditor5-engine/src/view/observer/domeventdata';
 import AttributeContainer from '@ckeditor/ckeditor5-engine/src/view/attributeelement';
 import { setData as setModelData, getData as getModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
@@ -33,6 +34,9 @@ describe( 'Widget', () => {
 				doc.schema.registerItem( 'paragraph', '$block' );
 				doc.schema.registerItem( 'inline', '$inline' );
 				doc.schema.objects.add( 'inline' );
+				doc.schema.registerItem( 'nested' );
+				doc.schema.allow( { name: '$inline', inside: 'nested' } );
+				doc.schema.allow( { name: 'nested', inside: 'widget' } );
 
 				buildModelConverter().for( editor.editing.modelToView )
 					.fromElement( 'paragraph' )
@@ -50,6 +54,10 @@ describe( 'Widget', () => {
 				buildModelConverter().for( editor.editing.modelToView )
 					.fromElement( 'inline' )
 					.toElement( 'figure' );
+
+				buildModelConverter().for( editor.editing.modelToView )
+					.fromElement( 'nested' )
+					.toElement( () => new ViewEditable( 'figcaption', { contenteditable: true } ) );
 			} );
 	} );
 
@@ -90,6 +98,21 @@ describe( 'Widget', () => {
 		sinon.assert.calledOnce( domEventDataMock.preventDefault );
 	} );
 
+	it( 'should do nothing if clicked inside nested editable', () => {
+		setModelData( doc, '[]<widget><nested>foo bar</nested></widget>' );
+		const viewDiv = viewDocument.getRoot().getChild( 0 );
+		const viewFigcaption = viewDiv.getChild( 0 );
+
+		const domEventDataMock = {
+			target: viewFigcaption,
+			preventDefault: sinon.spy()
+		};
+
+		viewDocument.fire( 'mousedown', domEventDataMock );
+
+		sinon.assert.notCalled( domEventDataMock.preventDefault );
+	} );
+
 	it( 'should do nothing if clicked in non-widget element', () => {
 		setModelData( doc, '<paragraph>[]foo bar</paragraph><widget></widget>' );
 		const viewP = viewDocument.getRoot().getChild( 0 );

+ 30 - 0
packages/ckeditor5-image/tests/widget/widgetengine.js

@@ -9,6 +9,7 @@ import buildModelConverter from '@ckeditor/ckeditor5-engine/src/conversion/build
 import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
 import ViewContainer from '@ckeditor/ckeditor5-engine/src/view/containerelement';
+import ViewEditable from '@ckeditor/ckeditor5-engine/src/view/editableelement';
 import { widgetize } from '../../src/widget/utils';
 
 describe( 'WidgetEngine', () => {
@@ -23,10 +24,18 @@ describe( 'WidgetEngine', () => {
 				document = editor.document;
 				viewDocument = editor.editing.view;
 				document.schema.registerItem( 'widget', '$block' );
+				document.schema.registerItem( 'editable' );
+				document.schema.allow( { name: '$inline', inside: 'editable' } );
+				document.schema.allow( { name: 'editable', inside: 'widget' } );
+				document.schema.allow( { name: 'editable', inside: '$root' } );
 
 				buildModelConverter().for( editor.editing.modelToView )
 					.fromElement( 'widget' )
 					.toElement( () => widgetize( new ViewContainer( 'div' ) ) );
+
+				buildModelConverter().for( editor.editing.modelToView )
+					.fromElement( 'editable' )
+					.toElement( () => new ViewEditable( 'figcaption', { contenteditable: true } ) );
 			} );
 	} );
 
@@ -58,4 +67,25 @@ describe( 'WidgetEngine', () => {
 			'[]<div class="ck-widget" contenteditable="false">foo</div>'
 		);
 	} );
+
+	it( 'should add selected class if selection is placed inside nested editable', () => {
+		setModelData( document, '<widget><editable>[foo bar]</editable></widget>' );
+
+		expect( getViewData( viewDocument ) ).to.equal(
+			'<div class="ck-widget ck-widget_selected" contenteditable="false">' +
+				'<figcaption contenteditable="true">{foo bar}</figcaption>' +
+			'</div>'
+		);
+	} );
+
+	it( 'should do nothing when selection is placed in other editable', () => {
+		setModelData( document, '<widget><editable>foo bar</editable></widget><editable>[baz]</editable>' );
+
+		expect( getViewData( viewDocument ) ).to.equal(
+			'<div class="ck-widget" contenteditable="false">' +
+				'<figcaption contenteditable="true">foo bar</figcaption>' +
+			'</div>' +
+			'<figcaption contenteditable="true">{baz}</figcaption>'
+		);
+	} );
 } );