8
0
Quellcode durchsuchen

Added tests for ImageLoadObserver

Paweł Smyrek vor 5 Jahren
Ursprung
Commit
000a7ea3db

+ 2 - 1
packages/ckeditor5-engine/tests/manual/tickets/4600/1.html

@@ -37,5 +37,6 @@
 </style>
 
 <div id="editor">
-	<section class="simple-widget-container" />
+	<section class="simple-widget-container"></section>
+	<section class="ignored" data-cke-ignore-events="true">foo</section>
 </div>

+ 44 - 4
packages/ckeditor5-engine/tests/manual/tickets/4600/1.js

@@ -6,6 +6,7 @@
 /* globals console, document, window, Event */
 
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
@@ -19,6 +20,11 @@ import InputObserver from '../../../../src/view/observer/inputobserver';
 import KeyObserver from '../../../../src/view/observer/keyobserver';
 import MouseObserver from '../../../../src/view/observer/mouseobserver';
 import MouseEventsObserver from '@ckeditor/ckeditor5-table/src/tablemouse/mouseeventsobserver';
+import DeleteObserver from '@ckeditor/ckeditor5-typing/src/deleteobserver';
+import ClipboardObserver from '@ckeditor/ckeditor5-clipboard/src/clipboardobserver';
+import EnterObserver from '@ckeditor/ckeditor5-enter/src/enterobserver';
+import ImageLoadObserver from '@ckeditor/ckeditor5-image/src/image/imageloadobserver';
+import MutationObserver from '@ckeditor/ckeditor5-engine/src/view/observer/mutationobserver';
 
 class SimpleWidgetEditing extends Plugin {
 	static get requires() {
@@ -38,6 +44,10 @@ class SimpleWidgetEditing extends Plugin {
 			inheritAllFrom: '$block',
 			isObject: true
 		} );
+
+		schema.register( 'ignoredParagraph', {
+			inheritAllFrom: 'paragraph'
+		} );
 	}
 
 	_defineConverters() {
@@ -65,6 +75,25 @@ class SimpleWidgetEditing extends Plugin {
 			}
 		} );
 
