Przeglądaj źródła

Fix: The output HTML should use <figure>.

Maciej Gołaszewski 7 lat temu
rodzic
commit
bd8081deda

+ 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;
+}

Plik diff jest za duży
+ 287 - 300
packages/ckeditor5-table/tests/converters/downcast.js


+ 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>'
 				);
 			} );
 		} );

Niektóre pliki nie zostały wyświetlone z powodu dużej ilości zmienionych plików