浏览代码

Change output styles for alignment attribute.

Maciej Gołaszewski 5 年之前
父节点
当前提交
f418683311

+ 23 - 18
packages/ckeditor5-table/src/tableproperties/tablepropertiesediting.js

@@ -12,7 +12,7 @@ import { addBorderRules } from '@ckeditor/ckeditor5-engine/src/view/styles/borde
 import { addBackgroundRules } from '@ckeditor/ckeditor5-engine/src/view/styles/background';
 
 import TableEditing from './../tableediting';
-import { downcastTableAttribute, upcastStyleToAttribute, upcastBorderStyles } from './../converters/tableproperties';
+import { downcastTableAttribute, upcastBorderStyles, upcastStyleToAttribute } from './../converters/tableproperties';
 import TableBackgroundColorCommand from './commands/tablebackgroundcolorcommand';
 import TableBorderColorCommand from './commands/tablebordercolorcommand';
 import TableBorderStyleCommand from './commands/tableborderstylecommand';
@@ -156,26 +156,10 @@ function enableAlignmentProperty( schema, conversion ) {
 		const table = [ ...mapper.toViewElement( item ).getChildren() ].find( child => child.is( 'table' ) );
 
 		if ( !attributeNewValue ) {
-			writer.removeStyle( 'margin-left', table );
-			writer.removeStyle( 'margin-right', table );
-
 			return;
 		}
 
-		const styles = {
-			'margin-right': 'auto',
-			'margin-left': 'auto'
-		};
-
-		if ( attributeNewValue == 'left' ) {
-			styles[ 'margin-left' ] = '0';
-		}
-
-		if ( attributeNewValue == 'right' ) {
-			styles[ 'margin-right' ] = '0';
-		}
-
-		writer.setStyle( styles, table );
+		writer.setStyle( getAlignmentStylesForAttribute( attributeNewValue ), table );
 	} ) );
 }
 
@@ -192,3 +176,24 @@ 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;
+}
+

+ 2 - 2
packages/ckeditor5-table/tests/_utils/utils.js

@@ -297,9 +297,9 @@ 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.
  */
-export function assertTableStyle( editor, tableStyle ) {
+export function assertTableStyle( editor, tableStyle = '' ) {
 	const styleEntry = tableStyle ? ` style="${ tableStyle }"` : '';
 
 	assertEqualMarkup( editor.getData(),

+ 26 - 6
packages/ckeditor5-table/tests/tableproperties/tablepropertiesediting.js

@@ -574,7 +574,7 @@ describe( 'table properties', () => {
 			} );
 		} );
 
-		describe( 'alignment', () => {
+		describe.only( 'alignment', () => {
 			it( 'should set proper schema rules', () => {
 				expect( model.schema.checkAttribute( [ '$root', 'table' ], 'alignment' ) ).to.be.true;
 			} );
@@ -661,13 +661,13 @@ describe( 'table properties', () => {
 				it( 'should downcast right alignment', () => {
 					model.change( writer => writer.setAttribute( 'alignment', 'right', table ) );
 
-					assertTableStyle( editor, 'margin-left:auto;margin-right:0;' );
+					assertTableStyle( editor, 'float:left;margin-right:0;' );
 				} );
 
 				it( 'should downcast left alignment', () => {
 					model.change( writer => writer.setAttribute( 'alignment', 'left', table ) );
 
-					assertTableStyle( editor, 'margin-left:0;margin-right:auto;' );
+					assertTableStyle( editor, 'float:right;margin-left:0;' );
 				} );
 
 				it( 'should downcast centered alignment', () => {
@@ -676,17 +676,27 @@ describe( 'table properties', () => {
 					assertTableStyle( editor, 'margin-left:auto;margin-right:auto;' );
 				} );
 
-				it( 'should downcast changed alignment', () => {
+				it( 'should downcast changed alignment (center -> right)', () => {
 					model.change( writer => writer.setAttribute( 'alignment', 'center', table ) );
 
 					assertTableStyle( editor, 'margin-left:auto;margin-right:auto;' );
 
 					model.change( writer => writer.setAttribute( 'alignment', 'right', table ) );
 
-					assertTableStyle( editor, 'margin-left:auto;margin-right:0;' );
+					assertTableStyle( editor, 'float:left;margin-right:0;' );
 				} );
 
-				it( 'should downcast removed alignment', () => {
+				it( 'should downcast changed alignment (right -> center)', () => {
+					model.change( writer => writer.setAttribute( 'alignment', 'right', table ) );
+
+					assertTableStyle( editor, 'float:left;margin-right:0;' );
+
+					model.change( writer => writer.setAttribute( 'alignment', 'center', table ) );
+
+					assertTableStyle( editor, '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;' );
@@ -695,6 +705,16 @@ describe( 'table properties', () => {
 
 					assertTableStyle( editor );
 				} );
+
+				it( 'should downcast removed alignment (from right)', () => {
+					model.change( writer => writer.setAttribute( 'alignment', 'right', table ) );
+
+					assertTableStyle( editor, 'float:left;margin-right:0;' );
+
+					model.change( writer => writer.removeAttribute( 'alignment', table ) );
+
+					assertTableStyle( editor );
+				} );
 			} );
 		} );