Przeglądaj źródła

Restore highlight tests.

Maciej Gołaszewski 7 lat temu
rodzic
commit
a246f49026

+ 432 - 388
packages/ckeditor5-engine/tests/conversion/downcasthelpers.js

@@ -27,14 +27,16 @@ import DowncastHelpers, {
 import { stringify } from '../../src/dev-utils/view';
 
 describe( 'DowncastHelpers', () => {
-	let conversion, model, modelRoot, viewRoot, downcastHelpers;
+	let conversion, model, modelRoot, viewRoot, downcastHelpers, controller;
+
+	let modelRootStart;
 
 	beforeEach( () => {
 		model = new Model();
 		const modelDoc = model.document;
 		modelRoot = modelDoc.createRoot();
 
-		const controller = new EditingController( model );
+		controller = new EditingController( model );
 
 		// Set name of view root the same as dom root.
 		// This is a mock of attaching view root to dom root.
@@ -46,6 +48,8 @@ describe( 'DowncastHelpers', () => {
 
 		conversion = new Conversion();
 		conversion.register( 'downcast', downcastHelpers );
+
+		modelRootStart = model.createPositionAt( modelRoot, 0 );
 	} );
 
 	describe( 'elementToElement()', () => {
@@ -612,11 +616,437 @@ describe( 'DowncastHelpers', () => {
 
 			expectResult( '<span class="comment comment-abc">foo</span>' );
 		} );
+
+		describe( 'highlight', () => {
+			const highlightConfig = {
+				model: 'marker',
+				view: {
+					classes: 'highlight-class',
+					attributes: { title: 'title' }
+				},
+				converterPriority: 7
+			};
+
+			describe( 'on text', () => {
+				let markerRange;
+
+				beforeEach( () => {
+					downcastHelpers.elementToElement( { model: 'paragraph', view: 'p' } );
+
+					const modelElement1 = new ModelElement( 'paragraph', null, new ModelText( 'foo' ) );
+					const modelElement2 = new ModelElement( 'paragraph', null, new ModelText( 'bar' ) );
+
+					model.change( writer => {
+						writer.insert( [ modelElement1, modelElement2 ], modelRootStart );
+					} );
+
+					markerRange = model.createRangeIn( modelRoot );
+				} );
+
+				it( 'should wrap and unwrap text nodes', () => {
+					downcastHelpers.markerToHighlight( highlightConfig );
+
+					model.change( writer => {
+						writer.addMarker( 'marker', { range: markerRange, usingOperation: false } );
+					} );
+
+					expect( viewToString( viewRoot ) ).to.equal(
+						'<div>' +
+						'<p>' +
+						'<span class="highlight-class" title="title">foo</span>' +
+						'</p>' +
+						'<p>' +
+						'<span class="highlight-class" title="title">bar</span>' +
+						'</p>' +
+						'</div>'
+					);
+
+					model.change( writer => {
+						writer.removeMarker( 'marker' );
+					} );
+
+					expect( viewToString( viewRoot ) ).to.equal( '<div><p>foo</p><p>bar</p></div>' );
+				} );
+
+				it( 'should be possible to overwrite', () => {
+					downcastHelpers.markerToHighlight( highlightConfig );
+					downcastHelpers.markerToHighlight( {
+						model: 'marker',
+						view: { classes: 'override-class' },
+						converterPriority: 'high'
+					} );
+
+					model.change( writer => {
+						writer.addMarker( 'marker', { range: markerRange, usingOperation: false } );
+					} );
+
+					expect( viewToString( viewRoot ) ).to.equal(
+						'<div>' +
+						'<p>' +
+						'<span class="override-class">foo</span>' +
+						'</p>' +
+						'<p>' +
+						'<span class="override-class">bar</span>' +
+						'</p>' +
+						'</div>'
+					);
+
+					model.change( writer => {
+						writer.removeMarker( 'marker' );
+					} );
+
+					expect( viewToString( viewRoot ) ).to.equal( '<div><p>foo</p><p>bar</p></div>' );
+				} );
+
+				it( 'should do nothing if descriptor is not provided or generating function returns null', () => {
+					downcastHelpers.markerToHighlight( {
+						model: 'marker',
+						view: () => null,
+						converterPriority: 'high'
+					} );
+
+					model.change( writer => {
+						writer.addMarker( 'marker', { range: markerRange, usingOperation: false } );
+					} );
+
+					expect( viewToString( viewRoot ) ).to.equal( '<div><p>foo</p><p>bar</p></div>' );
+
+					model.change( writer => {
+						writer.removeMarker( 'marker' );
+					} );
+
+					expect( viewToString( viewRoot ) ).to.equal( '<div><p>foo</p><p>bar</p></div>' );
+				} );
+
+				it( 'should do nothing if collapsed marker is converted', () => {
+					downcastHelpers.markerToHighlight( {
+						model: 'marker',
+						view: { classes: 'foo' },
+						converterPriority: 'high'
+					} );
+
+					markerRange = model.createRange( model.createPositionAt( modelRoot, 0 ), model.createPositionAt( modelRoot, 0 ) );
+
+					model.change( writer => {
+						writer.addMarker( 'marker', { range: markerRange, usingOperation: false } );
+					} );
+
+					expect( viewToString( viewRoot ) ).to.equal( '<div><p>foo</p><p>bar</p></div>' );
+
+					model.change( () => {
+						model.markers._remove( 'marker' );
+					} );
+
+					expect( viewToString( viewRoot ) ).to.equal( '<div><p>foo</p><p>bar</p></div>' );
+				} );
+
+				it( 'should correctly wrap and unwrap multiple, intersecting markers', () => {
+					downcastHelpers.markerToHighlight( {
+						model: 'markerFoo',
+						view: { classes: 'foo' }
+					} );
+					downcastHelpers.markerToHighlight( {
+						model: 'markerBar',
+						view: { classes: 'bar' }
+					} );
+					downcastHelpers.markerToHighlight( {
+						model: 'markerXyz',
+						view: { classes: 'xyz' }
+					} );
+
+					const p1 = modelRoot.getChild( 0 );
+					const p2 = modelRoot.getChild( 1 );
+
+					model.change( writer => {
+						const range = writer.createRange( writer.createPositionAt( p1, 0 ), writer.createPositionAt( p1, 3 ) );
+						writer.addMarker( 'markerFoo', { range, usingOperation: false } );
+					} );
+
+					expect( viewToString( viewRoot ) ).to.equal(
+						'<div>' +
+						'<p>' +
+						'<span class="foo">foo</span>' +
+						'</p>' +
+						'<p>bar</p>' +
+						'</div>'
+					);
+
+					model.change( writer => {
+						const range = writer.createRange( writer.createPositionAt( p1, 1 ), writer.createPositionAt( p2, 2 ) );
+						writer.addMarker( 'markerBar', { range, usingOperation: false } );
+					} );
+
+					expect( viewToString( viewRoot ) ).to.equal(
+						'<div>' +
+						'<p>' +
+						'<span class="foo">f</span>' +
+						'<span class="bar">' +
+						'<span class="foo">oo</span>' +
+						'</span>' +
+						'</p>' +
+						'<p>' +
+						'<span class="bar">ba</span>' +
+						'r' +
+						'</p>' +
+						'</div>'
+					);
+
+					model.change( writer => {
+						const range = writer.createRange( writer.createPositionAt( p1, 2 ), writer.createPositionAt( p2, 3 ) );
+						writer.addMarker( 'markerXyz', { range, usingOperation: false } );
+					} );
+
+					expect( viewToString( viewRoot ) ).to.equal(
+						'<div>' +
+						'<p>' +
+						'<span class="foo">f</span>' +
+						'<span class="bar">' +
+						'<span class="foo">' +
+						'o' +
+						'<span class="xyz">o</span>' +
+						'</span>' +
+						'</span>' +
+						'</p>' +
+						'<p>' +
+						'<span class="bar">' +
+						'<span class="xyz">ba</span>' +
+						'</span>' +
+						'<span class="xyz">r</span>' +
+						'</p>' +
+						'</div>'
+					);
+
+					model.change( writer => {
+						writer.removeMarker( 'markerBar' );
+					} );
+
+					expect( viewToString( viewRoot ) ).to.equal(
+						'<div>' +
+						'<p>' +
+						'<span class="foo">' +
+						'fo' +
+						'<span class="xyz">o</span>' +
+						'</span>' +
+						'</p>' +
+						'<p>' +
+						'<span class="xyz">bar</span>' +
+						'</p>' +
+						'</div>'
+					);
+
+					model.change( writer => {
+						writer.removeMarker( 'markerFoo' );
+					} );
+
+					expect( viewToString( viewRoot ) ).to.equal(
+						'<div>' +
+						'<p>' +
+						'fo' +
+						'<span class="xyz">o</span>' +
+						'</p>' +
+						'<p>' +
+						'<span class="xyz">bar</span>' +
+						'</p>' +
+						'</div>'
+					);
+
+					model.change( writer => {
+						writer.removeMarker( 'markerXyz' );
+					} );
+
+					expect( viewToString( viewRoot ) ).to.equal( '<div><p>foo</p><p>bar</p></div>' );
+				} );
+
+				it( 'should do nothing if marker is applied and removed on empty-ish range', () => {
+					downcastHelpers.markerToHighlight( highlightConfig );
+
+					const p1 = modelRoot.getChild( 0 );
+					const p2 = modelRoot.getChild( 1 );
+
+					const markerRange = model.createRange( model.createPositionAt( p1, 3 ), model.createPositionAt( p2, 0 ) );
+
+					model.change( writer => {
+						writer.addMarker( 'marker', { range: markerRange, usingOperation: false } );
+					} );
+
+					expect( viewToString( viewRoot ) ).to.equal( '<div><p>foo</p><p>bar</p></div>' );
+
+					model.change( writer => {
+						writer.removeMarker( 'marker', { range: markerRange, usingOperation: false } );
+					} );
+
+					expect( viewToString( viewRoot ) ).to.equal( '<div><p>foo</p><p>bar</p></div>' );
+				} );
+			} );
+
+			describe( 'on element', () => {
+				const highlightConfig = {
+					model: 'marker',
+					view: {
+						classes: 'highlight-class',
+						attributes: { title: 'title' },
+						id: 'customId'
+					},
+					converterPriority: 7
+				};
+
+				let markerRange;
+
+				beforeEach( () => {
+					downcastHelpers.elementToElement( {
+						model: 'div',
+						view: () => {
+							const viewContainer = new ViewContainerElement( 'div' );
+
+							viewContainer._setCustomProperty( 'addHighlight', ( element, descriptor, writer ) => {
+								writer.addClass( descriptor.classes, element );
+							} );
+
+							viewContainer._setCustomProperty( 'removeHighlight', ( element, id, writer ) => {
+								writer.setAttribute( 'class', '', element );
+							} );
+
+							return viewContainer;
+						}
+					} );
+
+					const modelElement = new ModelElement( 'div', null, new ModelText( 'foo' ) );
+
+					model.change( writer => {
+						writer.insert( modelElement, modelRootStart );
+					} );
+
+					markerRange = model.createRangeOn( modelElement );
+
+					downcastHelpers.markerToHighlight( highlightConfig );
+				} );
+
+				it( 'should use addHighlight and removeHighlight on elements and not convert children nodes', () => {
+					model.change( writer => {
+						writer.addMarker( 'marker', { range: markerRange, usingOperation: false } );
+					} );
+
+					expect( viewToString( viewRoot ) ).to.equal(
+						'<div>' +
+						'<div class="highlight-class">' +
+						'foo' +
+						'</div>' +
+						'</div>'
+					);
+
+					model.change( writer => {
+						writer.removeMarker( 'marker' );
+					} );
+
+					expect( viewToString( viewRoot ) ).to.equal( '<div><div>foo</div></div>' );
+				} );
+
+				it( 'should be possible to override', () => {
+					downcastHelpers.markerToHighlight( {
+						model: 'marker',
+						view: { classes: 'override-class' },
+						converterPriority: 'high'
+					} );
+
+					model.change( writer => {
+						writer.addMarker( 'marker', { range: markerRange, usingOperation: false } );
+					} );
+
+					expect( viewToString( viewRoot ) ).to.equal(
+						'<div>' +
+						'<div class="override-class">' +
+						'foo' +
+						'</div>' +
+						'</div>'
+					);
+
+					model.change( writer => {
+						writer.removeMarker( 'marker' );
+					} );
+
+					expect( viewToString( viewRoot ) ).to.equal( '<div><div>foo</div></div>' );
+				} );
+
+				it( 'should use default priority and id if not provided', () => {
+					const viewDiv = viewRoot.getChild( 0 );
+					downcastHelpers.markerToHighlight( {
+						model: 'marker2',
+						view: () => null,
+						converterPriority: 'high'
+					} );
+
+					viewDiv._setCustomProperty( 'addHighlight', ( element, descriptor ) => {
+						expect( descriptor.priority ).to.equal( ViewAttributeElement.DEFAULT_PRIORITY );
+						expect( descriptor.id ).to.equal( 'marker:foo-bar-baz' );
+					} );
+
+					viewDiv._setCustomProperty( 'removeHighlight', ( element, id ) => {
+						expect( id ).to.equal( 'marker:foo-bar-baz' );
+					} );
+
+					model.change( writer => {
+						writer.addMarker( 'marker2', { range: markerRange, usingOperation: false } );
+					} );
+				} );
+
+				it( 'should do nothing if descriptor is not provided', () => {
+					downcastHelpers.markerToHighlight( {
+						model: 'marker2',
+						view: () => null
+					} );
+
+					model.change( writer => {
+						writer.addMarker( 'marker2', { range: markerRange, usingOperation: false } );
+					} );
+
+					expect( viewToString( viewRoot ) ).to.equal( '<div><div>foo</div></div>' );
+
+					model.change( writer => {
+						writer.removeMarker( 'marker2' );
+					} );
+
+					expect( viewToString( viewRoot ) ).to.equal( '<div><div>foo</div></div>' );
+				} );
+			} );
+		} );
 	} );
 
 	function expectResult( string ) {
 		expect( stringify( viewRoot, null, { ignoreRoot: true } ) ).to.equal( string );
 	}
+
+	function viewAttributesToString( item ) {
+		let result = '';
+
+		for ( const key of item.getAttributeKeys() ) {
+			const value = item.getAttribute( key );
+
+			if ( value ) {
+				result += ' ' + key + '="' + value + '"';
+			}
+		}
+
+		return result;
+	}
+
+	function viewToString( item ) {
+		let result = '';
+
+		if ( item instanceof ViewText ) {
+			result = item.data;
+		} else {
+			// ViewElement or ViewDocumentFragment.
+			for ( const child of item.getChildren() ) {
+				result += viewToString( child );
+			}
+
+			if ( item instanceof ViewElement ) {
+				result = '<' + item.name + viewAttributesToString( item ) + '>' + result + '</' + item.name + '>';
+			}
+		}
+
+		return result;
+	}
 } );
 
 describe( 'downcast-converters', () => {
@@ -1307,392 +1737,6 @@ describe( 'downcast-converters', () => {
 		} );
 	} );
 
-	// describe( 'highlight', () => {
-	// 	describe( 'on text', () => {
-	// 		const highlightDescriptor = {
-	// 			classes: 'highlight-class',
-	// 			priority: 7,
-	// 			attributes: { title: 'title' }
-	// 		};
-	//
-	// 		let markerRange;
-	//
-	// 		beforeEach( () => {
-	// 			const modelElement1 = new ModelElement( 'paragraph', null, new ModelText( 'foo' ) );
-	// 			const modelElement2 = new ModelElement( 'paragraph', null, new ModelText( 'bar' ) );
-	//
-	// 			model.change( writer => {
-	// 				writer.insert( [ modelElement1, modelElement2 ], modelRootStart );
-	// 			} );
-	//
-	// 			markerRange = model.createRangeIn( modelRoot );
-	// 		} );
-	//
-	// 		it( 'should wrap and unwrap text nodes', () => {
-	// 			dispatcher.on( 'addMarker:marker', highlightText( highlightDescriptor ) );
-	// 			dispatcher.on( 'addMarker:marker', highlightElement( highlightDescriptor ) );
-	// 			dispatcher.on( 'removeMarker:marker', removeHighlight( highlightDescriptor ) );
-	//
-	// 			model.change( writer => {
-	// 				writer.addMarker( 'marker', { range: markerRange, usingOperation: false } );
-	// 			} );
-	//
-	// 			expect( viewToString( viewRoot ) ).to.equal(
-	// 				'<div>' +
-	// 				'<p>' +
-	// 				'<span class="highlight-class" title="title">foo</span>' +
-	// 				'</p>' +
-	// 				'<p>' +
-	// 				'<span class="highlight-class" title="title">bar</span>' +
-	// 				'</p>' +
-	// 				'</div>'
-	// 			);
-	//
-	// 			model.change( writer => {
-	// 				writer.removeMarker( 'marker' );
-	// 			} );
-	//
-	// 			expect( viewToString( viewRoot ) ).to.equal( '<div><p>foo</p><p>bar</p></div>' );
-	// 		} );
-	//
-	// 		it( 'should be possible to overwrite', () => {
-	// 			dispatcher.on( 'addMarker:marker', highlightText( highlightDescriptor ) );
-	// 			dispatcher.on( 'addMarker:marker', highlightElement( highlightDescriptor ) );
-	// 			dispatcher.on( 'removeMarker:marker', removeHighlight( highlightDescriptor ) );
-	//
-	// 			const newDescriptor = { classes: 'override-class' };
-	//
-	// 			dispatcher.on( 'addMarker:marker', highlightText( newDescriptor ), { priority: 'high' } );
-	// 			dispatcher.on( 'addMarker:marker', highlightElement( newDescriptor ), { priority: 'high' } );
-	// 			dispatcher.on( 'removeMarker:marker', removeHighlight( newDescriptor ), { priority: 'high' } );
-	//
-	// 			model.change( writer => {
-	// 				writer.addMarker( 'marker', { range: markerRange, usingOperation: false } );
-	// 			} );
-	//
-	// 			expect( viewToString( viewRoot ) ).to.equal(
-	// 				'<div>' +
-	// 				'<p>' +
-	// 				'<span class="override-class">foo</span>' +
-	// 				'</p>' +
-	// 				'<p>' +
-	// 				'<span class="override-class">bar</span>' +
-	// 				'</p>' +
-	// 				'</div>'
-	// 			);
-	//
-	// 			model.change( writer => {
-	// 				writer.removeMarker( 'marker' );
-	// 			} );
-	//
-	// 			expect( viewToString( viewRoot ) ).to.equal( '<div><p>foo</p><p>bar</p></div>' );
-	// 		} );
-	//
-	// 		it( 'should do nothing if descriptor is not provided or generating function returns null', () => {
-	// 			dispatcher.on( 'addMarker:marker', highlightText( () => null ), { priority: 'high' } );
-	// 			dispatcher.on( 'addMarker:marker', highlightElement( () => null ), { priority: 'high' } );
-	// 			dispatcher.on( 'removeMarker:marker', removeHighlight( () => null ), { priority: 'high' } );
-	//
-	// 			model.change( writer => {
-	// 				writer.addMarker( 'marker', { range: markerRange, usingOperation: false } );
-	// 			} );
-	//
-	// 			expect( viewToString( viewRoot ) ).to.equal( '<div><p>foo</p><p>bar</p></div>' );
-	//
-	// 			model.change( writer => {
-	// 				writer.removeMarker( 'marker' );
-	// 			} );
-	//
-	// 			expect( viewToString( viewRoot ) ).to.equal( '<div><p>foo</p><p>bar</p></div>' );
-	// 		} );
-	//
-	// 		it( 'should do nothing if collapsed marker is converted', () => {
-	// 			const descriptor = { classes: 'foo' };
-	//
-	// 			dispatcher.on( 'addMarker:marker', highlightText( descriptor ), { priority: 'high' } );
-	// 			dispatcher.on( 'addMarker:marker', highlightElement( descriptor ), { priority: 'high' } );
-	// 			dispatcher.on( 'removeMarker:marker', removeHighlight( descriptor ), { priority: 'high' } );
-	//
-	// 			markerRange = model.createRange( model.createPositionAt( modelRoot, 0 ), model.createPositionAt( modelRoot, 0 ) );
-	//
-	// 			model.change( writer => {
-	// 				writer.addMarker( 'marker', { range: markerRange, usingOperation: false } );
-	// 			} );
-	//
-	// 			expect( viewToString( viewRoot ) ).to.equal( '<div><p>foo</p><p>bar</p></div>' );
-	//
-	// 			model.change( () => {
-	// 				model.markers._remove( 'marker' );
-	// 			} );
-	//
-	// 			expect( viewToString( viewRoot ) ).to.equal( '<div><p>foo</p><p>bar</p></div>' );
-	// 		} );
-	//
-	// 		it( 'should correctly wrap and unwrap multiple, intersecting markers', () => {
-	// 			const descriptorFoo = { classes: 'foo' };
-	// 			const descriptorBar = { classes: 'bar' };
-	// 			const descriptorXyz = { classes: 'xyz' };
-	//
-	// 			dispatcher.on( 'addMarker:markerFoo', highlightText( descriptorFoo ) );
-	// 			dispatcher.on( 'addMarker:markerBar', highlightText( descriptorBar ) );
-	// 			dispatcher.on( 'addMarker:markerXyz', highlightText( descriptorXyz ) );
-	//
-	// 			dispatcher.on( 'removeMarker:markerFoo', removeHighlight( descriptorFoo ) );
-	// 			dispatcher.on( 'removeMarker:markerBar', removeHighlight( descriptorBar ) );
-	// 			dispatcher.on( 'removeMarker:markerXyz', removeHighlight( descriptorXyz ) );
-	//
-	// 			const p1 = modelRoot.getChild( 0 );
-	// 			const p2 = modelRoot.getChild( 1 );
-	//
-	// 			model.change( writer => {
-	// 				const range = writer.createRange( writer.createPositionAt( p1, 0 ), writer.createPositionAt( p1, 3 ) );
-	// 				writer.addMarker( 'markerFoo', { range, usingOperation: false } );
-	// 			} );
-	//
-	// 			expect( viewToString( viewRoot ) ).to.equal(
-	// 				'<div>' +
-	// 				'<p>' +
-	// 				'<span class="foo">foo</span>' +
-	// 				'</p>' +
-	// 				'<p>bar</p>' +
-	// 				'</div>'
-	// 			);
-	//
-	// 			model.change( writer => {
-	// 				const range = writer.createRange( writer.createPositionAt( p1, 1 ), writer.createPositionAt( p2, 2 ) );
-	// 				writer.addMarker( 'markerBar', { range, usingOperation: false } );
-	// 			} );
-	//
-	// 			expect( viewToString( viewRoot ) ).to.equal(
-	// 				'<div>' +
-	// 				'<p>' +
-	// 				'<span class="foo">f</span>' +
-	// 				'<span class="bar">' +
-	// 				'<span class="foo">oo</span>' +
-	// 				'</span>' +
-	// 				'</p>' +
-	// 				'<p>' +
-	// 				'<span class="bar">ba</span>' +
-	// 				'r' +
-	// 				'</p>' +
-	// 				'</div>'
-	// 			);
-	//
-	// 			model.change( writer => {
-	// 				const range = writer.createRange( writer.createPositionAt( p1, 2 ), writer.createPositionAt( p2, 3 ) );
-	// 				writer.addMarker( 'markerXyz', { range, usingOperation: false } );
-	// 			} );
-	//
-	// 			expect( viewToString( viewRoot ) ).to.equal(
-	// 				'<div>' +
-	// 				'<p>' +
-	// 				'<span class="foo">f</span>' +
-	// 				'<span class="bar">' +
-	// 				'<span class="foo">' +
-	// 				'o' +
-	// 				'<span class="xyz">o</span>' +
-	// 				'</span>' +
-	// 				'</span>' +
-	// 				'</p>' +
-	// 				'<p>' +
-	// 				'<span class="bar">' +
-	// 				'<span class="xyz">ba</span>' +
-	// 				'</span>' +
-	// 				'<span class="xyz">r</span>' +
-	// 				'</p>' +
-	// 				'</div>'
-	// 			);
-	//
-	// 			model.change( writer => {
-	// 				writer.removeMarker( 'markerBar' );
-	// 			} );
-	//
-	// 			expect( viewToString( viewRoot ) ).to.equal(
-	// 				'<div>' +
-	// 				'<p>' +
-	// 				'<span class="foo">' +
-	// 				'fo' +
-	// 				'<span class="xyz">o</span>' +
-	// 				'</span>' +
-	// 				'</p>' +
-	// 				'<p>' +
-	// 				'<span class="xyz">bar</span>' +
-	// 				'</p>' +
-	// 				'</div>'
-	// 			);
-	//
-	// 			model.change( writer => {
-	// 				writer.removeMarker( 'markerFoo' );
-	// 			} );
-	//
-	// 			expect( viewToString( viewRoot ) ).to.equal(
-	// 				'<div>' +
-	// 				'<p>' +
-	// 				'fo' +
-	// 				'<span class="xyz">o</span>' +
-	// 				'</p>' +
-	// 				'<p>' +
-	// 				'<span class="xyz">bar</span>' +
-	// 				'</p>' +
-	// 				'</div>'
-	// 			);
-	//
-	// 			model.change( writer => {
-	// 				writer.removeMarker( 'markerXyz' );
-	// 			} );
-	//
-	// 			expect( viewToString( viewRoot ) ).to.equal( '<div><p>foo</p><p>bar</p></div>' );
-	// 		} );
-	//
-	// 		it( 'should do nothing if marker is applied and removed on empty-ish range', () => {
-	// 			dispatcher.on( 'addMarker:marker', highlightText( highlightDescriptor ) );
-	// 			dispatcher.on( 'removeMarker:marker', removeHighlight( highlightDescriptor ) );
-	//
-	// 			const p1 = modelRoot.getChild( 0 );
-	// 			const p2 = modelRoot.getChild( 1 );
-	//
-	// 			const markerRange = model.createRange( model.createPositionAt( p1, 3 ), model.createPositionAt( p2, 0 ) );
-	//
-	// 			model.change( writer => {
-	// 				writer.addMarker( 'marker', { range: markerRange, usingOperation: false } );
-	// 			} );
-	//
-	// 			expect( viewToString( viewRoot ) ).to.equal( '<div><p>foo</p><p>bar</p></div>' );
-	//
-	// 			model.change( writer => {
-	// 				writer.removeMarker( 'marker', { range: markerRange, usingOperation: false } );
-	// 			} );
-	//
-	// 			expect( viewToString( viewRoot ) ).to.equal( '<div><p>foo</p><p>bar</p></div>' );
-	// 		} );
-	// 	} );
-	//
-	// 	describe( 'on element', () => {
-	// 		const highlightDescriptor = {
-	// 			classes: 'highlight-class',
-	// 			priority: 7,
-	// 			attributes: { title: 'title' },
-	// 			id: 'customId'
-	// 		};
-	//
-	// 		let markerRange;
-	//
-	// 		beforeEach( () => {
-	// 			// Provide converter for div element. View div element will have custom highlight handling.
-	// 			dispatcher.on( 'insert:div', insertElement( () => {
-	// 				const viewContainer = new ViewContainerElement( 'div' );
-	//
-	// 				viewContainer._setCustomProperty( 'addHighlight', ( element, descriptor, writer ) => {
-	// 					writer.addClass( descriptor.classes, element );
-	// 				} );
-	//
-	// 				viewContainer._setCustomProperty( 'removeHighlight', ( element, id, writer ) => {
-	// 					writer.setAttribute( 'class', '', element );
-	// 				} );
-	//
-	// 				return viewContainer;
-	// 			} ) );
-	//
-	// 			const modelElement = new ModelElement( 'div', null, new ModelText( 'foo' ) );
-	//
-	// 			model.change( writer => {
-	// 				writer.insert( modelElement, modelRootStart );
-	// 			} );
-	//
-	// 			markerRange = model.createRangeOn( modelElement );
-	//
-	// 			dispatcher.on( 'addMarker:marker', highlightText( highlightDescriptor ) );
-	// 			dispatcher.on( 'addMarker:marker', highlightElement( highlightDescriptor ) );
-	// 			dispatcher.on( 'removeMarker:marker', removeHighlight( highlightDescriptor ) );
-	// 		} );
-	//
-	// 		it( 'should use addHighlight and removeHighlight on elements and not convert children nodes', () => {
-	// 			model.change( writer => {
-	// 				writer.addMarker( 'marker', { range: markerRange, usingOperation: false } );
-	// 			} );
-	//
-	// 			expect( viewToString( viewRoot ) ).to.equal(
-	// 				'<div>' +
-	// 				'<div class="highlight-class">' +
-	// 				'foo' +
-	// 				'</div>' +
-	// 				'</div>'
-	// 			);
-	//
-	// 			model.change( writer => {
-	// 				writer.removeMarker( 'marker' );
-	// 			} );
-	//
-	// 			expect( viewToString( viewRoot ) ).to.equal( '<div><div>foo</div></div>' );
-	// 		} );
-	//
-	// 		it( 'should be possible to override', () => {
-	// 			const newDescriptor = { classes: 'override-class' };
-	//
-	// 			dispatcher.on( 'addMarker:marker', highlightText( newDescriptor ), { priority: 'high' } );
-	// 			dispatcher.on( 'addMarker:marker', highlightElement( newDescriptor ), { priority: 'high' } );
-	// 			dispatcher.on( 'removeMarker:marker', removeHighlight( newDescriptor ), { priority: 'high' } );
-	//
-	// 			model.change( writer => {
-	// 				writer.addMarker( 'marker', { range: markerRange, usingOperation: false } );
-	// 			} );
-	//
-	// 			expect( viewToString( viewRoot ) ).to.equal(
-	// 				'<div>' +
-	// 				'<div class="override-class">' +
-	// 				'foo' +
-	// 				'</div>' +
-	// 				'</div>'
-	// 			);
-	//
-	// 			model.change( writer => {
-	// 				writer.removeMarker( 'marker' );
-	// 			} );
-	//
-	// 			expect( viewToString( viewRoot ) ).to.equal( '<div><div>foo</div></div>' );
-	// 		} );
-	//
-	// 		it( 'should use default priority and id if not provided', () => {
-	// 			const viewDiv = viewRoot.getChild( 0 );
-	//
-	// 			dispatcher.on( 'addMarker:marker2', highlightText( () => null ) );
-	// 			dispatcher.on( 'addMarker:marker2', highlightElement( () => null ) );
-	// 			dispatcher.on( 'removeMarker:marker2', removeHighlight( () => null ) );
-	//
-	// 			viewDiv._setCustomProperty( 'addHighlight', ( element, descriptor ) => {
-	// 				expect( descriptor.priority ).to.equal( ViewAttributeElement.DEFAULT_PRIORITY );
-	// 				expect( descriptor.id ).to.equal( 'marker:foo-bar-baz' );
-	// 			} );
-	//
-	// 			viewDiv._setCustomProperty( 'removeHighlight', ( element, id ) => {
-	// 				expect( id ).to.equal( 'marker:foo-bar-baz' );
-	// 			} );
-	//
-	// 			model.change( writer => {
-	// 				writer.addMarker( 'marker2', { range: markerRange, usingOperation: false } );
-	// 			} );
-	// 		} );
-	//
-	// 		it( 'should do nothing if descriptor is not provided', () => {
-	// 			dispatcher.on( 'addMarker:marker2', highlightText( () => null ) );
-	// 			dispatcher.on( 'addMarker:marker2', highlightElement( () => null ) );
-	// 			dispatcher.on( 'removeMarker:marker2', removeHighlight( () => null ) );
-	//
-	// 			model.change( writer => {
-	// 				writer.addMarker( 'marker2', { range: markerRange, usingOperation: false } );
-	// 			} );
-	//
-	// 			expect( viewToString( viewRoot ) ).to.equal( '<div><div>foo</div></div>' );
-	//
-	// 			model.change( writer => {
-	// 				writer.removeMarker( 'marker2' );
-	// 			} );
-	//
-	// 			expect( viewToString( viewRoot ) ).to.equal( '<div><div>foo</div></div>' );
-	// 		} );
-	// 	} );
-	// } );
-
 	describe( 'createViewElementFromHighlightDescriptor()', () => {
 		it( 'should return attribute element from descriptor object', () => {
 			const descriptor = {