Przeglądaj źródła

Updated virtual selection manual test.

Szymon Kupś 8 lat temu
rodzic
commit
fb60613ee7

+ 23 - 3
packages/ckeditor5-engine/tests/manual/virtualselection.html

@@ -1,8 +1,16 @@
 <style>
-	span.virtual-selection {
+	span.virtual-selection-yellow {
 		background-color: yellow;
 	}
 
+	span.virtual-selection-blue {
+		background-color: blue;
+	}
+
+	span.virtual-selection-red {
+		background-color: red;
+	}
+
 	.ck-widget.fancy-widget {
 		background-color: black;
 		color: white;
@@ -11,10 +19,20 @@
 		line-height: 40px;
 	}
 
-	.ck-widget.fancy-widget.virtual-selection {
+	.ck-widget.fancy-widget.virtual-selection-yellow {
 		background-color: yellow;
 		color: black;
 	}
+
+	.ck-widget.fancy-widget.virtual-selection-blue {
+		background-color: blue;
+		color: black;
+	}
+
+	.ck-widget.fancy-widget.virtual-selection-red {
+		background-color: red;
+		color: black;
+	}
 </style>
 
 <div id="editor">
@@ -22,4 +40,6 @@
 	<figure></figure>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at diam quis justo imperdiet posuere non eu tortor. Mauris vel magna eu sem hendrerit varius. Ut imperdiet velit ut ante interdum convallis. Vestibulum vitae lacinia mi. </p>
 </div>
-<button id="add-marker">Set marker</button>
+<button id="add-marker-yellow">Set yellow marker</button>
+<button id="add-marker-blue">Set blue marker</button>
+<button id="add-marker-red">Set red marker</button>

+ 21 - 17
packages/ckeditor5-engine/tests/manual/virtualselection.js

@@ -45,16 +45,6 @@ class FancyWidget extends Plugin {
 			.toElement( () => {
 				const widgetElement = new ViewContainerElement( 'figure', { class: 'fancy-widget' }, new ViewText( 'widget' ) );
 
-				widgetElement.setCustomProperty( 'setVirtualSelection', ( element, data ) => {
-					element.getChild( 0 ).data = 'widget - with virtual selection';
-					element.addClass( data.class );
-				} );
-
-				widgetElement.setCustomProperty( 'removeVirtualSelection', ( element, data ) => {
-					element.getChild( 0 ).data = 'widget';
-					element.removeClass( data.class );
-				} );
-
 				return toWidget( widgetElement );
 			} );
 
@@ -71,22 +61,36 @@ ClassicEditor.create( global.document.querySelector( '#editor' ), {
 } )
 	.then( editor => {
 		window.editor = editor;
-		const model = editor.document;
 
 		buildModelConverter()
 			.for( editor.editing.modelToView )
 			.fromMarker( 'marker' )
-			.toVirtualSelection( { class: 'virtual-selection' } );
+			.toVirtualSelection( data => ( { class: 'virtual-selection-' + data.markerName.split( ':' )[ 1 ] } ) );
 
-		document.getElementById( 'add-marker' ).addEventListener( 'mousedown', evt => {
-			editor.document.enqueueChanges( () => {
-				const range = ModelRange.createFromRange( model.selection.getFirstRange() );
-				model.markers.set( 'marker', range );
-			} );
+		document.getElementById( 'add-marker-yellow' ).addEventListener( 'mousedown', evt => {
+			addMarker( editor, 'yellow' );
+			evt.preventDefault();
+		} );
+
+		document.getElementById( 'add-marker-blue' ).addEventListener( 'mousedown', evt => {
+			addMarker( editor, 'blue' );
+			evt.preventDefault();
+		} );
 
+		document.getElementById( 'add-marker-red' ).addEventListener( 'mousedown', evt => {
+			addMarker( editor, 'red' );
 			evt.preventDefault();
 		} );
 	} )
 	.catch( err => {
 		console.error( err.stack );
 	} );
+
+function addMarker( editor, color ) {
+	const model = editor.document;
+
+	editor.document.enqueueChanges( () => {
+		const range = ModelRange.createFromRange( model.selection.getFirstRange() );
+		model.markers.set( 'marker:' + color, range );
+	} );
+}

+ 1 - 2
packages/ckeditor5-engine/tests/manual/virtualselection.md

@@ -1,7 +1,6 @@
 ### Virtual selection manual test
 
-1. Select widget and press `Set marker` button - widget's background color should change and text should change 
-to `widget - with virtual selection`.
+1. Select widget and press `Set marker` button - widget's background color should change.
 1. Select part of the text in the first paragraph and press `Set marker` - widget's should return to its initial state, 
 text should be highlighted.
 1. Create selection that starts in the first paragraph and ends in second one. Press `Set marker`. Selected text