Ver Fonte

Other: Reviewed command and UI component names. Closes #58.

Piotrek Koszuliński há 7 anos atrás
pai
commit
a5cedf9ffd

+ 1 - 1
packages/ckeditor5-table/docs/_snippets/features/table.js

@@ -17,7 +17,7 @@ ClassicEditor
 			viewportTopOffset: 60
 		},
 		table: {
-			toolbar: [ 'tableColumn', 'tableRow', 'mergeCell' ]
+			toolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
 		}
 	} )
 	.then( editor => {

+ 22 - 22
packages/ckeditor5-table/docs/features/table.md

@@ -30,7 +30,7 @@ ClassicEditor
 		plugins: [ Table, TableToolbar, ... ],
 		toolbar: [ 'insertTable', ... ]
 		table: {
-			toolbar: [ 'tableColumn', 'tableRow', 'mergeCell' ]
+			toolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
 		}
 	} )
 	.then( ... )
@@ -48,7 +48,7 @@ The {@link module:table/table~Table} plugin registers the following UI component
 * The `'insertTable'` dropdown.
 * The `'tableColumn'` dropdown.
 * The `'tableRow'` dropdown.
-* The `'mergeCell'` dropdown.
+* The `'mergeTableCells'` dropdown.
 
 And the following commands:
 
@@ -60,89 +60,89 @@ And the following commands:
 	editor.execute( 'insertTable', { rows: 20, columns: 5 } );
 	```
 
-* The {@link module:table/commands/insertcolumncommand~InsertColumnCommand} in a form of `'insertColumnBefore'` and `'insertColumnAfter'` commands.
+* The {@link module:table/commands/insertcolumncommand~InsertColumnCommand} in a form of `'insertTableColumnBefore'` and `'insertTableColumnAfter'` commands.
 
 	To insert a column before the selected cell, execute the following command:
 
 	```js
-	editor.execute( 'insertColumnBefore' );
+	editor.execute( 'insertTableColumnBefore' );
 	```
 
 	To insert a column after the selected cell, execute the following command:
 
 	```js
-	editor.execute( 'insertColumnAfter' );
+	editor.execute( 'insertTableColumnAfter' );
 	```
 
-* The {@link module:table/commands/insertrowcommand~InsertRowCommand} in a form of `'insertRowAbove'` and `'insertRowBelow'` commands.
+* The {@link module:table/commands/insertrowcommand~InsertRowCommand} in a form of `'insertTableRowAbove'` and `'insertTableRowBelow'` commands.
 
 	To insert a row below the selected cell, execute the following command:
 
 	```js
-	editor.execute( 'insertRowBelow' );
+	editor.execute( 'insertTableRowBelow' );
 	```
 
 	To insert a row above the selected cell, execute the following command:
 
 	```js
-	editor.execute( 'insertRowAbove' );
+	editor.execute( 'insertTableRowAbove' );
 	```
 
-* The {@link module:table/commands/removecolumncommand~RemoveColumnCommand `'removeColumn'`} command.
+* The {@link module:table/commands/removecolumncommand~RemoveColumnCommand `'removeTableColumn'`} command.
 
 	To remove the column containing the selected cell, execute the command:
 
 	```js
-	editor.execute( 'removeColumn' );
+	editor.execute( 'removeTableColumn' );
 	```
 
-* The {@link module:table/commands/removerowcommand~RemoveRowCommand `'removeRow'`} command.
+* The {@link module:table/commands/removerowcommand~RemoveRowCommand `'removeTableRow'`} command.
 
 	To remove the row containing the selected cell, execute the command:
 
 	```js
-	editor.execute( 'removeRow' );
+	editor.execute( 'removeTableRow' );
 	```
 
-* The {@link module:table/commands/setheadercolumncommand~SetHeaderColumnCommand `'setColumnHeader'`} command.
+* The {@link module:table/commands/setheadercolumncommand~SetHeaderColumnCommand `'setTableColumnHeader'`} command.
 
 	You can make the column containing the selected cell a [header](https://www.w3.org/TR/html50/tabular-data.html#the-th-element) by executing:
 
 	```js
