Merge pull request #24 from ckeditor/t/ckeditor5/1449

Other: Editor UI classes API refactoring.

BREAKING CHANGE: Removed `BalloonEditor#element` property. The `BalloonEditorUI#element` property should be used instead.
BREAKING CHANGE: Removed `BalloonEditorUIView#editableElement`. Instead `BalloonEditorUI#getEditableElement()` method should be used.

Author: Piotr Jasiun

src/ballooneditor.js

@@ -82,13 +82,6 @@ export default class BalloonEditor extends Editor {
 		attachToForm( this );
 	}
 
-	/**
-	 * @inheritDoc
-	 */
-	get element() {
-		return this.ui.view.editable.element;
-	}
-
 	/**
 	 * Destroys the editor instance, releasing all resources used by it.
 	 *
@@ -189,7 +182,6 @@ export default class BalloonEditor extends Editor {
 				editor.initPlugins()
 					.then( () => {
 						editor.ui.init();
-						editor.fire( 'uiReady' );
 					} )
 					.then( () => {
 						const initialData = isElement( sourceElementOrData ) ?

src/ballooneditorui.js

@@ -16,6 +16,41 @@ import enableToolbarKeyboardFocus from '@ckeditor/ckeditor5-ui/src/toolbar/enabl
  * @extends module:core/editor/editorui~EditorUI
  */
 export default class BalloonEditorUI extends EditorUI {
+	/**
+	 * Creates an instance of the balloon 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 ) {
+		super( editor );
+
+		/**
+		 * The main (top–most) view of the editor UI.
+		 *
+		 * @private
+		 * @member {module:ui/editorui/editoruiview~EditorUIView} #_view
+		 */
+		this._view = view;
+	}
+
+	/**
+	 * The main (top–most) view of the editor UI.
+	 *
+	 * @readonly
+	 * @member {module:ui/editorui/editoruiview~EditorUIView} #view
+	 */
+	get view() {
+		return this._view;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	get element() {
+		return this.view.editable.element;
+	}
+
 	/**
 	 * Initializes the UI.
 	 */
@@ -33,10 +68,12 @@ export default class BalloonEditorUI extends EditorUI {
 		// Bind to focusTracker instead of editor.editing.view because otherwise
 		// focused editable styles disappear when view#toolbar is focused.
 		view.editable.bind( 'isFocused' ).to( this.focusTracker );
-		editor.editing.view.attachDomRoot( view.editableElement );
+		editor.editing.view.attachDomRoot( view.editable.element );
 		view.editable.name = editingRoot.rootName;
 
-		this.focusTracker.add( view.editableElement );
+		this._editableElements.set( view.editable.name, view.editable.element );
+
+		this.focusTracker.add( view.editable.element );
 
 		enableToolbarKeyboardFocus( {
 			origin: editor.editing.view,
@@ -50,5 +87,16 @@ export default class BalloonEditorUI extends EditorUI {
 				balloonToolbar.hide();
 			}
 		} );
+
+		this.fire( 'ready' );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		this._view.destroy();
+
+		super.destroy();
 	}
 }

src/ballooneditoruiview.js

@@ -43,11 +43,4 @@ export default class BalloonEditorUIView extends EditorUIView {
 
 		this.registerChild( this.editable );
 	}
-
-	/**
-	 * @inheritDoc
-	 */
-	get editableElement() {
-		return this.editable.element;
-	}
 }

tests/ballooneditor.js

@@ -20,6 +20,8 @@ import ElementApiMixin from '@ckeditor/ckeditor5-core/src/editor/utils/elementap
 import RootElement from '@ckeditor/ckeditor5-engine/src/model/rootelement';
 
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+import log from '@ckeditor/ckeditor5-utils/src/log';
+
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
 import { describeMemoryUsage, testMemoryUsage } from '@ckeditor/ckeditor5-core/tests/_utils/memory';
 
@@ -33,6 +35,8 @@ describe( 'BalloonEditor', () => {
 		editorElement.innerHTML = '<p><strong>foo</strong> bar</p>';
 
 		document.body.appendChild( editorElement );
+
+		testUtils.sinon.stub( log, 'warn' ).callsFake( () => {} );
 	} );
 
 	afterEach( () => {
@@ -121,14 +125,6 @@ describe( 'BalloonEditor', () => {
 					return newEditor.destroy();
 				} );
 		} );
