Fix: Column insertion and cell merging buttons should work correctly …

…when the editor content is right–to–left (RTL). Closes #200.
ckeditor · Sep 19, 2019 · 2638a0c · 2638a0c
1 parent f41b964
commit 2638a0c
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 6 deletions.
diff --git a/src/tableui.js b/src/tableui.js
@@ -38,6 +38,8 @@ export default class TableUI extends Plugin {
 	init() {
 		const editor = this.editor;
 		const t = this.editor.t;
+		const contentLanguageDirection = editor.locale.contentLanguageDirection;
+		const isContentLtr = contentLanguageDirection === 'ltr';
 
 		editor.ui.componentFactory.add( 'insertTable', locale => {
 			const command = editor.commands.get( 'insertTable' );
@@ -86,14 +88,14 @@ export default class TableUI extends Plugin {
 				{
 					type: 'button',
 					model: {
-						commandName: 'insertTableColumnLeft',
+						commandName: isContentLtr ? 'insertTableColumnLeft' : 'insertTableColumnRight',
 						label: t( 'Insert column left' )
 					}
 				},
 				{
 					type: 'button',
 					model: {
-						commandName: 'insertTableColumnRight',
+						commandName: isContentLtr ? 'insertTableColumnRight' : 'insertTableColumnLeft',
 						label: t( 'Insert column right' )
 					}
 				},
@@ -158,7 +160,7 @@ export default class TableUI extends Plugin {
 				{
 					type: 'button',
 					model: {
-						commandName: 'mergeTableCellRight',
+						commandName: isContentLtr ? 'mergeTableCellRight' : 'mergeTableCellLeft',
 						label: t( 'Merge cell right' )
 					}
 				},
@@ -172,7 +174,7 @@ export default class TableUI extends Plugin {
 				{
 					type: 'button',
 					model: {
-						commandName: 'mergeTableCellLeft',
+						commandName: isContentLtr ? 'mergeTableCellLeft' : 'mergeTableCellRight',
 						label: t( 'Merge cell left' )
 					}
 				},

diff --git a/tests/tableui.js b/tests/tableui.js
@@ -229,7 +229,7 @@ describe( 'TableUI', () => {
 			expect( labels ).to.deep.equal( [ 'Header column', '|', 'Insert column left', 'Insert column right', 'Delete column' ] );
 		} );
 
-		it( 'should bind items in panel to proper commands', () => {
+		it( 'should bind items in panel to proper commands (LTR content)', () => {
 			const items = dropdown.listView.items;
 
 			const setColumnHeaderCommand = editor.commands.get( 'setTableColumnHeader' );
@@ -266,6 +266,35 @@ describe( 'TableUI', () => {
 			expect( dropdown.buttonView.isEnabled ).to.be.false;
 		} );
 
+		it( 'should bind items in panel to proper commands (RTL content)', () => {
+			const element = document.createElement( 'div' );
+
+			document.body.appendChild( element );
+
+			return ClassicTestEditor
+				.create( element, {
+					language: {
+						ui: 'en',
+						content: 'ar'
+					},
+					plugins: [ TableEditing, TableUI ]
+				} )
+				.then( editor => {
+					const dropdown = editor.ui.componentFactory.create( 'tableColumn' );
+					const items = dropdown.listView.items;
+
+					expect( items.get( 2 ).children.first.label ).to.equal( 'Insert column left' );
+					expect( items.get( 2 ).children.first.commandName ).to.equal( 'insertTableColumnRight' );
+
+					expect( items.get( 3 ).children.first.label ).to.equal( 'Insert column right' );
+					expect( items.get( 3 ).children.first.commandName ).to.equal( 'insertTableColumnLeft' );
+
+					element.remove();
+
+					return editor.destroy();
+				} );
+		} );
+
 		it( 'should focus view after command execution', () => {
 			const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' );
 
@@ -336,7 +365,7 @@ describe( 'TableUI', () => {
 			] );
 		} );
 
-		it( 'should bind items in panel to proper commands', () => {
+		it( 'should bind items in panel to proper commands (LTR content)', () => {
 			const items = dropdown.listView.items;
 
 			const mergeCellUpCommand = editor.commands.get( 'mergeTableCellUp' );
@@ -386,6 +415,35 @@ describe( 'TableUI', () => {
 			expect( dropdown.buttonView.isEnabled ).to.be.false;
 		} );
 
+		it( 'should bind items in panel to proper commands (RTL content)', () => {
+			const element = document.createElement( 'div' );
+
+			document.body.appendChild( element );
+
+			return ClassicTestEditor
+				.create( element, {
+					language: {
+						ui: 'en',
+						content: 'ar'
+					},
+					plugins: [ TableEditing, TableUI ]
+				} )
+				.then( editor => {
+					const dropdown = editor.ui.componentFactory.create( 'mergeTableCells' );
+					const items = dropdown.listView.items;
+
+					expect( items.get( 1 ).children.first.label ).to.equal( 'Merge cell right' );
+					expect( items.get( 1 ).children.first.commandName ).to.equal( 'mergeTableCellLeft' );
+
+					expect( items.get( 3 ).children.first.label ).to.equal( 'Merge cell left' );
+					expect( items.get( 3 ).children.first.commandName ).to.equal( 'mergeTableCellRight' );
+
+					element.remove();
+
+					return editor.destroy();
+				} );
+		} );
+
 		it( 'should focus view after command execution', () => {
 			const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' );