Explorar el Código

Add support for margin-* and padding-* shorthands.

Maciej Gołaszewski hace 6 años
padre
commit
468fdec72d

+ 10 - 0
packages/ckeditor5-engine/src/view/styles.js

@@ -103,6 +103,7 @@ export default class Styles {
 }
 
 const borderPositionRegExp = /border-(top|right|bottom|left)$/;
+const marginOrPaddingPositionRegExp = /(margin|padding)-(top|right|bottom|left)$/;
 
 function parseStyle( string, styleObject = {} ) {
 	const map = new Map();
@@ -181,6 +182,15 @@ function parseRule( key, value, styleObject ) {
 		} );
 	} else if ( key === 'margin' || key === 'padding' ) {
 		addStyle( styleObject, key, getTopRightBottomLeftValues( value ) );
+	} else if ( marginOrPaddingPositionRegExp.test( key ) ) {
+		const margin = {};
+		const match = marginOrPaddingPositionRegExp.exec( key );
+		const rule = match[ 1 ];
+		const which = match[ 2 ];
+
+		margin[ which ] = value;
+
+		addStyle( styleObject, rule, margin );
 	} else {
 		addStyle( styleObject, key, value );
 	}

+ 41 - 0
packages/ckeditor5-engine/tests/view/styles.js

@@ -282,6 +282,27 @@ describe( 'Styles', () => {
 					left: 'thick'
 				} );
 			} );
+
+			describe( 'margin-*', () => {
+				it( 'should set proper margin', () => {
+					styleProxy.setStyle( 'margin-top:1px;' );
+
+					expect( styleProxy.getModel( 'margin' ) ).to.deep.equal( {
+						top: '1px'
+					} );
+				} );
+
+				it( 'should set proper margin with margin shorthand', () => {
+					styleProxy.setStyle( 'margin: 2em;margin-top:1px;' );
+
+					expect( styleProxy.getModel( 'margin' ) ).to.deep.equal( {
+						top: '1px',
+						right: '2em',
+						bottom: '2em',
+						left: '2em'
+					} );
+				} );
+			} );
 		} );
 
 		describe( 'padding', () => {
@@ -328,6 +349,26 @@ describe( 'Styles', () => {
 					left: 'thick'
 				} );
 			} );
+			describe( 'padding-*', () => {
+				it( 'should set proper padding', () => {
+					styleProxy.setStyle( 'padding-top:1px;' );
+
+					expect( styleProxy.getModel( 'padding' ) ).to.deep.equal( {
+						top: '1px'
+					} );
+				} );
+
+				it( 'should set proper padding with padding shorthand', () => {
+					styleProxy.setStyle( 'padding: 2em;padding-top:1px;' );
+
+					expect( styleProxy.getModel( 'padding' ) ).to.deep.equal( {
+						top: '1px',
+						right: '2em',
+						bottom: '2em',
+						left: '2em'
+					} );
+				} );
+			} );
 		} );
 
 		describe( 'unknown rules', () => {