Procházet zdrojové kódy

Update code to the changes in styles conversion API.

Maciej Gołaszewski před 5 roky
rodič
revize
97832e7844

+ 8 - 0
packages/ckeditor5-table/src/tablecellproperties.js

@@ -9,6 +9,9 @@
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import { downcastToStyle, upcastAttribute, upcastBorderStyles } from './tableproperties/utils';
+import { addBorderStylesProcessor } from '@ckeditor/ckeditor5-engine/src/view/styles/borderstyles';
+import { addPaddingStylesProcessor } from '@ckeditor/ckeditor5-engine/src/view/styles/paddingstyles';
+import { addBackgroundStylesProcessor } from '@ckeditor/ckeditor5-engine/src/view/styles/backgroundstyles';
 
 /**
  * The table cell properties feature.
@@ -30,6 +33,11 @@ export default class TableCellProperties extends Plugin {
 		const editor = this.editor;
 		const schema = editor.model.schema;
 		const conversion = editor.conversion;
+		const viewDoc = editor.editing.view.document;
+
+		viewDoc.addStyleProcessorRules( addBorderStylesProcessor );
+		viewDoc.addStyleProcessorRules( addPaddingStylesProcessor );
+		viewDoc.addStyleProcessorRules( addBackgroundStylesProcessor );
 
 		this.enableBorderProperties( schema, conversion );
 		this.enableBackgroundColorProperty( schema, conversion );

+ 5 - 6
packages/ckeditor5-table/src/tableproperties.js

@@ -9,15 +9,10 @@
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import { downcastTableAttribute, upcastAttribute, upcastBorderStyles } from './tableproperties/utils';
-import Styles from '@ckeditor/ckeditor5-engine/src/view/styles';
+
 import { addBorderStylesProcessor } from '@ckeditor/ckeditor5-engine/src/view/styles/borderstyles';
-import { addPaddingStylesProcessor } from '@ckeditor/ckeditor5-engine/src/view/styles/paddingstyles';
 import { addBackgroundStylesProcessor } from '@ckeditor/ckeditor5-engine/src/view/styles/backgroundstyles';
 
-addBorderStylesProcessor( Styles.processor );
-addPaddingStylesProcessor( Styles.processor );
-addBackgroundStylesProcessor( Styles.processor );
-
 /**
  * The table properties feature.
  *
@@ -38,6 +33,10 @@ export default class TableProperties extends Plugin {
 		const editor = this.editor;
 		const schema = editor.model.schema;
 		const conversion = editor.conversion;
+		const viewDoc = editor.editing.view.document;
+
+		viewDoc.addStyleProcessorRules( addBorderStylesProcessor );
+		viewDoc.addStyleProcessorRules( addBackgroundStylesProcessor );
 
 		this.enableBorderProperties( schema, conversion );
 		this.enableBackgroundColorProperty( schema, conversion );

+ 32 - 32
packages/ckeditor5-table/tests/tablecellproperties.js

@@ -221,7 +221,7 @@ describe( 'TableCellProperties', () => {
 					left: '#f00'
 				}, tableCell ) );
 
-				assertTableCellStyle( editor, 'border-top:#f00;border-right:#f00;border-bottom:#f00;border-left:#f00;' );
+				assertTableCellStyle( editor, 'border-bottom:#f00;border-left:#f00;border-right:#f00;border-top:#f00;' );
 			} );
 
 			it( 'should downcast borderColor attribute (different top, right, bottom, left)', () => {
@@ -233,10 +233,10 @@ describe( 'TableCellProperties', () => {
 				}, tableCell ) );
 
 				assertTableCellStyle( editor,
-					'border-top:#f00;' +
-					'border-right:hsla(0, 100%, 50%, 0.5);' +
 					'border-bottom:deeppink;' +
-					'border-left:rgb(255, 0, 0);'
+					'border-left:rgb(255, 0, 0);' +
+					'border-right:hsla(0, 100%, 50%, 0.5);' +
+					'border-top:#f00;'
 				);
 			} );
 
@@ -248,7 +248,7 @@ describe( 'TableCellProperties', () => {
 					left: 'solid'
 				}, tableCell ) );
 
-				assertTableCellStyle( editor, 'border-top:solid;border-right:solid;border-bottom:solid;border-left:solid;' );
+				assertTableCellStyle( editor, 'border-bottom:solid;border-left:solid;border-right:solid;border-top:solid;' );
 			} );
 
 			it( 'should downcast borderStyle attribute (different top, right, bottom, left)', () => {
@@ -259,7 +259,7 @@ describe( 'TableCellProperties', () => {
 					left: 'dashed'
 				}, tableCell ) );
 
-				assertTableCellStyle( editor, 'border-top:solid;border-right:ridge;border-bottom:dotted;border-left:dashed;' );
+				assertTableCellStyle( editor, 'border-bottom:dotted;border-left:dashed;border-right:ridge;border-top:solid;' );
 			} );
 
 			it( 'should downcast borderWidth attribute (same top, right, bottom, left)', () => {
@@ -270,7 +270,7 @@ describe( 'TableCellProperties', () => {
 					left: 'thick'
 				}, tableCell ) );
 
-				assertTableCellStyle( editor, 'border-top:42px;border-right:.1em;border-bottom:1337rem;border-left:thick;' );
+				assertTableCellStyle( editor, 'border-bottom:1337rem;border-left:thick;border-right:.1em;border-top:42px;' );
 			} );
 
 			it( 'should downcast borderWidth attribute (different top, right, bottom, left)', () => {
@@ -281,7 +281,7 @@ describe( 'TableCellProperties', () => {
 					left: '42px'
 				}, tableCell ) );
 
-				assertTableCellStyle( editor, 'border-top:42px;border-right:42px;border-bottom:42px;border-left:42px;' );
+				assertTableCellStyle( editor, 'border-bottom:42px;border-left:42px;border-right:42px;border-top:42px;' );
 			} );
 
 			it( 'should downcast borderColor, borderStyle and borderWidth attributes together (same top, right, bottom, left)', () => {
@@ -309,10 +309,10 @@ describe( 'TableCellProperties', () => {
 				} );
 
 				assertTableCellStyle( editor,
-					'border-top:42px solid #f00;' +
-					'border-right:42px solid #f00;' +
 					'border-bottom:42px solid #f00;' +
-					'border-left:42px solid #f00;'
+					'border-left:42px solid #f00;' +
+					'border-right:42px solid #f00;' +
+					'border-top:42px solid #f00;'
 				);
 			} );
 
@@ -341,10 +341,10 @@ describe( 'TableCellProperties', () => {
 				} );
 
 				assertTableCellStyle( editor,
-					'border-top:42px solid #f00;' +
-					'border-right:.1em ridge hsla(0, 100%, 50%, 0.5);' +
 					'border-bottom:1337rem dotted deeppink;' +
-					'border-left:thick dashed rgb(255, 0, 0);'
+					'border-left:thick dashed rgb(255, 0, 0);' +
+					'border-right:.1em ridge hsla(0, 100%, 50%, 0.5);' +
+					'border-top:42px solid #f00;'
 				);
 			} );
 
@@ -383,10 +383,10 @@ describe( 'TableCellProperties', () => {
 					}, tableCell ) );
 
 					assertTableCellStyle( editor,
-						'border-top:42px solid deeppink;' +
-						'border-right:42px solid deeppink;' +
 						'border-bottom:42px solid deeppink;' +
-						'border-left:42px solid deeppink;'
+						'border-left:42px solid deeppink;' +
+						'border-right:42px solid deeppink;' +
+						'border-top:42px solid deeppink;'
 					);
 				} );
 
@@ -399,10 +399,10 @@ describe( 'TableCellProperties', () => {
 					}, tableCell ) );
 
 					assertTableCellStyle( editor,
-						'border-top:42px ridge #f00;' +
-						'border-right:42px ridge #f00;' +
 						'border-bottom:42px ridge #f00;' +
-						'border-left:42px ridge #f00;'
+						'border-left:42px ridge #f00;' +
+						'border-right:42px ridge #f00;' +
+						'border-top:42px ridge #f00;'
 					);
 				} );
 
@@ -415,10 +415,10 @@ describe( 'TableCellProperties', () => {
 					}, tableCell ) );
 
 					assertTableCellStyle( editor,
-						'border-top:thick solid #f00;' +
-						'border-right:thick solid #f00;' +
 						'border-bottom:thick solid #f00;' +
-						'border-left:thick solid #f00;'
+						'border-left:thick solid #f00;' +
+						'border-right:thick solid #f00;' +
+						'border-top:thick solid #f00;'
 					);
 				} );
 
@@ -426,10 +426,10 @@ describe( 'TableCellProperties', () => {
 					model.change( writer => writer.removeAttribute( 'borderColor', tableCell ) );
 
 					assertTableCellStyle( editor,
-						'border-top:42px solid;' +
-						'border-right:42px solid;' +
 						'border-bottom:42px solid;' +
-						'border-left:42px solid;'
+						'border-left:42px solid;' +
+						'border-right:42px solid;' +
+						'border-top:42px solid;'
 					);
 				} );
 
@@ -437,10 +437,10 @@ describe( 'TableCellProperties', () => {
 					model.change( writer => writer.removeAttribute( 'borderStyle', tableCell ) );
 
 					assertTableCellStyle( editor,
-						'border-top:42px #f00;' +
-						'border-right:42px #f00;' +
 						'border-bottom:42px #f00;' +
-						'border-left:42px #f00;'
+						'border-left:42px #f00;' +
+						'border-right:42px #f00;' +
+						'border-top:42px #f00;'
 					);
 				} );
 
@@ -448,10 +448,10 @@ describe( 'TableCellProperties', () => {
 					model.change( writer => writer.removeAttribute( 'borderWidth', tableCell ) );
 
 					assertTableCellStyle( editor,
-						'border-top:solid #f00;' +
-						'border-right:solid #f00;' +
 						'border-bottom:solid #f00;' +
-						'border-left:solid #f00;'
+						'border-left:solid #f00;' +
+						'border-right:solid #f00;' +
+						'border-top:solid #f00;'
 					);
 				} );
 

+ 38 - 38
packages/ckeditor5-table/tests/tableproperties.js

@@ -185,7 +185,7 @@ describe( 'TableProperties', () => {
 					left: '#f00'
 				}, table ) );
 
-				assertTableStyle( editor, 'border-top:#f00;border-right:#f00;border-bottom:#f00;border-left:#f00;' );
+				assertTableStyle( editor, 'border-bottom:#f00;border-left:#f00;border-right:#f00;border-top:#f00;' );
 			} );
 
 			it( 'should downcast borderColor attribute (different top, right, bottom, left)', () => {
@@ -197,10 +197,10 @@ describe( 'TableProperties', () => {
 				}, table ) );
 
 				assertTableStyle( editor,
-					'border-top:#f00;' +
-					'border-right:hsla(0, 100%, 50%, 0.5);' +
 					'border-bottom:deeppink;' +
-					'border-left:rgb(255, 0, 0);'
+					'border-left:rgb(255, 0, 0);' +
+					'border-right:hsla(0, 100%, 50%, 0.5);' +
+					'border-top:#f00;'
 				);
 			} );
 
@@ -212,7 +212,7 @@ describe( 'TableProperties', () => {
 					left: 'solid'
 				}, table ) );
 
-				assertTableStyle( editor, 'border-top:solid;border-right:solid;border-bottom:solid;border-left:solid;' );
+				assertTableStyle( editor, 'border-bottom:solid;border-left:solid;border-right:solid;border-top:solid;' );
 			} );
 
 			it( 'should downcast borderStyle attribute (different top, right, bottom, left)', () => {
@@ -223,7 +223,7 @@ describe( 'TableProperties', () => {
 					left: 'dashed'
 				}, table ) );
 
-				assertTableStyle( editor, 'border-top:solid;border-right:ridge;border-bottom:dotted;border-left:dashed;' );
+				assertTableStyle( editor, 'border-bottom:dotted;border-left:dashed;border-right:ridge;border-top:solid;' );
 			} );
 
 			it( 'should downcast borderWidth attribute (same top, right, bottom, left)', () => {
@@ -234,7 +234,7 @@ describe( 'TableProperties', () => {
 					left: 'thick'
 				}, table ) );
 
-				assertTableStyle( editor, 'border-top:42px;border-right:.1em;border-bottom:1337rem;border-left:thick;' );
+				assertTableStyle( editor, 'border-bottom:1337rem;border-left:thick;border-right:.1em;border-top:42px;' );
 			} );
 
 			it( 'should downcast borderWidth attribute (different top, right, bottom, left)', () => {
@@ -245,7 +245,7 @@ describe( 'TableProperties', () => {
 					left: '42px'
 				}, table ) );
 
-				assertTableStyle( editor, 'border-top:42px;border-right:42px;border-bottom:42px;border-left:42px;' );
+				assertTableStyle( editor, 'border-bottom:42px;border-left:42px;border-right:42px;border-top:42px;' );
 			} );
 
 			it( 'should downcast borderColor, borderStyle and borderWidth attributes together (same top, right, bottom, left)', () => {
@@ -273,10 +273,10 @@ describe( 'TableProperties', () => {
 				} );
 
 				assertTableStyle( editor,
-					'border-top:42px solid #f00;' +
-					'border-right:42px solid #f00;' +
 					'border-bottom:42px solid #f00;' +
-					'border-left:42px solid #f00;'
+					'border-left:42px solid #f00;' +
+					'border-right:42px solid #f00;' +
+					'border-top:42px solid #f00;'
 				);
 			} );
 
@@ -305,10 +305,10 @@ describe( 'TableProperties', () => {
 				} );
 
 				assertTableStyle( editor,
-					'border-top:42px solid #f00;' +
-					'border-right:.1em ridge hsla(0, 100%, 50%, 0.5);' +
 					'border-bottom:1337rem dotted deeppink;' +
-					'border-left:thick dashed rgb(255, 0, 0);'
+					'border-left:thick dashed rgb(255, 0, 0);' +
+					'border-right:.1em ridge hsla(0, 100%, 50%, 0.5);' +
+					'border-top:42px solid #f00;'
 				);
 			} );
 
@@ -347,10 +347,10 @@ describe( 'TableProperties', () => {
 					}, table ) );
 
 					assertTableStyle( editor,
-						'border-top:42px solid deeppink;' +
-						'border-right:42px solid deeppink;' +
 						'border-bottom:42px solid deeppink;' +
-						'border-left:42px solid deeppink;'
+						'border-left:42px solid deeppink;' +
+						'border-right:42px solid deeppink;' +
+						'border-top:42px solid deeppink;'
 					);
 				} );
 
@@ -363,10 +363,10 @@ describe( 'TableProperties', () => {
 					}, table ) );
 
 					assertTableStyle( editor,
-						'border-top:42px ridge #f00;' +
-						'border-right:42px ridge #f00;' +
 						'border-bottom:42px ridge #f00;' +
-						'border-left:42px ridge #f00;'
+						'border-left:42px ridge #f00;' +
+						'border-right:42px ridge #f00;' +
+						'border-top:42px ridge #f00;'
 					);
 				} );
 
@@ -379,10 +379,10 @@ describe( 'TableProperties', () => {
 					}, table ) );
 
 					assertTableStyle( editor,
-						'border-top:thick solid #f00;' +
-						'border-right:thick solid #f00;' +
 						'border-bottom:thick solid #f00;' +
-						'border-left:thick solid #f00;'
+						'border-left:thick solid #f00;' +
+						'border-right:thick solid #f00;' +
+						'border-top:thick solid #f00;'
 					);
 				} );
 
@@ -390,10 +390,10 @@ describe( 'TableProperties', () => {
 					model.change( writer => writer.removeAttribute( 'borderColor', table ) );
 
 					assertTableStyle( editor,
-						'border-top:42px solid;' +
-						'border-right:42px solid;' +
 						'border-bottom:42px solid;' +
-						'border-left:42px solid;'
+						'border-left:42px solid;' +
+						'border-right:42px solid;' +
+						'border-top:42px solid;'
 					);
 				} );
 
@@ -401,10 +401,10 @@ describe( 'TableProperties', () => {
 					model.change( writer => writer.removeAttribute( 'borderStyle', table ) );
 
 					assertTableStyle( editor,
-						'border-top:42px #f00;' +
-						'border-right:42px #f00;' +
 						'border-bottom:42px #f00;' +
-						'border-left:42px #f00;'
+						'border-left:42px #f00;' +
+						'border-right:42px #f00;' +
+						'border-top:42px #f00;'
 					);
 				} );
 
@@ -412,10 +412,10 @@ describe( 'TableProperties', () => {
 					model.change( writer => writer.removeAttribute( 'borderWidth', table ) );
 
 					assertTableStyle( editor,
-						'border-top:solid #f00;' +
-						'border-right:solid #f00;' +
 						'border-bottom:solid #f00;' +
-						'border-left:solid #f00;'
+						'border-left:solid #f00;' +
+						'border-right:solid #f00;' +
+						'border-top:solid #f00;'
 					);
 				} );
 
@@ -616,35 +616,35 @@ describe( 'TableProperties', () => {
 			it( 'should downcast right alignment', () => {
 				model.change( writer => writer.setAttribute( 'alignment', 'right', table ) );
 
-				assertTableStyle( editor, 'margin-right:0;margin-left:auto;' );
+				assertTableStyle( editor, 'margin-left:auto;margin-right:0;' );
 			} );
 
 			it( 'should downcast left alignment', () => {
 				model.change( writer => writer.setAttribute( 'alignment', 'left', table ) );
 
-				assertTableStyle( editor, 'margin-right:auto;margin-left:0;' );
+				assertTableStyle( editor, 'margin-left:0;margin-right:auto;' );
 			} );
 
 			it( 'should downcast centered alignment', () => {
 				model.change( writer => writer.setAttribute( 'alignment', 'center', table ) );
 
-				assertTableStyle( editor, 'margin-right:auto;margin-left:auto;' );
+				assertTableStyle( editor, 'margin-left:auto;margin-right:auto;' );
 			} );
 
 			it( 'should downcast changed alignment', () => {
 				model.change( writer => writer.setAttribute( 'alignment', 'center', table ) );
 
-				assertTableStyle( editor, 'margin-right:auto;margin-left:auto;' );
+				assertTableStyle( editor, 'margin-left:auto;margin-right:auto;' );
 
 				model.change( writer => writer.setAttribute( 'alignment', 'right', table ) );
 
-				assertTableStyle( editor, 'margin-right:0;margin-left:auto;' );
+				assertTableStyle( editor, 'margin-left:auto;margin-right:0;' );
 			} );
 
 			it( 'should downcast removed alignment', () => {
 				model.change( writer => writer.setAttribute( 'alignment', 'center', table ) );
 
-				assertTableStyle( editor, 'margin-right:auto;margin-left:auto;' );
+				assertTableStyle( editor, 'margin-left:auto;margin-right:auto;' );
 
 				model.change( writer => writer.removeAttribute( 'alignment', table ) );