Merge pull request #79 from ckeditor/t/ckeditor5-widget/40

Feature: Implemented and enabled the table selection handler (see ckeditor/ckeditor5-widget#40).

Author: oleq

src/converters/downcast.js

@@ -95,7 +95,7 @@ export function downcastInsertRow( options = {} ) {
 		const table = tableRow.parent;
 
 		const figureElement = conversionApi.mapper.toViewElement( table );
-		const tableElement = figureElement.getChild( 0 );
+		const tableElement = getViewTable( figureElement );
 
 		const row = table.getChildIndex( tableRow );
 
@@ -184,7 +184,7 @@ export function downcastTableHeadingRowsChange( options = {} ) {
 		}
 
 		const figureElement = conversionApi.mapper.toViewElement( table );
-		const viewTable = figureElement.getChild( 0 );
+		const viewTable = getViewTable( figureElement );
 
 		const oldRows = data.attributeOldValue;
 		const newRows = data.attributeNewValue;
@@ -497,3 +497,14 @@ function moveViewRowsToTableSection( rowsToMove, viewTableSection, conversionApi
 		conversionApi.writer.move( ViewRange.createOn( viewTableRow ), ViewPosition.createAt( viewTableSection, offset ) );
 	}
 }
+
+// Properly finds '<table>' element inside `<figure>` widget.
+//
+// @param {module:engine/view/element~Element} viewFigure
+function getViewTable( viewFigure ) {
+	for ( const child of viewFigure.getChildren() ) {
+		if ( child.name === 'table' ) {
+			return child;
+		}
+	}
+}

src/utils.js

@@ -25,7 +25,7 @@ const tableSymbol = Symbol( 'isTable' );
 export function toTableWidget( viewElement, writer ) {
 	writer.setCustomProperty( tableSymbol, true, viewElement );
 
-	return toWidget( viewElement, writer );
+	return toWidget( viewElement, writer, { hasSelectionHandler: true } );
 }
 
 /**

tests/converters/downcast.js

@@ -274,7 +274,8 @@ describe( 'downcast converters', () => {
 				setModelData( model, modelTable( [ [ '' ] ] ) );
 
 				expect( formatTable( getViewData( viewDocument, { withoutSelection: true } ) ) ).to.equal( formatTable(
-					'<figure class="ck-widget table" contenteditable="false">' +
+					'<figure class="ck-widget ck-widget_selectable table" contenteditable="false">' +
+					'<div class="ck ck-widget__selection-handler"></div>' +
 						'<table>' +
 							'<tbody>' +
 								'<tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"></td></tr>' +
@@ -525,7 +526,8 @@ describe( 'downcast converters', () => {
 				} );
 
 				expect( formatTable( getViewData( viewDocument, { withoutSelection: true } ) ) ).to.equal( formatTable(
-					'<figure class="ck-widget table" contenteditable="false">' +
+					'<figure class="ck-widget ck-widget_selectable table" contenteditable="false">' +
+						'<div class="ck ck-widget__selection-handler"></div>' +
 						'<table>' +
 							'<tbody>' +
 								'<tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">00</td></tr>' +
@@ -686,7 +688,8 @@ describe( 'downcast converters', () => {
 				} );
 
 				expect( formatTable( getViewData( viewDocument, { withoutSelection: true } ) ) ).to.equal( formatTable(
-					'<figure class="ck-widget table" contenteditable="false">' +
+					'<figure class="ck-widget ck-widget_selectable table" contenteditable="false">' +
+					'<div class="ck ck-widget__selection-handler"></div>' +
 						'<table>' +
 							'<tbody>' +
 								'<tr>' +
@@ -885,7 +888,8 @@ describe( 'downcast converters', () => {
 				} );
 
 				expect( formatTable( getViewData( viewDocument, { withoutSelection: true } ) ) ).to.equal( formatTable(
-					'<figure class="ck-widget table" contenteditable="false">' +
+					'<figure class="ck-widget ck-widget_selectable table" contenteditable="false">' +
+					'<div class="ck ck-widget__selection-handler"></div>' +
 						'<table>' +
 							'<thead>' +
 								'<tr><th class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">00</th></tr>' +
@@ -1092,7 +1096,8 @@ describe( 'downcast converters', () => {
 				} );
 
 				expect( formatTable( getViewData( viewDocument, { withoutSelection: true } ) ) ).to.equal( formatTable(
-					'<figure class="ck-widget table" contenteditable="false">' +
+					'<figure class="ck-widget ck-widget_selectable table" contenteditable="false">' +
+					'<div class="ck ck-widget__selection-handler"></div>' +
 						'<table>' +
 							'<tbody>' +
 								'<tr><th class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">00</th></tr>' +