+		conversion.for( 'downcast' ).elementToElement( {
+			model: 'ignoredParagraph',
+			view: {
+				name: 'section',
+				classes: 'ignored',
+				attributes: {
+					'data-cke-ignore-events': 'true'
+				}
+			}
+		} );
+
+		conversion.for( 'upcast' ).elementToElement( {
+			model: 'ignoredParagraph',
+			view: {
+				name: 'section',
+				classes: 'ignored'
+			}
+		} );
+
 		function createWidgetView( modelElement, { writer } ) {
 			const simpleWidgetContainer = writer.createContainerElement( 'section', { class: 'simple-widget-container' } );
 			const simpleWidgetElement = writer.createRawElement( 'div', { class: 'simple-widget-element' }, domElement => {
@@ -73,11 +102,13 @@ class SimpleWidgetEditing extends Plugin {
 						<legend>Ignored container with <strong>data-cke-ignore-events="true"</strong></legend>
 						<input>
 						<button>Click!</button>
+						<img src="https://placekitten.com/30/30" height="30">
 					</fieldset>
 					<fieldset>
 						<legend>Regular container</legend>
 						<input>
 						<button>Click!</button>
+						<img src="https://placekitten.com/30/30" height="30">
 					</fieldset>
 				`;
 			} );
@@ -98,15 +129,24 @@ class SimpleWidgetEditing extends Plugin {
 			[ InputObserver, [ 'beforeinput' ] ],
 			[ KeyObserver, [ 'keydown', 'keyup' ] ],
 			[ MouseEventsObserver, [ 'mousemove', 'mouseup', 'mouseleave' ] ],
-			[ MouseObserver, [ 'mousedown' ] ]
+			[ MouseObserver, [ 'mousedown' ] ],
+			[ ClipboardObserver, [ 'paste', 'copy', 'cut', 'drop', 'dragover' ] ], // It's inheriting domEventObserver
+			[ DeleteObserver, [ 'delete' ] ], // Is ignored for some reason, even though there's no explicit support.
+			[ EnterObserver, [ 'enter' ] ], // Is ignored for some reason, even though there's no explicit support.
+			[ ImageLoadObserver, [ 'imageLoaded' ] ],
+			[ MutationObserver, [ 'mutations' ] ]
 		] );
 
 		observers.forEach( ( events, observer ) => {
 			view.addObserver( observer );
 
 			events.forEach( eventName => {
-				this.listenTo( view.document, eventName, () => {
-					console.log( `Received ${ eventName } event.` );
+				this.listenTo( view.document, eventName, ( event, eventData ) => {
+					if ( eventName.startsWith( 'mouse' ) ) {
+						console.log( `Received ${ eventName } event.` );
+					} else {
+						console.log( `Received ${ eventName } event. Target:`, eventData.domTarget );
+					}
 				} );
 			} );
 		} );
@@ -123,7 +163,7 @@ class SimpleWidget extends Plugin {
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
-		plugins: [ Essentials, SimpleWidget ]
+		plugins: [ Essentials, Paragraph, SimpleWidget ]
 	} )
 	.then( editor => {
 		window.editor = editor;

+ 0 - 4
packages/ckeditor5-enter/src/enterobserver.js

@@ -23,10 +23,6 @@ export default class EnterObserver extends Observer {
 		const doc = this.document;
 
 		doc.on( 'keydown', ( evt, data ) => {
-			if ( this.checkShouldIgnoreEventFromTarget( data.domEvent.target ) ) {
-				return;
-			}
-
 			if ( this.isEnabled && data.keyCode == keyCodes.enter ) {
 				// Save the event object to check later if it was stopped or not.
 				let event;

+ 24 - 0
packages/ckeditor5-image/tests/image/imageloadobserver.js

@@ -109,6 +109,30 @@ describe( 'ImageLoadObserver', () => {
 		sinon.assert.notCalled( spy );
 	} );
 
+	it( 'should not fire `loadImage` event if an image has `data-cke-ignore-events` attribute', () => {
+		const spy = sinon.spy();
+
+		viewDocument.on( 'imageLoaded', spy );
+
+		setData( view, '<img src="/assets/sample.png" data-cke-ignore-events="true" />' );
+
+		domRoot.querySelector( 'img' ).dispatchEvent( new Event( 'load' ) );
+
+		sinon.assert.notCalled( spy );
+	} );
+
+	it( 'should not fire `loadImage` event if an image has an ancestor with `data-cke-ignore-events` attribute', () => {
+		const spy = sinon.spy();
+
+		viewDocument.on( 'imageLoaded', spy );
+
+		setData( view, '<div data-cke-ignore-events="true"><p><img src="/assets/sample.png" /></p></div>' );
+
+		domRoot.querySelector( 'img' ).dispatchEvent( new Event( 'load' ) );
+
+		sinon.assert.notCalled( spy );
+	} );
+
 	it( 'should do nothing with an image when changes are in the other parent', () => {
 		setData(
 			view,

+ 0 - 12
packages/ckeditor5-typing/src/deleteobserver.js

@@ -25,20 +25,12 @@ export default class DeleteObserver extends Observer {
 		let sequence = 0;
 
 		document.on( 'keyup', ( evt, data ) => {
-			if ( this.checkShouldIgnoreEventFromTarget( data.domEvent.target ) ) {
-				return;
-			}
-
 			if ( data.keyCode == keyCodes.delete || data.keyCode == keyCodes.backspace ) {
 				sequence = 0;
 			}
 		} );
 
 		document.on( 'keydown', ( evt, data ) => {
-			if ( this.checkShouldIgnoreEventFromTarget( data.domEvent.target ) ) {
-				return;
-			}
-
 			const deleteData = {};
 
 			if ( data.keyCode == keyCodes.delete ) {
@@ -61,10 +53,6 @@ export default class DeleteObserver extends Observer {
 		// `beforeinput` is handled only for Android devices. Desktop Chrome and iOS are skipped because they are working fine now.
 		if ( env.isAndroid ) {
 			document.on( 'beforeinput', ( evt, data ) => {
-				if ( this.checkShouldIgnoreEventFromTarget( data.domEvent.target ) ) {
-					return;
-				}
-
 				// If event type is other than `deleteContentBackward` then this is not deleting.
 				if ( data.domEvent.inputType != 'deleteContentBackward' ) {
 					return;

+ 1 - 26
packages/ckeditor5-typing/tests/deleteobserver.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* globals window, document, KeyboardEvent */
+/* globals window, document */
 
 import DeleteObserver from '../src/deleteobserver';
 import View from '@ckeditor/ckeditor5-engine/src/view/view';
@@ -252,31 +252,6 @@ describe( 'DeleteObserver', () => {
 
 			sinon.assert.calledOnce( keydownSpy );
 		} );
-
-		it( 'should not be fired for ignored target', () => {
-			const spy = sinon.spy();
-			const view = new View();
-			const viewDocument = view.document;
-
-			const div = document.createElement( 'div' );
-			const input = document.createElement( 'input' );
-
-			div.setAttribute( 'data-cke-ignore-events', 'true' );
-			div.appendChild( input );
-
-			createViewRoot( viewDocument );
-
-			view.attachDomRoot( div );
-			view.addObserver( DeleteObserver );
-			viewDocument.on( 'delete', spy );
-
-			input.dispatchEvent( new KeyboardEvent( 'keydown', { bubbles: true, keyCode: getCode( 'delete' ) } ) );
-
-			sinon.assert.notCalled( spy );
-
-			view.destroy();
-			div.remove();
-		} );
 	} );
 
 	function getDomEvent() {