I/6107: Add RTL support for table (cell) properties

src/tablecellproperties/ui/tablecellpropertiesview.js

@@ -695,7 +695,8 @@ export default class TableCellPropertiesView extends View {
 			labels: this._horizontalAlignmentLabels,
 			propertyName: 'horizontalAlignment',
 			nameToValue: name => {
-				return name === 'left' ? '' : name;
+				const isRTLContent = this.locale.contentLanguageDirection === 'rtl';
+				return name === ( isRTLContent ? 'right' : 'left' ) ? '' : name;
 			}
 		} );
 
@@ -783,12 +784,29 @@ export default class TableCellPropertiesView extends View {
 	get _horizontalAlignmentLabels() {
 		const t = this.t;
 
-		return {
+		const labels = {
 			left: t( 'Align cell text to the left' ),
 			center: t( 'Align cell text to the center' ),
 			right: t( 'Align cell text to the right' ),
 			justify: t( 'Justify cell text' )
 		};
+
+		// Set of labels which can be reversed to match proper {@link #uiLanguage editor UI language}.
+		const ltr = [ 'left', 'center', 'right' ];
+		const labelsDirection = this.locale.uiLanguageDirection === 'rtl' ? ltr.reverse() : ltr;
+
+		// Creates object with a proper order of labeles.
+		const orderedLabels = labelsDirection.reduce( ( acc, curr ) => {
+			return {
+				...acc,
+				[ curr ]: labels[ curr ]
+			};
+		}, {} );
+
+		// Appends other labels.
+		orderedLabels.justify = labels.justify;
+
+		return orderedLabels;
 	}
 
 	/**

src/ui/colorinputview.js

@@ -175,7 +175,7 @@ export default class ColorInputView extends View {
 
 		dropdown.buttonView.children.add( colorPreview );
 
-		dropdown.panelPosition = 'sw';
+		dropdown.panelPosition = locale.uiLanguageDirection === 'rtl' ? 'se' : 'sw';
 		dropdown.panelView.children.add( removeColorButton );
 		dropdown.panelView.children.add( colorGrid );
 		dropdown.bind( 'isEnabled' ).to( this, 'isReadOnly', value => !value );

tests/manual/rtl.js

@@ -8,18 +8,21 @@
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
 
+import TableProperties from '../../src/tableproperties';
+import TableCellProperties from '../../src/tablecellproperties';
+
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
-		plugins: [ ArticlePluginSet ],
+		plugins: [ ArticlePluginSet, TableProperties, TableCellProperties ],
 		language: {
-			ui: 'en',
-			content: 'ar'
+			ui: 'ar',
+			content: 'en'
 		},
 		toolbar: [
 			'heading', '|', 'insertTable', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
 		],
 		table: {
-			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ],
+			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties' ],
 			tableToolbar: [ 'bold', 'italic' ]
 		}
 	} )

tests/tablecellproperties/ui/tablecellpropertiesview.js

@@ -474,7 +474,7 @@ describe( 'table cell properties', () => {
 							expect( toolbar.ariaLabel ).to.equal( 'Horizontal text alignment toolbar' );
 						} );
 
-						it( 'should bring alignment buttons', () => {
+						it( 'should bring alignment buttons in the right order in LTR (default)', () => {
 							expect( toolbar.items.map( ( { label } ) => label ) ).to.have.ordered.members( [
 								'Align cell text to the left',
 								'Align cell text to the center',
@@ -487,6 +487,28 @@ describe( 'table cell properties', () => {
 							] );
 						} );
 
+						it( 'should bring alignment buttons in the right order in RTL', () => {
+							// Creates its own local instances of locale, view and toolbar.
+							const locale = {
+								t: val => val,
+								uiLanguageDirection: 'rtl',
+								contentLanguageDirection: 'rtl'
+							};
+							const view = new TableCellPropertiesView( locale, VIEW_OPTIONS );
+							const toolbar = view.horizontalAlignmentToolbar;
+
+							expect( toolbar.items.map( ( { label } ) => label ) ).to.have.ordered.members( [
+								'Align cell text to the right',
+								'Align cell text to the center',
+								'Align cell text to the left',
+								'Justify cell text'
+							] );
+
+							expect( toolbar.items.map( ( { isOn } ) => isOn ) ).to.have.ordered.members( [
+								true, false, false, false
+							] );
+						} );
+
 						it( 'should change the #horizontalAlignment value', () => {
 							toolbar.items.last.fire( 'execute' );
 							expect( view.horizontalAlignment ).to.equal( 'justify' );

tests/ui/colorinputview.js

@@ -73,7 +73,6 @@ describe( 'ColorInputView', () => {
 			it( 'should be created', () => {
 				expect( view._dropdownView ).to.be.instanceOf( DropdownView );
 				expect( view._dropdownView.buttonView.element.classList.contains( 'ck-input-color__button' ) ).to.be.true;
-				expect( view._dropdownView.panelPosition ).to.equal( 'sw' );
 			} );
 
 			it( 'should bind #isEnabled to the view\'s #isReadOnly', () => {
@@ -107,6 +106,30 @@ describe( 'ColorInputView', () => {
 			it( 'should have the remove color button', () => {
 				expect( view._dropdownView.panelView.children.first ).to.be.instanceOf( ButtonView );
 			} );
+
+			describe( 'position', () => {
+				it( 'should be SouthWest in LTR', () => {
+					locale.uiLanguageDirection = 'ltr';
+					view = new ColorInputView( locale, {
+						colorDefinitions: DEFAULT_COLORS,
+						columns: 5
+					} );
+					view.render();
+
+					expect( view._dropdownView.panelPosition ).to.equal( 'sw' );
+				} );
+
+				it( 'should be SouthEast in RTL', () => {
+					locale.uiLanguageDirection = 'rtl';
+					view = new ColorInputView( locale, {
+						colorDefinitions: DEFAULT_COLORS,
+						columns: 5
+					} );
+					view.render();
+
+					expect( view._dropdownView.panelPosition ).to.equal( 'se' );
+				} );
+			} );
 		} );
 
 		describe( 'color grid', () => {