Kaynağa Gözat

PoC: Add render id to the view element itself.

Maciej Gołaszewski 5 yıl önce
ebeveyn
işleme
9bd831f381

+ 6 - 0
packages/ckeditor5-engine/src/view/element.js

@@ -17,6 +17,10 @@ import StylesMap from './stylesmap';
 
 // @if CK_DEBUG_ENGINE // const { convertMapToTags } = require( '../dev-utils/utils' );
 
+let renderId = 0;
+
+const getRenderId = () => renderId++;
+
 /**
  * View element.
  *
@@ -78,6 +82,8 @@ export default class Element extends Node {
 		 */
 		this._attrs = parseAttributes( attrs );
 
+		this._attrs.set( 'data-render-id', getRenderId() );
+
 		/**
 		 * Array of child nodes.
 		 *

+ 230 - 0
tests/manual/article.html

@@ -47,6 +47,236 @@
 			</div>
 		</div>
 	</div>
+	<figure class="table">
+		<table>
+			<thead>
+				<tr>
+					<th colspan="40"><p>foo bar baz</p></th>
+				</tr>
+				<tr>
+					<th colspan="40"><p>foo bar baz</p></th>
+				</tr>
+				<tr>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+				</tr>
+				<tr>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+					<th><p>foo bar baz</p></th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td colspan="40"><p>foo bar baz</p></td>
+				</tr>
+				<tr>
+					<td colspan="40"><p>foo bar baz</p></td>
+				</tr>
+				<tr>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+				</tr>
+				<tr>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+				</tr>
+				<tr>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+					<td><p>foo bar baz</p></td>
+				</tr>
+			</tbody>
+		</table>
+	</figure>
 </div>
 
 

+ 1 - 12
tests/manual/article.js

@@ -12,8 +12,6 @@ import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 const byClassName = className => element => element.hasClass( className );
 
 const getRandom = () => parseInt( Math.random() * 1000 );
-let renderId = 0;
-const getNextRenderId = () => renderId++;
 
 function mapMeta( editor ) {
 	return metaElement => {
@@ -243,7 +241,7 @@ function Box( editor ) {
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
-		plugins: [ ArticlePluginSet, Box, DecorateViewItems ],
+		plugins: [ ArticlePluginSet, Box ],
 		toolbar: [
 			'heading',
 			'|',
@@ -284,12 +282,3 @@ ClassicEditor
 	.catch( err => {
 		console.error( err.stack );
 	} );
-
-function DecorateViewItems( editor ) {
-	editor.conversion.for( 'downcast' ).add( dispatcher => dispatcher.on( 'insert', ( evt, data, conversionApi ) => {
-		if ( data.item.is( 'element' ) ) {
-			const viewItem = editor.editing.mapper.toViewElement( data.item );
-			conversionApi.writer.setAttribute( 'data-rendered-id', getNextRenderId(), viewItem );
-		}
-	}, { priority: 'lowest' } ) );
-}