Merge pull request #131 from ckeditor/t/130

Feature: Introduced the `EditorUI#update` event. Closes #130.

BREAKING CHANGE: The `EditorUI` is now a class (no longer an interface).

Author: oleq

src/editor/editorui.js

@@ -0,0 +1,92 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module core/editor/editorui
+ */
+
+import ComponentFactory from '@ckeditor/ckeditor5-ui/src/componentfactory';
+import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
+
+import EmitterMixin from '@ckeditor/ckeditor5-utils/src/emittermixin';
+import mix from '@ckeditor/ckeditor5-utils/src/mix';
+
+/**
+ * A class providing the minimal interface that is required to successfully bootstrap any editor UI.
+ *
+ * @mixes module:utils/emittermixin~EmitterMixin
+ */
+export default class EditorUI {
+	/**
+	 * Creates an instance of the editor UI class.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor The editor instance.
+	 * @param {module:ui/editorui/editoruiview~EditorUIView} view The view of the UI.
+	 */
+	constructor( editor, view ) {
+		/**
+		 * The editor that the UI belongs to.
+		 *
+		 * @readonly
+		 * @member {module:core/editor/editor~Editor} #editor
+		 */
+		this.editor = editor;
+
+		/**
+		 * The main (top–most) view of the editor UI.
+		 *
+		 * @readonly
+		 * @member {module:ui/editorui/editoruiview~EditorUIView} #view
+		 */
+		this.view = view;
+
+		/**
+		 * An instance of the {@link module:ui/componentfactory~ComponentFactory}, a registry used by plugins
+		 * to register factories of specific UI components.
+		 *
+		 * @readonly
+		 * @member {module:ui/componentfactory~ComponentFactory} #componentFactory
+		 */
+		this.componentFactory = new ComponentFactory( editor );
+
+		/**
+		 * Stores the information about the editor UI focus and propagates it so various plugins and components
+		 * are unified as a focus group.
+		 *
+		 * @readonly
+		 * @member {module:utils/focustracker~FocusTracker} #focusTracker
+		 */
+		this.focusTracker = new FocusTracker();
+
+		// Informs UI components that should be refreshed after layout change.
+		this.listenTo( editor.editing.view.document, 'layoutChanged', () => this.update() );
+	}
+
+	/**
+	 * Fires the {@link module:core/editor/editorui~EditorUI#event:update} event.
+	 */
+	update() {
+		this.fire( 'update' );
+	}
+
+	/**
+	 * Destroys the UI.
+	 */
+	destroy() {
+		this.stopListening();
+		this.view.destroy();
+	}
+
+	/**
+	 * Fired whenever the UI (all related components) should be refreshed.
+	 *
+	 * **Note:**: The event is fired after each {@link module:engine/view/document~Document#event:layoutChanged}.
+	 * It can also be fired manually via the {@link module:core/editor/editorui~EditorUI#update} method.
+	 *
+	 * @event update
+	 */
+}
+
+mix( EditorUI, EmitterMixin );

src/editor/editorui.jsdoc

@@ -11,7 +11,7 @@ import ClassicTestEditor from '../../tests/_utils/classictesteditor';
 import Plugin from '../../src/plugin';
 import HtmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/htmldataprocessor';
 
-import ClassicTestEditorUI from '../../tests/_utils/classictesteditorui';
+import EditorUI from '../../src/editor/editorui';
 import BoxedEditorUIView from '@ckeditor/ckeditor5-ui/src/editorui/boxed/boxededitoruiview';
 import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
 
@@ -39,7 +39,7 @@ describe( 'ClassicTestEditor', () => {
 			expect( editor ).to.be.instanceof( Editor );
 			expect( editor.config.get( 'foo' ) ).to.equal( 1 );
 			expect( editor.element ).to.equal( editorElement );
-			expect( editor.ui ).to.be.instanceOf( ClassicTestEditorUI );
+			expect( editor.ui ).to.be.instanceOf( EditorUI );
 			expect( editor.ui.view ).to.be.instanceOf( BoxedEditorUIView );
 			expect( editor.data.processor ).to.be.instanceof( HtmlDataProcessor );
 		} );
