瀏覽代碼

Merge pull request #235 from ckeditor/i/6186

Internal: The width and the height of a table should be downcasted to the surrounding `<figure>`. Closes ckeditor/ckeditor5#6186.
Aleksander Nowodzinski 5 年之前
父節點
當前提交
4ca9586aaf

+ 22 - 3
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,10 +82,10 @@ 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' );
+		enableTableToFigureProperty( schema, conversion, 'height', 'height' );
 		editor.commands.add( 'tableHeight', new TableHeightCommand( editor ) );
 
 		viewDoc.addStyleProcessorRules( addBackgroundRules );
@@ -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 );
+}

+ 10 - 4
packages/ckeditor5-table/tests/_utils/utils.js

@@ -297,13 +297,19 @@ export function assertTRBLAttribute( element, key, top, right = top, bottom = to
  * An assertion helper for testing the `<table>` style attribute.
  *
  * @param {module:core/editor/editor~Editor} editor
- * @param {String} tableStyle A style to assert on table.
+ * @param {String} [tableStyle=''] A style to assert on <table>.
+ * @param {String} [figureStyle=''] A style to assert on <figure>.
  */
-export function assertTableStyle( editor, tableStyle ) {
-	const styleEntry = tableStyle ? ` style="${ tableStyle }"` : '';
+export function assertTableStyle( editor, tableStyle, figureStyle ) {
+	const tableStyleEntry = tableStyle ? ` style="${ tableStyle }"` : '';
+	const figureStyleEntry = figureStyle ? ` style="${ figureStyle }"` : '';
 
 	assertEqualMarkup( editor.getData(),
-		`<figure class="table"><table${ styleEntry }><tbody><tr><td>foo</td></tr></tbody></table></figure>`
+		`<figure class="table"${ figureStyleEntry }>` +
+			`<table${ tableStyleEntry }>` +
+				'<tbody><tr><td>foo</td></tr></tbody>' +
+			'</table>' +
+		'</figure>'
 	);
 }
 

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

@@ -158,7 +158,7 @@ describe( 'table properties', () => {
 
 						command.execute( { value: '25px' } );
 
-						assertTableStyle( editor, 'height:25px;' );
+						assertTableStyle( editor, null, 'height:25px;' );
 					} );
 
 					it( 'should change selected table height to a passed value', () => {
@@ -166,7 +166,7 @@ describe( 'table properties', () => {
 
 						command.execute( { value: '25px' } );
 
-						assertTableStyle( editor, 'height:25px;' );
+						assertTableStyle( editor, null, 'height:25px;' );
 					} );
 
 					it( 'should remove height from a selected table if no value is passed', () => {
@@ -184,7 +184,7 @@ describe( 'table properties', () => {
 
 						command.execute( { value: '25px' } );
 
-						assertTableStyle( editor, 'height:25px;' );
+						assertTableStyle( editor, null, 'height:25px;' );
 					} );
 
 					it( 'should change selected table height to a passed value', () => {
@@ -192,7 +192,7 @@ describe( 'table properties', () => {
 
 						command.execute( { value: '25px' } );
 
-						assertTableStyle( editor, 'height:25px;' );
+						assertTableStyle( editor, null, 'height:25px;' );
 					} );
 
 					it( 'should remove height from a selected table if no value is passed', () => {

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

@@ -158,7 +158,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', () => {
@@ -166,7 +166,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', () => {
@@ -184,7 +184,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', () => {
@@ -192,7 +192,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', () => {

+ 18 - 4
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;' );
 				} );
 			} );
 		} );
@@ -551,12 +558,19 @@ describe( 'table properties', () => {
 			} );
 
 			describe( 'upcast conversion', () => {
-				it( 'should upcast height', () => {
+				it( 'should upcast height from <table>', () => {
 					editor.setData( '<table style="height:1337px"><tr><td>foo</td></tr></table>' );
 					const table = model.document.getRoot().getNodeByPath( [ 0 ] );
 
 					expect( table.getAttribute( 'height' ) ).to.equal( '1337px' );
 				} );
+
+				it( 'should upcast height from <figure>', () => {
+					editor.setData( '<figure style="height:1337px"><table><tr><td>foo</td></tr></table></figure>' );
+					const table = model.document.getRoot().getNodeByPath( [ 0 ] );
+
+					expect( table.getAttribute( 'height' ) ).to.equal( '1337px' );
+				} );
 			} );
 
 			describe( 'downcast conversion', () => {
@@ -569,7 +583,7 @@ describe( 'table properties', () => {
 				it( 'should downcast height', () => {
 					model.change( writer => writer.setAttribute( 'height', '1337px', table ) );
 
-					assertTableStyle( editor, 'height:1337px;' );
+					assertTableStyle( editor, null, 'height:1337px;' );
 				} );
 			} );
 		} );

+ 5 - 0
packages/ckeditor5-table/theme/table.css

@@ -13,6 +13,11 @@
 		border-collapse: collapse;
 		border-spacing: 0;
 
+		/* Table width and height are set on the parent <figure>. Make sure the table inside stretches
+		to the full dimensions of the container (https://github.com/ckeditor/ckeditor5/issues/6186). */
+		width: 100%;
+		height: 100%;
+
 		/* The outer border of the table should be slightly darker than the inner lines.
 		Also see https://github.com/ckeditor/ckeditor5-table/issues/50. */
 		border: 1px double hsl(0, 0%, 70%);