Explorar el Código

Convert width to <figure> element.

Maciej Gołaszewski hace 5 años
padre
commit
9463484fd8

+ 21 - 2
packages/ckeditor5-table/src/tableproperties/tablepropertiesediting.js

@@ -12,7 +12,12 @@ import { addBorderRules } from '@ckeditor/ckeditor5-engine/src/view/styles/borde
 import { addBackgroundRules } from '@ckeditor/ckeditor5-engine/src/view/styles/background';
 
 import TableEditing from './../tableediting';
-import { downcastTableAttribute, upcastStyleToAttribute, upcastBorderStyles } from './../converters/tableproperties';
+import {
+	downcastAttributeToStyle,
+	downcastTableAttribute,
+	upcastBorderStyles,
+	upcastStyleToAttribute
+} from './../converters/tableproperties';
 import TableBackgroundColorCommand from './commands/tablebackgroundcolorcommand';
 import TableBorderColorCommand from './commands/tablebordercolorcommand';
 import TableBorderStyleCommand from './commands/tableborderstylecommand';
@@ -77,7 +82,7 @@ export default class TablePropertiesEditing extends Plugin {
 		enableAlignmentProperty( schema, conversion );
 		editor.commands.add( 'tableAlignment', new TableAlignmentCommand( editor ) );
 
-		enableProperty( schema, conversion, 'width', 'width' );
+		enableTableToFigureProperty( schema, conversion, 'width', 'width' );
 		editor.commands.add( 'tableWidth', new TableWidthCommand( editor ) );
 
 		enableProperty( schema, conversion, 'height', 'height' );
@@ -192,3 +197,17 @@ function enableProperty( schema, conversion, modelAttribute, styleName ) {
 	upcastStyleToAttribute( conversion, 'table', modelAttribute, styleName );
 	downcastTableAttribute( conversion, modelAttribute, styleName );
 }
+
+// Enables conversion for an attribute for simple view (figure) to model (table) mappings.
+//
+// @param {String} modelAttribute
+// @param {String} styleName
+// @param {module:engine/model/schema~Schema} schema
+// @param {module:engine/conversion/conversion~Conversion} conversion
+function enableTableToFigureProperty( schema, conversion, modelAttribute, styleName ) {
+	schema.extend( 'table', {
+		allowAttributes: [ modelAttribute ]
+	} );
+	upcastStyleToAttribute( conversion, 'table', modelAttribute, styleName );
+	downcastAttributeToStyle( conversion, 'table', modelAttribute, styleName );
+}

+ 4 - 4
packages/ckeditor5-table/tests/tableproperties/commands/tablewidthcommand.js

@@ -102,7 +102,7 @@ describe( 'table properties', () => {
 
 						command.execute( { value: '25px' } );
 
-						assertTableStyle( editor, 'width:25px;' );
+						assertTableStyle( editor, null, 'width:25px;' );
 					} );
 
 					it( 'should change selected table width to a passed value', () => {
@@ -110,7 +110,7 @@ describe( 'table properties', () => {
 
 						command.execute( { value: '25px' } );
 
-						assertTableStyle( editor, 'width:25px;' );
+						assertTableStyle( editor, null, 'width:25px;' );
 					} );
 
 					it( 'should remove width from a selected table if no value is passed', () => {
@@ -128,7 +128,7 @@ describe( 'table properties', () => {
 
 						command.execute( { value: '25px' } );
 
-						assertTableStyle( editor, 'width:25px;' );
+						assertTableStyle( editor, null, 'width:25px;' );
 					} );
 
 					it( 'should change selected table width to a passed value', () => {
@@ -136,7 +136,7 @@ describe( 'table properties', () => {
 
 						command.execute( { value: '25px' } );
 
-						assertTableStyle( editor, 'width:25px;' );
+						assertTableStyle( editor, null, 'width:25px;' );
 					} );
 
 					it( 'should remove width from a selected table if no value is passed', () => {

+ 9 - 2
packages/ckeditor5-table/tests/tableproperties/tablepropertiesediting.js

@@ -522,12 +522,19 @@ describe( 'table properties', () => {
 			} );
 
 			describe( 'upcast conversion', () => {
-				it( 'should upcast width', () => {
+				it( 'should upcast width from <table>', () => {
 					editor.setData( '<table style="width:1337px"><tr><td>foo</td></tr></table>' );
 					const table = model.document.getRoot().getNodeByPath( [ 0 ] );
 
 					expect( table.getAttribute( 'width' ) ).to.equal( '1337px' );
 				} );
+
+				it( 'should upcast width from <figure>', () => {
+					editor.setData( '<figure style="width:1337px"><table><tr><td>foo</td></tr></table></figure>' );
+					const table = model.document.getRoot().getNodeByPath( [ 0 ] );
+
+					expect( table.getAttribute( 'width' ) ).to.equal( '1337px' );
+				} );
 			} );
 
 			describe( 'downcast conversion', () => {
@@ -540,7 +547,7 @@ describe( 'table properties', () => {
 				it( 'should downcast width', () => {
 					model.change( writer => writer.setAttribute( 'width', '1337px', table ) );
 
-					assertTableStyle( editor, 'width:1337px;' );
+					assertTableStyle( editor, null, 'width:1337px;' );
 				} );
 			} );
 		} );