8
0
Aleksander Nowodzinski 8 лет назад
Родитель
Сommit
9d2d0047c1

+ 21 - 0
packages/ckeditor5-image/tests/manual/tickets/106/1.html

@@ -0,0 +1,21 @@
+<h2>External changes (edit)</h2>
+<p><button id="button-insert">Start external changes</button></p>
+
+<div id="editor-insert">
+	<p>EXTERNAL CHANGES WILL START HERE -> This specification defines the 5th of the core language of the the Hypertext Markup Language (HTML).</p>
+	<figure class="image">
+		<img src="../../sample.jpg" alt="CKEditor logo" />
+	</figure>
+</div>
+
+<h2>External changes (delete)</h2>
+<p><button id="button-delete">Start external changes</button></p>
+
+<div id="editor-delete">
+	<p>A first paragraph.</p>
+	<p>THIS PARAGRAPH WILL BE REMOVED <a href="http://ckeditor.com">major revision</a>.</p>
+	<figure class="image">
+		<img src="../../sample.jpg" alt="CKEditor logo" />
+	</figure>
+	<p>A third paragraph.</p>
+</div>

+ 116 - 0
packages/ckeditor5-image/tests/manual/tickets/106/1.js

@@ -0,0 +1,116 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console:false, document, setTimeout */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePresets from '@ckeditor/ckeditor5-presets/src/article';
+
+import Element from '@ckeditor/ckeditor5-engine/src/model/element';
+import Text from '@ckeditor/ckeditor5-engine/src/model/text';
+import Position from '@ckeditor/ckeditor5-engine/src/model/position';
+import Range from '@ckeditor/ckeditor5-engine/src/model/range';
+
+const config = {
+	plugins: [ ArticlePresets ],
+	toolbar: [ 'undo', 'redo', 'link' ],
+	image: {
+		toolbar: [ 'imageTextAlternative' ]
+	}
+};
+
+// Editor for the external insert.
+ClassicEditor.create( document.querySelector( '#editor-insert' ), config )
+	.then( editor => {
+		const element = document.querySelector( '#button-insert' );
+
+		element.addEventListener( 'click', () => {
+			element.disabled = true;
+			startExternalInsert( editor );
+		} );
+	} )
+	.catch( err => console.error( err.stack ) );
+
+// Editor for the external delete.
+ClassicEditor.create( document.querySelector( '#editor-delete' ), config )
+	.then( editor => {
+		const element = document.querySelector( '#button-delete' );
+
+		element.addEventListener( 'click', () => {
+			element.disabled = true;
+			startExternalDelete( editor );
+		} );
+	} )
+	.catch( err => console.error( err.stack ) );
+
+function wait( delay ) {
+	return new Promise( resolve => {
+		setTimeout( () => resolve(), delay );
+	} );
+}
+
+function startExternalInsert( editor ) {
+	const document = editor.document;
+	const bath = document.batch( 'transparent' );
+
+	function type( path, text ) {
+		return new Promise( resolve => {
+			let position = new Position( document.getRoot(), path );
+			let index = 0;
+
+			function typing() {
+				wait( 40 ).then( () => {
+					document.enqueueChanges( () => {
+						bath.insert( position, new Text( text[ index ] ) );
+						position = position.getShiftedBy( 1 );
+
+						const nextLetter = text[ ++index ];
+
+						if ( nextLetter ) {
+							typing( nextLetter );
+						} else {
+							index = 0;
+							resolve();
+						}
+					} );
+				} );
+			}
+
+			typing();
+		} );
+	}
+
+	function insertNewLine( path ) {
+		return wait( 200 ).then( () => {
+			document.enqueueChanges( () => {
+				bath.insert( new Position( document.getRoot(), path ), new Element( 'paragraph' ) );
+			} );
+
+			return Promise.resolve();
+		} );
+	}
+
+	wait( 3000 )
+		.then( () => type( [ 0, 36 ], 'This specification defines the 5th major revision of the core language of the World Wide Web. ' ) )
+		.then( () => insertNewLine( [ 0 ] ) )
+		.then( () => type( [ 0, 0 ], 'a' ) )
+		.then( () => insertNewLine( [ 1 ] ) )
+		.then( () => type( [ 1, 0 ], 'b' ) )
+		.then( () => insertNewLine( [ 2 ] ) )
+		.then( () => type( [ 2, 0 ], 'c' ) )
+		.then( () => insertNewLine( [ 0 ] ) )
+		.then( () => type( [ 0, 0 ], 'DONE :)' ) );
+}
+
+function startExternalDelete( editor ) {
+	const document = editor.document;
+	const bath = document.batch( 'transparent' );
+
+	wait( 3000 ).then( () => {
+		document.enqueueChanges( () => {
+			bath.remove( Range.createFromPositionAndShift( new Position( document.getRoot(), [ 1 ] ), 1 ) );
+		} );
+	} );
+}

+ 13 - 0
packages/ckeditor5-image/tests/manual/tickets/106/1.md

@@ -0,0 +1,13 @@
+# Issue [#106](https://github.com/ckeditor/ckeditor5-image/issues/106) manual test.
+
+## Position of the text alternative balloon should be updated on external changes.
+
+### Edit:
+
+1. Click **Start external changes** then quickly select the image in the content, then from the toolbar open the **text alternative** editing balloon.
+2. Observe if the balloon remains attached to the image as the new content shows up.
+
+### Delete:
+
+1. Click **Start external changes** then quickly select the image in the content, then from the toolbar open the **text alternative** editing balloon.
+2. Observe if the balloon remains attached to the image as the content is deleted.