8
0
Просмотр исходного кода

Fixed horizontal alignment of table cell in RTL content.

Kuba Niegowski 5 лет назад
Родитель
Сommit
52eb1e7a2a

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

@@ -69,6 +69,7 @@ export default class TableCellPropertiesEditing extends Plugin {
 		const editor = this.editor;
 		const schema = editor.model.schema;
 		const conversion = editor.conversion;
+		const locale = editor.locale;
 
 		editor.data.addStyleProcessorRules( addBorderRules );
 		enableBorderProperties( schema, conversion );
@@ -76,7 +77,7 @@ export default class TableCellPropertiesEditing extends Plugin {
 		editor.commands.add( 'tableCellBorderColor', new TableCellBorderColorCommand( editor ) );
 		editor.commands.add( 'tableCellBorderWidth', new TableCellBorderWidthCommand( editor ) );
 
-		enableHorizontalAlignmentProperty( schema, conversion );
+		enableHorizontalAlignmentProperty( schema, conversion, locale );
 		editor.commands.add( 'tableCellHorizontalAlignment', new TableCellHorizontalAlignmentCommand( editor ) );
 
 		enableProperty( schema, conversion, 'width', 'width' );
@@ -117,37 +118,30 @@ function enableBorderProperties( schema, conversion ) {
 //
 // @param {module:engine/model/schema~Schema} schema
 // @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', {
 		allowAttributes: [ 'horizontalAlignment' ]
 	} );
 
+	const defaultOption = locale.contentLanguageDirection == 'rtl' ? 'right' : 'left';
+	const options = [ 'left', 'right', 'center', 'justify' ].filter( option => option != defaultOption );
+
 	conversion.attributeToAttribute( {
 		model: {
 			name: 'tableCell',
 			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',
 				value: {
-					'text-align': 'center'
-				}
-			},
-			justify: {
-				key: 'style',
-				value: {
-					'text-align': 'justify'
+					'text-align': option
 				}
 			}
-		}
+		} ), {} )
 	} );
 }
 

+ 111 - 0
packages/ckeditor5-table/tests/tablecellproperties/tablecellpropertiesediting.js

@@ -1126,4 +1126,115 @@ describe( 'table cell properties', () => {
 			} );
 		} );
 	} );
+
+	describe( 'TableCellPropertiesEditing for RTL language', () => {
+		let editor, model;
+
+		beforeEach( async () => {
+			editor = await VirtualTestEditor.create( {
+				plugins: [ TableCellPropertiesEditing, Paragraph, TableEditing ],
+				language: 'ar'
+			} );
+
+			model = editor.model;
+		} );
+
+		afterEach( async () => {
+			await editor.destroy();
+		} );
+
+		describe( 'horizontal alignment', () => {
+			describe( 'upcast conversion', () => {
+				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', () => {
+				let tableCell;
+
+				beforeEach( () => {
+					setModelData(
+						model,
+						'<table headingRows="0" headingColumns="0">' +
+							'<tableRow>' +
+								'<tableCell>' +
+									'<paragraph>foo</paragraph>' +
+								'</tableCell>' +
+							'</tableRow>' +
+						'</table>'
+					);
+					tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
+				} );
+
+				it( 'should consume converted item 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;' );
+				} );
+			} );
+		} );
+	} );
 } );