Przeglądaj źródła

Added support for data-cke-ignore-events.

Piotrek Koszuliński 5 lat temu
rodzic
commit
7cc616b5e3

+ 1 - 1
packages/ckeditor5-engine/src/view/observer/domeventobserver.js

@@ -75,7 +75,7 @@ export default class DomEventObserver extends Observer {
 
 
 		types.forEach( type => {
 		types.forEach( type => {
 			this.listenTo( domElement, type, ( eventInfo, domEvent ) => {
 			this.listenTo( domElement, type, ( eventInfo, domEvent ) => {
-				if ( this.isEnabled ) {
+				if ( this.isEnabled && !this.checkShouldIgnoreEvent( domEvent ) ) {
 					this.onDomEvent( domEvent );
 					this.onDomEvent( domEvent );
 				}
 				}
 			}, { useCapture: this.useCapture } );
 			}, { useCapture: this.useCapture } );

+ 15 - 0
packages/ckeditor5-engine/src/view/observer/observer.js

@@ -82,6 +82,21 @@ export default class Observer {
 		this.stopListening();
 		this.stopListening();
 	}
 	}
 
 
+	/**
+	 * Checks whether the given DOM event should be ignored (should not be turned into a synthetic view document event).
+	 *
+	 * Currently, an event will be ignored only if its target or any of its ancestors has the `data-cke-ignore-events` attribute.
+	 * This attribute can be used inside structures generated by
+	 * {@link module:engine/view/downcastwriter~DowncastWriter#createUIElement `DowncastWriter#createUIElement()`} to ignore events
+	 * fired within a UI that should be excluded from CKEditor 5's realms.
+	 *
+	 * @param {Event} domEvent The DOM event to check.
+	 * @returns {Boolean} Whether this event should be ignored by the observer.
+	 */
+	checkShouldIgnoreEvent( domEvt ) {
+		return domEvt.target.matches( '[data-cke-ignore-events]' );
+	}
+
 	/**
 	/**
 	 * Starts observing the given root element.
 	 * Starts observing the given root element.
 	 *
 	 *

+ 8 - 3
packages/ckeditor5-engine/src/view/observer/selectionobserver.js

@@ -100,8 +100,8 @@ export default class SelectionObserver extends Observer {
 			return;
 			return;
 		}
 		}
 
 
-		this.listenTo( domDocument, 'selectionchange', () => {
-			this._handleSelectionChange( domDocument );
+		this.listenTo( domDocument, 'selectionchange', evt => {
+			this._handleSelectionChange( evt, domDocument );
 		} );
 		} );
 
 
 		this._documents.add( domDocument );
 		this._documents.add( domDocument );
@@ -123,13 +123,18 @@ export default class SelectionObserver extends Observer {
 	 * and {@link module:engine/view/document~Document#event:selectionChangeDone} when selection stop changing.
 	 * and {@link module:engine/view/document~Document#event:selectionChangeDone} when selection stop changing.
 	 *
 	 *
 	 * @private
 	 * @private
+	 * @param {Event} domEvent DOM event.
 	 * @param {Document} domDocument DOM document.
 	 * @param {Document} domDocument DOM document.
 	 */
 	 */
-	_handleSelectionChange( domDocument ) {
+	_handleSelectionChange( domEvent, domDocument ) {
 		if ( !this.isEnabled ) {
 		if ( !this.isEnabled ) {
 			return;
 			return;
 		}
 		}
 
 
+		if ( this.checkShouldIgnoreEvent( domEvent ) ) {
+			return;
+		}
+
 		// Ensure the mutation event will be before selection event on all browsers.
 		// Ensure the mutation event will be before selection event on all browsers.
 		this.mutationObserver.flush();
 		this.mutationObserver.flush();