T/135: Implement a creator with sticky toolbar

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 {

dev/tasks/test/tasks.js

@@ -85,7 +85,8 @@ module.exports = () => {
 			const src = [
 				...benderSrc,
 				'!build/cjs/tests/{ui,ui-*}/**/*.js',
-				'!build/cjs/tests/theme-*/**/*.js'
+				'!build/cjs/tests/theme-*/**/*.js',
+				'!build/cjs/tests/creator-*/**/*.js'
 			];
 
 			return gulp.src( src )

dev/tests/build/utils.js

@@ -289,7 +289,7 @@ describe( 'build-utils', () => {
 					contents: new Buffer( 'foo()' )
 				} ) );
 			} );
-			
+
 			it( 'should process test file in cjs format', ( done ) => {
 				const buildDir = 'build/';
 				const formats = [ 'cjs' ];
@@ -677,12 +677,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( {
@@ -721,9 +721,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();

package.json

@@ -8,12 +8,13 @@
     "WYSIWYG"
   ],
   "dependencies": {
+    "ckeditor5-creator-classic": "ckeditor/ckeditor5-creator-classic#t/1",
     "ckeditor5-delete": "ckeditor/ckeditor5-delete",
     "ckeditor5-engine": "ckeditor/ckeditor5-engine",
     "ckeditor5-enter": "ckeditor/ckeditor5-enter",
     "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-undo": "ckeditor/ckeditor5-undo",
     "ckeditor5-utils": "ckeditor/ckeditor5-utils",
     "requirejs": "Reinmar/requirejs"
@@ -47,7 +48,6 @@
     "gulp-plumber": "^1.1.0",
     "gulp-rename": "^1.2.2",
     "gulp-replace": "^0.5.4",
-    "gulp-sass": "^2.2.0",
     "gulp-sourcemaps": "^1.6.0",
     "gulp-svg-sprite": "^1.2.19",
     "gulp-util": "^3.0.7",
@@ -64,7 +64,7 @@
     "mockery": "^1.4.0",
     "multipipe": "^0.3.0",
     "ncp": "^2.0.0",
-    "node-sass": "^3.4.2",
+    "node-sass": "^3.7.0",
     "replace": "^0.3.0",
     "run-sequence": "^1.1.5",
     "semver": "^5.1.0",

tests/_utils/ui/editableui/framed/framededitableuiiframe.js

@@ -0,0 +1,28 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import EditableUI from '/ckeditor5/ui/editableui/editableui.js';
+
+/**
+ * The basic implementation of an iframe-based {@link ui.editableUI.EditableUI}.
+ *
+ * @memberOf ui.editableUI.iframe
+ * @extends ui.editableUI.EditableUI
+ */
+export default class FramedEditableUIIframe extends EditableUI {
+	/**
+	 * Creates a new instance of the iframe–based {@link ui.editableUI.EditableUI EditableUI}.
+	 *
+	 * @param {ckeditor5.Editor} editor The editor instance.
+	 * @param {utils.Observable} editableModel The model for the editable.
+	 */
+	constructor( editor, editableModel ) {
+		super( editor, editableModel );
+
+		this.viewModel.bind( 'width', 'height' ).to( editor.ui );
+	}
+}

tests/_utils/ui/editableui/framed/framededitableuiiframeview.js

@@ -0,0 +1,104 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import IframeView from '/ckeditor5/ui/iframe/iframeview.js';
+import FramedEditableUIView from './framededitableuiview.js';
+
+/**
+ * The basic implementation of an {@link ui.iframe.IframeView IframeView}-based
+ * {@link ui.editableUI.EditableUIView}.
+ *
+ * @memberOf ui.editableUI.iframe
+ * @extends ui.iframe.IframeView
+ */
+export default class FramedEditableUIIframeView extends IframeView {
+	/**
+	 * Creates a new instance of the {@link ui.iframe.IframeView IframeView}–based
+	 * {@link ui.editableUI.EditableUIView EditableUIView}.
+	 *
+	 * @param {utils.Observable} [model] (View)Model of this View.
+	 * @param {utils.Locale} [locale] The {@link ckeditor5.Editor#locale editor's locale} instance.
+	 */
+	constructor( model, locale ) {
+		super( model, locale );
+
+		const bind = this.attributeBinder;
+
+		this.template.attributes.class.push( 'ck-editor__editable-iframe' );
+		this.template.attributes.style = [
+			'width:',
+			bind.to( 'width', ( w ) => `${w}px` ),
+			';',
+			'height:',
+			bind.to( 'height', ( h ) => `${h}px`  )
+		];
+
+		this.on( 'loaded', this._iframeLoaded, this );
+
+		/**
+		 * A view which represents the editable `<body>` element within the iframe.
+		 *
+		 * @private
+		 * @member {FramedEditableUIView} ui.editableUI.iframe#_innerView
+		 */
+	}
+
+	/**
+	 * This getter exposes the {@link ui.editable.EditableUIView#editableElement}. It points to the
+	 * `<body>` inside the `<iframe>` document, which is provided by `FramedEditableUIView`.
+	 */
+	get editableElement() {
+		return this._innerView.editableElement;
+	}
+
+	/**
+	 * Destroys the View instance and child {@link _innerView}.
+	 */
+	destroy() {
+		super.destroy();
+
+		return this._innerView.destroy();
+	}
+
+	/**
+	 * When the iframe is loaded, it creates a child view out of <body> element
+	 * and initializes it. Element of this view is exposed through {@link editableElement}.
+	 *
+	 * @protected
+	 */
+	_iframeLoaded() {
+		this._innerView = new FramedEditableUIView(
+			this.model,
+			this.locale,
+			this.element.contentDocument.body
+		);
+
+		this._innerView.init();
+
+		this._iframeDeferred.resolve();
+	}
+}
+
+/**
+ * The view model interface for FramedEditableUIView.
+ *
+ * @memberOf ui.editableUI.iframe
+ * @interface FramedEditableUIViewModel
+ * @mixes utils.ObservableMixin
+ */
+
+/**
+ * The width of the iframe.
+ *
+ * @member {Number} ui.editableUI.iframe.FramedEditableUIViewModel#width
+ */
+
+/**
+ * The height of the iframe.
+ *
+ * @member {Number} ui.editableUI.iframe.FramedEditableUIViewModel#height
+ */

tests/_utils/ui/editableui/framed/framededitableuiview.js

@@ -8,48 +8,9 @@
 import EditableUIView from '/ckeditor5/ui/editableui/editableuiview.js';
 
 export default class FramedEditableUIView extends EditableUIView {
-	constructor( model, locale ) {
-		super( model, locale );
+	constructor( model, locale, editableElement ) {
+		super( model, locale, editableElement );
 
-		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;
-	}
-
-	_iframeLoaded() {
-		this.setEditableElement( this.element.contentDocument.body );
-
-		this._iframeDeferred.resolve();
+		this.template.attributes.class.push( 'ck-editor__editable_framed' );
 	}
 }