Forráskód Böngészése

Merge pull request #283 from ckeditor/i/6371

Fix: The horizontal alignment of the table cell content should work properly with right–to–left languages. Closes ckeditor/ckeditor5#6371.
Aleksander Nowodzinski 5 éve
szülő
commit
f8881e540d

+ 12 - 19
packages/ckeditor5-table/src/tablecellproperties/tablecellpropertiesediting.js

@@ -69,6 +69,7 @@ export default class TableCellPropertiesEditing extends Plugin {
 		const editor = this.editor;
 		const editor = this.editor;
 		const schema = editor.model.schema;
 		const schema = editor.model.schema;
 		const conversion = editor.conversion;
 		const conversion = editor.conversion;
+		const locale = editor.locale;
 
 
 		editor.data.addStyleProcessorRules( addBorderRules );
 		editor.data.addStyleProcessorRules( addBorderRules );
 		enableBorderProperties( schema, conversion );
 		enableBorderProperties( schema, conversion );
@@ -76,7 +77,7 @@ export default class TableCellPropertiesEditing extends Plugin {
 		editor.commands.add( 'tableCellBorderColor', new TableCellBorderColorCommand( editor ) );
 		editor.commands.add( 'tableCellBorderColor', new TableCellBorderColorCommand( editor ) );
 		editor.commands.add( 'tableCellBorderWidth', new TableCellBorderWidthCommand( editor ) );
 		editor.commands.add( 'tableCellBorderWidth', new TableCellBorderWidthCommand( editor ) );
 
 
-		enableHorizontalAlignmentProperty( schema, conversion );
+		enableHorizontalAlignmentProperty( schema, conversion, locale );
 		editor.commands.add( 'tableCellHorizontalAlignment', new TableCellHorizontalAlignmentCommand( editor ) );
 		editor.commands.add( 'tableCellHorizontalAlignment', new TableCellHorizontalAlignmentCommand( editor ) );
 
 
 		enableProperty( schema, conversion, 'width', 'width' );
 		enableProperty( schema, conversion, 'width', 'width' );
@@ -117,37 +118,29 @@ function enableBorderProperties( schema, conversion ) {
 //
 //
 // @param {module:engine/model/schema~Schema} schema
 // @param {module:engine/model/schema~Schema} schema
 // @param {module:engine/conversion/conversion~Conversion} conversion
 // @param {module:engine/conversion/conversion~Conversion} conversion
-function enableHorizontalAlignmentProperty( schema, conversion ) {
+// @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance.
+function enableHorizontalAlignmentProperty( schema, conversion, locale ) {
 	schema.extend( 'tableCell', {
 	schema.extend( 'tableCell', {
 		allowAttributes: [ 'horizontalAlignment' ]
 		allowAttributes: [ 'horizontalAlignment' ]
 	} );
 	} );
 
 
+	const options = [ locale.contentLanguageDirection == 'rtl' ? 'left' : 'right', 'center', 'justify' ];
+
 	conversion.attributeToAttribute( {
 	conversion.attributeToAttribute( {
 		model: {
 		model: {
 			name: 'tableCell',
 			name: 'tableCell',
 			key: 'horizontalAlignment',
 			key: 'horizontalAlignment',
-			values: [ 'right', 'center', 'justify' ]
+			values: options
 		},
 		},
-		view: {
-			right: {
-				key: 'style',
-				value: {
-					'text-align': 'right'
-				}
-			},
-			center: {
+		view: options.reduce( ( result, option ) => ( {
+			...result,
+			[ option ]: {
 				key: 'style',
 				key: 'style',
 				value: {
 				value: {
-					'text-align': 'center'
-				}
-			},
-			justify: {
-				key: 'style',
-				value: {
-					'text-align': 'justify'
+					'text-align': option
 				}
 				}
 			}
 			}
-		}
+		} ), {} )
 	} );
 	} );
 }
 }
 
 

+ 120 - 1
packages/ckeditor5-table/tests/tablecellproperties/tablecellpropertiesediting.js

@@ -59,7 +59,7 @@ describe( 'table cell properties', () => {
 			expect( editor.commands.get( 'tableCellHorizontalAlignment' ) ).to.be.instanceOf( TableCellHorizontalAlignmentCommand );
 			expect( editor.commands.get( 'tableCellHorizontalAlignment' ) ).to.be.instanceOf( TableCellHorizontalAlignmentCommand );
 		} );
 		} );
 
 
-		it( 'adds tableCellAlignment command', () => {
+		it( 'adds tableCellVerticalAlignment command', () => {
 			expect( editor.commands.get( 'tableCellVerticalAlignment' ) ).to.be.instanceOf( TableCellVerticalAlignmentCommand );
 			expect( editor.commands.get( 'tableCellVerticalAlignment' ) ).to.be.instanceOf( TableCellVerticalAlignmentCommand );
 		} );
 		} );
 
 
@@ -712,6 +712,51 @@ describe( 'table cell properties', () => {
 
 
 					expect( tableCell.getAttribute( 'horizontalAlignment' ) ).to.equal( 'justify' );
 					expect( tableCell.getAttribute( 'horizontalAlignment' ) ).to.equal( 'justify' );
 				} );
 				} );
