Merge pull request #142 from ckeditor/t/138

Other: Changed labels and command names for the insert column functionality for better UX and translatability. Closes #138.

docs/features/table.md

@@ -160,8 +160,8 @@ The {@link module:table/table~Table} plugin registers the following UI component
 And the following commands:
 
 * The `'insertTable'` command implemented by {@link module:table/commands/inserttablecommand~InsertTableCommand}.
-* The `'insertTableColumnBefore'` command implemented by {@link module:table/commands/insertcolumncommand~InsertColumnCommand}.
-* The `'insertTableColumnAfter'` command implemented by {@link module:table/commands/insertcolumncommand~InsertColumnCommand}.
+* The `'insertTableColumnLeft'` command implemented by {@link module:table/commands/insertcolumncommand~InsertColumnCommand}.
+* The `'insertTableColumnRight'` command implemented by {@link module:table/commands/insertcolumncommand~InsertColumnCommand}.
 * The `'insertTableRowAbove'` command implemented by {@link module:table/commands/insertrowcommand~InsertRowCommand}.
 * The `'insertTableRowBelow'` command implemented by {@link module:table/commands/insertrowcommand~InsertRowCommand}.
 * The `'removeTableColumn'` command implemented by {@link module:table/commands/removecolumncommand~RemoveColumnCommand}.

lang/contexts.json

