Selaa lähdekoodia

Introduced composition observer.

Krzysztof Krztoń 7 vuotta sitten
vanhempi
commit
b3f187da6d

+ 12 - 0
packages/ckeditor5-engine/src/view/document.js

@@ -67,6 +67,18 @@ export default class Document {
 		this.set( 'isFocused', false );
 
 		/**
+		 * True if composition is in progress inside the document.
+		 *
+		 * This property is updated by the {@link module:engine/view/observer/compositionobserver~CompositionObserver}.
+		 * If the {@link module:engine/view/observer/compositionobserver~CompositionObserver} is disabled this property will not change.
+		 *
+		 * @readonly
+		 * @observable
+		 * @member {Boolean} module:engine/view/document~Document#isComposing
+		 */
+		this.set( 'isComposing', false );
+
+		/**
 		 * Post-fixer callbacks registered to the view document.
 		 *
 		 * @private

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

@@ -0,0 +1,79 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module engine/view/observer/compositionobserver
+ */
+
+import DomEventObserver from './domeventobserver';
+
+/**
+ * {@link module:engine/view/document~Document#event:compositionstart Compositionstart},
+ * {@link module:engine/view/document~Document#event:compositionupdate compositionupdate} and
+ * {@link module:engine/view/document~Document#event:compositionend compositionend} events observer.
+ *
+ * Note that this observer is attached by the {@link module:engine/view/view~View} and is available by default.
+ *
+ * @extends module:engine/view/observer/domeventobserver~DomEventObserver
+ */
+export default class CompositionObserver extends DomEventObserver {
+	constructor( view ) {
+		super( view );
+
+		this.domEventType = [ 'compositionstart', 'compositionupdate', 'compositionend' ];
+		const document = this.document;
+
+		document.on( 'compositionstart', () => {
+			document.isComposing = true;
+		} );
+
+		document.on( 'compositionend', () => {
+			document.isComposing = false;
+		} );
+	}
+
+	onDomEvent( domEvent ) {
+		this.fire( domEvent.type, domEvent );
+	}
+}
+
+/**
+ * Fired when composition starts inside one of the editables.
+ *
+ * Introduced by {@link module:engine/view/observer/compositionobserver~CompositionObserver}.
+ *
+ * Note that because {@link module:engine/view/observer/compositionobserver~CompositionObserver} is attached by the
+ * {@link module:engine/view/view~View} this event is available by default.
+ *
+ * @see module:engine/view/observer/compositionobserver~CompositionObserver
+ * @event module:engine/view/document~Document#event:compositionstart
+ * @param {module:engine/view/observer/domeventdata~DomEventData} data Event data.
+ */
+
+/**
+ * Fired when composition is updated inside one of the editables.
+ *
+ * Introduced by {@link module:engine/view/observer/compositionobserver~CompositionObserver}.
+ *
+ * Note that because {@link module:engine/view/observer/compositionobserver~CompositionObserver} is attached by the
+ * {@link module:engine/view/view~View} this event is available by default.
+ *
+ * @see module:engine/view/observer/compositionobserver~CompositionObserver
+ * @event module:engine/view/document~Document#event:compositionupdate
+ * @param {module:engine/view/observer/domeventdata~DomEventData} data Event data.
+ */
+
+/**
+ * Fired when composition ends inside one of the editables.
+ *
+ * Introduced by {@link module:engine/view/observer/compositionobserver~CompositionObserver}.
+ *
+ * Note that because {@link module:engine/view/observer/compositionobserver~CompositionObserver} is attached by the
+ * {@link module:engine/view/view~View} this event is available by default.
+ *
+ * @see module:engine/view/observer/compositionobserver~CompositionObserver
+ * @event module:engine/view/document~Document#event:compositionend
+ * @param {module:engine/view/observer/domeventdata~DomEventData} data Event data.
+ */

+ 7 - 0
packages/ckeditor5-engine/src/view/renderer.js

@@ -104,6 +104,13 @@ export default class Renderer {
 		this.isFocused = false;
 
 		/**
+		 * Indicates if composition takes places inside view document.
+		 *
+		 * @member {Boolean}
+		 */
+		this.isComposing = false;
+
+		/**
 		 * DOM element containing fake selection.
 		 *
 		 * @private

+ 4 - 0
packages/ckeditor5-engine/src/view/view.js

@@ -17,6 +17,7 @@ import KeyObserver from './observer/keyobserver';
 import FakeSelectionObserver from './observer/fakeselectionobserver';
 import SelectionObserver from './observer/selectionobserver';
 import FocusObserver from './observer/focusobserver';
+import CompositionObserver from './observer/compositionobserver';
 
 import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin';
 import log from '@ckeditor/ckeditor5-utils/src/log';
@@ -47,6 +48,7 @@ import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
  * * {@link module:engine/view/observer/focusobserver~FocusObserver},
  * * {@link module:engine/view/observer/keyobserver~KeyObserver},
  * * {@link module:engine/view/observer/fakeselectionobserver~FakeSelectionObserver}.
+ * * {@link module:engine/view/observer/compositionobserver~CompositionObserver}.
  *
  * This class also {@link module:engine/view/view~View#attachDomRoot bind DOM and View elements}.
  *
@@ -83,6 +85,7 @@ export default class View {
 		 */
 		this._renderer = new Renderer( this.domConverter, this.document.selection );
 		this._renderer.bind( 'isFocused' ).to( this.document );
+		this._renderer.bind( 'isComposing' ).to( this.document );
 
 		/**
 		 * Roots of the DOM tree. Map on the `HTMLElement`s with roots names as keys.
@@ -138,6 +141,7 @@ export default class View {
 		this.addObserver( FocusObserver );
 		this.addObserver( KeyObserver );
 		this.addObserver( FakeSelectionObserver );
+		this.addObserver( CompositionObserver );
 
 		// Inject quirks handlers.
 		injectQuirksHandling( this );