+
+				describe( 'for RTL content language', () => {
+					let editor, model;
+
+					beforeEach( async () => {
+						editor = await VirtualTestEditor.create( {
+							plugins: [ TableCellPropertiesEditing, Paragraph, TableEditing ],
+							language: 'ar'
+						} );
+
+						model = editor.model;
+					} );
+
+					afterEach( async () => {
+						await editor.destroy();
+					} );
+
+					it( 'should not upcast text-align:right style', () => {
+						editor.setData( '<table><tr><td style="text-align:right">foo</td></tr></table>' );
+						const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
+
+						expect( tableCell.getAttribute( 'horizontalAlignment' ) ).to.be.undefined;
+					} );
+
+					it( 'should upcast text-align:left style', () => {
+						editor.setData( '<table><tr><td style="text-align:left">foo</td></tr></table>' );
+						const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
+
+						expect( tableCell.getAttribute( 'horizontalAlignment' ) ).to.equal( 'left' );
+					} );
+
+					it( 'should upcast text-align:center style', () => {
+						editor.setData( '<table><tr><td style="text-align:center">foo</td></tr></table>' );
+						const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
+
+						expect( tableCell.getAttribute( 'horizontalAlignment' ) ).to.equal( 'center' );
+					} );
+
+					it( 'should upcast text-align:justify style', () => {
+						editor.setData( '<table><tr><td style="text-align:justify">foo</td></tr></table>' );
+						const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
+
+						expect( tableCell.getAttribute( 'horizontalAlignment' ) ).to.equal( 'justify' );
+					} );
+				} );
 			} );
 			} );
 
 
 			describe( 'downcast conversion', () => {
 			describe( 'downcast conversion', () => {
@@ -774,6 +819,80 @@ describe( 'table cell properties', () => {
 
 
 					assertTableCellStyle( editor, 'text-align:justify;' );
 					assertTableCellStyle( editor, 'text-align:justify;' );
 				} );
 				} );
+
+				describe( 'for RTL content language', () => {
+					let editor, model;
+
+					beforeEach( async () => {
+						editor = await VirtualTestEditor.create( {
+							plugins: [ TableCellPropertiesEditing, Paragraph, TableEditing ],
+							language: 'ar'
+						} );
+
+						model = editor.model;
+
+						setModelData(
+							model,
+							'<table headingRows="0" headingColumns="0">' +
+								'<tableRow>' +
+									'<tableCell>' +
+										'<paragraph>foo</paragraph>' +
+									'</tableCell>' +
+								'</tableRow>' +
+							'</table>'
+						);
+
+						tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
+					} );
+
+					afterEach( async () => {
+						await editor.destroy();
+					} );
+
+					it( 'should consume converted item\'s horizontalAlignment attribute', () => {
+						editor.conversion.for( 'downcast' )
+							.add( dispatcher => dispatcher.on( 'attribute:horizontalAlignment:tableCell', ( evt, data, conversionApi ) => {
+								expect( conversionApi.consumable.consume( data.item, evt.name ) ).to.be.false;
+							} ) );
+
+						model.change( writer => writer.setAttribute( 'horizontalAlignment', 'center', tableCell ) );
+					} );
+
+					it( 'should be overridable', () => {
+						editor.conversion.for( 'downcast' )
+							.add( dispatcher => dispatcher.on( 'attribute:horizontalAlignment:tableCell', ( evt, data, conversionApi ) => {
+								conversionApi.consumable.consume( data.item, evt.name );
+							}, { priority: 'high' } ) );
+
+						model.change( writer => writer.setAttribute( 'horizontalAlignment', 'center', tableCell ) );
+
+						assertTableCellStyle( editor, '' );
+					} );
+
+					it( 'should not downcast horizontalAlignment=right', () => {
+						model.change( writer => writer.setAttribute( 'horizontalAlignment', 'right', tableCell ) );
+
+						assertTableCellStyle( editor );
+					} );
+
+					it( 'should downcast horizontalAlignment=left', () => {
+						model.change( writer => writer.setAttribute( 'horizontalAlignment', 'left', tableCell ) );
+
+						assertTableCellStyle( editor, 'text-align:left;' );
+					} );
+
+					it( 'should downcast horizontalAlignment=center', () => {
+						model.change( writer => writer.setAttribute( 'horizontalAlignment', 'center', tableCell ) );
+
+						assertTableCellStyle( editor, 'text-align:center;' );
+					} );
+
+					it( 'should downcast horizontalAlignment=justify', () => {
+						model.change( writer => writer.setAttribute( 'horizontalAlignment', 'justify', tableCell ) );
+
+						assertTableCellStyle( editor, 'text-align:justify;' );
+					} );
+				} );
 			} );
 			} );
 		} );
 		} );