Ver código fonte

Convert shorthand margin style value.

Maciej Gołaszewski 6 anos atrás
pai
commit
67728a53f4

+ 45 - 2
packages/ckeditor5-indent/src/indentblock.js

@@ -129,9 +129,20 @@ export default class IndentBlock extends Plugin {
 			},
 			model: {
 				key: 'indent',
-				value: viewElement => {
-					return viewElement.getStyle( 'margin-left' );
+				value: viewElement => viewElement.getStyle( 'margin-left' )
+			}
+		} );
+
+		// The margin shorthand should also work.
+		conversion.for( 'upcast' ).attributeToAttribute( {
+			view: {
+				styles: {
+					'margin': /[\s\S]+/
 				}
+			},
+			model: {
+				key: 'indent',
+				value: viewElement => normalizeToMarginLeftStyle( viewElement.getStyle( 'margin' ) )
 			}
 		} );
 
@@ -175,6 +186,38 @@ export default class IndentBlock extends Plugin {
 	}
 }
 
+// Normalizes the margin shorthand value to the value of `margin-left` CSS property.
+//
+// As such it will return:
+// - '1em' for '1em'
+// - '1em' for '2px 1em'
+// - '1em' for '2px 1em 3px'
+// - '1em' for '2px 10px 3px 1em'
+//
+// @param {String} Margin style value.
+// @returns {String} Extracted value of margin-left.
+function normalizeToMarginLeftStyle( marginStyleValue ) {
+	// Splits the margin shorthand, ie margin: 2em 4em.
+	const marginEntries = marginStyleValue.split( ' ' );
+
+	let left;
+
+	// If only one value defined, ie: `margin: 1px`.
+	left = marginEntries[ 0 ];
+
+	// If only two values defined, ie: `margin: 1px 2px`.
+	if ( marginEntries[ 1 ] ) {
+		left = marginEntries[ 1 ];
+	}
+
+	// If four values defined, ie: `margin: 1px 2px 3px 4px`.
+	if ( marginEntries[ 3 ] ) {
+		left = marginEntries[ 3 ];
+	}
+
+	return left;
+}
+
 /**
  * The configuration of the {@link module:indent-block/indentblock~IndentBlock block indentation feature}.
  *

+ 52 - 0
packages/ckeditor5-indent/tests/indentblock.js

@@ -114,6 +114,58 @@ describe( 'IndentBlock', () => {
 					.to.equal( '<p style="margin-left:42em">foo</p>' );
 			} );
 
+			it( 'should convert margin shortcut to indent attribute (one entry)', () => {
+				editor.setData( '<p style="margin:42em">foo</p>' );
+
+				const paragraph = doc.getRoot().getChild( 0 );
+
+				expect( paragraph.hasAttribute( 'indent' ) ).to.be.true;
+				expect( paragraph.getAttribute( 'indent' ) ).to.equal( '42em' );
+
+				expect( editor.getData() ).to.equal( '<p style="margin-left:42em;">foo</p>' );
+				expect( getViewData( editor.editing.view, { withoutSelection: true } ) )
+					.to.equal( '<p style="margin-left:42em">foo</p>' );
+			} );
+
+			it( 'should convert margin shortcut to indent attribute (two entries)', () => {
+				editor.setData( '<p style="margin:24em 42em">foo</p>' );
+
+				const paragraph = doc.getRoot().getChild( 0 );
+
+				expect( paragraph.hasAttribute( 'indent' ) ).to.be.true;
+				expect( paragraph.getAttribute( 'indent' ) ).to.equal( '42em' );
+
+				expect( editor.getData() ).to.equal( '<p style="margin-left:42em;">foo</p>' );
+				expect( getViewData( editor.editing.view, { withoutSelection: true } ) )
+					.to.equal( '<p style="margin-left:42em">foo</p>' );
+			} );
+
+			it( 'should convert margin shortcut to indent attribute (three entries)', () => {
+				editor.setData( '<p style="margin:24em 42em 20em">foo</p>' );
+
+				const paragraph = doc.getRoot().getChild( 0 );
+
+				expect( paragraph.hasAttribute( 'indent' ) ).to.be.true;
+				expect( paragraph.getAttribute( 'indent' ) ).to.equal( '42em' );
+
+				expect( editor.getData() ).to.equal( '<p style="margin-left:42em;">foo</p>' );
+				expect( getViewData( editor.editing.view, { withoutSelection: true } ) )
+					.to.equal( '<p style="margin-left:42em">foo</p>' );
+			} );
+
+			it( 'should convert margin shortcut to indent attribute (four entries)', () => {
+				editor.setData( '<p style="margin:24em 40em 24em 42em">foo</p>' );
+
+				const paragraph = doc.getRoot().getChild( 0 );
+
+				expect( paragraph.hasAttribute( 'indent' ) ).to.be.true;
+				expect( paragraph.getAttribute( 'indent' ) ).to.equal( '42em' );
+
+				expect( editor.getData() ).to.equal( '<p style="margin-left:42em;">foo</p>' );
+				expect( getViewData( editor.editing.view, { withoutSelection: true } ) )
+					.to.equal( '<p style="margin-left:42em">foo</p>' );
+			} );
+
 			it( 'should not convert class to indent attribute', () => {
 				editor.setData( '<p class="indent-1">foo</p>' );