@@ -1,8 +1,8 @@
 {
 	"Insert table": "Label for the insert table toolbar button.",
 	"Header column": "Label for the set/unset table header column button.",
-	"Insert column before": "Label for the insert table column before the current one button.",
-	"Insert column after": "Label for the insert table column after the current one button.",
+	"Insert column left": "Label for the insert table column to the left of the current one button.",
+	"Insert column right": "Label for the insert table column to the right of the current one button.",
 	"Delete column": "Label for the delete table column button.",
 	"Column": "Label for the table column dropdown button.",
 	"Header row": "Label for the set/unset table header row button.",

src/commands/insertcolumncommand.js

@@ -14,16 +14,16 @@ import TableUtils from '../tableutils';
 /**
  * The insert column command.
  *
- * The command is registered by {@link module:table/tableediting~TableEditing} as `'insertTableColumnBefore'` and
- * `'insertTableColumnAfter'` editor commands.
+ * The command is registered by {@link module:table/tableediting~TableEditing} as `'insertTableColumnLeft'` and
+ * `'insertTableColumnRight'` editor commands.
  *
- * To insert a column before the selected cell, execute the following command:
+ * To insert a column to the left of the selected cell, execute the following command:
  *
- *		editor.execute( 'insertTableColumnBefore' );
+ *		editor.execute( 'insertTableColumnLeft' );
  *
- * To insert a column after the selected cell, execute the following command:
+ * To insert a column to the right of the selected cell, execute the following command:
  *
- *		editor.execute( 'insertTableColumnAfter' );
+ *		editor.execute( 'insertTableColumnRight' );
  *
  * @extends module:core/command~Command
  */
@@ -33,8 +33,8 @@ export default class InsertColumnCommand extends Command {
 	 *
 	 * @param {module:core/editor/editor~Editor} editor An editor on which this command will be used.
 	 * @param {Object} options
-	 * @param {String} [options.order="after"] The order of insertion relative to the column in which the caret is located.
-	 * Possible values: `"after"` and `"before"`.
+	 * @param {String} [options.order="right"] The order of insertion relative to the column in which the caret is located.
+	 * Possible values: `"left"` and `"right"`.
 	 */
 	constructor( editor, options = {} ) {
 		super( editor );
@@ -45,7 +45,7 @@ export default class InsertColumnCommand extends Command {
 		 * @readonly
 		 * @member {String} module:table/commands/insertcolumncommand~InsertColumnCommand#order
 		 */
-		this.order = options.order || 'after';
+		this.order = options.order || 'right';
 	}
 
 	/**
@@ -62,8 +62,8 @@ export default class InsertColumnCommand extends Command {
 	/**
 	 * Executes the command.
 	 *
-	 * Depending on the command's {@link #order} value, it inserts a column `'before'` or `'after'` the column in which the selection is
-	 * set.
+	 * Depending on the command's {@link #order} value, it inserts a column to the `'left'` or `'right'` of the column
+	 * in which the selection is set.
 	 *
 	 * @fires execute
 	 */
@@ -78,7 +78,7 @@ export default class InsertColumnCommand extends Command {
 		const table = tableCell.parent.parent;
 
 		const { column } = tableUtils.getCellLocation( tableCell );
-		const insertAt = this.order === 'after' ? column + 1 : column;
+		const insertAt = this.order === 'right' ? column + 1 : column;
 
 		tableUtils.insertColumns( table, { columns: 1, at: insertAt } );
 	}

src/tableediting.js

@@ -128,8 +128,8 @@ export default class TableEditing extends Plugin {
 		editor.commands.add( 'insertTable', new InsertTableCommand( editor ) );
 		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( 'insertTableColumnLeft', new InsertColumnCommand( editor, { order: 'left' } ) );
+		editor.commands.add( 'insertTableColumnRight', new InsertColumnCommand( editor, { order: 'right' } ) );
 
 		editor.commands.add( 'removeTableRow', new RemoveRowCommand( editor ) );
 		editor.commands.add( 'removeTableColumn', new RemoveColumnCommand( editor ) );

src/tableui.js

@@ -86,15 +86,15 @@ export default class TableUI extends Plugin {
 				{
 					type: 'button',
 					model: {
-						commandName: 'insertTableColumnBefore',
-						label: t( 'Insert column before' )
+						commandName: 'insertTableColumnLeft',
+						label: t( 'Insert column left' )
 					}
 				},
 				{
 					type: 'button',
 					model: {
-						commandName: 'insertTableColumnAfter',
-						label: t( 'Insert column after' )
+						commandName: 'insertTableColumnRight',
+						label: t( 'Insert column right' )
 					}
 				},
 				{

tests/commands/insertcolumncommand.js

@@ -31,7 +31,7 @@ describe( 'InsertColumnCommand', () => {
 		return editor.destroy();
 	} );
 
-	describe( 'order=after', () => {
+	describe( 'order=right', () => {
 		beforeEach( () => {
 			command = new InsertColumnCommand( editor );
 		} );
@@ -49,7 +49,7 @@ describe( 'InsertColumnCommand', () => {
 		} );
 
 		describe( 'execute()', () => {
-			it( 'should insert column in given table after selection\'s column', () => {
+			it( 'should insert column in given table to the right of the selection\'s column', () => {
 				setData( model, modelTable( [
 					[ '11[]', '12' ],
 					[ '21', '22' ]
@@ -63,7 +63,7 @@ describe( 'InsertColumnCommand', () => {
 				] ) );
 			} );
 
-			it( 'should insert column in given table after selection\'s column (selection in block content)', () => {
+			it( 'should insert column in given table to the right of the selection\'s column (selection in block content)', () => {
 				setData( model, modelTable( [
 					[ '11', '<paragraph>12[]</paragraph>', '13' ]
 				] ) );
@@ -155,9 +155,9 @@ describe( 'InsertColumnCommand', () => {
 		} );
 	} );
 
-	describe( 'order=before', () => {
+	describe( 'order=left', () => {
 		beforeEach( () => {
-			command = new InsertColumnCommand( editor, { order: 'before' } );
+			command = new InsertColumnCommand( editor, { order: 'left' } );
 		} );
 
 		describe( 'isEnabled', () => {
@@ -173,7 +173,7 @@ describe( 'InsertColumnCommand', () => {
 		} );
 
 		describe( 'execute()', () => {
-			it( 'should insert column in given table before selection\'s column', () => {
+			it( 'should insert column in given table to the left of the selection\'s column', () => {
 				setData( model, modelTable( [
 					[ '11', '12[]' ],
 					[ '21', '22' ]
@@ -187,7 +187,7 @@ describe( 'InsertColumnCommand', () => {
 				] ) );
 			} );
 
-			it( 'should insert column in given table before selection\'s column (selection in block content)', () => {
+			it( 'should insert column in given table to the left of the selection\'s column (selection in block content)', () => {
 				setData( model, modelTable( [
 					[ '11', '<paragraph>12[]</paragraph>', '13' ]
 				] ) );

tests/manual/table.md

@@ -14,8 +14,8 @@
 3. While the table cell is selected there should be a toolbar attached to the table with 3 dropdowns:
   * column dropdown with items:
     - header column,
-    - insert column before,
-    - insert column after,
+    - insert column left,
+    - insert column right,
     - delete column.
   * row dropdown with items:
     - header row,

tests/tableediting.js

@@ -89,12 +89,12 @@ describe( 'TableEditing', () => {
 		expect( editor.commands.get( 'insertTableRowBelow' ) ).to.be.instanceOf( InsertRowCommand );
 	} );
 
-	it( 'adds insertColumnBefore command', () => {
-		expect( editor.commands.get( 'insertTableColumnBefore' ) ).to.be.instanceOf( InsertColumnCommand );
+	it( 'adds insertColumnLeft command', () => {
+		expect( editor.commands.get( 'insertTableColumnLeft' ) ).to.be.instanceOf( InsertColumnCommand );
 	} );
 
-	it( 'adds insertColumnAfter command', () => {
-		expect( editor.commands.get( 'insertTableColumnAfter' ) ).to.be.instanceOf( InsertColumnCommand );
+	it( 'adds insertColumnRight command', () => {
+		expect( editor.commands.get( 'insertTableColumnRight' ) ).to.be.instanceOf( InsertColumnCommand );
 	} );
 
 	it( 'adds removeRow command', () => {

tests/tableui.js

@@ -226,20 +226,20 @@ describe( 'TableUI', () => {
 
 			const labels = listView.items.map( item => item instanceof ListSeparatorView ? '|' : item.children.first.label );
 
-			expect( labels ).to.deep.equal( [ 'Header column', '|', 'Insert column before', 'Insert column after', 'Delete column' ] );
+			expect( labels ).to.deep.equal( [ 'Header column', '|', 'Insert column left', 'Insert column right', 'Delete column' ] );
 		} );
 
 		it( 'should bind items in panel to proper commands', () => {
 			const items = dropdown.listView.items;
 
 			const setColumnHeaderCommand = editor.commands.get( 'setTableColumnHeader' );
-			const insertColumnBeforeCommand = editor.commands.get( 'insertTableColumnBefore' );
-			const insertColumnAfterCommand = editor.commands.get( 'insertTableColumnAfter' );
+			const insertColumnLeftCommand = editor.commands.get( 'insertTableColumnLeft' );
+			const insertColumnRightCommand = editor.commands.get( 'insertTableColumnRight' );
 			const removeColumnCommand = editor.commands.get( 'removeTableColumn' );
 
 			setColumnHeaderCommand.isEnabled = true;
-			insertColumnBeforeCommand.isEnabled = true;
-			insertColumnAfterCommand.isEnabled = true;
+			insertColumnLeftCommand.isEnabled = true;
+			insertColumnRightCommand.isEnabled = true;
 			removeColumnCommand.isEnabled = true;
 
 			expect( items.first.children.first.isEnabled ).to.be.true;
@@ -253,12 +253,12 @@ describe( 'TableUI', () => {
 			expect( items.first.children.first.isEnabled ).to.be.false;
 			expect( dropdown.buttonView.isEnabled ).to.be.true;
 
-			insertColumnBeforeCommand.isEnabled = false;
+			insertColumnLeftCommand.isEnabled = false;
 
 			expect( items.get( 2 ).children.first.isEnabled ).to.be.false;
 			expect( dropdown.buttonView.isEnabled ).to.be.true;
 
-			insertColumnAfterCommand.isEnabled = false;
+			insertColumnRightCommand.isEnabled = false;
 			expect( items.get( 3 ).children.first.isEnabled ).to.be.false;
 
 			removeColumnCommand.isEnabled = false;