Merge pull request #259 from ckeditor/i/6107

Feature: Brought the support for right–to–left languages to the table and table cell property forms. Closes ckeditor/ckeditor5#6107.

Author: oleq

src/tablecellproperties/ui/tablecellpropertiesview.js

@@ -682,6 +682,7 @@ export default class TableCellPropertiesView extends View {
 		// -- Horizontal ---------------------------------------------------
 
 		const horizontalAlignmentToolbar = new ToolbarView( locale );
+		const isContentRTL = this.locale.contentLanguageDirection === 'rtl';
 
 		horizontalAlignmentToolbar.set( {
 			isCompact: true,
@@ -695,7 +696,7 @@ export default class TableCellPropertiesView extends View {
 			labels: this._horizontalAlignmentLabels,
 			propertyName: 'horizontalAlignment',
 			nameToValue: name => {
-				return name === 'left' ? '' : name;
+				return name === ( isContentRTL ? 'right' : 'left' ) ? '' : name;
 			}
 		} );
 
@@ -781,14 +782,20 @@ export default class TableCellPropertiesView extends View {
 	 * @type {Object.<String,String>}
 	 */
 	get _horizontalAlignmentLabels() {
+		const locale = this.locale;
 		const t = this.t;
 
-		return {
-			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' )
-		};
+		const left = t( 'Align cell text to the left' );
+		const center = t( 'Align cell text to the center' );
+		const right = t( 'Align cell text to the right' );
+		const justify = t( 'Justify cell text' );
+
+		// Returns object with a proper order of labels.
+		if ( locale.uiLanguageDirection === 'rtl' ) {
+			return { right, center, left, justify };
+		} else {
+			return { left, center, right, justify };
+		}
 	}
 
 	/**

src/tableproperties/ui/tablepropertiesview.js

@@ -681,13 +681,19 @@ export default class TablePropertiesView extends View {
 	 * @type {Object.<String,String>}
 	 */
 	get _alignmentLabels() {
+		const locale = this.locale;
 		const t = this.t;
 
-		return {
-			left: t( 'Align table to the left' ),
-			center: t( 'Center table' ),
-			right: t( 'Align table to the right' )
-		};
+		const left = t( 'Align table to the left' );
+		const center = t( 'Center table' );
+		const right = t( 'Align table to the right' );
+
+		// Returns object with a proper order of labels.
+		if ( locale.uiLanguageDirection === 'rtl' ) {
+			return { right, center, left };
+		} else {
+			return { left, center, right };
+		}
 	}
 }
 

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 (left-to-right UI)', () => {
 							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,30 @@ describe( 'table cell properties', () => {
 							] );
 						} );
 
+						it( 'should bring alignment buttons in the right order (right-to-left UI)', () => {
+							// 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
+							] );
+
+							view.destroy();
+						} );
+
 						it( 'should change the #horizontalAlignment value', () => {
 							toolbar.items.last.fire( 'execute' );
 							expect( view.horizontalAlignment ).to.equal( 'justify' );

tests/tableproperties/ui/tablepropertiesview.js

@@ -439,7 +439,7 @@ describe( 'table properties', () => {
 							expect( toolbar.ariaLabel ).to.equal( 'Table alignment toolbar' );
 						} );
 
-						it( 'should bring alignment buttons', () => {
+						it( 'should bring alignment buttons in the right order (left-to-right UI)', () => {
 							expect( toolbar.items.map( ( { label } ) => label ) ).to.have.ordered.members( [
 								'Align table to the left',
 								'Center table',
@@ -451,6 +451,29 @@ describe( 'table properties', () => {
 							] );
 						} );
 
+						it( 'should bring alignment buttons in the right order (right-to-left UI)', () => {
+							// Creates its own local instances of locale, view and toolbar.
+							const locale = {
+								t: val => val,
+								uiLanguageDirection: 'rtl',
+								contentLanguageDirection: 'rtl'
+							};
+							const view = new TablePropertiesView( locale, VIEW_OPTIONS );
+							const toolbar = view.alignmentToolbar;
+
+							expect( toolbar.items.map( ( { label } ) => label ) ).to.have.ordered.members( [
+								'Align table to the right',
+								'Center table',
+								'Align table to the left'
+							] );
+
+							expect( toolbar.items.map( ( { isOn } ) => isOn ) ).to.have.ordered.members( [
+								false, true, false
+							] );
+
+							view.destroy();
+						} );
+
 						it( 'should change the #horizontalAlignment value', () => {
 							toolbar.items.last.fire( 'execute' );
 							expect( view.alignment ).to.equal( 'right' );

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', () => {