-	editor.execute( 'setColumnHeader' );
+	editor.execute( 'setTableColumnHeader' );
 	```
 
 	**Note:** All preceding columns will also become headers. If the current column is already a header, executing this command will make it a regular column back again (including the following columns).
 
-* The {@link module:table/commands/setheaderrowcommand~SetHeaderRowCommand `'setRowHeader'`} command.
+* The {@link module:table/commands/setheaderrowcommand~SetHeaderRowCommand `'setTableRowHeader'`} command.
 
 	You can make the row containing the selected cell a [header](https://www.w3.org/TR/html50/tabular-data.html#the-th-element) by executing:
 
 	```js
-	editor.execute( 'setRowHeader' );
+	editor.execute( 'setTableRowHeader' );
 	```
 
 	**Note:** All preceding rows will also become headers. If the current row is already a header, executing this command will make it a regular row back again (including the following rows).
 
-* The {@link module:table/commands/mergecellcommand~MergeCellCommand} in a form of `'mergeCellRight'`, `'mergeCellLeft'`, `'mergeCellUp'` and `'mergeCellDown'` commands.
+* The {@link module:table/commands/mergecellcommand~MergeCellCommand} in a form of `'mergeTableCellRight'`, `'mergeTableCellLeft'`, `'mergeTableCellUp'` and `'mergeTableCellDown'` commands.
 
 	To merge a table cell at the current selection with another cell, execute the command corresponding with the preferred direction. For example, to merge with a cell to the right:
 
 	```js
-	editor.execute( 'mergeCellRight' );
+	editor.execute( 'mergeTableCellRight' );
 	```
 
-	**Note**: If a table cell has a different [`rowspan`](https://www.w3.org/TR/html50/tabular-data.html#attr-tdth-rowspan) (for `'mergeCellRight'` and `'mergeCellLeft'`) or [`colspan`](https://www.w3.org/TR/html50/tabular-data.html#attr-tdth-colspan) (for `'mergeCellUp'` and `'mergeCellDown'`), the command will be disabled.
+	**Note**: If a table cell has a different [`rowspan`](https://www.w3.org/TR/html50/tabular-data.html#attr-tdth-rowspan) (for `'mergeTableCellRight'` and `'mergeTableCellLeft'`) or [`colspan`](https://www.w3.org/TR/html50/tabular-data.html#attr-tdth-colspan) (for `'mergeTableCellUp'` and `'mergeTableCellDown'`), the command will be disabled.
 
-* The {@link module:table/commands/splitcellcommand~SplitCellCommand} as `'splitCellVertically'` and `'splitCellHorizontally'` commands.
+* The {@link module:table/commands/splitcellcommand~SplitCellCommand} as `'splitTableCellVertically'` and `'splitTableCellHorizontally'` commands.
 
 	You can split any cell vertically or horizontally by executing this command. For example, to split the selected table cell vertically:
 
 	```js