-
-		it( 'editor.element should contain the whole editor (with UI) element', () => {
-			return BalloonEditor.create( '<p>Hello world!</p>', {
-				plugins: [ Paragraph ]
-			} ).then( editor => {
-				expect( editor.editing.view.getDomRoot() ).to.equal( editor.element );
-			} );
-		} );
 	} );
 
 	describe( 'create()', () => {
@@ -157,7 +153,6 @@ describe( 'BalloonEditor', () => {
 		it( 'attaches editable UI as view\'s DOM root', () => {
 			const domRoot = editor.editing.view.getDomRoot();
 
-			expect( domRoot ).to.equal( editor.element );
 			expect( domRoot ).to.equal( editor.ui.view.editable.element );
 		} );
 
@@ -213,7 +208,7 @@ describe( 'BalloonEditor', () => {
 			class EventWatcher extends Plugin {
 				init() {
 					this.editor.on( 'pluginsReady', spy );
-					this.editor.on( 'uiReady', spy );
+					this.editor.ui.on( 'ready', spy );
 					this.editor.on( 'dataReady', spy );
 					this.editor.on( 'ready', spy );
 				}
@@ -224,7 +219,7 @@ describe( 'BalloonEditor', () => {
 					plugins: [ EventWatcher ]
 				} )
 				.then( newEditor => {
-					expect( fired ).to.deep.equal( [ 'pluginsReady', 'uiReady', 'dataReady', 'ready' ] );
+					expect( fired ).to.deep.equal( [ 'pluginsReady', 'ready', 'dataReady', 'ready' ] );
 
 					editor = newEditor;
 				} );
@@ -252,12 +247,12 @@ describe( 'BalloonEditor', () => {
 				} );
 		} );
 
-		it( 'fires uiReady once UI is ready', () => {
+		it( 'fires ready once UI is ready', () => {
 			let isRendered;
 
 			class EventWatcher extends Plugin {
 				init() {
-					this.editor.on( 'uiReady', () => {
+					this.editor.ui.on( 'ready', () => {
 						isRendered = this.editor.ui.view.isRendered;
 					} );
 				}

tests/ballooneditorui.js

@@ -16,7 +16,7 @@ import utils from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 
 describe( 'BalloonEditorUI', () => {
-	let editor, view, ui;
+	let editor, view, ui, viewElement;
 
 	testUtils.createSinonSandbox();
 
@@ -29,6 +29,7 @@ describe( 'BalloonEditorUI', () => {
 				editor = newEditor;
 				ui = editor.ui;
 				view = ui.view;
+				viewElement = view.editable.element;
 			} );
 	} );
 
@@ -123,6 +124,26 @@ describe( 'BalloonEditorUI', () => {
 			} );
 		} );
 	} );
+
+	describe( 'element()', () => {
+		it( 'returns correct element instance', () => {
+			expect( ui.element ).to.equal( viewElement );
+		} );
+	} );
+
+	describe( 'getEditableElement()', () => {
+		it( 'returns editable element (default)', () => {
+			expect( ui.getEditableElement() ).to.equal( view.editable.element );
+		} );
+
+		it( 'returns editable element (root name passed)', () => {
+			expect( ui.getEditableElement( 'main' ) ).to.equal( view.editable.element );
+		} );
+
+		it( 'returns undefined if editable with the given name is absent', () => {
+			expect( ui.getEditableElement( 'absent' ) ).to.be.undefined;
+		} );
+	} );
 } );
 
 class VirtualBalloonTestEditor extends VirtualTestEditor {
@@ -147,7 +168,6 @@ class VirtualBalloonTestEditor extends VirtualTestEditor {
 				editor.initPlugins()
 					.then( () => {
 						editor.ui.init();
-						editor.fire( 'uiReady' );
 						editor.fire( 'dataReady' );
 						editor.fire( 'ready' );
 					} )

tests/ballooneditoruiview.js

@@ -7,9 +7,13 @@ import BalloonEditorUIView from '../src/ballooneditoruiview';
 import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
 import Locale from '@ckeditor/ckeditor5-utils/src/locale';
 
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+
 describe( 'BalloonEditorUIView', () => {
 	let locale, view;
 
+	testUtils.createSinonSandbox();
+
 	beforeEach( () => {
 		locale = new Locale( 'en' );
 		view = new BalloonEditorUIView( locale );
@@ -40,12 +44,4 @@ describe( 'BalloonEditorUIView', () => {
 			sinon.assert.calledOnce( spy );
 		} );
 	} );
-
-	describe( 'editableElement', () => {
-		it( 'returns editable\'s view element', () => {
-			view.render();
-			expect( view.editableElement.getAttribute( 'contentEditable' ) ).to.equal( 'true' );
-			view.destroy();
-		} );
-	} );
 } );