@@ -82,7 +82,7 @@ describe( 'ClassicTestEditor', () => {
 		it( 'creates and initializes the UI', () => {
 			return ClassicTestEditor.create( editorElement, { foo: 1 } )
 				.then( editor => {
-					expect( editor.ui ).to.be.instanceOf( ClassicTestEditorUI );
+					expect( editor.ui ).to.be.instanceOf( EditorUI );
 					expect( editor.ui.view ).to.be.instanceOf( BoxedEditorUIView );
 				} );
 		} );

tests/_utils-tests/classictesteditor.js

@@ -7,7 +7,7 @@ import Editor from '../../src/editor/editor';
 import ElementApiMixin from '../../src/editor/utils/elementapimixin';
 import DataApiMixin from '../../src/editor/utils/dataapimixin';
 import HtmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/htmldataprocessor';
-import ClassicTestEditorUI from './classictesteditorui';
+import EditorUI from '../../src/editor/editorui';
 import BoxedEditorUIView from '@ckeditor/ckeditor5-ui/src/editorui/boxed/boxededitoruiview';
 import ElementReplacer from '@ckeditor/ckeditor5-utils/src/elementreplacer';
 import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
@@ -33,7 +33,7 @@ export default class ClassicTestEditor extends Editor {
 		// Use the HTML data processor in this editor.
 		this.data.processor = new HtmlDataProcessor();
 
-		this.ui = new ClassicTestEditorUI( this, new BoxedEditorUIView( this.locale ) );
+		this.ui = new EditorUI( this, new BoxedEditorUIView( this.locale ) );
 
 		// Expose properties normally exposed by the ClassicEditorUI.
 		this.ui.view.editable = new InlineEditableUIView( this.ui.view.locale );

tests/_utils-tests/classictesteditorui.js

@@ -0,0 +1,98 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import EditorUI from '../../src/editor/editorui';
+import Editor from '../../src/editor/editor';
+
+import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
+import ComponentFactory from '@ckeditor/ckeditor5-ui/src/componentfactory';
+import View from '@ckeditor/ckeditor5-ui/src/view';
+
+import testUtils from '../_utils/utils';
+
+testUtils.createSinonSandbox();
+
+describe( 'EditorUI', () => {
+	let editor, view, ui;
+
+	beforeEach( () => {
+		editor = new Editor();
+		view = new View();
+		ui = new EditorUI( editor, view );
+	} );
+
+	afterEach( () => {
+		return Promise.all( [
+			editor.destroy(),
+			ui.destroy()
+		] );
+	} );
+
+	describe( 'constructor()', () => {
+		it( 'should set #editor', () => {
+			expect( ui.editor ).to.equal( editor );
+		} );
+
+		it( 'should set #view', () => {
+			expect( ui.view ).to.equal( view );
+		} );
+
+		it( 'should create #componentFactory factory', () => {
+			expect( ui.componentFactory ).to.be.instanceOf( ComponentFactory );
+		} );
+
+		it( 'should create #focusTracker', () => {
+			expect( ui.focusTracker ).to.be.instanceOf( FocusTracker );
+		} );
+
+		it( 'should fire update event after viewDocument#layoutChanged', () => {
+			const spy = sinon.spy();
+
+			ui.on( 'update', spy );
+
+			editor.editing.view.document.fire( 'layoutChanged' );
+
+			sinon.assert.calledOnce( spy );
+
+			editor.editing.view.document.fire( 'layoutChanged' );
+
+			sinon.assert.calledTwice( spy );
+		} );
+	} );
+
+	describe( 'update()', () => {
+		it( 'should fire update event', () => {
+			const spy = sinon.spy();
+
+			ui.on( 'update', spy );
+
+			ui.update();
+
+			sinon.assert.calledOnce( spy );
+
+			ui.update();
+
+			sinon.assert.calledTwice( spy );
+		} );
+	} );
+
+	describe( 'destroy()', () => {
+		it( 'should stop listening', () => {
+			const spy = sinon.spy( ui, 'stopListening' );
+
+			ui.destroy();
+
+			sinon.assert.called( spy );
+		} );
+
+		it( 'should destroy the #view', () => {
+			const spy = sinon.spy( view, 'destroy' );
+
+			ui.destroy();
+
+			sinon.assert.called( spy );
+		} );
+	} );
+} );