diff --git a/src/ballooneditor.js b/src/ballooneditor.js index 6d2673f..1a6423c 100644 --- a/src/ballooneditor.js +++ b/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 ) ? diff --git a/src/ballooneditorui.js b/src/ballooneditorui.js index dd98cc7..8839629 100644 --- a/src/ballooneditorui.js +++ b/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(); } } diff --git a/src/ballooneditoruiview.js b/src/ballooneditoruiview.js index 05b296c..a999774 100644 --- a/src/ballooneditoruiview.js +++ b/src/ballooneditoruiview.js @@ -43,11 +43,4 @@ export default class BalloonEditorUIView extends EditorUIView { this.registerChild( this.editable ); } - - /** - * @inheritDoc - */ - get editableElement() { - return this.editable.element; - } } diff --git a/tests/ballooneditor.js b/tests/ballooneditor.js index 0c4ee3b..673703f 100644 --- a/tests/ballooneditor.js +++ b/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 = '

foo bar

'; 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( '

Hello world!

', { - 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; } ); } diff --git a/tests/ballooneditorui.js b/tests/ballooneditorui.js index a67a2b5..c1bcc75 100644 --- a/tests/ballooneditorui.js +++ b/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' ); } ) diff --git a/tests/ballooneditoruiview.js b/tests/ballooneditoruiview.js index 835effd..0ab8eea 100644 --- a/tests/ballooneditoruiview.js +++ b/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(); - } ); - } ); } );