Merge pull request #159 from ckeditor/t/ckeditor5-widget/60

Other:  Aligned to the new `WidgetToolbarRepository` API. Replaced the `isTableWidgetSelected()` utility with `getSelectedTableWidget()`. Replaced `isTableContentSelected()` with `getTableWidgetAncestor()` (see ckeditor/ckeditor5-widget#60).

BREAKING CHANGE: The `isTableWidgetSelected()` utility has been replaced by `getSelectedTableWidget()` and returns an editing `View` element instead of `Boolean`.

BREAKING CHANGE: The `isTableContentSelected()` utility has been replaced by `getTableWidgetAncestor()` and returns an editing `View` element instead of `Boolean`.

Author: jodator

src/tabletoolbar.js

@@ -8,7 +8,7 @@
  */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import { isTableContentSelected, isTableWidgetSelected } from './utils';
+import { getSelectedTableWidget, getTableWidgetAncestor } from './utils';
 import WidgetToolbarRepository from '@ckeditor/ckeditor5-widget/src/widgettoolbarrepository';
 
 /**
@@ -63,14 +63,14 @@ export default class TableToolbar extends Plugin {
 		if ( tableContentToolbarItems || deprecatedTableContentToolbarItems ) {
 			widgetToolbarRepository.register( 'tableContent', {
 				items: tableContentToolbarItems || deprecatedTableContentToolbarItems,
-				visibleWhen: isTableContentSelected,
+				getRelatedElement: getTableWidgetAncestor
 			} );
 		}
 
 		if ( tableToolbarItems ) {
 			widgetToolbarRepository.register( 'table', {
 				items: tableToolbarItems,
-				visibleWhen: isTableWidgetSelected,
+				getRelatedElement: getSelectedTableWidget
 			} );
 		}
 	}

src/utils.js

@@ -39,28 +39,33 @@ export function isTableWidget( viewElement ) {
 }
 
 /**
- * Checks if a table widget is the only selected element.
+ * Returns a table widget editing view element if one is selected.
  *
  * @param {module:engine/view/selection~Selection|module:engine/view/documentselection~DocumentSelection} selection
- * @returns {Boolean}
+ * @returns {module:engine/view/element~Element|null}
  */
-export function isTableWidgetSelected( selection ) {
+export function getSelectedTableWidget( selection ) {
 	const viewElement = selection.getSelectedElement();
 
-	return !!( viewElement && isTableWidget( viewElement ) );
+	if ( viewElement && isTableWidget( viewElement ) ) {
+		return viewElement;
+	}
+
+	return null;
 }
 
 /**
- * Checks if a table widget content is selected.
+ * Returns a table widget editing view element if one is among selection's ancestors.
  *
  * @param {module:engine/view/selection~Selection|module:engine/view/documentselection~DocumentSelection} selection
- * @returns {Boolean}
+ * @returns {module:engine/view/element~Element|null}
  */
-export function isTableContentSelected( selection ) {
-	const selectedElement = selection.getSelectedElement();
-	const isInnerWidgetSelected = selectedElement && isWidget( selectedElement );
-
+export function getTableWidgetAncestor( selection ) {
 	const parentTable = findAncestor( 'table', selection.getFirstPosition() );
 
-	return !isInnerWidgetSelected && !!( parentTable && isTableWidget( parentTable.parent ) );
+	if ( parentTable && isTableWidget( parentTable.parent ) ) {
+		return parentTable.parent;
+	}
+
+	return null;
 }

tests/tabletoolbar.js

@@ -45,7 +45,7 @@ describe( 'TableToolbar', () => {
 					model = newEditor.model;
 					doc = model.document;
 					widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository );
-					toolbar = widgetToolbarRepository._toolbars.get( 'tableContent' ).view;
+					toolbar = widgetToolbarRepository._toolbarDefinitions.get( 'tableContent' ).view;
 					balloon = editor.plugins.get( 'ContextualBalloon' );
 				} );
 		} );
@@ -69,7 +69,7 @@ describe( 'TableToolbar', () => {
 			} )
 				.then( editor => {
 					const widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository );
-					expect( widgetToolbarRepository._toolbars.get( 'tableContent' ) ).to.be.undefined;
+					expect( widgetToolbarRepository._toolbarDefinitions.get( 'tableContent' ) ).to.be.undefined;
 
 					editorElement.remove();
 					return editor.destroy();
@@ -169,7 +169,7 @@ describe( 'TableToolbar', () => {
 
 				expect( balloon.visibleView ).to.be.null;
 
-				const imageToolbar = widgetToolbarRepository._toolbars.get( 'image' ).view;
+				const imageToolbar = widgetToolbarRepository._toolbarDefinitions.get( 'image' ).view;
 
 				model.change( writer => {
 					// Select the <tableCell><paragraph></paragraph>[<image></image>]</tableCell>
@@ -257,7 +257,7 @@ describe( 'TableToolbar', () => {
 					editor = newEditor;
 
 					const widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository );
-					const toolbarView = widgetToolbarRepository._toolbars.get( 'tableContent' ).view;
+					const toolbarView = widgetToolbarRepository._toolbarDefinitions.get( 'tableContent' ).view;
 
 					expect( toolbarView.items ).to.have.length( 1 );
 					expect( toolbarView.items.get( 0 ).label ).to.equal( 'fake button' );
@@ -287,7 +287,7 @@ describe( 'TableToolbar', () => {
 					editor = newEditor;
 
 					const widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository );
-					const toolbarView = widgetToolbarRepository._toolbars.get( 'tableContent' ).view;
+					const toolbarView = widgetToolbarRepository._toolbarDefinitions.get( 'tableContent' ).view;
 
 					expect( toolbarView.items ).to.have.length( 1 );
 					expect( toolbarView.items.get( 0 ).label ).to.equal( 'foo button' );
@@ -316,7 +316,7 @@ describe( 'TableToolbar', () => {
 			} ).then( _editor => {
 				editor = _editor;
 				widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository );
-				toolbar = widgetToolbarRepository._toolbars.get( 'table' ).view;
+				toolbar = widgetToolbarRepository._toolbarDefinitions.get( 'table' ).view;
 				balloon = editor.plugins.get( 'ContextualBalloon' );
 				model = editor.model;
 			} );
@@ -337,7 +337,7 @@ describe( 'TableToolbar', () => {
 				} )
 					.then( editor => {
 						const widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository );
-						expect( widgetToolbarRepository._toolbars.get( 'table' ) ).to.be.undefined;
+						expect( widgetToolbarRepository._toolbarDefinitions.get( 'table' ) ).to.be.undefined;
 
 						editorElement.remove();
 						return editor.destroy();