-	editor.execute( 'splitCellVertically' );
+	editor.execute( 'splitTableCellVertically' );
 	```
 
-The {@link module:table/tabletoolbar~TableToolbar} plugin introduces the balloon toolbar for tables. The toolbar shows up when a table cell is selected and is anchored to the table. It is possible to {@link module:table/table~TableConfig#toolbar configure} its content. Normally, it contains the table-related tools such as `'tableColumn'`, `'tableRow'`, and `'mergeCell'` dropdowns.
+The {@link module:table/tabletoolbar~TableToolbar} plugin introduces the balloon toolbar for tables. The toolbar shows up when a table cell is selected and is anchored to the table. It is possible to {@link module:table/table~TableConfig#toolbar configure} its content. Normally, it contains the table-related tools such as `'tableColumn'`, `'tableRow'`, and `'mergeTableCells'` dropdowns.
 
 ## Contribute
 

+ 14 - 14
packages/ckeditor5-table/src/tableediting.js

@@ -100,24 +100,24 @@ export default class TableEditing extends Plugin {
 
 		// Define all the commands.
 		editor.commands.add( 'insertTable', new InsertTableCommand( editor ) );
-		editor.commands.add( 'insertRowAbove', new InsertRowCommand( editor, { order: 'above' } ) );
-		editor.commands.add( 'insertRowBelow', new InsertRowCommand( editor, { order: 'below' } ) );
-		editor.commands.add( 'insertColumnBefore', new InsertColumnCommand( editor, { order: 'before' } ) );
-		editor.commands.add( 'insertColumnAfter', new InsertColumnCommand( editor, { order: 'after' } ) );
+		editor.commands.add( 'insertTableRowAbove', new InsertRowCommand( editor, { order: 'above' } ) );
+		editor.commands.add( 'insertTableRowBelow', new InsertRowCommand( editor, { order: 'below' } ) );
+		editor.commands.add( 'insertTableColumnBefore', new InsertColumnCommand( editor, { order: 'before' } ) );
+		editor.commands.add( 'insertTableColumnAfter', new InsertColumnCommand( editor, { order: 'after' } ) );
 
-		editor.commands.add( 'removeRow', new RemoveRowCommand( editor ) );
-		editor.commands.add( 'removeColumn', new RemoveColumnCommand( editor ) );
+		editor.commands.add( 'removeTableRow', new RemoveRowCommand( editor ) );
+		editor.commands.add( 'removeTableColumn', new RemoveColumnCommand( editor ) );
 
-		editor.commands.add( 'splitCellVertically', new SplitCellCommand( editor, { direction: 'vertically' } ) );
-		editor.commands.add( 'splitCellHorizontally', new SplitCellCommand( editor, { direction: 'horizontally' } ) );
+		editor.commands.add( 'splitTableCellVertically', new SplitCellCommand( editor, { direction: 'vertically' } ) );
+		editor.commands.add( 'splitTableCellHorizontally', new SplitCellCommand( editor, { direction: 'horizontally' } ) );
 
-		editor.commands.add( 'mergeCellRight', new MergeCellCommand( editor, { direction: 'right' } ) );
-		editor.commands.add( 'mergeCellLeft', new MergeCellCommand( editor, { direction: 'left' } ) );
-		editor.commands.add( 'mergeCellDown', new MergeCellCommand( editor, { direction: 'down' } ) );
-		editor.commands.add( 'mergeCellUp', new MergeCellCommand( editor, { direction: 'up' } ) );
+		editor.commands.add( 'mergeTableCellRight', new MergeCellCommand( editor, { direction: 'right' } ) );
+		editor.commands.add( 'mergeTableCellLeft', new MergeCellCommand( editor, { direction: 'left' } ) );
+		editor.commands.add( 'mergeTableCellDown', new MergeCellCommand( editor, { direction: 'down' } ) );
+		editor.commands.add( 'mergeTableCellUp', new MergeCellCommand( editor, { direction: 'up' } ) );
 
-		editor.commands.add( 'setColumnHeader', new SetHeaderColumnCommand( editor ) );
-		editor.commands.add( 'setRowHeader', new SetHeaderRowCommand( editor ) );
+		editor.commands.add( 'setTableColumnHeader', new SetHeaderColumnCommand( editor ) );
+		editor.commands.add( 'setTableRowHeader', new SetHeaderRowCommand( editor ) );
 
 		// Handle tab key navigation.
 		this.listenTo( editor.editing.view.document, 'keydown', ( ...args ) => this._handleTabOnSelectedTable( ...args ) );

+ 2 - 3
packages/ckeditor5-table/src/tabletoolbar.js

@@ -176,13 +176,12 @@ export default class TableToolbar extends Plugin {
  *
  * * `'tableRow'`,
  * * `'tableColumn'`,
- * * `'mergeCell'`,
- * * `'splitCell'`,
+ * * `'mergeTableCells'`.
  *
  * You can thus configure the toolbar like this:
  *
  *		const tableConfig = {
- *			toolbar: [ 'tableRow', 'tableColumn', 'mergeCell', 'splitCell' ]
+ *			toolbar: [ 'tableRow', 'tableColumn', 'mergeTableCells' ]
  *		};
  *
  * Of course, the same buttons can also be used in the

+ 17 - 17
packages/ckeditor5-table/src/tableui.js

@@ -25,9 +25,9 @@ import tableMergeCellIcon from './../theme/icons/table-merge-cell.svg';
  * * The `'insertTable'` dropdown,
  * * The `'tableColumn'` dropdown,
  * * The `'tableRow'` dropdown,
- * * The `'mergeCell'` dropdown.
+ * * The `'mergeTableCells'` dropdown.
  *
- * The `'tableColumn'`, `'tableRow'`, `'mergeCell'` dropdowns work best with {@link module:table/tabletoolbar~TableToolbar}.
+ * The `'tableColumn'`, `'tableRow'`, `'mergeTableCells'` dropdowns work best with {@link module:table/tabletoolbar~TableToolbar}.
  *
  * @extends module:core/plugin~Plugin
  */
@@ -74,11 +74,11 @@ export default class TableUI extends Plugin {
 
 		editor.ui.componentFactory.add( 'tableColumn', locale => {
 			const options = [
-				{ commandName: 'setColumnHeader', label: t( 'Header column' ), bindIsActive: true },
+				{ commandName: 'setTableColumnHeader', label: t( 'Header column' ), bindIsActive: true },
 				'|',
-				{ commandName: 'insertColumnBefore', label: t( 'Insert column before' ) },
-				{ commandName: 'insertColumnAfter', label: t( 'Insert column after' ) },
-				{ commandName: 'removeColumn', label: t( 'Delete column' ) }
+				{ commandName: 'insertTableColumnBefore', label: t( 'Insert column before' ) },
+				{ commandName: 'insertTableColumnAfter', label: t( 'Insert column after' ) },
+				{ commandName: 'removeTableColumn', label: t( 'Delete column' ) }
 			];
 
 			return this._prepareDropdown( 'Column', tableColumnIcon, options, locale );
@@ -86,25 +86,25 @@ export default class TableUI extends Plugin {
 
 		editor.ui.componentFactory.add( 'tableRow', locale => {
 			const options = [
-				{ commandName: 'setRowHeader', label: t( 'Header row' ), bindIsActive: true },
+				{ commandName: 'setTableRowHeader', label: t( 'Header row' ), bindIsActive: true },
 				'|',
-				{ commandName: 'insertRowBelow', label: t( 'Insert row below' ) },
-				{ commandName: 'insertRowAbove', label: t( 'Insert row above' ) },
-				{ commandName: 'removeRow', label: t( 'Delete row' ) }
+				{ commandName: 'insertTableRowBelow', label: t( 'Insert row below' ) },
+				{ commandName: 'insertTableRowAbove', label: t( 'Insert row above' ) },
+				{ commandName: 'removeTableRow', label: t( 'Delete row' ) }
 			];
 
 			return this._prepareDropdown( 'Row', tableRowIcon, options, locale );
 		} );
 
-		editor.ui.componentFactory.add( 'mergeCell', locale => {
+		editor.ui.componentFactory.add( 'mergeTableCells', locale => {
 			const options = [
-				{ commandName: 'mergeCellUp', label: t( 'Merge cell up' ) },
-				{ commandName: 'mergeCellRight', label: t( 'Merge cell right' ) },
-				{ commandName: 'mergeCellDown', label: t( 'Merge cell down' ) },
-				{ commandName: 'mergeCellLeft', label: t( 'Merge cell left' ) },
+				{ commandName: 'mergeTableCellUp', label: t( 'Merge cell up' ) },
+				{ commandName: 'mergeTableCellRight', label: t( 'Merge cell right' ) },
+				{ commandName: 'mergeTableCellDown', label: t( 'Merge cell down' ) },
+				{ commandName: 'mergeTableCellLeft', label: t( 'Merge cell left' ) },
 				'|',
-				{ commandName: 'splitCellVertically', label: t( 'Split cell vertically' ) },
-				{ commandName: 'splitCellHorizontally', label: t( 'Split cell horizontally' ) }
+				{ commandName: 'splitTableCellVertically', label: t( 'Split cell vertically' ) },
+				{ commandName: 'splitTableCellHorizontally', label: t( 'Split cell horizontally' ) }
 			];
 
 			return this._prepareDropdown( 'Merge cell', tableMergeCellIcon, options, locale );

+ 1 - 1
packages/ckeditor5-table/tests/manual/table.js

@@ -17,7 +17,7 @@ ClassicEditor
 			'heading', '|', 'insertTable', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
 		],
 		table: {
-			toolbar: [ 'tableColumn', 'tableRow', 'mergeCell' ]
+			toolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
 		}
 	} )
 	.then( editor => {

+ 14 - 14
packages/ckeditor5-table/tests/tableediting.js

@@ -47,59 +47,59 @@ describe( 'TableEditing', () => {
 	} );
 
 	it( 'adds insertRowAbove command', () => {
-		expect( editor.commands.get( 'insertRowAbove' ) ).to.be.instanceOf( InsertRowCommand );
+		expect( editor.commands.get( 'insertTableRowAbove' ) ).to.be.instanceOf( InsertRowCommand );
 	} );
 
 	it( 'adds insertRowBelow command', () => {
-		expect( editor.commands.get( 'insertRowBelow' ) ).to.be.instanceOf( InsertRowCommand );
+		expect( editor.commands.get( 'insertTableRowBelow' ) ).to.be.instanceOf( InsertRowCommand );
 	} );
 
 	it( 'adds insertColumnBefore command', () => {
-		expect( editor.commands.get( 'insertColumnBefore' ) ).to.be.instanceOf( InsertColumnCommand );
+		expect( editor.commands.get( 'insertTableColumnBefore' ) ).to.be.instanceOf( InsertColumnCommand );
 	} );
 
 	it( 'adds insertColumnAfter command', () => {
-		expect( editor.commands.get( 'insertColumnAfter' ) ).to.be.instanceOf( InsertColumnCommand );
+		expect( editor.commands.get( 'insertTableColumnAfter' ) ).to.be.instanceOf( InsertColumnCommand );
 	} );
 
 	it( 'adds removeRow command', () => {
-		expect( editor.commands.get( 'removeRow' ) ).to.be.instanceOf( RemoveRowCommand );
+		expect( editor.commands.get( 'removeTableRow' ) ).to.be.instanceOf( RemoveRowCommand );
 	} );
 
 	it( 'adds removeColumn command', () => {
-		expect( editor.commands.get( 'removeColumn' ) ).to.be.instanceOf( RemoveColumnCommand );
+		expect( editor.commands.get( 'removeTableColumn' ) ).to.be.instanceOf( RemoveColumnCommand );
 	} );
 
 	it( 'adds splitCellVertically command', () => {
-		expect( editor.commands.get( 'splitCellVertically' ) ).to.be.instanceOf( SplitCellCommand );
+		expect( editor.commands.get( 'splitTableCellVertically' ) ).to.be.instanceOf( SplitCellCommand );
 	} );
 
 	it( 'adds splitCellHorizontally command', () => {
-		expect( editor.commands.get( 'splitCellHorizontally' ) ).to.be.instanceOf( SplitCellCommand );
+		expect( editor.commands.get( 'splitTableCellHorizontally' ) ).to.be.instanceOf( SplitCellCommand );
 	} );
 
 	it( 'adds mergeCellRight command', () => {
-		expect( editor.commands.get( 'mergeCellRight' ) ).to.be.instanceOf( MergeCellCommand );
+		expect( editor.commands.get( 'mergeTableCellRight' ) ).to.be.instanceOf( MergeCellCommand );
 	} );
 
 	it( 'adds mergeCellLeft command', () => {
-		expect( editor.commands.get( 'mergeCellLeft' ) ).to.be.instanceOf( MergeCellCommand );
+		expect( editor.commands.get( 'mergeTableCellLeft' ) ).to.be.instanceOf( MergeCellCommand );
 	} );
 
 	it( 'adds mergeCellDown command', () => {
-		expect( editor.commands.get( 'mergeCellDown' ) ).to.be.instanceOf( MergeCellCommand );
+		expect( editor.commands.get( 'mergeTableCellDown' ) ).to.be.instanceOf( MergeCellCommand );
 	} );
 
 	it( 'adds mergeCellUp command', () => {
-		expect( editor.commands.get( 'mergeCellUp' ) ).to.be.instanceOf( MergeCellCommand );
+		expect( editor.commands.get( 'mergeTableCellUp' ) ).to.be.instanceOf( MergeCellCommand );
 	} );
 
 	it( 'adds setColumnHeader command', () => {
-		expect( editor.commands.get( 'setColumnHeader' ) ).to.be.instanceOf( SetHeaderColumnCommand );
+		expect( editor.commands.get( 'setTableColumnHeader' ) ).to.be.instanceOf( SetHeaderColumnCommand );
 	} );
 
 	it( 'adds setRowHeader command', () => {
-		expect( editor.commands.get( 'setRowHeader' ) ).to.be.instanceOf( SetHeaderRowCommand );
+		expect( editor.commands.get( 'setTableRowHeader' ) ).to.be.instanceOf( SetHeaderRowCommand );
 	} );
 
 	describe( 'conversion in data pipeline', () => {

+ 21 - 21
packages/ckeditor5-table/tests/tableui.js

@@ -130,10 +130,10 @@ describe( 'TableUI', () => {
 		it( 'should bind items in panel to proper commands', () => {
 			const items = dropdown.listView.items;
 
-			const setRowHeaderCommand = editor.commands.get( 'setRowHeader' );
-			const insertRowBelowCommand = editor.commands.get( 'insertRowBelow' );
-			const insertRowAboveCommand = editor.commands.get( 'insertRowAbove' );
-			const removeRowCommand = editor.commands.get( 'removeRow' );
+			const setRowHeaderCommand = editor.commands.get( 'setTableRowHeader' );
+			const insertRowBelowCommand = editor.commands.get( 'insertTableRowBelow' );
+			const insertRowAboveCommand = editor.commands.get( 'insertTableRowAbove' );
+			const removeRowCommand = editor.commands.get( 'removeTableRow' );
 
 			setRowHeaderCommand.isEnabled = true;
 			insertRowBelowCommand.isEnabled = true;
@@ -180,13 +180,13 @@ describe( 'TableUI', () => {
 			dropdown.listView.items.get( 0 ).fire( 'execute' );
 
 			expect( spy.calledOnce ).to.be.true;
-			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'setRowHeader' );
+			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'setTableRowHeader' );
 		} );
 
 		it( 'should bind set header row command value to dropdown item', () => {
 			const items = dropdown.listView.items;
 
-			const setRowHeaderCommand = editor.commands.get( 'setRowHeader' );
+			const setRowHeaderCommand = editor.commands.get( 'setTableRowHeader' );
 
 			setRowHeaderCommand.value = false;
 			expect( items.get( 0 ).isActive ).to.be.false;
@@ -225,10 +225,10 @@ describe( 'TableUI', () => {
 		it( 'should bind items in panel to proper commands', () => {
 			const items = dropdown.listView.items;
 
-			const setColumnHeaderCommand = editor.commands.get( 'setColumnHeader' );
-			const insertColumnBeforeCommand = editor.commands.get( 'insertColumnBefore' );
-			const insertColumnAfterCommand = editor.commands.get( 'insertColumnAfter' );
-			const removeColumnCommand = editor.commands.get( 'removeColumn' );
+			const setColumnHeaderCommand = editor.commands.get( 'setTableColumnHeader' );
+			const insertColumnBeforeCommand = editor.commands.get( 'insertTableColumnBefore' );
+			const insertColumnAfterCommand = editor.commands.get( 'insertTableColumnAfter' );
+			const removeColumnCommand = editor.commands.get( 'removeTableColumn' );
 
 			setColumnHeaderCommand.isEnabled = true;
 			insertColumnBeforeCommand.isEnabled = true;
@@ -273,13 +273,13 @@ describe( 'TableUI', () => {
 			dropdown.listView.items.get( 0 ).fire( 'execute' );
 
 			expect( spy.calledOnce ).to.be.true;
-			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'setColumnHeader' );
+			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'setTableColumnHeader' );
 		} );
 
 		it( 'should bind set header column command value to dropdown item', () => {
 			const items = dropdown.listView.items;
 
-			const setColumnHeaderCommand = editor.commands.get( 'setColumnHeader' );
+			const setColumnHeaderCommand = editor.commands.get( 'setTableColumnHeader' );
 
 			setColumnHeaderCommand.value = false;
 			expect( items.get( 0 ).isActive ).to.be.false;
@@ -289,11 +289,11 @@ describe( 'TableUI', () => {
 		} );
 	} );
 
-	describe( 'mergeCell dropdown', () => {
+	describe( 'mergeTableCell dropdown', () => {
 		let dropdown;
 
 		beforeEach( () => {
-			dropdown = editor.ui.componentFactory.create( 'mergeCell' );
+			dropdown = editor.ui.componentFactory.create( 'mergeTableCells' );
 		} );
 
 		it( 'have button with proper properties set', () => {
@@ -326,12 +326,12 @@ describe( 'TableUI', () => {
 		it( 'should bind items in panel to proper commands', () => {
 			const items = dropdown.listView.items;
 
-			const mergeCellUpCommand = editor.commands.get( 'mergeCellUp' );
-			const mergeCellRightCommand = editor.commands.get( 'mergeCellRight' );
-			const mergeCellDownCommand = editor.commands.get( 'mergeCellDown' );
-			const mergeCellLeftCommand = editor.commands.get( 'mergeCellLeft' );
-			const splitCellVerticallyCommand = editor.commands.get( 'splitCellVertically' );
-			const splitCellHorizontallyCommand = editor.commands.get( 'splitCellHorizontally' );
+			const mergeCellUpCommand = editor.commands.get( 'mergeTableCellUp' );
+			const mergeCellRightCommand = editor.commands.get( 'mergeTableCellRight' );
+			const mergeCellDownCommand = editor.commands.get( 'mergeTableCellDown' );
+			const mergeCellLeftCommand = editor.commands.get( 'mergeTableCellLeft' );
+			const splitCellVerticallyCommand = editor.commands.get( 'splitTableCellVertically' );
+			const splitCellHorizontallyCommand = editor.commands.get( 'splitTableCellHorizontally' );
 
 			mergeCellUpCommand.isEnabled = true;
 			mergeCellRightCommand.isEnabled = true;
@@ -387,7 +387,7 @@ describe( 'TableUI', () => {
 			dropdown.listView.items.get( 0 ).fire( 'execute' );
 
 			expect( spy.calledOnce ).to.be.true;
-			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'mergeCellUp' );
+			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'mergeTableCellUp' );
 		} );
 	} );
 } );