diff --git a/dev/tasks/build/utils.js b/dev/tasks/build/utils.js index 99d08623159..b64c10e261d 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 { diff --git a/dev/tasks/test/tasks.js b/dev/tasks/test/tasks.js index d38aa02e10e..6e09e55dcb4 100644 --- a/dev/tasks/test/tasks.js +++ b/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 ) diff --git a/dev/tests/build/utils.js b/dev/tests/build/utils.js index d9fde405124..e2e61819cdb 100644 --- a/dev/tests/build/utils.js +++ b/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(); diff --git a/package.json b/package.json index 633492e27b4..7d5dc47f5a7 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "WYSIWYG" ], "dependencies": { + "ckeditor5-creator-classic": "ckeditor/ckeditor5-creator-classic", "ckeditor5-delete": "ckeditor/ckeditor5-delete", "ckeditor5-engine": "ckeditor/ckeditor5-engine", "ckeditor5-enter": "ckeditor/ckeditor5-enter", @@ -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", 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/framed/framededitableui.js b/tests/_utils/ui/editableui/framed/framededitableui.js deleted file mode 100644 index ca5f2eb4ae5..00000000000 --- a/tests/_utils/ui/editableui/framed/framededitableui.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * @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'; - -export default class FramedEditableUI extends EditableUI { - constructor( editor, editableModel ) { - super( editor, editableModel ); - - this.viewModel.bind( 'width', 'height' ).to( editor.ui ); - } -} diff --git a/tests/_utils/ui/editableui/framed/framededitableuiiframe.js b/tests/_utils/ui/editableui/framed/framededitableuiiframe.js new file mode 100644 index 00000000000..49e20f34f17 --- /dev/null +++ b/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 ); + } +} diff --git a/tests/_utils/ui/editableui/framed/framededitableuiiframeview.js b/tests/_utils/ui/editableui/framed/framededitableuiiframeview.js new file mode 100644 index 00000000000..a46ad471d7e --- /dev/null +++ b/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 `
` element within the iframe. + * + * @private + * @member {FramedEditableUIView} ui.editableUI.iframe#_innerView + */ + } + + /** + * This getter exposes the {@link ui.editable.EditableUIView#editableElement}. It points to the + * `` inside the `