Bläddra i källkod

Merge branch 'master' into i/6201

Piotrek Koszuliński 5 år sedan
förälder
incheckning
c0be4322bb

+ 6 - 0
packages/ckeditor5-table/docs/_snippets/features/build-table-source.js

@@ -9,8 +9,14 @@ import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
 
 import Table from '@ckeditor/ckeditor5-table/src/table';
 import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
+import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
+import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
 
 ClassicEditor.builtinPlugins.push( Table );
 ClassicEditor.builtinPlugins.push( TableToolbar );
 
 window.ClassicEditor = ClassicEditor;
+window.CKEditorPlugins = {
+	TableProperties,
+	TableCellProperties
+};

+ 54 - 0
packages/ckeditor5-table/docs/_snippets/features/table-styling.html

@@ -0,0 +1,54 @@
+<div id="snippet-table-styling">
+	<p>The ultimate table of <a href="https://en.wikipedia.org/wiki/List_of_coffee_drinks">coffee drinks</a>:</p>
+	<table>
+		<thead>
+			<tr>
+				<th rowspan="2"></th>
+				<th scope="col" rowspan="2">Espresso</th>
+				<th scope="colgroup" colspan="2">Milk</th>
+				<th scope="col" rowspan="2">Water</th>
+			</tr>
+			<tr>
+				<th scope="col">Steamed</th>
+				<th scope="col">Foam</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr>
+				<th scope="row">Cappuccino</th>
+				<td>yes</td>
+				<td>yes</td>
+				<td>yes</td>
+				<td>no</td>
+			</tr>
+			<tr>
+				<th scope="row">Macchiato</th>
+				<td>yes</td>
+				<td>no</td>
+				<td>yes</td>
+				<td>no</td>
+			</tr>
+			<tr>
+				<th scope="row">Latte</th>
+				<td>yes</td>
+				<td>yes</td>
+				<td>no</td>
+				<td>no</td>
+			</tr>
+			<tr>
+				<th scope="row">Americano</th>
+				<td>yes</td>
+				<td>no</td>
+				<td>no</td>
+				<td>yes</td>
+			</tr>
+		</tbody>
+	</table>
+</div>
+
+<style>
+	.ck.ck-content table td,
+	.ck.ck-content table th {
+		vertical-align: middle;
+	}
+</style>

+ 32 - 0
packages/ckeditor5-table/docs/_snippets/features/table-styling.js

@@ -0,0 +1,32 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals ClassicEditor, CKEditorPlugins, console, window, document */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-table-styling' ), {
+		extraPlugins: [
+			CKEditorPlugins.TableProperties,
+			CKEditorPlugins.TableCellProperties,
+		],
+		cloudServices: CS_CONFIG,
+		toolbar: {
+			items: [
+				'insertTable', '|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo'
+			],
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		},
+		table: {
+			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties' ]
+		}
+	} )
+	.then( editor => {
+		window.editorStyling = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 4 - 0
packages/ckeditor5-table/docs/features/table.md

@@ -11,6 +11,10 @@ The {@link module:table/table~Table} feature offers table creation and editing t
 
 {@snippet features/table}
 
+## Styling tables
+
+{@snippet features/table-styling}
+
 ## Installation
 
 <info-box info>

+ 1 - 1
packages/ckeditor5-table/src/converters/tableproperties.js

@@ -110,7 +110,7 @@ export function downcastTableAttribute( conversion, modelAttribute, styleName )
 		if ( attributeNewValue ) {
 			writer.setStyle( styleName, attributeNewValue, table );
 		} else {
-			writer.removeAttribute( styleName, table );
+			writer.removeStyle( styleName, table );
 		}
 	} ) );
 }

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

@@ -11,13 +11,13 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import { addBorderRules } from '@ckeditor/ckeditor5-engine/src/view/styles/border';
 import { addBackgroundRules } from '@ckeditor/ckeditor5-engine/src/view/styles/background';
 
-import TableEditing from './../tableediting';
+import TableEditing from '../tableediting';
 import {
 	downcastAttributeToStyle,
 	downcastTableAttribute,
 	upcastBorderStyles,
 	upcastStyleToAttribute
-} from './../converters/tableproperties';
+} from '../converters/tableproperties';
 import TableBackgroundColorCommand from './commands/tablebackgroundcolorcommand';
 import TableBorderColorCommand from './commands/tablebordercolorcommand';
 import TableBorderStyleCommand from './commands/tableborderstylecommand';
@@ -154,6 +154,7 @@ function enableAlignmentProperty( schema, conversion ) {
 				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;

+ 1 - 1
packages/ckeditor5-table/tests/_utils/utils.js

@@ -317,7 +317,7 @@ export function assertTableStyle( editor, tableStyle, figureStyle ) {
  * An assertion helper for testing the `<td>` style attribute.
  *
  * @param {module:core/editor/editor~Editor} editor
- * @param {String} tableCellStyle A style to assert on td.
+ * @param {String} [tableCellStyle=''] A style to assert on td.
  */
 export function assertTableCellStyle( editor, tableCellStyle ) {
 	assertEqualMarkup( editor.getData(),

+ 72 - 0
packages/ckeditor5-table/tests/tablecellproperties/tablecellpropertiesediting.js

@@ -564,6 +564,24 @@ describe( 'table cell properties', () => {
 
 					assertTableCellStyle( editor, 'background-color:#f00;' );
 				} );
+
+				it( 'should downcast backgroundColor removal', () => {
+					model.change( writer => writer.setAttribute( 'backgroundColor', '#f00', tableCell ) );
+
+					model.change( writer => writer.removeAttribute( 'backgroundColor', tableCell ) );
+
+					assertTableCellStyle( editor );
+				} );
+
+				it( 'should downcast backgroundColor change', () => {
+					model.change( writer => writer.setAttribute( 'backgroundColor', '#f00', tableCell ) );
+
+					assertTableCellStyle( editor, 'background-color:#f00;' );
+
+					model.change( writer => writer.setAttribute( 'backgroundColor', '#ba7', tableCell ) );
+
+					assertTableCellStyle( editor, 'background-color:#ba7;' );
+				} );
 			} );
 		} );
 
