8
0
Просмотр исходного кода

Convert borders to three separate values.

Maciej Gołaszewski 6 лет назад
Родитель
Сommit
3d8f277dca
1 измененных файлов с 92 добавлено и 29 удалено
  1. 92 29
      packages/ckeditor5-table/src/tablestyle.js

+ 92 - 29
packages/ckeditor5-table/src/tablestyle.js

@@ -11,6 +11,18 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import { findAncestor } from './commands/utils';
 import { findAncestor } from './commands/utils';
 
 
+function downcastToStyle( conversion, modelAttribute, viewStyleName ) {
+	conversion.for( 'downcast' ).attributeToAttribute( {
+		model: modelAttribute,
+		view: modelAttributeValue => ( {
+			key: 'style',
+			value: {
+				[ viewStyleName ]: modelAttributeValue
+			}
+		} )
+	} );
+}
+
 /**
 /**
  * The table editing feature.
  * The table editing feature.
  *
  *
@@ -27,7 +39,7 @@ export default class TableStyle extends Plugin {
 		const conversion = editor.conversion;
 		const conversion = editor.conversion;
 
 
 		schema.extend( 'table', {
 		schema.extend( 'table', {
-			allowAttributes: [ 'border', 'background-color', 'width', 'height' ]
+			allowAttributes: [ 'borderWidth', 'borderColor', 'borderStyle', 'background-color', 'width', 'height' ]
 		} );
 		} );
 
 
 		schema.extend( 'tableRow', {
 		schema.extend( 'tableRow', {
@@ -35,11 +47,12 @@ export default class TableStyle extends Plugin {
 		} );
 		} );
 
 
 		schema.extend( 'tableCell', {
 		schema.extend( 'tableCell', {
-			allowAttributes: [ 'border', 'background-color', 'padding', 'vertical-align', 'width', 'height' ]
+			allowAttributes: [
+				'borderWidth', 'borderColor', 'borderStyle',
+				'background-color', 'padding', 'vertical-align', 'width', 'height' ]
 		} );
 		} );
 
 
 		// Table attributes.
 		// Table attributes.
-		setupTableConversion( conversion, 'border' );
 		setupTableConversion( conversion, 'background-color' );
 		setupTableConversion( conversion, 'background-color' );
 		setupTableConversion( conversion, 'width' );
 		setupTableConversion( conversion, 'width' );
 		setupTableConversion( conversion, 'height' );
 		setupTableConversion( conversion, 'height' );
@@ -47,8 +60,14 @@ export default class TableStyle extends Plugin {
 		// Table row attributes.
 		// Table row attributes.
 		setupConversion( conversion, 'height', 'tableRow' );
 		setupConversion( conversion, 'height', 'tableRow' );
 
 
-		// Table cell attributes.
-		setupConversion( conversion, 'border', 'tableCell' );
+		upcastBorderStyles( conversion, 'td' );
+		upcastBorderStyles( conversion, 'th' );
+		upcastBorderStyles( conversion, 'table' );
+
+		downcastToStyle( conversion, 'borderStyle', 'border-style' );
+		downcastToStyle( conversion, 'borderColor', 'border-color' );
+		downcastToStyle( conversion, 'borderWidth', 'border-width' );
+
 		setupConversion( conversion, 'background-color', 'tableCell' );
 		setupConversion( conversion, 'background-color', 'tableCell' );
 		setupConversion( conversion, 'padding', 'tableCell' );
 		setupConversion( conversion, 'padding', 'tableCell' );
 		setupConversion( conversion, 'vertical-align', 'tableCell' );
 		setupConversion( conversion, 'vertical-align', 'tableCell' );
@@ -93,14 +112,12 @@ export default class TableStyle extends Plugin {
 
 
 				// TODO: Command, setting new value is dumb on `border` object.
 				// TODO: Command, setting new value is dumb on `border` object.
 				editor.model.change( writer => {
 				editor.model.change( writer => {
-					writer.setAttribute( 'border', Object.assign( {}, border, {
-						width: {
-							top: borderWidthToSet,
-							right: borderWidthToSet,
-							bottom: borderWidthToSet,
-							left: borderWidthToSet
-						}
-					} ), tableCell );
+					writer.setAttribute( 'borderWidth', {
+						top: borderWidthToSet,
+						right: borderWidthToSet,
+						bottom: borderWidthToSet,
+						left: borderWidthToSet
+					}, tableCell );
 				} );
 				} );
 			} );
 			} );
 
 
@@ -141,14 +158,12 @@ export default class TableStyle extends Plugin {
 
 
 				// TODO: Command, setting new value is dumb on `border` object.
 				// TODO: Command, setting new value is dumb on `border` object.
 				editor.model.change( writer => {
 				editor.model.change( writer => {
-					writer.setAttribute( 'border', Object.assign( {}, border, {
-						color: {
-							top: newColor,
-							right: newColor,
-							bottom: newColor,
-							left: newColor
-						}
-					} ), tableCell );
+					writer.setAttribute( 'borderColor', {
+						top: newColor,
+						right: newColor,
+						bottom: newColor,
+						left: newColor
+					}, tableCell );
 				} );
 				} );
 			} );
 			} );
 
 
@@ -189,14 +204,12 @@ export default class TableStyle extends Plugin {
 
 
 				// TODO: Command, setting new value is dumb on `border` object.
 				// TODO: Command, setting new value is dumb on `border` object.
 				editor.model.change( writer => {
 				editor.model.change( writer => {
-					writer.setAttribute( 'border', Object.assign( {}, border, {
-						style: {
-							top: newStyle,
-							right: newStyle,
-							bottom: newStyle,
-							left: newStyle
-						}
-					} ), tableCell );
+					writer.setAttribute( 'borderStyle', {
+						top: newStyle,
+						right: newStyle,
+						bottom: newStyle,
+						left: newStyle
+					}, tableCell );
 				} );
 				} );
 			} );
 			} );
 
 
@@ -308,6 +321,56 @@ function upcastAttribute( conversion, styleName, modelName ) {
 	} );
 	} );
 }
 }
 
 
+function upcastBorderStyles( conversion, viewElement ) {
+	conversion.for( 'upcast' ).add( dispatcher => dispatcher.on( 'element:' + viewElement, ( evt, data, conversionApi ) => {
+		let matcherPattern;
+
+		if ( data.viewItem.hasStyle( 'border' ) ) {
+			matcherPattern = {
+				styles: [ 'border' ]
+			};
+		} else {
+			const stylesToConsume = [
+				'border-top',
+				'border-right',
+				'border-bottom',
+				'border-left'
+			].filter( styleName => data.viewItem.hasStyle( styleName ) );
+
+			if ( stylesToConsume.length ) {
+				matcherPattern = {
+					styles: stylesToConsume
+				};
+			} else {
+				return;
+			}
+		}
+
+		// Try to consume appropriate values from consumable values list.
+		const toMatch = matcherPattern;
+
+		if ( !conversionApi.consumable.test( data.viewItem, toMatch ) ) {
+			return;
+		}
+
+		const modelElement = [ ...data.modelRange.getItems( { shallow: true } ) ].pop();
+
+		conversionApi.consumable.consume( data.viewItem, toMatch );
+
+		if ( conversionApi.schema.checkAttribute( modelElement, 'borderStyle' ) ) {
+			conversionApi.writer.setAttribute( 'borderStyle', data.viewItem.getNormalizedStyle( 'border-style' ), modelElement );
+		}
+
+		if ( conversionApi.schema.checkAttribute( modelElement, 'borderColor' ) ) {
+			conversionApi.writer.setAttribute( 'borderColor', data.viewItem.getNormalizedStyle( 'border-color' ), modelElement );
+		}
+
+		if ( conversionApi.schema.checkAttribute( modelElement, 'borderWidth' ) ) {
+			conversionApi.writer.setAttribute( 'borderWidth', data.viewItem.getNormalizedStyle( 'border-width' ), modelElement );
+		}
+	} ) );
+}
+
 function setupTableConversion( conversion, styleName ) {
 function setupTableConversion( conversion, styleName ) {
 	upcastAttribute( conversion, styleName, 'table' );
 	upcastAttribute( conversion, styleName, 'table' );