8
0
Quellcode durchsuchen

Fixed fake selection manual test, to better simulate real use cases.

Szymon Kupś vor 9 Jahren
Ursprung
Commit
03fc1a8e23

+ 4 - 1
packages/ckeditor5-engine/tests/view/manual/fakeselection.html

@@ -3,6 +3,10 @@
 		padding: 5px;
 		border: solid 1px #000;
 	}
+
+	#editor strong {
+		cursor: pointer;
+	}
 </style>
 
 <p>Scroll down.</p>
@@ -11,7 +15,6 @@
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 
 <div contenteditable="true" id="editor"></div>
-<button id="create-fake">Create fake selection over "bar"</button>
 
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

+ 17 - 15
packages/ckeditor5-engine/tests/view/manual/fakeselection.js

@@ -6,6 +6,7 @@
 /* globals document, console */
 
 import ViewDocument from '/ckeditor5/engine/view/document.js';
+import ClickObserver from '/ckeditor5/engine/view/observer/clickobserver.js';
 import ViewRange from '/ckeditor5/engine/view/range.js';
 import { setData } from '/ckeditor5/engine/dev-utils/view.js';
 
@@ -14,20 +15,7 @@ const domEditable = document.getElementById( 'editor' );
 const viewRoot = viewDocument.createRoot( domEditable );
 let viewStrong;
 
-// Prevent focus stealing. Simulates how editor buttons work.
-document.getElementById( 'create-fake' ).addEventListener( 'mousedown', ( evt ) => {
-	evt.preventDefault();
-} );
-
-document.getElementById( 'create-fake' ).addEventListener( 'click', () => {
-	const viewP = viewRoot.getChild( 0 );
-	viewStrong = viewP.getChild( 1 );
-
-	const range = ViewRange.createOn( viewStrong );
-	viewDocument.selection.setRanges( [ range ] );
-	viewDocument.selection.setFake( true, { label: 'fake selection over bar' } );
-	viewStrong.setStyle( 'background-color', 'yellow' );
-} );
+viewDocument.addObserver( ClickObserver );
 
 viewDocument.on( 'selectionChange', ( evt, data ) => {
 	viewDocument.selection.setTo( data.newSelection );
@@ -40,6 +28,17 @@ viewDocument.selection.on( 'change', () => {
 	}
 } );
 
+viewDocument.on( 'click', ( info, domEvent ) => {
+	if ( domEvent.target == viewStrong ) {
+		const range = ViewRange.createOn( viewStrong );
+		viewDocument.selection.setRanges( [ range ] );
+		viewDocument.selection.setFake( true, { label: 'fake selection over bar' } );
+		viewStrong.setStyle( 'background-color', 'yellow' );
+
+		viewDocument.render();
+	}
+} );
+
 viewDocument.on( 'focus', () => {
 	console.log( 'The document was focused' );
 } );
@@ -48,5 +47,8 @@ viewDocument.on( 'blur', () => {
 	console.log( 'The document was blurred' );
 } );
 
-setData( viewDocument, '<container:p>{}foo<strong>bar</strong>baz</container:p>' );
+setData( viewDocument, '<container:p>{}foo<strong contenteditable="false">bar</strong>baz</container:p>' );
+const viewP = viewRoot.getChild( 0 );
+viewStrong = viewP.getChild( 1 );
+
 viewDocument.focus();

+ 2 - 2
packages/ckeditor5-engine/tests/view/manual/fakeselection.md

@@ -3,10 +3,10 @@
 
 ## Fake selection
 
-1. Click button to create fake selection over `bar` before each of following steps:
+1. Click on bold `bar` to create fake selection over it before each of following steps:
    1. Press left/up arrow key - collapsed selection should appear before `bar`
    1. Press right/down arrow key - collapsed selection should appear after `bar`
-1. Open console and check if `<div style="position: fixed; top: 0px; left: -1000px;">fake selection over bar</div>` is added to editable when fake selection is present. It should be removed when fake selection is not present.
+1. Open console and check if `<div style="position: fixed; top: 0px; left: -9999px;">fake selection over bar</div>` is added to editable when fake selection is present. It should be removed when fake selection is not present.
 
 Notes: