From cef7171aab20e1493554a8e29d5ead6534aa4ec4 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 4 May 2016 16:59:31 +0200 Subject: [PATCH 01/16] Updated package.json with dependencies for the feature. --- package.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 0685a22f163..93abab0b4e2 100644 --- a/package.json +++ b/package.json @@ -8,10 +8,11 @@ "WYSIWYG" ], "dependencies": { + "ckeditor5-creator-classic": "ckeditor/ckeditor5-creator-classic#t/1", "ckeditor5-engine": "ckeditor/ckeditor5-engine", "ckeditor5-theme-lark": "ckeditor/ckeditor5-theme-lark", - "ckeditor5-ui": "ckeditor/ckeditor5-ui", - "ckeditor5-ui-default": "ckeditor/ckeditor5-ui-default", + "ckeditor5-ui": "ckeditor/ckeditor5-ui#t/22", + "ckeditor5-ui-default": "ckeditor/ckeditor5-ui-default#t/10", "ckeditor5-utils": "ckeditor/ckeditor5-utils", "requirejs": "Reinmar/requirejs" }, From bdca23a172697b03783c7fd939142aa7c41f3683 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Thu, 5 May 2016 13:19:10 +0200 Subject: [PATCH 02/16] Updated package.json with dependencies for the feature. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 93abab0b4e2..cf6d16e141d 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "dependencies": { "ckeditor5-creator-classic": "ckeditor/ckeditor5-creator-classic#t/1", "ckeditor5-engine": "ckeditor/ckeditor5-engine", - "ckeditor5-theme-lark": "ckeditor/ckeditor5-theme-lark", + "ckeditor5-theme-lark": "ckeditor/ckeditor5-theme-lark#t/8", "ckeditor5-ui": "ckeditor/ckeditor5-ui#t/22", "ckeditor5-ui-default": "ckeditor/ckeditor5-ui-default#t/10", "ckeditor5-utils": "ckeditor/ckeditor5-utils", From dfe55c2c22f4fcfca1b3a810dd49f9367e597073 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Mon, 9 May 2016 14:38:47 +0200 Subject: [PATCH 03/16] Updated existing mock creator tests to the new API. Renamed ClassicCreator to LegacyCreator to avoid confusion. --- .../_utils/ui/boxededitorui/boxededitorui.js | 38 ------------ .../ui/boxededitorui/boxededitoruiview.js | 40 ------------- .../editableui/inline/inlineeditableuiview.js | 39 ------------ .../manual/_utils/creator/inlinecreator.js | 5 +- .../{classiccreator.js => legacycreator.js} | 10 ++-- .../manual/_utils/creator/multicreator.js | 11 ++-- .../creator/manual/_utils/imitatefeatures.js | 59 ------------------- ...eator-classic.html => creator-legacy.html} | 0 .../{creator-classic.js => creator-legacy.js} | 6 +- .../{creator-classic.md => creator-legacy.md} | 0 10 files changed, 18 insertions(+), 190 deletions(-) delete mode 100644 tests/_utils/ui/boxededitorui/boxededitorui.js delete mode 100644 tests/_utils/ui/boxededitorui/boxededitoruiview.js delete mode 100644 tests/_utils/ui/editableui/inline/inlineeditableuiview.js rename tests/creator/manual/_utils/creator/{classiccreator.js => legacycreator.js} (85%) delete mode 100644 tests/creator/manual/_utils/imitatefeatures.js rename tests/creator/manual/{creator-classic.html => creator-legacy.html} (100%) rename tests/creator/manual/{creator-classic.js => creator-legacy.js} (88%) rename tests/creator/manual/{creator-classic.md => creator-legacy.md} (100%) diff --git a/tests/_utils/ui/boxededitorui/boxededitorui.js b/tests/_utils/ui/boxededitorui/boxededitorui.js deleted file mode 100644 index e8c4cec1b17..00000000000 --- a/tests/_utils/ui/boxededitorui/boxededitorui.js +++ /dev/null @@ -1,38 +0,0 @@ -/** - * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved. - * For licensing, see LICENSE.md. - */ - -'use strict'; - -import EditorUI from '/ckeditor5/ui/editorui/editorui.js'; -import ControllerCollection from '/ckeditor5/ui/controllercollection.js'; - -export default class BoxedEditorUI extends EditorUI { - constructor( editor ) { - super( editor ); - - this.collections.add( new ControllerCollection( 'top' ) ); - this.collections.add( new ControllerCollection( 'editable' ) ); - - const config = editor.config; - - /** - * @property {Number} width - */ - this.set( 'width', config.get( 'ui.width' ) ); - - /** - * @property {Number} height - */ - this.set( 'height', config.get( 'ui.height' ) ); - } - - /** - * @readonly - * @property {Model} viewModel - */ - get viewModel() { - return this; - } -} diff --git a/tests/_utils/ui/boxededitorui/boxededitoruiview.js b/tests/_utils/ui/boxededitorui/boxededitoruiview.js deleted file mode 100644 index 4eccfc68b1a..00000000000 --- a/tests/_utils/ui/boxededitorui/boxededitoruiview.js +++ /dev/null @@ -1,40 +0,0 @@ -/** - * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved. - * For licensing, see LICENSE.md. - */ - -'use strict'; - -import EditorUIView from '/ckeditor5/ui/editorui/editoruiview.js'; - -export default class BoxedEditorUIView extends EditorUIView { - constructor( model, locale ) { - super( model, locale ); - - this.template = { - tag: 'div', - - attributes: { - class: 'ck-reset ck-editor' - }, - - children: [ - { - tag: 'div', - attributes: { - class: 'ck-editor-top ck-reset-all' - } - }, - { - tag: 'div', - attributes: { - class: 'ck-editor-editable' - } - } - ] - }; - - this.register( 'top', '.ck-editor-top' ); - this.register( 'editable', '.ck-editor-editable' ); - } -} diff --git a/tests/_utils/ui/editableui/inline/inlineeditableuiview.js b/tests/_utils/ui/editableui/inline/inlineeditableuiview.js deleted file mode 100644 index 089d02d0e73..00000000000 --- a/tests/_utils/ui/editableui/inline/inlineeditableuiview.js +++ /dev/null @@ -1,39 +0,0 @@ -/** - * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved. - * For licensing, see LICENSE.md. - */ - -'use strict'; - -import EditableUIView from '/ckeditor5/ui/editableui/editableuiview.js'; - -export default class InlineEditableView extends EditableUIView { - constructor( model, locale, editableElement ) { - super( model, locale ); - - if ( editableElement ) { - this.element = editableElement; - } else { - const bind = this.attributeBinder; - - this.template = { - tag: 'div', - attributes: { - contentEditable: bind.to( 'isEditable' ) - } - }; - } - } - - init() { - this.setEditableElement( this.element ); - - super.init(); - } - - destroy() { - super.destroy(); - - this.editableElement.contentEditable = false; - } -} diff --git a/tests/creator/manual/_utils/creator/inlinecreator.js b/tests/creator/manual/_utils/creator/inlinecreator.js index cda02afb5b8..bda27d2050d 100644 --- a/tests/creator/manual/_utils/creator/inlinecreator.js +++ b/tests/creator/manual/_utils/creator/inlinecreator.js @@ -15,11 +15,12 @@ import { createEditableUI, createEditorUI } from '/ckeditor5/ui/creator-utils.js import EditorUIView from '/ckeditor5/ui/editorui/editoruiview.js'; import BoxlessEditorUI from '/tests/ckeditor5/_utils/ui/boxlesseditorui/boxlesseditorui.js'; import EditableUI from '/ckeditor5/ui/editableui/editableui.js'; -import InlineEditableUIView from '/tests/ckeditor5/_utils/ui/editableui/inline/inlineeditableuiview.js'; +import InlineEditableUIView from '/ckeditor5/ui/editableui/inline/inlineeditableuiview.js'; import Model from '/ckeditor5/ui/model.js'; import FloatingToolbar from '/tests/ckeditor5/_utils/ui/floatingtoolbar/floatingtoolbar.js'; import FloatingToolbarView from '/tests/ckeditor5/_utils/ui/floatingtoolbar/floatingtoolbarview.js'; -import { imitateFeatures, imitateDestroyFeatures } from '../imitatefeatures.js'; + +import { imitateFeatures, imitateDestroyFeatures } from '/ckeditor5/creator-classic/utils/imitatefeatures.js'; export default class InlineCreator extends StandardCreator { constructor( editor ) { diff --git a/tests/creator/manual/_utils/creator/classiccreator.js b/tests/creator/manual/_utils/creator/legacycreator.js similarity index 85% rename from tests/creator/manual/_utils/creator/classiccreator.js rename to tests/creator/manual/_utils/creator/legacycreator.js index d0351a33f79..14b837ff57d 100644 --- a/tests/creator/manual/_utils/creator/classiccreator.js +++ b/tests/creator/manual/_utils/creator/legacycreator.js @@ -12,17 +12,17 @@ import Editable from '/ckeditor5/editable.js'; import { createEditableUI, createEditorUI } from '/ckeditor5/ui/creator-utils.js'; -import BoxedEditorUI from '/tests/ckeditor5/_utils/ui/boxededitorui/boxededitorui.js'; -import BoxedEditorUIView from '/tests/ckeditor5/_utils/ui/boxededitorui/boxededitoruiview.js'; +import BoxedEditorUI from '/ckeditor5/ui/boxededitorui/boxededitorui.js'; +import BoxedEditorUIView from '/ckeditor5/ui/boxededitorui/boxededitoruiview.js'; import FramedEditableUI from '/tests/ckeditor5/_utils/ui/editableui/framed/framededitableui.js'; import FramedEditableUIView from '/tests/ckeditor5/_utils/ui/editableui/framed/framededitableuiview.js'; import Model from '/ckeditor5/ui/model.js'; import Toolbar from '/ckeditor5/ui/bindings/toolbar.js'; import ToolbarView from '/ckeditor5/ui/toolbar/toolbarview.js'; -import { imitateFeatures, imitateDestroyFeatures } from '../imitatefeatures.js'; +import { imitateFeatures, imitateDestroyFeatures } from '/ckeditor5/creator-classic/utils/imitatefeatures.js'; -export default class ClassicCreator extends StandardCreator { +export default class LegacyCreator extends StandardCreator { constructor( editor ) { super( editor, new HtmlDataProcessor() ); @@ -47,7 +47,7 @@ export default class ClassicCreator extends StandardCreator { // UI. this._replaceElement( editor.firstElement, editor.ui.view.element ); this._createToolbar(); - editor.ui.add( 'editable', createEditableUI( editor, editable, FramedEditableUI, FramedEditableUIView ) ); + editor.ui.add( 'main', createEditableUI( editor, editable, FramedEditableUI, FramedEditableUIView ) ); // Init. return super.create() diff --git a/tests/creator/manual/_utils/creator/multicreator.js b/tests/creator/manual/_utils/creator/multicreator.js index d0cb76fc921..e0afce8be90 100644 --- a/tests/creator/manual/_utils/creator/multicreator.js +++ b/tests/creator/manual/_utils/creator/multicreator.js @@ -12,14 +12,15 @@ import Editable from '/ckeditor5/editable.js'; import { createEditableUI, createEditorUI } from '/ckeditor5/ui/creator-utils.js'; -import BoxedEditorUI from '/tests/ckeditor5/_utils/ui/boxededitorui/boxededitorui.js'; -import BoxedEditorUIView from '/tests/ckeditor5/_utils/ui/boxededitorui/boxededitoruiview.js'; +import BoxedEditorUI from '/ckeditor5/ui/boxededitorui/boxededitorui.js'; +import BoxedEditorUIView from '/ckeditor5/ui/boxededitorui/boxededitoruiview.js'; import EditableUI from '/ckeditor5/ui/editableui/editableui.js'; -import InlineEditableUIView from '/tests/ckeditor5/_utils/ui/editableui/inline/inlineeditableuiview.js'; +import InlineEditableUIView from '/ckeditor5/ui/editableui/inline/inlineeditableuiview.js'; import Model from '/ckeditor5/ui/model.js'; import Toolbar from '/ckeditor5/ui/bindings/toolbar.js'; import ToolbarView from '/ckeditor5/ui/toolbar/toolbarview.js'; -import { imitateFeatures, imitateDestroyFeatures } from '../imitatefeatures.js'; + +import { imitateFeatures, imitateDestroyFeatures } from '/ckeditor5/creator-classic/utils/imitatefeatures.js'; export default class MultiCreator extends StandardCreator { constructor( editor ) { @@ -45,7 +46,7 @@ export default class MultiCreator extends StandardCreator { this._createToolbar(); for ( let editable of editor.editables ) { - editor.ui.add( 'editable', createEditableUI( editor, editable, EditableUI, InlineEditableUIView ) ); + editor.ui.add( 'main', createEditableUI( editor, editable, EditableUI, InlineEditableUIView ) ); } editor.elements.forEach( ( element ) => { diff --git a/tests/creator/manual/_utils/imitatefeatures.js b/tests/creator/manual/_utils/imitatefeatures.js deleted file mode 100644 index b8575198c73..00000000000 --- a/tests/creator/manual/_utils/imitatefeatures.js +++ /dev/null @@ -1,59 +0,0 @@ -/** - * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved. - * For licensing, see LICENSE.md. - */ - -'use strict'; - -import Model from '/ckeditor5/ui/model.js'; -import Button from '/ckeditor5/ui/button/button.js'; -import ButtonView from '/ckeditor5/ui/button/buttonview.js'; - -/** - * Immitates that some features were loaded and did their job. - * - * @param {ckeditor5.Editor} editor - */ -export function imitateFeatures( editor ) { - const t = editor.t; - - const boldModel = new Model( { - isEnabled: true, - isOn: false, - label: t( 'Bold' ), - icon: 'bold' - } ); - - boldModel.on( 'execute', () => { - /* global console */ - console.log( 'bold executed' ); - - boldModel.isOn = !boldModel.isOn; - } ); - - editor.ui.featureComponents.add( 'bold', Button, ButtonView, boldModel ); - - const italicModel = new Model( { - isEnabled: true, - isOn: false, - label: t( 'Italic' ), - icon: 'italic' - } ); - - italicModel.on( 'execute', () => { - /* global console */ - console.log( 'italic executed' ); - - italicModel.isOn = !italicModel.isOn; - } ); - - editor.ui.featureComponents.add( 'italic', Button, ButtonView, italicModel ); - - window.boldModel = boldModel; - window.italicModel = italicModel; -} - -export function imitateDestroyFeatures() { - delete window.boldModel; - delete window.italicModel; -} diff --git a/tests/creator/manual/creator-classic.html b/tests/creator/manual/creator-legacy.html similarity index 100% rename from tests/creator/manual/creator-classic.html rename to tests/creator/manual/creator-legacy.html diff --git a/tests/creator/manual/creator-classic.js b/tests/creator/manual/creator-legacy.js similarity index 88% rename from tests/creator/manual/creator-classic.js rename to tests/creator/manual/creator-legacy.js index 8b167fa2df4..1796a3a193e 100644 --- a/tests/creator/manual/creator-classic.js +++ b/tests/creator/manual/creator-legacy.js @@ -8,14 +8,14 @@ 'use strict'; import CKEDITOR from '/ckeditor.js'; -import ClassicCreator from '/tests/ckeditor5/creator/manual/_utils/creator/classiccreator.js'; +import LegacyCreator from '/tests/ckeditor5/creator/manual/_utils/creator/classiccreator.js'; import testUtils from '/tests/utils/_utils/utils.js'; let editor, editable, observer; function initEditor() { CKEDITOR.create( '#editor', { - creator: ClassicCreator, + creator: LegacyCreator, ui: { width: 400, height: 400 @@ -29,6 +29,8 @@ function initEditor() { window.editor = editor = newEditor; window.editable = editable = editor.editables.get( 0 ); + console.log( window.editor, editor ); + observer = testUtils.createObserver(); observer.observe( 'Editable', editable ); } ); diff --git a/tests/creator/manual/creator-classic.md b/tests/creator/manual/creator-legacy.md similarity index 100% rename from tests/creator/manual/creator-classic.md rename to tests/creator/manual/creator-legacy.md From df21dff1cab87a355b9763a3c1497afd1f342e49 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 10 May 2016 13:06:38 +0200 Subject: [PATCH 04/16] Fixed: Error thrown when building themes because package is compiled earlier than the core theme and dependencies are not met. --- dev/tasks/build/tasks.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/dev/tasks/build/tasks.js b/dev/tasks/build/tasks.js index 9d56c7f9544..02d8d9a1153 100644 --- a/dev/tasks/build/tasks.js +++ b/dev/tasks/build/tasks.js @@ -118,7 +118,10 @@ module.exports = ( config ) => { * @returns {Stream} */ sass() { - const dirs = utils.getPackages( config.ROOT_DIR ); + // Note: Sort to make sure theme is the very first SASS to build. Otherwise, + // packages using mixins and variables from that theme will throw errors + // because such are not available at this stage of compilation. + const dirs = utils.getPackages( config.ROOT_DIR ).sort( a => -a.indexOf( 'ckeditor5-theme' ) ); const streams = dirs.map( ( dirPath ) => { const glob = path.join( dirPath, themesGlob ); From 39343c4e99f5476df1ca1a744240a161a4e4d0a4 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 10 May 2016 13:23:30 +0200 Subject: [PATCH 05/16] =?UTF-8?q?Moved=20theme=20entry=20point=20sorting?= =?UTF-8?q?=20fix=20to=20gulp=E2=80=93level=20in=20compileThemes.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dev/tasks/build/tasks.js | 5 +---- dev/tasks/build/utils.js | 8 ++++++-- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/dev/tasks/build/tasks.js b/dev/tasks/build/tasks.js index 02d8d9a1153..9d56c7f9544 100644 --- a/dev/tasks/build/tasks.js +++ b/dev/tasks/build/tasks.js @@ -118,10 +118,7 @@ module.exports = ( config ) => { * @returns {Stream} */ sass() { - // Note: Sort to make sure theme is the very first SASS to build. Otherwise, - // packages using mixins and variables from that theme will throw errors - // because such are not available at this stage of compilation. - const dirs = utils.getPackages( config.ROOT_DIR ).sort( a => -a.indexOf( 'ckeditor5-theme' ) ); + const dirs = utils.getPackages( config.ROOT_DIR ); const streams = dirs.map( ( dirPath ) => { const glob = path.join( dirPath, themesGlob ); diff --git a/dev/tasks/build/utils.js b/dev/tasks/build/utils.js index 7f714811c8c..06195682fd0 100644 --- a/dev/tasks/build/utils.js +++ b/dev/tasks/build/utils.js @@ -448,8 +448,12 @@ require( [ 'tests' ], bender.defer(), function( err ) { function renderThemeFromEntryPoints( callback ) { gutil.log( `Compiling '${ gutil.colors.cyan( fileName ) }' from ${ gutil.colors.cyan( paths.length ) } entry points...` ); - // Note: Make sure windows\\style\\paths are preserved. - const dataToRender = paths.map( p => `@import "${ p.replace( /\\/g, '\\\\' ) }";` ) + // Sort to make sure theme is the very first SASS to build. Otherwise, + // packages using mixins and variables from that theme will throw errors + // because such are not available at this stage of compilation. + const dataToRender = paths.sort( a => -a.indexOf( 'ckeditor5-theme' ) ) + // Make sure windows\\style\\paths are preserved. + .map( p => `@import "${ p.replace( /\\/g, '\\\\' ) }";` ) .join( '\n' ); try { From 4b918c1d80cd916c240f48d77e58589920c40c9d Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 10 May 2016 13:33:23 +0200 Subject: [PATCH 06/16] Tests: Added test for builder compileThemes util to ensure the order of compiled theme files. --- dev/tests/build/utils.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/dev/tests/build/utils.js b/dev/tests/build/utils.js index c787e1de8be..8e61c6f4139 100644 --- a/dev/tests/build/utils.js +++ b/dev/tests/build/utils.js @@ -623,12 +623,12 @@ describe( 'build-utils', () => { const files = [ new Vinyl( { cwd: './', - path: 'foo/bar/theme.scss', + path: 'aaa/aaa/theme.scss', contents: new Buffer( '' ) } ), new Vinyl( { cwd: './', - path: 'baz/qux/theme.scss', + path: 'zzz/ckeditor5-theme-quz/theme.scss', contents: new Buffer( '' ) } ), new Vinyl( { @@ -667,9 +667,11 @@ describe( 'build-utils', () => { }, () => { expect( compiledThemePath ).to.be.equal( 'abc.css' ); expect( compiledThemeCss.toString() ).to.be.equal( -`/*! C:\\win\\dows\\theme.scss */ -/*! baz/qux/theme.scss */ -/*! foo/bar/theme.scss */ +// Note: Order matters. The first one should be ckeditor5-theme-* in order +// to provide necessary dependencies (mixins, vars) for the following files. +`/*! zzz/ckeditor5-theme-quz/theme.scss */ +/*! aaa/aaa/theme.scss */ +/*! C:\\win\\dows\\theme.scss */ ` ); done(); From 9fa18276e8b750dbe7b52cec11f695780692080a Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Thu, 12 May 2016 11:20:51 +0200 Subject: [PATCH 07/16] Tests: Updated FramedEditableUIView so it is a child of FramedEditableUIIframeView and extends EditableUIView. --- ...ditableui.js => framededitableuiiframe.js} | 2 +- .../framed/framededitableuiiframeview.js | 77 +++++++++++++++++++ .../editableui/framed/framededitableuiview.js | 45 +---------- 3 files changed, 81 insertions(+), 43 deletions(-) rename tests/_utils/ui/editableui/framed/{framededitableui.js => framededitableuiiframe.js} (84%) create mode 100644 tests/_utils/ui/editableui/framed/framededitableuiiframeview.js diff --git a/tests/_utils/ui/editableui/framed/framededitableui.js b/tests/_utils/ui/editableui/framed/framededitableuiiframe.js similarity index 84% rename from tests/_utils/ui/editableui/framed/framededitableui.js rename to tests/_utils/ui/editableui/framed/framededitableuiiframe.js index ca5f2eb4ae5..08fc19e3f6a 100644 --- a/tests/_utils/ui/editableui/framed/framededitableui.js +++ b/tests/_utils/ui/editableui/framed/framededitableuiiframe.js @@ -7,7 +7,7 @@ import EditableUI from '/ckeditor5/ui/editableui/editableui.js'; -export default class FramedEditableUI extends EditableUI { +export default class FramedEditableUIIframe extends EditableUI { constructor( editor, editableModel ) { super( editor, editableModel ); diff --git a/tests/_utils/ui/editableui/framed/framededitableuiiframeview.js b/tests/_utils/ui/editableui/framed/framededitableuiiframeview.js new file mode 100644 index 00000000000..c5ae32aba9a --- /dev/null +++ b/tests/_utils/ui/editableui/framed/framededitableuiiframeview.js @@ -0,0 +1,77 @@ +/** + * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +'use strict'; + +// import EditableUIView from '/ckeditor5/ui/editableui/editableuiview.js'; +import View from '/ckeditor5/ui/view.js'; +import FramedEditableUIView from './framededitableuiview.js'; + +export default class FramedEditableUIIframeView extends View { + constructor( model, locale ) { + super( model, locale ); + + const bind = this.attributeBinder; + + // Here's the tricky part - we must return the promise from init() + // because iframe loading may be asynchronous. However, we can't start + // listening to 'load' in init(), because at this point the element is already in the DOM + // and the 'load' event might already be fired. + // So here we store both - the promise and the deferred object so we're able to resolve + // the promise in _iframeLoaded. + this._iframePromise = new Promise( ( resolve, reject ) => { + this._iframeDeferred = { resolve, reject }; + } ); + + this.template = { + tag: 'iframe', + attributes: { + class: [ 'ck-framededitable ck-reset-all' ], + // It seems that we need to allow scripts in order to be able to listen to events. + // TODO: Research that. Perhaps the src must be set? + sandbox: 'allow-same-origin allow-scripts', + width: bind.to( 'width' ), + height: bind.to( 'height' ) + }, + on: { + load: 'loaded' + } + }; + + this.on( 'loaded', this._iframeLoaded, this ); + } + + init() { + super.init(); + + return this._iframePromise; + } + + /** + * This getter exposes the {@link ui.editable.EditableUIView#editableElement}. It points to the + * `` inside the `