|
|
@@ -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 );
|
|
|
}
|