Bladeren bron

Refactor TablePropertiesEditing.

Maciej Gołaszewski 5 jaren geleden
bovenliggende
commit
2394009c07

+ 6 - 6
packages/ckeditor5-table/src/tablecellpropertiesediting.js

@@ -49,11 +49,11 @@ export default class TableCellPropertiesEditing extends Plugin {
 
 		enableBorderProperties( schema, conversion );
 		enableHorizontalAlignmentProperty( schema, conversion );
-		enableSimpleConversion( schema, conversion, 'width', 'width' );
-		enableSimpleConversion( schema, conversion, 'height', 'height' );
-		enableSimpleConversion( schema, conversion, 'padding', 'padding' );
-		enableSimpleConversion( schema, conversion, 'backgroundColor', 'background-color' );
-		enableSimpleConversion( schema, conversion, 'verticalAlignment', 'vertical-align' );
+		enablePropertyConversion( schema, conversion, 'width', 'width' );
+		enablePropertyConversion( schema, conversion, 'height', 'height' );
+		enablePropertyConversion( schema, conversion, 'padding', 'padding' );
+		enablePropertyConversion( schema, conversion, 'backgroundColor', 'background-color' );
+		enablePropertyConversion( schema, conversion, 'verticalAlignment', 'vertical-align' );
 	}
 }
 
