Przeglądaj źródła

Test: Added manual test for two-steps carret movement.

Oskar Wróbel 8 lat temu
rodzic
commit
510512546e

+ 36 - 0
packages/ckeditor5-engine/tests/manual/twostepscarret.html

@@ -0,0 +1,36 @@
+<div id="editor">
+	<p>Foo <a href="abc">bar</a> biz</p>
+	<p>Foo <b>bar</b> biz</p>
+</div>
+
+<div class="wrapper">
+	<div class="status-box"></div>
+	<p>
+		- When selection is inside the link then box is <span style="color: lightgreen">green</span>
+		when is outside the link then is <span style="color: cornflowerblue">blue</span>.
+	</p>
+</div>
+
+<style type="text/css">
+	.wrapper {
+		vertical-align: middle;
+		padding: 20px 0;
+	}
+
+	.wrapper p {
+		display: inline-block;
+		margin: 0;
+	}
+
+	.status-box {
+		width: 100px;
+		height: 30px;
+		background: cornflowerblue;
+		display: inline-block;
+		vertical-align: middle;
+	}
+
+	.active {
+		background: lightgreen;
+	}
+</style>

+ 32 - 0
packages/ckeditor5-engine/tests/manual/twostepscarret.js

@@ -0,0 +1,32 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global console, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import LinkEngine from '@ckeditor/ckeditor5-link/src/linkengine';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+
+import bindTwoStepCaretToAttribute from '@ckeditor/ckeditor5-engine/src/utils/bindtwostepcarettoattribute';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ Essentials, Paragraph, LinkEngine, Bold ],
+		toolbar: [ 'undo', 'redo', 'bold' ]
+	} )
+	.then( editor => {
+		const selection = editor.model.document.selection;
+
+		bindTwoStepCaretToAttribute( editor, editor, 'linkHref' );
+
+		selection.on( 'change', () => {
+			document.querySelector( '.status-box' ).classList.toggle( 'active', selection.hasAttribute( 'linkHref' ) );
+		} );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 41 - 0
packages/ckeditor5-engine/tests/manual/twostepscarret.md

@@ -0,0 +1,41 @@
+## Two-steps caret movment [#1286](https://github.com/ckeditor/ckeditor5-engine/issues/1289)
+
+### Moving right
+1. Put selection one character before the link
+2. Move selection by one character to the right using right arrow
+	- selection should be outside the link
+3. Press right arrow once again
+	- selection should be at the same position but inside the link
+4. Using right arrow move selection at the end of the link
+	- selection should be still inside the link
+5. Press right arrow once again
+	- selection should be at the same position but outside the link
+
+### Moving left
+1. Put selection one character after the link
+2. Move selection by one character to the left using right arrow
+	- selection should be outside the link (ignore the blink).
+3. Press left arrow once again
+	- selection should be at the same position but inside the link
+4. Using left arrow move selection at the beginning of the link
+	- selection should be still inside the link (ignore the blink).
+5. Press left arrow once again
+	- selection should be at the same position but outside the link
+
+### Mouse
+1. Put selection at the beginning of the link
+	- selection should be outside the link
+2. Put selection at the end of the link
+	- selection should be inside the link
+
+### Attributes set explicit
+1. Put selection one character before the end of the link
+2. Move selection by one character to the right using right arrow
+	- selection should be inside the link
+3. Turn on bold attribute (`Ctrl + B`)
+3. Press right arrow once again
+	- selection should be at the same position but outside the link
+	- bold should stay enabled
+
+### Not bounded attribute
+Just make sure that two-steps caret movement is disabled for bold text from the second paragraph.