Sfoglia il codice sorgente

Use downcast attributeToAttribute conversion helper for alignment attribute.

Maciej Gołaszewski 5 anni fa
parent
commit
010abbe844

+ 31 - 32
packages/ckeditor5-table/src/tableproperties/tablepropertiesediting.js

@@ -149,18 +149,38 @@ function enableAlignmentProperty( schema, conversion ) {
 				value: viewElement => viewElement.getAttribute( 'align' )
 			}
 		} );
-	conversion.for( 'downcast' ).add( dispatcher => dispatcher.on( 'attribute:alignment:table', ( evt, data, conversionApi ) => {
-		const { item, attributeNewValue } = data;
-		const { mapper, writer } = conversionApi;
 
-		const table = [ ...mapper.toViewElement( item ).getChildren() ].find( child => child.is( 'table' ) );
-
-		if ( !attributeNewValue ) {
-			return;
-		}
-
-		writer.setStyle( getAlignmentStylesForAttribute( attributeNewValue ), table );
-	} ) );
+	conversion.for( 'downcast' )
+		.attributeToAttribute( {
+			model: {
+				key: 'alignment',
+				values: [ 'left', 'center', 'right' ]
+			},
+			view: {
+				left: {
+					key: 'style',
+					value: {
+						'margin-left': '0',
+						float: 'right'
+					}
+				},
+				center: {
+					key: 'style',
+					value: {
+						'margin-right': 'auto',
+						'margin-left': 'auto'
+					}
+				},
+				right: {
+					key: 'style',
+					value: {
+						'margin-right': '0',
+						float: 'left'
+					}
+				}
+			},
+			converterPriority: 'high'
+		} );
 }
 
 // Enables conversion for an attribute for simple view-model mappings.
@@ -176,24 +196,3 @@ function enableProperty( schema, conversion, modelAttribute, styleName ) {
 	upcastStyleToAttribute( conversion, 'table', modelAttribute, styleName );
 	downcastTableAttribute( conversion, modelAttribute, styleName );
 }
-
-function getAlignmentStylesForAttribute( attributeNewValue ) {
-	const styles = {};
-
-	if ( attributeNewValue == 'center' ) {
-		styles[ 'margin-left' ] = 'auto';
-		styles[ 'margin-right' ] = 'auto';
-	}
-
-	if ( attributeNewValue == 'left' ) {
-		styles[ 'margin-left' ] = '0';
-		styles.float = 'right';
-	}
-
-	if ( attributeNewValue == 'right' ) {
-		styles[ 'margin-right' ] = '0';
-		styles.float = 'left';
-	}
-	return styles;
-}
-

+ 10 - 4
packages/ckeditor5-table/tests/_utils/utils.js

@@ -297,13 +297,19 @@ export function assertTRBLAttribute( element, key, top, right = top, bottom = to
  * An assertion helper for testing the `<table>` style attribute.
  *
  * @param {module:core/editor/editor~Editor} editor
- * @param {String} [tableStyle=''] A style to assert on table.
+ * @param {String} [tableStyle=''] A style to assert on <table>.
+ * @param {String} [figureStyle=''] A style to assert on <figure>.
  */
-export function assertTableStyle( editor, tableStyle = '' ) {
-	const styleEntry = tableStyle ? ` style="${ tableStyle }"` : '';
+export function assertTableStyle( editor, tableStyle, figureStyle ) {
+	const tableStyleEntry = tableStyle ? ` style="${ tableStyle }"` : '';
+	const figureStyleEntry = figureStyle ? ` style="${ figureStyle }"` : '';
 
 	assertEqualMarkup( editor.getData(),
-		`<figure class="table"><table${ styleEntry }><tbody><tr><td>foo</td></tr></tbody></table></figure>`
+		`<figure class="table"${ figureStyleEntry }>` +
+			`<table${ tableStyleEntry }>` +
+				'<tbody><tr><td>foo</td></tr></tbody>' +
+			'</table>' +
+		'</figure>'
 	);
 }
 

+ 9 - 9
packages/ckeditor5-table/tests/tableproperties/tablepropertiesediting.js

@@ -661,45 +661,45 @@ describe( 'table properties', () => {
 				it( 'should downcast right alignment', () => {
 					model.change( writer => writer.setAttribute( 'alignment', 'right', table ) );
 
-					assertTableStyle( editor, 'float:left;margin-right:0;' );
+					assertTableStyle( editor, null, 'float:left;margin-right:0;' );
 				} );
 
 				it( 'should downcast left alignment', () => {
 					model.change( writer => writer.setAttribute( 'alignment', 'left', table ) );
 
-					assertTableStyle( editor, 'float:right;margin-left:0;' );
+					assertTableStyle( editor, null, 'float:right;margin-left:0;' );
 				} );
 
 				it( 'should downcast centered alignment', () => {
 					model.change( writer => writer.setAttribute( 'alignment', 'center', table ) );
 
-					assertTableStyle( editor, 'margin-left:auto;margin-right:auto;' );
+					assertTableStyle( editor, null, 'margin-left:auto;margin-right:auto;' );
 				} );
 
 				it( 'should downcast changed alignment (center -> right)', () => {
 					model.change( writer => writer.setAttribute( 'alignment', 'center', table ) );
 
-					assertTableStyle( editor, 'margin-left:auto;margin-right:auto;' );
+					assertTableStyle( editor, null, 'margin-left:auto;margin-right:auto;' );
 
 					model.change( writer => writer.setAttribute( 'alignment', 'right', table ) );
 
-					assertTableStyle( editor, 'float:left;margin-right:0;' );
+					assertTableStyle( editor, null, 'float:left;margin-right:0;' );
 				} );
 
 				it( 'should downcast changed alignment (right -> center)', () => {
 					model.change( writer => writer.setAttribute( 'alignment', 'right', table ) );
 
-					assertTableStyle( editor, 'float:left;margin-right:0;' );
+					assertTableStyle( editor, null, 'float:left;margin-right:0;' );
 
 					model.change( writer => writer.setAttribute( 'alignment', 'center', table ) );
 
-					assertTableStyle( editor, 'margin-left:auto;margin-right:auto;' );
+					assertTableStyle( editor, null, 'margin-left:auto;margin-right:auto;' );
 				} );
 
 				it( 'should downcast removed alignment (from center)', () => {
 					model.change( writer => writer.setAttribute( 'alignment', 'center', table ) );
 
-					assertTableStyle( editor, 'margin-left:auto;margin-right:auto;' );
+					assertTableStyle( editor, null, 'margin-left:auto;margin-right:auto;' );
 
 					model.change( writer => writer.removeAttribute( 'alignment', table ) );
 
@@ -709,7 +709,7 @@ describe( 'table properties', () => {
 				it( 'should downcast removed alignment (from right)', () => {
 					model.change( writer => writer.setAttribute( 'alignment', 'right', table ) );
 
-					assertTableStyle( editor, 'float:left;margin-right:0;' );
+					assertTableStyle( editor, null, 'float:left;margin-right:0;' );
 
 					model.change( writer => writer.removeAttribute( 'alignment', table ) );