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

Add support for horizontal alignment for table cell.

Maciej Gołaszewski 6 лет назад
Родитель
Сommit
893c9a0654

+ 54 - 1
packages/ckeditor5-table/src/tablecellproperites.js

@@ -31,7 +31,14 @@ export default class TableCellProperties extends Plugin {
 		const schema = editor.model.schema;
 		const conversion = editor.conversion;
 
-		// Table cell attributes.
+		this.enableBorderProperties( schema, conversion );
+		this.enableBackgroundColorProperty( schema, conversion );
+		this.enablePaddingProperty( schema, conversion );
+		this.enableVerticalAlignmentProperty( schema, conversion );
+		this.enableHorizontalAlignmentProperty( schema, editor );
+	}
+
+	enableBorderProperties( schema, conversion ) {
 		schema.extend( 'tableCell', {
 			allowAttributes: [ 'borderWidth', 'borderColor', 'borderStyle' ]
 		} );
@@ -40,23 +47,69 @@ export default class TableCellProperties extends Plugin {
 		downcastToStyle( conversion, 'tableCell', 'borderStyle', 'border-style' );
 		downcastToStyle( conversion, 'tableCell', 'borderColor', 'border-color' );
 		downcastToStyle( conversion, 'tableCell', 'borderWidth', 'border-width' );
+	}
 
+	enableBackgroundColorProperty( schema, conversion ) {
 		schema.extend( 'tableCell', {
 			allowAttributes: [ 'backgroundColor' ]
 		} );
 		upcastAttribute( conversion, 'tableCell', 'backgroundColor', 'background-color' );
 		downcastToStyle( conversion, 'tableCell', 'backgroundColor', 'background-color' );
+	}
 
+	enablePaddingProperty( schema, conversion ) {
 		schema.extend( 'tableCell', {
 			allowAttributes: [ 'padding' ]
 		} );
 		upcastAttribute( conversion, 'tableCell', 'padding', 'padding' );
 		downcastToStyle( conversion, 'tableCell', 'padding', 'padding' );
+	}
 
+	enableVerticalAlignmentProperty( schema, conversion ) {
 		schema.extend( 'tableCell', {
 			allowAttributes: [ 'verticalAlignment' ]
 		} );
 		upcastAttribute( conversion, 'tableCell', 'verticalAlignment', 'vertical-align' );
 		downcastToStyle( conversion, 'tableCell', 'verticalAlignment', 'vertical-align' );
 	}
+
+	enableHorizontalAlignmentProperty( schema, editor ) {
+		schema.extend( 'tableCell', {
+			allowAttributes: [ 'horizontalAlignment' ]
+		} );
+
+		editor.conversion.attributeToAttribute( {
+			model: {
+				key: 'horizontalAlignment',
+				values: [ 'left', 'right', 'center', 'justify' ]
+			},
+			view: {
+				// TODO: controversial one but I don't know if we want "default".
+				left: {
+					key: 'style',
+					value: {
+						'text-align': 'left'
+					}
+				},
+				right: {
+					key: 'style',
+					value: {
+						'text-align': 'right'
+					}
+				},
+				center: {
+					key: 'style',
+					value: {
+						'text-align': 'center'
+					}
+				},
+				justify: {
+					key: 'style',
+					value: {
+						'text-align': 'justify'
+					}
+				}
+			}
+		} );
+	}
 }

+ 78 - 0
packages/ckeditor5-table/tests/tablecellproperties.js

@@ -510,6 +510,84 @@ describe( 'TableCellProperties', () => {
 		} );
 	} );
 
+	describe( 'horizontal alignment', () => {
+		it( 'should set proper schema rules', () => {
+			expect( model.schema.checkAttribute( [ '$root', 'tableCell' ], 'horizontalAlignment' ) ).to.be.true;
+		} );
+
+		describe( 'upcast conversion', () => {
+			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: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.equal( 'right' );
+			} );
+
+			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 downcast horizontalAlignment=left', () => {
+				model.change( writer => writer.setAttribute( 'horizontalAlignment', 'left', tableCell ) );
+
+				assertTableCellStyle( editor, 'text-align:left;' );
+			} );
+
+			it( 'should downcast horizontalAlignment=right', () => {
+				model.change( writer => writer.setAttribute( 'horizontalAlignment', 'right', tableCell ) );
+
+				assertTableCellStyle( editor, 'text-align:right;' );
+			} );
+
+			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;' );
+			} );
+		} );
+	} );
+
 	describe( 'vertical alignment', () => {
 		it( 'should set proper schema rules', () => {
 			expect( model.schema.checkAttribute( [ '$root', 'tableCell' ], 'verticalAlignment' ) ).to.be.true;