浏览代码

Merge pull request #6750 from ckeditor/i/6749

Internal (table): Updated table mocking tools to preserve cells' content. Closes #6749.
Maciej 5 年之前
父节点
当前提交
e87a95b76e

+ 22 - 22
packages/ckeditor5-table/tests/_utils-tests/table-ascii-art.js

@@ -44,7 +44,7 @@ describe( 'table ascii-art and model helpers', () => {
 		} );
 
 		it( 'should create proper ascii-art', () => {
-			const asciiArt = createTableAsciiArt( table );
+			const asciiArt = createTableAsciiArt( model, table );
 
 			expect( asciiArt ).to.equal( [
 				'+----+',
@@ -54,7 +54,7 @@ describe( 'table ascii-art and model helpers', () => {
 		} );
 
 		it( 'should create proper tableData', () => {
-			const modelData = prepareModelTableInput( table );
+			const modelData = prepareModelTableInput( model, table );
 			const modelDataString = prettyFormatModelTableInput( modelData );
 
 			expect( modelData ).to.deep.equal( tableData );
@@ -81,7 +81,7 @@ describe( 'table ascii-art and model helpers', () => {
 		} );
 
 		it( 'should create proper ascii-art', () => {
-			const asciiArt = createTableAsciiArt( table );
+			const asciiArt = createTableAsciiArt( model, table );
 
 			expect( asciiArt ).to.equal( [
 				'+----+----+',
@@ -91,7 +91,7 @@ describe( 'table ascii-art and model helpers', () => {
 		} );
 
 		it( 'should create proper tableData', () => {
-			const modelData = prepareModelTableInput( table );
+			const modelData = prepareModelTableInput( model, table );
 			const modelDataString = prettyFormatModelTableInput( modelData );
 
 			expect( modelData ).to.deep.equal( tableData );
@@ -119,7 +119,7 @@ describe( 'table ascii-art and model helpers', () => {
 		} );
 
 		it( 'should create proper ascii-art', () => {
-			const asciiArt = createTableAsciiArt( table );
+			const asciiArt = createTableAsciiArt( model, table );
 
 			expect( asciiArt ).to.equal( [
 				'+----+',
@@ -131,7 +131,7 @@ describe( 'table ascii-art and model helpers', () => {
 		} );
 
 		it( 'should create proper tableData', () => {
-			const modelData = prepareModelTableInput( table );
+			const modelData = prepareModelTableInput( model, table );
 			const modelDataString = prettyFormatModelTableInput( modelData );
 
 			expect( modelData ).to.deep.equal( tableData );
@@ -160,7 +160,7 @@ describe( 'table ascii-art and model helpers', () => {
 		} );
 
 		it( 'should create proper ascii-art', () => {
-			const asciiArt = createTableAsciiArt( table );
+			const asciiArt = createTableAsciiArt( model, table );
 
 			expect( asciiArt ).to.equal( [
 				'+----+----+',
@@ -172,7 +172,7 @@ describe( 'table ascii-art and model helpers', () => {
 		} );
 
 		it( 'should create proper tableData', () => {
-			const modelData = prepareModelTableInput( table );
+			const modelData = prepareModelTableInput( model, table );
 			const modelDataString = prettyFormatModelTableInput( modelData );
 
 			expect( modelData ).to.deep.equal( tableData );
@@ -203,7 +203,7 @@ describe( 'table ascii-art and model helpers', () => {
 		} );
 
 		it( 'should create proper ascii-art', () => {
-			const asciiArt = createTableAsciiArt( table );
+			const asciiArt = createTableAsciiArt( model, table );
 
 			expect( asciiArt ).to.equal( [
 				'+----+----+----+----+',
@@ -219,7 +219,7 @@ describe( 'table ascii-art and model helpers', () => {
 		} );
 
 		it( 'should create proper tableData', () => {
-			const modelData = prepareModelTableInput( table );
+			const modelData = prepareModelTableInput( model, table );
 			const modelDataString = prettyFormatModelTableInput( modelData );
 
 			expect( modelData ).to.deep.equal( tableData );
@@ -253,7 +253,7 @@ describe( 'table ascii-art and model helpers', () => {
 		} );
 
 		it( 'should create proper ascii-art', () => {
-			const asciiArt = createTableAsciiArt( table );
+			const asciiArt = createTableAsciiArt( model, table );
 
 			expect( asciiArt ).to.equal( [
 				'+----+----+----+----+',
@@ -271,7 +271,7 @@ describe( 'table ascii-art and model helpers', () => {
 		} );
 
 		it( 'should create proper tableData', () => {
-			const modelData = prepareModelTableInput( table );
+			const modelData = prepareModelTableInput( model, table );
 			const modelDataString = prettyFormatModelTableInput( modelData );
 
 			expect( modelData ).to.deep.equal( tableData );
@@ -293,8 +293,8 @@ describe( 'table ascii-art and model helpers', () => {
 
 		beforeEach( () => {
 			tableData = [
-				[ 'x', 'x' ],
-				[ 'x', 'x' ]
+				[ '', 'x' ],
+				[ '10', 'foobar' ]
 			];
 
 			setModelData( model, modelTable( tableData ) );
@@ -303,32 +303,32 @@ describe( 'table ascii-art and model helpers', () => {
 		} );
 
 		it( 'should create proper ascii-art', () => {
-			const asciiArt = createTableAsciiArt( table );
+			const asciiArt = createTableAsciiArt( model, table );
 
 			expect( asciiArt ).to.equal( [
 				'+----+----+',
-				'| 00 | 01 |',
+				'|    | x  |',
 				'+----+----+',
-				'| 10 | 11 |',
+				'| 10 | fo |',
 				'+----+----+'
 			].join( '\n' ) );
 		} );
 
 		it( 'should create proper tableData', () => {
-			const modelData = prepareModelTableInput( table );
+			const modelData = prepareModelTableInput( model, table );
 			const modelDataString = prettyFormatModelTableInput( modelData );
 
 			tableData = [
-				[ '00', '01' ],
-				[ '10', '11' ]
+				[ '', 'x' ],
+				[ '10', 'foobar' ]
 			];
 
 			expect( modelData ).to.deep.equal( tableData );
 
 			assertSameCodeString( modelDataString,
 				`[
-					[ '00', '01' ],
-					[ '10', '11' ]
+					[ '', 'x' ],
+					[ '10', 'foobar' ]
 				]`
 			);
 		} );

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

@@ -493,10 +493,11 @@ function getClassToSet( attributes ) {
 /**
  * Returns ascii-art visualization of the table.
  *
+ * @param {module:engine/model/model~Model} model The editor model.
  * @param {module:engine/model/element~Element} table The table model element.
  * @returns {String}
  */
-export function createTableAsciiArt( table ) {
+export function createTableAsciiArt( model, table ) {
 	const tableMap = [ ...new TableWalker( table, { includeSpanned: true } ) ];
 
 	const { row: lastRow, column: lastColumn } = tableMap[ tableMap.length - 1 ];
@@ -525,8 +526,11 @@ export function createTableAsciiArt( table ) {
 			gridLine += !cellInfo.isColSpan || !cellInfo.isRowSpan ? '+' : ' ';
 			gridLine += !cellInfo.isRowSpan ? '----' : '    ';
 
+			let contents = getElementPlainText( model, cellInfo.cell ).substring( 0, 2 );
+			contents += ' '.repeat( 2 - contents.length );
+
 			contentLine += !cellInfo.isColSpan ? '|' : ' ';
-			contentLine += !cellInfo.isColSpan && !cellInfo.isRowSpan ? ` ${ cellInfo.row }${ cellInfo.column } ` : '    ';
+			contentLine += !cellInfo.isColSpan && !cellInfo.isRowSpan ? ` ${ contents } ` : '    ';
 
 			if ( column == lastColumn ) {
 				gridLine += '+';
@@ -547,10 +551,11 @@ export function createTableAsciiArt( table ) {
 /**
  * Generates input data for `modelTable` helper method.
  *
+ * @param {module:engine/model/model~Model} model The editor model.
  * @param {module:engine/model/element~Element} table The table model element.
  * @returns {Array.<Array.<String|Object>>}
  */
-export function prepareModelTableInput( table ) {
+export function prepareModelTableInput( model, table ) {
 	const result = [];
 	let row = [];
 
@@ -564,7 +569,7 @@ export function prepareModelTableInput( table ) {
 			continue;
 		}
 
-		const contents = `${ cellInfo.row }${ cellInfo.column }`;
+		const contents = getElementPlainText( model, cellInfo.cell );
 
 		if ( cellInfo.colspan > 1 || cellInfo.rowspan > 1 ) {
 			row.push( {
@@ -607,3 +612,11 @@ export function prettyFormatModelTableInput( data ) {
 
 	return `[\n${ rowsStringified.join( ',\n' ) }\n]`;
 }
+
+// Returns all the text content from element.
+function getElementPlainText( model, element ) {
+	return [ ...model.createRangeIn( element ).getWalker() ]
+		.filter( ( { type } ) => type == 'text' )
+		.map( ( { item: { data } } ) => data )
+		.join( '' );
+}

+ 1 - 0
packages/ckeditor5-table/tests/manual/tablemocking.html

@@ -42,6 +42,7 @@
 	<button type="button" id="clear-content">Clear editor</button>
 	<button type="button" id="set-model-data">↓ Set model data ↓</button>
 	<button type="button" id="get-model-data">↑ Get model data ↑</button>
+	<button type="button" id="renumber-cells">Renumber cells</button>
 
 	<span id="input-status"></span>
 </div>

+ 21 - 3
packages/ckeditor5-table/tests/manual/tablemocking.js

@@ -12,6 +12,7 @@ import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-util
 
 import { diffString } from 'json-diff';
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import TableWalker from '../../src/tablewalker';
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
@@ -44,7 +45,24 @@ ClassicEditor
 			updateInputStatus();
 
 			const table = findTable( editor );
-			modelData.value = table ? prettyFormatModelTableInput( prepareModelTableInput( table ) ) : '';
+			modelData.value = table ? prettyFormatModelTableInput( prepareModelTableInput( editor.model, table ) ) : '';
+
+			updateAsciiAndDiff();
+		} );
+
+		document.getElementById( 'renumber-cells' ).addEventListener( 'click', () => {
+			const table = findTable( editor );
+
+			if ( !table ) {
+				return;
+			}
+
+			editor.model.change( writer => {
+				for ( const { row, column, cell } of new TableWalker( table ) ) {
+					const selection = editor.model.createSelection( cell, 'in' );
+					editor.model.insertContent( writer.createText( `${ row }${ column }` ), selection );
+				}
+			} );
 
 			updateAsciiAndDiff();
 		} );
@@ -61,7 +79,7 @@ ClassicEditor
 			}
 
 			const inputModelData = parseModelData( modelData.value );
-			const currentModelData = prepareModelTableInput( table );
+			const currentModelData = prepareModelTableInput( editor.model, table );
 
 			const diffOutput = inputModelData ? diffString( inputModelData, currentModelData, {
 				theme: {
@@ -71,7 +89,7 @@ ClassicEditor
 				}
 			} ) : '-- no input --';
 
-			asciiOut.innerHTML = createTableAsciiArt( table ) + '\n\n' +
+			asciiOut.innerHTML = createTableAsciiArt( editor.model, table ) + '\n\n' +
 				'Diff: input vs post-fixed model:\n' + ( diffOutput ? diffOutput : '-- no differences --' );
 		}