@@ -736,6 +754,24 @@ describe( 'table cell properties', () => {
 
 					assertTableCellStyle( editor, 'padding:2px 3px 4px 5px;' );
 				} );
+
+				it( 'should downcast padding removal', () => {
+					model.change( writer => writer.setAttribute( 'padding', '1337px', tableCell ) );
+
+					model.change( writer => writer.removeAttribute( 'padding', tableCell ) );
+
+					assertTableCellStyle( editor );
+				} );
+
+				it( 'should downcast padding change', () => {
+					model.change( writer => writer.setAttribute( 'padding', '1337px', tableCell ) );
+
+					assertTableCellStyle( editor, 'padding:1337px;' );
+
+					model.change( writer => writer.setAttribute( 'padding', '1410em', tableCell ) );
+
+					assertTableCellStyle( editor, 'padding:1410em;' );
+				} );
 			} );
 		} );
 
@@ -779,6 +815,24 @@ describe( 'table cell properties', () => {
 						'<figure class="table"><table><tbody><tr><td style="width:20px;">foo</td></tr></tbody></table></figure>'
 					);
 				} );
+
+				it( 'should downcast width removal', () => {
+					model.change( writer => writer.setAttribute( 'width', '1337px', tableCell ) );
+
+					model.change( writer => writer.removeAttribute( 'width', tableCell ) );
+
+					assertTableCellStyle( editor );
+				} );
+
+				it( 'should downcast width change', () => {
+					model.change( writer => writer.setAttribute( 'width', '1337px', tableCell ) );
+
+					assertTableCellStyle( editor, 'width:1337px;' );
+
+					model.change( writer => writer.setAttribute( 'width', '1410em', tableCell ) );
+
+					assertTableCellStyle( editor, 'width:1410em;' );
+				} );
 			} );
 		} );
 
@@ -822,6 +876,24 @@ describe( 'table cell properties', () => {
 						'<figure class="table"><table><tbody><tr><td style="height:20px;">foo</td></tr></tbody></table></figure>'
 					);
 				} );
+
+				it( 'should downcast height removal', () => {
+					model.change( writer => writer.setAttribute( 'height', '1337px', tableCell ) );
+
+					model.change( writer => writer.removeAttribute( 'height', tableCell ) );
+
+					assertTableCellStyle( editor );
+				} );
+
+				it( 'should downcast height change', () => {
+					model.change( writer => writer.setAttribute( 'height', '1337px', tableCell ) );
+
+					assertTableCellStyle( editor, 'height:1337px;' );
+
+					model.change( writer => writer.setAttribute( 'height', '1410em', tableCell ) );
+
+					assertTableCellStyle( editor, 'height:1410em;' );
+				} );
 			} );
 		} );
 	} );

+ 54 - 0
packages/ckeditor5-table/tests/tableproperties/tablepropertiesediting.js

@@ -513,6 +513,24 @@ describe( 'table properties', () => {
 
 					assertTableStyle( editor, 'background-color:#f00;' );
 				} );
+
+				it( 'should downcast backgroundColor removal', () => {
+					model.change( writer => writer.setAttribute( 'backgroundColor', '#f00', table ) );
+
+					model.change( writer => writer.removeAttribute( 'backgroundColor', table ) );
+
+					assertTableStyle( editor );
+				} );
+
+				it( 'should downcast backgroundColor change', () => {
+					model.change( writer => writer.setAttribute( 'backgroundColor', '#f00', table ) );
+
+					assertTableStyle( editor, 'background-color:#f00;' );
+
+					model.change( writer => writer.setAttribute( 'backgroundColor', '#ba7', table ) );
+
+					assertTableStyle( editor, 'background-color:#ba7;' );
+				} );
 			} );
 		} );
 
@@ -549,6 +567,24 @@ describe( 'table properties', () => {
 
 					assertTableStyle( editor, null, 'width:1337px;' );
 				} );
+
+				it( 'should downcast width removal', () => {
+					model.change( writer => writer.setAttribute( 'width', '1337px', table ) );
+
+					model.change( writer => writer.removeAttribute( 'width', table ) );
+
+					assertTableStyle( editor );
+				} );
+
+				it( 'should downcast width change', () => {
+					model.change( writer => writer.setAttribute( 'width', '1337px', table ) );
+
+					assertTableStyle( editor, null, 'width:1337px;' );
+
+					model.change( writer => writer.setAttribute( 'width', '1410em', table ) );
+
+					assertTableStyle( editor, null, 'width:1410em;' );
+				} );
 			} );
 		} );
 
@@ -585,6 +621,24 @@ describe( 'table properties', () => {
 
 					assertTableStyle( editor, null, 'height:1337px;' );
 				} );
+
+				it( 'should downcast height removal', () => {
+					model.change( writer => writer.setAttribute( 'height', '1337px', table ) );
+
+					model.change( writer => writer.removeAttribute( 'height', table ) );
+
+					assertTableStyle( editor );
+				} );
+
+				it( 'should downcast height change', () => {
+					model.change( writer => writer.setAttribute( 'height', '1337px', table ) );
+
+					assertTableStyle( editor, null, 'height:1337px;' );
+
+					model.change( writer => writer.setAttribute( 'height', '1410em', table ) );
+
+					assertTableStyle( editor, null, 'height:1410em;' );
+				} );
 			} );
 		} );