Преглед изворни кода

Merge branch 'master' into t/12

Piotrek Koszuliński пре 7 година
родитељ
комит
89d0c46bc6

+ 21 - 21
packages/ckeditor5-table/docs/features/table.md

@@ -5,7 +5,7 @@ category: features
 
 {@snippet features/build-table-source}
 
-The {@link module:table/table~Table} feature offers table creation an editing tools that help content authors bring tabular data into their documents.
+The {@link module:table/table~Table} feature offers table creation and editing tools that help content authors bring tabular data into their documents.
 
 ## Demo
 
@@ -13,13 +13,13 @@ The {@link module:table/table~Table} feature offers table creation an editing to
 
 ## Installation
 
-To add this feature to your editor install the [`@ckeditor/ckeditor5-table`](https://www.npmjs.com/package/@ckeditor/ckeditor5-table) package
+To add this feature to your editor, install the [`@ckeditor/ckeditor5-table`](https://www.npmjs.com/package/@ckeditor/ckeditor5-table) package:
 
 ```bash
 npm install --save @ckeditor/ckeditor5-table
 ```
 
-then add `'Table'` and `'TableToolbar'` to your plugin list and the table toolbar configuration:
+Then add `'Table'` and `'TableToolbar'` to your plugin list and configure the table toolbar:
 
 ```js
 import Table from '@ckeditor/ckeditor5-table/src/table';
@@ -38,19 +38,19 @@ ClassicEditor
 ```
 
 <info-box info>
-	Read more about {@link builds/guides/development/installing-plugins installing plugins}.
+	At the moment by default the table feature is available only in the {@link builds/guides/overview#document-editor document editor build}. Read more about {@link builds/guides/development/installing-plugins installing plugins} if you want to add it to other editor builds.
 </info-box>
 
 ## Common API
 
 The {@link module:table/table~Table} plugin registers the following UI components:
 
-* The `'insertTable'` dropdown,
-* The `'tableColumn'` dropdown,
-* The `'tableRow'` dropdown,
-* The `'mergeCell'` dropdown,
+* The `'insertTable'` dropdown.
+* The `'tableColumn'` dropdown.
+* The `'tableRow'` dropdown.
+* The `'mergeCell'` dropdown.
 
-and the following commands:
+And the following commands:
 
 * The {@link module:table/commands/inserttablecommand~InsertTableCommand `'inserttable'`} command.
 
@@ -60,29 +60,29 @@ and the following commands:
 	editor.execute( 'insertTable', { rows: 20, columns: 5 } );
 	```
 
-* The {@link module:table/commands/insertcolumncommand~InsertColumnCommand} as `'insertColumnBefore'` and `'insertColumnAfter'` commands.
+* The {@link module:table/commands/insertcolumncommand~InsertColumnCommand} in a form of `'insertColumnBefore'` and `'insertColumnAfter'` commands.
 
-	To insert a column before or after the selected cell, execute one of the commands:
+	To insert a column before the selected cell, execute the following command:
 
 	```js
 	editor.execute( 'insertColumnBefore' );
 	```
 
-	or
+	To insert a column after the selected cell, execute the following command:
 
 	```js
 	editor.execute( 'insertColumnAfter' );
 	```
 
-* The {@link module:table/commands/insertrowcommand~InsertRowCommand} as `'insertRowAbove'`and `'insertRowBelow'` commands.
+* The {@link module:table/commands/insertrowcommand~InsertRowCommand} in a form of `'insertRowAbove'` and `'insertRowBelow'` commands.
 
-	To insert a row below or above the selected cell, execute one of the commands:
+	To insert a row below the selected cell, execute the following command:
 
 	```js
 	editor.execute( 'insertRowBelow' );
 	```
 
-	or
+	To insert a row above the selected cell, execute the following command:
 
 	```js
 	editor.execute( 'insertRowAbove' );
@@ -112,7 +112,7 @@ and the following commands:
 	editor.execute( 'setColumnHeader' );
 	```
 
-	**Note:** All preceding columns will also become headers. If the current column is already a header, executing this command will make it a regular column back again (including following columns).
+	**Note:** All preceding columns will also become headers. If the current column is already a header, executing this command will make it a regular column back again (including the following columns).
 
 * The {@link module:table/commands/setheaderrowcommand~SetHeaderRowCommand `'setRowHeader'`} command.
 
@@ -122,11 +122,11 @@ and the following commands:
 	editor.execute( 'setRowHeader' );
 	```
 
-	**Note:** All preceding rows will also become headers. If the current row is already a header, executing this command will make it a regular row back again (including following rows).
+	**Note:** All preceding rows will also become headers. If the current row is already a header, executing this command will make it a regular row back again (including the following rows).
 
-* The {@link module:table/commands/mergecellcommand~MergeCellCommand} as `'mergeCellRight'`, `'mergeCellLeft'`, `'mergeCellUp'` and `'mergeCellDown'` commands.
+* The {@link module:table/commands/mergecellcommand~MergeCellCommand} in a form of `'mergeCellRight'`, `'mergeCellLeft'`, `'mergeCellUp'` and `'mergeCellDown'` commands.
 
-	To merge a table cell at the current selection with another cell, execute the command corresponding with the preferred direction. E.g. to merge with a cell to the right:
+	To merge a table cell at the current selection with another cell, execute the command corresponding with the preferred direction. For example, to merge with a cell to the right:
 
 	```js
 	editor.execute( 'mergeCellRight' );
@@ -136,13 +136,13 @@ and the following commands:
 
 * The {@link module:table/commands/splitcellcommand~SplitCellCommand} as `'splitCellVertically'` and `'splitCellHorizontally'` commands.
 
-	You can split any cell vertically or horizontally by executing this command. E.g. to split the selected table cell vertically:
+	You can split any cell vertically or horizontally by executing this command. For example, to split the selected table cell vertically:
 
 	```js
 	editor.execute( 'splitCellVertically' );
 	```
 
-The {@link module:table/tabletoolbar~TableToolbar} plugin introduces the balloon toolbar for the tables. The toolbar shows up when a table cell is selected, anchored to the table. It is possible to {@link module:table/table~TableConfig#toolbar configure} its content. Normally, it contains the table-related tools such as `'tableColumn'`, `'tableRow'`, and `'mergeCell'` dropdowns.
+The {@link module:table/tabletoolbar~TableToolbar} plugin introduces the balloon toolbar for tables. The toolbar shows up when a table cell is selected and is anchored to the table. It is possible to {@link module:table/table~TableConfig#toolbar configure} its content. Normally, it contains the table-related tools such as `'tableColumn'`, `'tableRow'`, and `'mergeCell'` dropdowns.
 
 ## Contribute
 

+ 9 - 5
packages/ckeditor5-table/src/converters/downcast.js

@@ -36,12 +36,14 @@ export function downcastInsertTable( options = {} ) {
 
 		const asWidget = options && options.asWidget;
 
+		const figureElement = conversionApi.writer.createContainerElement( 'figure', { class: 'table' } );
 		const tableElement = conversionApi.writer.createContainerElement( 'table' );
+		conversionApi.writer.insert( ViewPosition.createAt( figureElement ), tableElement );
 
 		let tableWidget;
 
 		if ( asWidget ) {
-			tableWidget = toTableWidget( tableElement, conversionApi.writer );
+			tableWidget = toTableWidget( figureElement, conversionApi.writer );
 		}
 
 		const tableWalker = new TableWalker( table );
@@ -70,8 +72,8 @@ export function downcastInsertTable( options = {} ) {
 
 		const viewPosition = conversionApi.mapper.toViewPosition( data.range.start );
 
-		conversionApi.mapper.bindElements( table, asWidget ? tableWidget : tableElement );
-		conversionApi.writer.insert( viewPosition, asWidget ? tableWidget : tableElement );
+		conversionApi.mapper.bindElements( table, asWidget ? tableWidget : figureElement );
+		conversionApi.writer.insert( viewPosition, asWidget ? tableWidget : figureElement );
 	}, { priority: 'normal' } );
 }
 
@@ -92,7 +94,8 @@ export function downcastInsertRow( options = {} ) {
 
 		const table = tableRow.parent;
 
-		const tableElement = conversionApi.mapper.toViewElement( table );
+		const figureElement = conversionApi.mapper.toViewElement( table );
+		const tableElement = figureElement.getChild( 0 );
 
 		const row = table.getChildIndex( tableRow );
 
@@ -180,7 +183,8 @@ export function downcastTableHeadingRowsChange( options = {} ) {
 			return;
 		}
 
-		const viewTable = conversionApi.mapper.toViewElement( table );
+		const figureElement = conversionApi.mapper.toViewElement( table );
+		const viewTable = figureElement.getChild( 0 );
 
 		const oldRows = data.attributeOldValue;
 		const newRows = data.attributeNewValue;

+ 1 - 1
packages/ckeditor5-table/src/utils.js

@@ -59,5 +59,5 @@ export function isTableWidgetSelected( selection ) {
 export function isTableContentSelected( selection ) {
 	const parentTable = getParentTable( selection.getFirstPosition() );
 
-	return !!( parentTable && isTableWidget( parentTable ) );
+	return !!( parentTable && isTableWidget( parentTable.parent ) );
 }

+ 48 - 47
packages/ckeditor5-table/tests/_utils/utils.js

@@ -3,51 +3,6 @@
  * For licensing, see LICENSE.md.
  */
 
-function formatAttributes( attributes ) {
-	let attributesString = '';
-
-	if ( attributes ) {
-		const entries = Object.entries( attributes );
-
-		if ( entries.length ) {
-			attributesString = ' ' + entries.map( entry => `${ entry[ 0 ] }="${ entry[ 1 ] }"` ).join( ' ' );
-		}
-	}
-	return attributesString;
-}
-
-function makeRows( tableData, cellElement, rowElement, headingElement = 'th' ) {
-	const tableRows = tableData
-		.reduce( ( previousRowsString, tableRow ) => {
-			const tableRowString = tableRow.reduce( ( tableRowString, tableCellData ) => {
-				let tableCell = tableCellData;
-
-				const isObject = typeof tableCellData === 'object';
-
-				let resultingCellElement = cellElement;
-
-				if ( isObject ) {
-					tableCell = tableCellData.contents;
-
-					if ( tableCellData.isHeading ) {
-						resultingCellElement = headingElement;
-					}
-
-					delete tableCellData.contents;
-					delete tableCellData.isHeading;
-				}
-
-				const formattedAttributes = formatAttributes( isObject ? tableCellData : '' );
-				tableRowString += `<${ resultingCellElement }${ formattedAttributes }>${ tableCell }</${ resultingCellElement }>`;
-
-				return tableRowString;
-			}, '' );
-
-			return `${ previousRowsString }<${ rowElement }>${ tableRowString }</${ rowElement }>`;
-		}, '' );
-	return tableRows;
-}
-
 /**
  * @param {Number} columns
  * @param {Array.<String>} tableData
@@ -74,7 +29,7 @@ export function viewTable( tableData, attributes = {} ) {
 	const thead = headingRows > 0 ? `<thead>${ makeRows( tableData.slice( 0, headingRows ), 'th', 'tr' ) }</thead>` : '';
 	const tbody = tableData.length > headingRows ? `<tbody>${ makeRows( tableData.slice( headingRows ), 'td', 'tr' ) }</tbody>` : '';
 
-	return `<table>${ thead }${ tbody }</table>`;
+	return `<figure class="table"><table>${ thead }${ tbody }</table></figure>`;
 }
 
 /**
@@ -93,7 +48,8 @@ export function formatTable( tableString ) {
 		.replace( /<\/thead>/g, '\n</thead>' )
 		.replace( /<\/tbody>/g, '\n</tbody>' )
 		.replace( /<\/tr>/g, '\n</tr>' )
-		.replace( /<\/table>/g, '\n</table>' );
+		.replace( /<\/table>/g, '\n</table>' )
+		.replace( /<\/figure>/g, '\n</table>' );
 }
 
 /**
@@ -119,3 +75,48 @@ export function formattedModelTable( tableData, attributes ) {
 export function formattedViewTable( tableData, attributes ) {
 	return formatTable( viewTable( tableData, attributes ) );
 }
+
+function formatAttributes( attributes ) {
+	let attributesString = '';
+
+	if ( attributes ) {
+		const entries = Object.entries( attributes );
+
+		if ( entries.length ) {
+			attributesString = ' ' + entries.map( entry => `${ entry[ 0 ] }="${ entry[ 1 ] }"` ).join( ' ' );
+		}
+	}
+	return attributesString;
+}
+
+function makeRows( tableData, cellElement, rowElement, headingElement = 'th' ) {
+	const tableRows = tableData
+		.reduce( ( previousRowsString, tableRow ) => {
+			const tableRowString = tableRow.reduce( ( tableRowString, tableCellData ) => {
+				let tableCell = tableCellData;
+
+				const isObject = typeof tableCellData === 'object';
+
+				let resultingCellElement = cellElement;
+
+				if ( isObject ) {
+					tableCell = tableCellData.contents;
+
+					if ( tableCellData.isHeading ) {
+						resultingCellElement = headingElement;
+					}
+
+					delete tableCellData.contents;
+					delete tableCellData.isHeading;
+				}
+
+				const formattedAttributes = formatAttributes( isObject ? tableCellData : '' );
+				tableRowString += `<${ resultingCellElement }${ formattedAttributes }>${ tableCell }</${ resultingCellElement }>`;
+
+				return tableRowString;
+			}, '' );
+
+			return `${ previousRowsString }<${ rowElement }>${ tableRowString }</${ rowElement }>`;
+		}, '' );
+	return tableRows;
+}

Разлика између датотеке није приказан због своје велике величине
+ 287 - 300
packages/ckeditor5-table/tests/converters/downcast.js


+ 38 - 0
packages/ckeditor5-table/tests/converters/upcasttable.js

@@ -58,6 +58,22 @@ describe( 'upcastTable()', () => {
 		expect( getModelData( model, { withoutSelection: true } ) ).to.equal( data );
 	}
 
+	it( 'should convert table figure', () => {
+		editor.setData(
+			'<figure class="table">' +
+			'<table>' +
+			'<tr><td>1</td></tr>' +
+			'</table>' +
+			'</figure>'
+		);
+
+		expectModel(
+			'<table>' +
+			'<tableRow><tableCell>1</tableCell></tableRow>' +
+			'</table>'
+		);
+	} );
+
 	it( 'should create table model from table without thead', () => {
 		editor.setData(
 			'<table>' +
@@ -72,6 +88,28 @@ describe( 'upcastTable()', () => {
 		);
 	} );
 
+	it( 'should not convert empty figure', () => {
+		'<figure class="table"></figure>';
+
+		expectModel( '' );
+	} );
+
+	it( 'should convert if figure do not have class="table" attribute', () => {
+		editor.setData(
+			'<figure>' +
+			'<table>' +
+			'<tr><td>1</td></tr>' +
+			'</table>' +
+			'</figure>'
+		);
+
+		expectModel(
+			'<table>' +
+			'<tableRow><tableCell>1</tableCell></tableRow>' +
+			'</table>'
+		);
+	} );
+
 	it( 'should create table model from table with one thead with one row', () => {
 		editor.setData(
 			'<table>' +

+ 140 - 133
packages/ckeditor5-table/tests/manual/table.html

@@ -7,142 +7,147 @@
 
 <div id="editor">
 	<p>Table with everything:</p>
-	<table>
-		<caption>Data about the planets of our solar system (Planetary facts taken from <a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa's Planetary Fact Sheet - Metric</a>.</caption>
-		<thead>
-		<tr>
-			<td colspan="2">&nbsp;</td>
-			<th scope="col">Name</th>
-			<th scope="col">Mass (10<sup>24</sup>kg)</th>
-			<th scope="col">Diameter (km)</th>
-			<th scope="col">Density (kg/m<sup>3</sup>)</th>
-			<th scope="col">Gravity (m/s<sup>2</sup>)</th>
-			<th scope="col">Length of day (hours)</th>
-			<th scope="col">Distance from Sun (10<sup>6</sup>km)</th>
-			<th scope="col">Mean temperature (°C)</th>
-			<th scope="col">Number of moons</th>
-			<th scope="col">Notes</th>
-		</tr>
-		</thead>
-		<tbody>
-		<tr>
-			<th colspan="2" rowspan="4" scope="rowgroup">Terrestrial planets</th>
-			<th scope="row">Mercury</th>
-			<td>0.330</td>
-			<td>4,879</td>
-			<td>5427</td>
-			<td>3.7</td>
-			<td>4222.6</td>
-			<td>57.9</td>
-			<td>167</td>
-			<td>0</td>
-			<td>Closest to the Sun</td>
-		</tr>
-		<tr>
-			<th scope="row">Venus</th>
-			<td>4.87</td>
-			<td>12,104</td>
-			<td>5243</td>
-			<td>8.9</td>
-			<td>2802.0</td>
-			<td>108.2</td>
-			<td>464</td>
-			<td>0</td>
-			<td>&nbsp;</td>
-		</tr>
-		<tr>
-			<th scope="row">Earth</th>
-			<td>5.97</td>
-			<td>12,756</td>
-			<td>5514</td>
-			<td>9.8</td>
-			<td>24.0</td>
-			<td>149.6</td>
-			<td>15</td>
-			<td>1</td>
-			<td>Our world</td>
-		</tr>
-		<tr>
-			<th scope="row">Mars</th>
-			<td>0.642</td>
-			<td>6,792</td>
-			<td>3933</td>
-			<td>3.7</td>
-			<td>24.7</td>
-			<td>227.9</td>
-			<td>-65</td>
-			<td>2</td>
-			<td>The red planet</td>
-		</tr>
-		<tr>
-			<th scope="rowgroup" rowspan="4">Jovian planets</th>
-			<th scope="rowgroup" rowspan="2">Gas giants</th>
-			<th scope="row">Jupiter</th>
-			<td>1898</td>
-			<td>142,984</td>
-			<td>1326</td>
-			<td>23.1</td>
-			<td>9.9</td>
-			<td>778.6</td>
-			<td>-110</td>
-			<td>67</td>
-			<td>The largest planet</td>
-		</tr>
-		<tr>
-			<th scope="row">Saturn</th>
-			<td>568</td>
-			<td>120,536</td>
-			<td>687</td>
-			<td>9.0</td>
-			<td>10.7</td>
-			<td>1433.5</td>
-			<td>-140</td>
-			<td>62</td>
-			<td>&nbsp;</td>
-		</tr>
-		<tr>
-			<th scope="rowgroup" rowspan="2">Ice giants</th>
-			<th scope="row">Uranus</th>
-			<td>86.8</td>
-			<td>51,118</td>
-			<td>1271</td>
-			<td>8.7</td>
-			<td>17.2</td>
-			<td>2872.5</td>
-			<td>-195</td>
-			<td>27</td>
-			<td>&nbsp;</td>
-		</tr>
-		<tr>
-			<th scope="row">Neptune</th>
-			<td>102</td>
-			<td>49,528</td>
-			<td>1638</td>
-			<td>11.0</td>
-			<td>16.1</td>
-			<td>4495.1</td>
-			<td>-200</td>
-			<td>14</td>
-			<td>&nbsp;</td>
-		</tr>
-		<tr>
-			<th colspan="2" scope="rowgroup">Dwarf planets</th>
-			<th scope="row">Pluto</th>
-			<td>0.0146</td>
-			<td>2,370</td>
-			<td>2095</td>
-			<td>0.7</td>
-			<td>153.3</td>
-			<td>5906.4</td>
-			<td>-225</td>
-			<td>5</td>
-			<td>Declassified as a planet in 2006, but this <a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">remains controversial</a>.</td>
-		</tr>
-		</tbody>
-	</table>
 
+	<figure>
+		<figcaption>Data about the planets of our solar system (Planetary facts taken from <a
+			href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa's Planetary Fact Sheet - Metric</a>.
+		</figcaption>
+		<table>
+			<thead>
+			<tr>
+				<td colspan="2">&nbsp;</td>
+				<th scope="col">Name</th>
+				<th scope="col">Mass (10<sup>24</sup>kg)</th>
+				<th scope="col">Diameter (km)</th>
+				<th scope="col">Density (kg/m<sup>3</sup>)</th>
+				<th scope="col">Gravity (m/s<sup>2</sup>)</th>
+				<th scope="col">Length of day (hours)</th>
+				<th scope="col">Distance from Sun (10<sup>6</sup>km)</th>
+				<th scope="col">Mean temperature (°C)</th>
+				<th scope="col">Number of moons</th>
+				<th scope="col">Notes</th>
+			</tr>
+			</thead>
+			<tbody>
+			<tr>
+				<th colspan="2" rowspan="4" scope="rowgroup">Terrestrial planets</th>
+				<th scope="row">Mercury</th>
+				<td>0.330</td>
+				<td>4,879</td>
+				<td>5427</td>
+				<td>3.7</td>
+				<td>4222.6</td>
+				<td>57.9</td>
+				<td>167</td>
+				<td>0</td>
+				<td>Closest to the Sun</td>
+			</tr>
+			<tr>
+				<th scope="row">Venus</th>
+				<td>4.87</td>
+				<td>12,104</td>
+				<td>5243</td>
+				<td>8.9</td>
+				<td>2802.0</td>
+				<td>108.2</td>
+				<td>464</td>
+				<td>0</td>
+				<td>&nbsp;</td>
+			</tr>
+			<tr>
+				<th scope="row">Earth</th>
+				<td>5.97</td>
+				<td>12,756</td>
+				<td>5514</td>
+				<td>9.8</td>
+				<td>24.0</td>
+				<td>149.6</td>
+				<td>15</td>
+				<td>1</td>
+				<td>Our world</td>
+			</tr>
+			<tr>
+				<th scope="row">Mars</th>
+				<td>0.642</td>
+				<td>6,792</td>
+				<td>3933</td>
+				<td>3.7</td>
+				<td>24.7</td>
+				<td>227.9</td>
+				<td>-65</td>
+				<td>2</td>
+				<td>The red planet</td>
+			</tr>
+			<tr>
+				<th scope="rowgroup" rowspan="4">Jovian planets</th>
+				<th scope="rowgroup" rowspan="2">Gas giants</th>
+				<th scope="row">Jupiter</th>
+				<td>1898</td>
+				<td>142,984</td>
+				<td>1326</td>
+				<td>23.1</td>
+				<td>9.9</td>
+				<td>778.6</td>
+				<td>-110</td>
+				<td>67</td>
+				<td>The largest planet</td>
+			</tr>
+			<tr>
+				<th scope="row">Saturn</th>
+				<td>568</td>
+				<td>120,536</td>
+				<td>687</td>
+				<td>9.0</td>
+				<td>10.7</td>
+				<td>1433.5</td>
+				<td>-140</td>
+				<td>62</td>
+				<td>&nbsp;</td>
+			</tr>
+			<tr>
+				<th scope="rowgroup" rowspan="2">Ice giants</th>
+				<th scope="row">Uranus</th>
+				<td>86.8</td>
+				<td>51,118</td>
+				<td>1271</td>
+				<td>8.7</td>
+				<td>17.2</td>
+				<td>2872.5</td>
+				<td>-195</td>
+				<td>27</td>
+				<td>&nbsp;</td>
+			</tr>
+			<tr>
+				<th scope="row">Neptune</th>
+				<td>102</td>
+				<td>49,528</td>
+				<td>1638</td>
+				<td>11.0</td>
+				<td>16.1</td>
+				<td>4495.1</td>
+				<td>-200</td>
+				<td>14</td>
+				<td>&nbsp;</td>
+			</tr>
+			<tr>
+				<th colspan="2" scope="rowgroup">Dwarf planets</th>
+				<th scope="row">Pluto</th>
+				<td>0.0146</td>
+				<td>2,370</td>
+				<td>2095</td>
+				<td>0.7</td>
+				<td>153.3</td>
+				<td>5906.4</td>
+				<td>-225</td>
+				<td>5</td>
+				<td>Declassified as a planet in 2006, but this <a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">remains controversial</a>.</td>
+			</tr>
+			</tbody>
+		</table>
+	</figure>
 
 	<p>Table with 2 tbody:</p>
+
 	<table>
 		<tbody>
 		<tr>
@@ -161,6 +166,7 @@
 	</table>
 
 	<p>Table with no tbody:</p>
+
 	<table>
 		<tr>
 			<td>a</td>
@@ -175,6 +181,7 @@
 	</table>
 
 	<p>Table with thead section between two tbody sections</p>
+
 	<table>
 		<tbody>
 		<tr>

+ 14 - 10
packages/ckeditor5-table/tests/tableediting.js

@@ -108,11 +108,13 @@ describe( 'TableEditing', () => {
 				setModelData( model, '<table><tableRow><tableCell>foo[]</tableCell></tableRow></table>' );
 
 				expect( editor.getData() ).to.equal(
-					'<table>' +
-					'<tbody>' +
-					'<tr><td>foo</td></tr>' +
-					'</tbody>' +
-					'</table>'
+					'<figure class="table">' +
+						'<table>' +
+							'<tbody>' +
+								'<tr><td>foo</td></tr>' +
+							'</tbody>' +
+						'</table>' +
+					'</figure>'
 				);
 			} );
 
@@ -120,11 +122,13 @@ describe( 'TableEditing', () => {
 				setModelData( model, '<table headingRows="1"><tableRow><tableCell>foo[]</tableCell></tableRow></table>' );
 
 				expect( editor.getData() ).to.equal(
-					'<table>' +
-					'<thead>' +
-					'<tr><th>foo</th></tr>' +
-					'</thead>' +
-					'</table>'
+					'<figure class="table">' +
+						'<table>' +
+							'<thead>' +
+								'<tr><th>foo</th></tr>' +
+							'</thead>' +
+						'</table>' +
+					'</figure>'
 				);
 			} );
 		} );

+ 21 - 18
packages/ckeditor5-table/theme/table.css

@@ -3,28 +3,31 @@
  * For licensing, see LICENSE.md.
  */
 
-.ck.ck-content table {
-	/* Give the table some air and center it horizontally */
+.ck-content .table {
+	/* Give the table widget some air and center it horizontally */
 	margin: 1em auto;
+	display: table;
 
-	/* The table cells should have slight borders */
-	border-collapse: collapse;
-	border-spacing: 0;
+	& table {
+		/* The table cells should have slight borders */
+		border-collapse: collapse;
+		border-spacing: 0;
 
-	/* 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%);
+		/* 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%);
 
-	& td,
-	& th {
-		min-width: 2em;
-		padding: .4em;
-		text-align: center;
-		border-color: hsl(0, 0%, 85%);
-	}
+		& td,
+		& th {
+			min-width: 2em;
+			padding: .4em;
+			text-align: center;
+			border-color: hsl(0, 0%, 85%);
+		}
 
-	& th {
-		font-weight: bold;
-		background: hsl(0, 0%, 98%);
+		& th {
+			font-weight: bold;
+			background: hsl(0, 0%, 98%);
+		}
 	}
 }

Неке датотеке нису приказане због велике количине промена