@@ -123,7 +123,7 @@ function enableHorizontalAlignmentProperty( schema, conversion ) {
 // @param {String} styleName
 // @param {module:engine/model/schema~Schema} schema
 // @param {module:engine/conversion/conversion~Conversion} conversion
-function enableSimpleConversion( schema, conversion, modelAttribute, styleName ) {
+function enablePropertyConversion( schema, conversion, modelAttribute, styleName ) {
 	schema.extend( 'tableCell', {
 		allowAttributes: [ modelAttribute ]
 	} );

+ 96 - 98
packages/ckeditor5-table/src/tablepropertiesediting.js

@@ -38,116 +38,114 @@ export default class TablePropertiesEditing extends Plugin {
 		viewDoc.addStyleProcessorRules( addBorderRules );
 		viewDoc.addStyleProcessorRules( addBackgroundRules );
 
-		this.enableBorderProperties( schema, conversion );
-		this.enableBackgroundColorProperty( schema, conversion );
-		this.enableWidthProperty( schema, conversion );
-		this.enableHeightProperty( schema, conversion );
-		this.enableAlignmentProperty( schema, conversion );
-	}
-
-	enableBorderProperties( schema, conversion ) {
-		schema.extend( 'table', {
-			allowAttributes: [ 'borderWidth', 'borderColor', 'borderStyle' ]
-		} );
-		upcastBorderStyles( conversion, 'table' );
-		downcastTableAttribute( conversion, 'borderColor', 'border-color' );
-		downcastTableAttribute( conversion, 'borderStyle', 'border-style' );
-		downcastTableAttribute( conversion, 'borderWidth', 'border-width' );
-	}
-
-	enableBackgroundColorProperty( schema, conversion ) {
-		schema.extend( 'table', {
-			allowAttributes: [ 'backgroundColor' ]
-		} );
-		upcastAttribute( conversion, 'table', 'backgroundColor', 'background-color' );
-		downcastTableAttribute( conversion, 'backgroundColor', 'background-color' );
-	}
-
-	enableWidthProperty( schema, conversion ) {
-		schema.extend( 'table', {
-			allowAttributes: [ 'width' ]
-		} );
-		upcastAttribute( conversion, 'table', 'width', 'width' );
-		downcastTableAttribute( conversion, 'width', 'width' );
+		enableBorderProperties( schema, conversion );
+		enableAlignmentProperty( schema, conversion );
+		enablePropertyConversion( schema, conversion, 'width', 'width' );
+		enablePropertyConversion( schema, conversion, 'height', 'height' );
+		enablePropertyConversion( schema, conversion, 'backgroundColor', 'background-color' );
 	}
+}
 
-	enableHeightProperty( schema, conversion ) {
-		schema.extend( 'table', {
-			allowAttributes: [ 'height' ]
-		} );
-		upcastAttribute( conversion, 'table', 'height', 'height' );
-		downcastTableAttribute( conversion, 'height', 'height' );
-	}
+// Enables `'borderStyle'`, `'borderColor'` and `'borderWidth'` attributes for table.
+//
+// @param {module:engine/model/schema~Schema} schema
+// @param {module:engine/conversion/conversion~Conversion} conversion
+function enableBorderProperties( schema, conversion ) {
+	schema.extend( 'table', {
+		allowAttributes: [ 'borderWidth', 'borderColor', 'borderStyle' ]
+	} );
+	upcastBorderStyles( conversion, 'table' );
+	downcastTableAttribute( conversion, 'borderColor', 'border-color' );
+	downcastTableAttribute( conversion, 'borderStyle', 'border-style' );
+	downcastTableAttribute( conversion, 'borderWidth', 'border-width' );
+}
 
-	enableAlignmentProperty( schema, conversion ) {
-		schema.extend( 'table', {
-			allowAttributes: [ 'alignment' ]
-		} );
-		conversion.for( 'upcast' )
-			.attributeToAttribute( {
-				view: {
-					styles: {
-						'margin-right': /^(auto|0(%|[a-z]{2,4})?)$/,
-						'margin-left': /^(auto|0(%|[a-z]{2,4})?)$/
+// Enables `'alignment'` attribute for table.
+//
+// @param {module:engine/model/schema~Schema} schema
+// @param {module:engine/conversion/conversion~Conversion} conversion
+function enableAlignmentProperty( schema, conversion ) {
+	schema.extend( 'table', {
+		allowAttributes: [ 'alignment' ]
+	} );
+	conversion.for( 'upcast' )
+		.attributeToAttribute( {
+			view: {
+				styles: {
+					'margin-right': /^(auto|0(%|[a-z]{2,4})?)$/,
+					'margin-left': /^(auto|0(%|[a-z]{2,4})?)$/
+				}
+			},
+			model: {
+				name: 'table',
+				key: 'alignment',
+				value: viewElement => {
+					// At this point we only have auto or 0 value (with a unit).
+					if ( viewElement.getStyle( 'margin-right' ) != 'auto' ) {
+						return 'right';
 					}
-				},
-				model: {
-					name: 'table',
-					key: 'alignment',
-					value: viewElement => {
-						// At this point we only have auto or 0 value (with a unit).
-						if ( viewElement.getStyle( 'margin-right' ) != 'auto' ) {
-							return 'right';
-						}
-
-						if ( viewElement.getStyle( 'margin-left' ) != 'auto' ) {
-							return 'left';
-						}
-
-						return 'center';
+
+					if ( viewElement.getStyle( 'margin-left' ) != 'auto' ) {
+						return 'left';
 					}
+
+					return 'center';
 				}
-			} )
-			// Support for backwards compatibility and pasting from other sources.
-			.attributeToAttribute( {
-				view: {
-					attributes: {
-						align: /^(left|right|center)$/
-					}
-				},
-				model: {
-					name: 'table',
-					key: 'alignment',
-					value: viewElement => viewElement.getAttribute( 'align' )
+			}
+		} )
+		// Support for backwards compatibility and pasting from other sources.
+		.attributeToAttribute( {
+			view: {
+				attributes: {
+					align: /^(left|right|center)$/
 				}
-			} );
-		conversion.for( 'downcast' ).add( dispatcher => dispatcher.on( 'attribute:alignment:table', ( evt, data, conversionApi ) => {
-			const { item, attributeNewValue } = data;
-			const { mapper, writer } = conversionApi;
+			},
+			model: {
+				name: 'table',
+				key: 'alignment',
+				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' ) );
+		const table = [ ...mapper.toViewElement( item ).getChildren() ].find( child => child.is( 'table' ) );
 
-			if ( !attributeNewValue ) {
-				writer.removeStyle( 'margin-left', table );
-				writer.removeStyle( 'margin-right', table );
+		if ( !attributeNewValue ) {
+			writer.removeStyle( 'margin-left', table );
+			writer.removeStyle( 'margin-right', table );
 
-				return;
-			}
+			return;
+		}
 
-			const styles = {
-				'margin-right': 'auto',
-				'margin-left': 'auto'
-			};
+		const styles = {
+			'margin-right': 'auto',
+			'margin-left': 'auto'
+		};
 
-			if ( attributeNewValue == 'left' ) {
-				styles[ 'margin-left' ] = '0';
-			}
+		if ( attributeNewValue == 'left' ) {
+			styles[ 'margin-left' ] = '0';
+		}
 
-			if ( attributeNewValue == 'right' ) {
-				styles[ 'margin-right' ] = '0';
-			}
+		if ( attributeNewValue == 'right' ) {
+			styles[ 'margin-right' ] = '0';
+		}
 
-			writer.setStyle( styles, table );
-		} ) );
-	}
+		writer.setStyle( styles, table );
+	} ) );
+}
+
+// Enables conversion for an attribute for simple view-model mappings.
+//
+// @param {String} modelAttribute
+// @param {String} styleName
+// @param {module:engine/model/schema~Schema} schema
+// @param {module:engine/conversion/conversion~Conversion} conversion
+function enablePropertyConversion( schema, conversion, modelAttribute, styleName ) {
+	schema.extend( 'table', {
+		allowAttributes: [ modelAttribute ]
+	} );
+	upcastAttribute( conversion, 'table', modelAttribute, styleName );
+	downcastTableAttribute( conversion, modelAttribute, styleName );
 }