ソースを参照

Merge tag 'v1.0.0-beta.1' into stable

Release: v1.0.0-beta.1.
Piotrek Koszuliński 7 年 前
コミット
51acece551

+ 1 - 1
packages/ckeditor5-editor-balloon/.eslintrc.js

@@ -1,5 +1,5 @@
 /**
 /**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md.
  * For licensing, see LICENSE.md.
  */
  */
 
 

+ 15 - 11
packages/ckeditor5-editor-balloon/.travis.yml

@@ -1,24 +1,28 @@
 sudo: required
 sudo: required
 dist: trusty
 dist: trusty
 addons:
 addons:
+  firefox: "latest"
   apt:
   apt:
     sources:
     sources:
-      - google-chrome
+    - google-chrome
     packages:
     packages:
-      - google-chrome-stable
+    - google-chrome-stable
 language: node_js
 language: node_js
 node_js:
 node_js:
-  - "6"
+- '6'
 cache:
 cache:
-  - node_modules
+- node_modules
 before_install:
 before_install:
-  - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start
+- export DISPLAY=:99.0
+- sh -e /etc/init.d/xvfb start
 install:
 install:
-  - npm install @ckeditor/ckeditor5-dev-tests
-  - ckeditor5-dev-tests-install-dependencies
+- npm install @ckeditor/ckeditor5-dev-tests
+- ckeditor5-dev-tests-install-dependencies
 script:
 script:
-  - ckeditor5-dev-tests-travis
+- ckeditor5-dev-tests-travis
 after_success:
 after_success:
-  - codeclimate-test-reporter < coverage/lcov.info
-  - ckeditor5-dev-tests-save-revision
+- ckeditor5-dev-tests-save-revision
+env:
+  global:
+  - secure: MrzUiFehTAF5C+LWnJY1qP3KA4kGprSo43ot9l/CM/40YTAVlEetXEOd7Xkk+m4lVr6fxdh7zoSrJPpDiS0DuuiKDsQanZkO2IMlV0Sg32MTtufAfjAD5yNk1aESxs6DNcOGANdVYebK7PN0iCstSSaqZGhtsv5zosmyFyNWaZjeacGmfItyDo88J2ZyX1mG5db/KboHK1+rn7IaT1y7vDlQ8oW4BWjD/KsCp25UiP92RBT/vxvh9XdzZ65uBrIE/LhbSm9RXL/rc5WGXkslcS+chjzJ+K3zuZ4sjxM8MmnRm8cJAWxM8WcFM2W2YSs95G5lSeYHSg3/XZNtcNCN0dcsE9pB4UPHEqTAV5ZPakUYhBC2g8kVEnfOotn+Dgnl0TBzRomk7kmaJ2f4RPXrk+uk4xgdo8AnSt1QEwDljAZduJqIpm376tS9Ltl71NVxyDM0HHwLwKV8kUWNbRkGJXZFc0dNPIhzoVaJ3qnJNLV8QQbGLhCMJ70u7rTwySiaavHJgYNGDECqBhLeJOoaeQE4WAOoz7HZo4sXUHoqr6yLHv5W3NdI9q0S2F6bEJrrog/L12Vb+pIOd7Ru+FPdqWemUDpizHLdz6uHGG9IfRlzwfwClaoZJCidIL2hAdY5tPTyPQjcoJXRIrHaVuNx3BvEjH5otkTVrNPIe455j5w=
+  - secure: jlUQ4UgF8ihkyPOeG8e1FOdxltYRH8+/qY4GOewtYawCaffS4U0mvfluLe2BwvmRzzwI485e5Zimxvw372355+7ygK21GcK4GDrVcsIxdwuw+49Pi4G1vdo192/A1Ryy/CoHO/6e1bNJ46EYqvCLy0RAudMKmM75sBIPN9ViohnpkiHasMzbOiD9LbQFLFP8DNb8hOK6tPDQf6NG4Z/16sRURrzif4raBaZ2qU/r00wKz0D7XAOBIO5rfsBM8+hXGced0XzSNnA5CYn+U9wO7XJdGm6aLJti98bZkeVmc9CiV520G/kvMEuDWxPAsCuvun3nIt7TyIUrnLFNJwoH+nno+p2EMysWDBaYgpfDp/7zM2tHz2pzcrVNdFjZ9NYx9Jby8F9L+KrhTw+Z0Z1kD2xGFvP8YgKEb0x/nWCanvaQvS9yW6lFE43oJ7gGjsdXKiYF0tlUDSprizOc7oRTtGan8LCUNfPI8PalWmxHDh+wsphCLmhw5IarYsWqLiBAP2p3vYrGn5JRuHNfMkw8rfmRXT5bds3g/87F5j4uAeaRgXH0/YMEF40vKIw5yEijZO/mVosLtf9RlImE8WFmJ/ias5bCIRzIjHmvef3QsehiiULDvm3Kr4mGITMpLrn3jvXjG1a3oVLnpOqsidbDIYD2DytFZ7BZi2F8DtVJ2mQ=

+ 7 - 0
packages/ckeditor5-editor-balloon/CHANGELOG.md

@@ -1,6 +1,13 @@
 Changelog
 Changelog
 =========
 =========
 
 
+## [1.0.0-beta.1](https://github.com/ckeditor/ckeditor5-editor-balloon/compare/v1.0.0-alpha.2...v1.0.0-beta.1) (2018-03-15)
+
+### Other changes
+
+* Migrated the editor styles to PostCSS (see [ckeditor/ckeditor5-ui#144](https://github.com/ckeditor/ckeditor5-ui/issues/144)). ([bd239e9](https://github.com/ckeditor/ckeditor5-editor-balloon/commit/bd239e9))
+
+
 ## [1.0.0-alpha.2](https://github.com/ckeditor/ckeditor5-editor-balloon/compare/v1.0.0-alpha.1...v1.0.0-alpha.2) (2017-11-14)
 ## [1.0.0-alpha.2](https://github.com/ckeditor/ckeditor5-editor-balloon/compare/v1.0.0-alpha.1...v1.0.0-alpha.2) (2017-11-14)
 
 
 ### Other changes
 ### Other changes

+ 1 - 1
packages/ckeditor5-editor-balloon/LICENSE.md

@@ -2,7 +2,7 @@ Software License Agreement
 ==========================
 ==========================
 
 
 **Balloon Editor** – https://github.com/ckeditor/ckeditor5-editor-balloon <br>
 **Balloon Editor** – https://github.com/ckeditor/ckeditor5-editor-balloon <br>
-Copyright (c) 2003-2017, [CKSource](http://cksource.com) Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2018, [CKSource](http://cksource.com) Frederico Knabben. All rights reserved.
 
 
 Licensed under the terms of any of the following licenses at your choice:
 Licensed under the terms of any of the following licenses at your choice:
 
 

+ 3 - 1
packages/ckeditor5-editor-balloon/README.md

@@ -4,7 +4,9 @@ CKEditor 5 balloon editor implementation
 [![Join the chat at https://gitter.im/ckeditor/ckeditor5](https://badges.gitter.im/ckeditor/ckeditor5.svg)](https://gitter.im/ckeditor/ckeditor5?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![Join the chat at https://gitter.im/ckeditor/ckeditor5](https://badges.gitter.im/ckeditor/ckeditor5.svg)](https://gitter.im/ckeditor/ckeditor5?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-editor-balloon.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-balloon)
 [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-editor-balloon.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-balloon)
 [![Build Status](https://travis-ci.org/ckeditor/ckeditor5-editor-balloon.svg?branch=master)](https://travis-ci.org/ckeditor/ckeditor5-editor-balloon)
 [![Build Status](https://travis-ci.org/ckeditor/ckeditor5-editor-balloon.svg?branch=master)](https://travis-ci.org/ckeditor/ckeditor5-editor-balloon)
-[![Test Coverage](https://codeclimate.com/github/ckeditor/ckeditor5-editor-balloon/badges/coverage.svg)](https://codeclimate.com/github/ckeditor/ckeditor5-editor-balloon/coverage)
+[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=d3hvenZqQVZERFQ5d09FWXdyT0ozVXhLaVltRFRjTTUyZGpvQWNmWVhUUT0tLUZqNlJ1YWRUd0RvdEVOaEptM1B2Q0E9PQ==--c9d3dee40b9b4471ff3fb516d9ecf8d09292c7e0)](https://www.browserstack.com/automate/public-build/d3hvenZqQVZERFQ5d09FWXdyT0ozVXhLaVltRFRjTTUyZGpvQWNmWVhUUT0tLUZqNlJ1YWRUd0RvdEVOaEptM1B2Q0E9PQ==--c9d3dee40b9b4471ff3fb516d9ecf8d09292c7e0)
+[![Coverage Status](https://coveralls.io/repos/github/ckeditor/ckeditor5-editor-balloon/badge.svg?branch=master)](https://coveralls.io/github/ckeditor/ckeditor5-editor-balloon?branch=master)
+<br>
 [![Dependency Status](https://david-dm.org/ckeditor/ckeditor5-editor-balloon/status.svg)](https://david-dm.org/ckeditor/ckeditor5-editor-balloon)
 [![Dependency Status](https://david-dm.org/ckeditor/ckeditor5-editor-balloon/status.svg)](https://david-dm.org/ckeditor/ckeditor5-editor-balloon)
 [![devDependency Status](https://david-dm.org/ckeditor/ckeditor5-editor-balloon/dev-status.svg)](https://david-dm.org/ckeditor/ckeditor5-editor-balloon?type=dev)
 [![devDependency Status](https://david-dm.org/ckeditor/ckeditor5-editor-balloon/dev-status.svg)](https://david-dm.org/ckeditor/ckeditor5-editor-balloon?type=dev)
 
 

+ 12 - 12
packages/ckeditor5-editor-balloon/package.json

@@ -1,26 +1,26 @@
 {
 {
   "name": "@ckeditor/ckeditor5-editor-balloon",
   "name": "@ckeditor/ckeditor5-editor-balloon",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-beta.1",
   "description": "Balloon editor implementation for CKEditor 5.",
   "description": "Balloon editor implementation for CKEditor 5.",
   "keywords": [
   "keywords": [
     "ckeditor5",
     "ckeditor5",
     "ckeditor5-editor"
     "ckeditor5-editor"
   ],
   ],
   "dependencies": {
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-engine": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-theme-lark": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-ui": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-utils": "^1.0.0-alpha.2"
+    "@ckeditor/ckeditor5-core": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-engine": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-theme-lark": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-ui": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-utils": "^1.0.0-beta.1"
   },
   },
   "devDependencies": {
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-essentials": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-paragraph": "^1.0.0-alpha.2",
-    "eslint": "^4.8.0",
-    "eslint-config-ckeditor5": "^1.0.6",
+    "@ckeditor/ckeditor5-basic-styles": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-essentials": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-paragraph": "^1.0.0-beta.1",
+    "eslint": "^4.15.0",
+    "eslint-config-ckeditor5": "^1.0.7",
     "husky": "^0.14.3",
     "husky": "^0.14.3",
-    "lint-staged": "^4.2.3"
+    "lint-staged": "^6.0.0"
   },
   },
   "engines": {
   "engines": {
     "node": ">=6.0.0",
     "node": ">=6.0.0",

+ 33 - 18
packages/ckeditor5-editor-balloon/src/ballooneditor.js

@@ -1,5 +1,5 @@
 /**
 /**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md.
  * For licensing, see LICENSE.md.
  */
  */
 
 
@@ -7,28 +7,31 @@
  * @module editor-balloon/ballooneditor
  * @module editor-balloon/ballooneditor
  */
  */
 
 
-import StandardEditor from '@ckeditor/ckeditor5-core/src/editor/standardeditor';
+import Editor from '@ckeditor/ckeditor5-core/src/editor/editor';
 import HtmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/htmldataprocessor';
 import HtmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/htmldataprocessor';
-import ContextualToolbar from '@ckeditor/ckeditor5-ui/src/toolbar/contextual/contextualtoolbar';
+import BalloonToolbar from '@ckeditor/ckeditor5-ui/src/toolbar/balloon/balloontoolbar';
 import BalloonEditorUI from './ballooneditorui';
 import BalloonEditorUI from './ballooneditorui';
 import BalloonEditorUIView from './ballooneditoruiview';
 import BalloonEditorUIView from './ballooneditoruiview';
 import setDataInElement from '@ckeditor/ckeditor5-utils/src/dom/setdatainelement';
 import setDataInElement from '@ckeditor/ckeditor5-utils/src/dom/setdatainelement';
-
-import '../theme/theme.scss';
+import getDataFromElement from '@ckeditor/ckeditor5-utils/src/dom/getdatafromelement';
+import DataApiMixin from '@ckeditor/ckeditor5-core/src/editor/utils/dataapimixin';
+import ElementApiMixin from '@ckeditor/ckeditor5-core/src/editor/utils/elementapimixin';
+import attachToForm from '@ckeditor/ckeditor5-core/src/editor/utils/attachtoform';
+import mix from '@ckeditor/ckeditor5-utils/src/mix';
 
 
 /**
 /**
- * The {@glink builds/guides/overview#Balloon-editor balloon editor} implementation (Medium-like editor).
- * It uses an inline editable and a toolbar based on the {@link module:ui/toolbar/contextual/contextualtoolbar~ContextualToolbar}.
+ * The {@glink builds/guides/overview#balloon-editor balloon editor} implementation (Medium-like editor).
+ * It uses an inline editable and a toolbar based on the {@link module:ui/toolbar/balloon/balloontoolbar~BalloonToolbar}.
  * See the {@glink examples/builds/balloon-editor demo}.
  * See the {@glink examples/builds/balloon-editor demo}.
  *
  *
  * In order to create a balloon editor instance, use the static
  * In order to create a balloon editor instance, use the static
- * {@link module:editor-balloon/ballooneditor~BalloonEditor#create `BalloonEditor.create()`} method.
+ * {@link module:editor-balloon/ballooneditor~BalloonEditor.create `BalloonEditor.create()`} method.
  *
  *
  * # Balloon editor and balloon build
  * # Balloon editor and balloon build
  *
  *
  * The balloon editor can be used directly from source (if you installed the
  * The balloon editor can be used directly from source (if you installed the
  * [`@ckeditor/ckeditor5-editor-balloon`](https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-balloon) package)
  * [`@ckeditor/ckeditor5-editor-balloon`](https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-balloon) package)
- * but it is also available in the {@glink builds/guides/overview#Balloon-editor balloon build}.
+ * but it is also available in the {@glink builds/guides/overview#balloon-editor balloon build}.
  *
  *
  * {@glink builds/guides/overview Builds} are ready-to-use editors with plugins bundled in. When using the editor from
  * {@glink builds/guides/overview Builds} are ready-to-use editors with plugins bundled in. When using the editor from
  * source you need to take care of loading all plugins by yourself
  * source you need to take care of loading all plugins by yourself
@@ -36,16 +39,19 @@ import '../theme/theme.scss';
  * Using the editor from source gives much better flexibility and allows easier customization.
  * Using the editor from source gives much better flexibility and allows easier customization.
  *
  *
  * Read more about initializing the editor from source or as a build in
  * Read more about initializing the editor from source or as a build in
- * {@link module:editor-balloon/ballooneditor~BalloonEditor#create `BalloonEditor.create()`}.
+ * {@link module:editor-balloon/ballooneditor~BalloonEditor.create `BalloonEditor.create()`}.
  *
  *
- * @extends module:core/editor/standardeditor~StandardEditor
+ * @mixes module:core/editor/utils/dataapimixin~DataApiMixin
+ * @mixes module:core/editor/utils/elementapimixin~ElementApiMixin
+ * @implements module:core/editor/editorwithui~EditorWithUI
+ * @extends module:core/editor/editor~Editor
  */
  */
-export default class BalloonEditor extends StandardEditor {
+export default class BalloonEditor extends Editor {
 	/**
 	/**
 	 * Creates an instance of the balloon editor.
 	 * Creates an instance of the balloon editor.
 	 *
 	 *
 	 * **Note:** do not use the constructor to create editor instances. Use the static
 	 * **Note:** do not use the constructor to create editor instances. Use the static
-	 * {@link module:editor-balloon/ballooneditor~BalloonEditor#create `BalloonEditor.create()`} method instead.
+	 * {@link module:editor-balloon/ballooneditor~BalloonEditor.create `BalloonEditor.create()`} method instead.
 	 *
 	 *
 	 * @protected
 	 * @protected
 	 * @param {HTMLElement} element The DOM element that will be the source for the created editor
 	 * @param {HTMLElement} element The DOM element that will be the source for the created editor
@@ -53,14 +59,20 @@ export default class BalloonEditor extends StandardEditor {
 	 * @param {module:core/editor/editorconfig~EditorConfig} config The editor configuration.
 	 * @param {module:core/editor/editorconfig~EditorConfig} config The editor configuration.
 	 */
 	 */
 	constructor( element, config ) {
 	constructor( element, config ) {
-		super( element, config );
+		super( config );
+
+		this.element = element;
 
 
-		this.config.get( 'plugins' ).push( ContextualToolbar );
-		this.config.define( 'contextualToolbar', this.config.get( 'toolbar' ) );
+		this.config.get( 'plugins' ).push( BalloonToolbar );
+		this.config.define( 'balloonToolbar', this.config.get( 'toolbar' ) );
 
 
-		this.document.createRoot();
 		this.data.processor = new HtmlDataProcessor();
 		this.data.processor = new HtmlDataProcessor();
+
+		this.model.document.createRoot();
+
 		this.ui = new BalloonEditorUI( this, new BalloonEditorUIView( this.locale, element ) );
 		this.ui = new BalloonEditorUI( this, new BalloonEditorUIView( this.locale, element ) );
+
+		attachToForm( this );
 	}
 	}
 
 
 	/**
 	/**
@@ -131,7 +143,7 @@ export default class BalloonEditor extends StandardEditor {
 						editor.ui.init();
 						editor.ui.init();
 						editor.fire( 'uiReady' );
 						editor.fire( 'uiReady' );
 					} )
 					} )
-					.then( () => editor.loadDataFromEditorElement() )
+					.then( () => editor.data.init( getDataFromElement( element ) ) )
 					.then( () => {
 					.then( () => {
 						editor.fire( 'dataReady' );
 						editor.fire( 'dataReady' );
 						editor.fire( 'ready' );
 						editor.fire( 'ready' );
@@ -141,3 +153,6 @@ export default class BalloonEditor extends StandardEditor {
 		} );
 		} );
 	}
 	}
 }
 }
+
+mix( BalloonEditor, DataApiMixin );
+mix( BalloonEditor, ElementApiMixin );

+ 7 - 6
packages/ckeditor5-editor-balloon/src/ballooneditorui.js

@@ -1,5 +1,5 @@
 /**
 /**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md.
  * For licensing, see LICENSE.md.
  */
  */
 
 
@@ -51,17 +51,18 @@ export default class BalloonEditorUI {
 	init() {
 	init() {
 		const editor = this.editor;
 		const editor = this.editor;
 		const view = this.view;
 		const view = this.view;
-		const contextualToolbar = editor.plugins.get( 'ContextualToolbar' );
+		const balloonToolbar = editor.plugins.get( 'BalloonToolbar' );
 
 
 		view.render();
 		view.render();
 
 
 		// Setup the editable.
 		// Setup the editable.
-		const editingRoot = editor.editing.createRoot( view.editableElement );
+		const editingRoot = editor.editing.view.document.getRoot();
 		view.editable.bind( 'isReadOnly' ).to( editingRoot );
 		view.editable.bind( 'isReadOnly' ).to( editingRoot );
 
 
 		// Bind to focusTracker instead of editor.editing.view because otherwise
 		// Bind to focusTracker instead of editor.editing.view because otherwise
 		// focused editable styles disappear when view#toolbar is focused.
 		// focused editable styles disappear when view#toolbar is focused.
 		view.editable.bind( 'isFocused' ).to( this.focusTracker );
 		view.editable.bind( 'isFocused' ).to( this.focusTracker );
+		editor.editing.view.attachDomRoot( view.editableElement );
 		view.editable.name = editingRoot.rootName;
 		view.editable.name = editingRoot.rootName;
 
 
 		this.focusTracker.add( view.editableElement );
 		this.focusTracker.add( view.editableElement );
@@ -70,12 +71,12 @@ export default class BalloonEditorUI {
 			origin: editor.editing.view,
 			origin: editor.editing.view,
 			originFocusTracker: this.focusTracker,
 			originFocusTracker: this.focusTracker,
 			originKeystrokeHandler: editor.keystrokes,
 			originKeystrokeHandler: editor.keystrokes,
-			toolbar: contextualToolbar.toolbarView,
+			toolbar: balloonToolbar.toolbarView,
 			beforeFocus() {
 			beforeFocus() {
-				contextualToolbar.show();
+				balloonToolbar.show();
 			},
 			},
 			afterBlur() {
 			afterBlur() {
-				contextualToolbar.hide();
+				balloonToolbar.hide();
 			}
 			}
 		} );
 		} );
 	}
 	}

+ 1 - 1
packages/ckeditor5-editor-balloon/src/ballooneditoruiview.js

@@ -1,5 +1,5 @@
 /**
 /**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md.
  * For licensing, see LICENSE.md.
  */
  */
 
 

+ 67 - 35
packages/ckeditor5-editor-balloon/tests/ballooneditor.js

@@ -1,25 +1,28 @@
 /**
 /**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md.
  * For licensing, see LICENSE.md.
  */
  */
 
 
-/* globals document */
+/* globals document, Event */
 
 
 import BalloonEditorUI from '../src/ballooneditorui';
 import BalloonEditorUI from '../src/ballooneditorui';
 import BalloonEditorUIView from '../src/ballooneditoruiview';
 import BalloonEditorUIView from '../src/ballooneditoruiview';
 
 
 import HtmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/htmldataprocessor';
 import HtmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/htmldataprocessor';
-import buildViewConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildviewconverter';
-import buildModelConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildmodelconverter';
+
+import { downcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/downcast-converters';
+import { upcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/upcast-converters';
 
 
 import BalloonEditor from '../src/ballooneditor';
 import BalloonEditor from '../src/ballooneditor';
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
 import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
-import ContextualToolbar from '@ckeditor/ckeditor5-ui/src/toolbar/contextual/contextualtoolbar';
+import BalloonToolbar from '@ckeditor/ckeditor5-ui/src/toolbar/balloon/balloontoolbar';
+import DataApiMixin from '@ckeditor/ckeditor5-core/src/editor/utils/dataapimixin';
+import ElementApiMixin from '@ckeditor/ckeditor5-core/src/editor/utils/elementapimixin';
+import RootElement from '@ckeditor/ckeditor5-engine/src/model/rootelement';
 
 
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
-import count from '@ckeditor/ckeditor5-utils/src/count';
 
 
 testUtils.createSinonSandbox();
 testUtils.createSinonSandbox();
 
 
@@ -40,27 +43,65 @@ describe( 'BalloonEditor', () => {
 	describe( 'constructor()', () => {
 	describe( 'constructor()', () => {
 		beforeEach( () => {
 		beforeEach( () => {
 			editor = new BalloonEditor( editorElement, {
 			editor = new BalloonEditor( editorElement, {
-				plugins: [ ContextualToolbar, Bold ],
+				plugins: [ BalloonToolbar, Bold ],
 				toolbar: [ 'Bold' ]
 				toolbar: [ 'Bold' ]
 			} );
 			} );
 		} );
 		} );
 
 
-		it( 'pushes ContextualToolbar to the list of plugins', () => {
-			expect( editor.config.get( 'plugins' ) ).to.include( ContextualToolbar );
-		} );
-
-		it( 'pipes config#toolbar to config#contextualToolbar', () => {
-			expect( editor.config.get( 'contextualToolbar' ) ).to.have.members( [ 'Bold' ] );
+		it( 'pushes BalloonToolbar to the list of plugins', () => {
+			expect( editor.config.get( 'plugins' ) ).to.include( BalloonToolbar );
 		} );
 		} );
 
 
-		it( 'creates a single document root', () => {
-			expect( count( editor.document.getRootNames() ) ).to.equal( 1 );
-			expect( editor.document.getRoot() ).to.have.property( 'name', '$root' );
+		it( 'pipes config#toolbar to config#balloonToolbar', () => {
+			expect( editor.config.get( 'balloonToolbar' ) ).to.have.members( [ 'Bold' ] );
 		} );
 		} );
 
 
 		it( 'uses HTMLDataProcessor', () => {
 		it( 'uses HTMLDataProcessor', () => {
 			expect( editor.data.processor ).to.be.instanceof( HtmlDataProcessor );
 			expect( editor.data.processor ).to.be.instanceof( HtmlDataProcessor );
 		} );
 		} );
+
+		it( 'has a Data Interface', () => {
+			testUtils.isMixed( BalloonEditor, DataApiMixin );
+		} );
+
+		it( 'has a Element Interface', () => {
+			testUtils.isMixed( BalloonEditor, ElementApiMixin );
+		} );
+
+		it( 'creates main root element', () => {
+			expect( editor.model.document.getRoot( 'main' ) ).to.instanceof( RootElement );
+		} );
+
+		it( 'handles form element', () => {
+			const form = document.createElement( 'form' );
+			const textarea = document.createElement( 'textarea' );
+			form.appendChild( textarea );
+			document.body.appendChild( form );
+
+			// Prevents page realods in Firefox ;|
+			form.addEventListener( 'submit', evt => {
+				evt.preventDefault();
+			} );
+
+			return BalloonEditor.create( textarea, {
+				plugins: [ Paragraph ]
+			} ).then( editor => {
+				expect( textarea.value ).to.equal( '' );
+
+				editor.setData( '<p>Foo</p>' );
+
+				form.dispatchEvent( new Event( 'submit', {
+					// We need to be able to do preventDefault() to prevent page reloads in Firefox.
+					cancelable: true
+				} ) );
+
+				expect( textarea.value ).to.equal( '<p>Foo</p>' );
+
+				return editor.destroy().then( () => {
+					form.remove();
+				} );
+			} );
+		} );
 	} );
 	} );
 
 
 	describe( 'create()', () => {
 	describe( 'create()', () => {
@@ -90,10 +131,6 @@ describe( 'BalloonEditor', () => {
 			expect( editor.editing.view.getDomRoot() ).to.equal( editor.ui.view.editable.element );
 			expect( editor.editing.view.getDomRoot() ).to.equal( editor.ui.view.editable.element );
 		} );
 		} );
 
 
-		it( 'creates a single div editable root in the view', () => {
-			expect( editor.editing.view.getRoot() ).to.have.property( 'name', 'div' );
-		} );
-
 		it( 'creates the UI using BalloonEditorUI classes', () => {
 		it( 'creates the UI using BalloonEditorUI classes', () => {
 			expect( editor.ui ).to.be.instanceof( BalloonEditorUI );
 			expect( editor.ui ).to.be.instanceof( BalloonEditorUI );
 			expect( editor.ui.view ).to.be.instanceof( BalloonEditorUIView );
 			expect( editor.ui.view ).to.be.instanceof( BalloonEditorUIView );
@@ -215,23 +252,18 @@ describe( 'BalloonEditor', () => {
 				.then( newEditor => {
 				.then( newEditor => {
 					editor = newEditor;
 					editor = newEditor;
 
 
-					const schema = editor.document.schema;
-
-					schema.registerItem( 'heading' );
-					schema.allow( { name: 'heading', inside: '$root' } );
-					schema.allow( { name: '$text', inside: 'heading' } );
-
-					buildModelConverter().for( editor.data.modelToView )
-						.fromElement( 'heading' )
-						.toElement( 'heading' );
+					const schema = editor.model.schema;
 
 
-					buildViewConverter().for( editor.data.viewToModel )
-						.fromElement( 'heading' )
-						.toElement( 'heading' );
+					schema.register( 'heading' );
+					schema.extend( 'heading', { allowIn: '$root' } );
+					schema.extend( '$text', { allowIn: 'heading' } );
 
 
-					buildModelConverter().for( editor.editing.modelToView )
-						.fromElement( 'heading' )
-						.toElement( 'heading-editing-representation' );
+					editor.conversion.for( 'upcast' ).add( upcastElementToElement( { model: 'heading', view: 'heading' } ) );
+					editor.conversion.for( 'dataDowncast' ).add( downcastElementToElement( { model: 'heading', view: 'heading' } ) );
+					editor.conversion.for( 'editingDowncast' ).add( downcastElementToElement( {
+						model: 'heading',
+						view: 'heading-editing-representation'
+					} ) );
 				} );
 				} );
 		} );
 		} );
 
 

+ 45 - 45
packages/ckeditor5-editor-balloon/tests/ballooneditorui.js

@@ -1,5 +1,5 @@
 /**
 /**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md.
  * For licensing, see LICENSE.md.
  */
  */
 
 
@@ -9,7 +9,7 @@ import ComponentFactory from '@ckeditor/ckeditor5-ui/src/componentfactory';
 import BalloonEditorUI from '../src/ballooneditorui';
 import BalloonEditorUI from '../src/ballooneditorui';
 import BalloonEditorUIView from '../src/ballooneditoruiview';
 import BalloonEditorUIView from '../src/ballooneditoruiview';
 import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
 import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
-import ContextualToolbar from '@ckeditor/ckeditor5-ui/src/toolbar/contextual/contextualtoolbar';
+import BalloonToolbar from '@ckeditor/ckeditor5-ui/src/toolbar/balloon/balloontoolbar';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 import utils from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
 import utils from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
@@ -20,7 +20,7 @@ describe( 'BalloonEditorUI', () => {
 	beforeEach( () => {
 	beforeEach( () => {
 		return VirtualBalloonTestEditor
 		return VirtualBalloonTestEditor
 			.create( {
 			.create( {
-				plugins: [ ContextualToolbar ]
+				plugins: [ BalloonToolbar ]
 			} )
 			} )
 			.then( newEditor => {
 			.then( newEditor => {
 				editor = newEditor;
 				editor = newEditor;
@@ -49,47 +49,6 @@ describe( 'BalloonEditorUI', () => {
 		it( 'creates #focusTracker', () => {
 		it( 'creates #focusTracker', () => {
 			expect( ui.focusTracker ).to.be.instanceOf( FocusTracker );
 			expect( ui.focusTracker ).to.be.instanceOf( FocusTracker );
 		} );
 		} );
-
-		describe( 'editable', () => {
-			let editable;
-
-			beforeEach( () => {
-				editable = editor.editing.view.getRoot();
-			} );
-
-			it( 'registers view.editable#element in editor focus tracker', () => {
-				ui.focusTracker.isFocused = false;
-
-				view.editable.element.dispatchEvent( new Event( 'focus' ) );
-				expect( ui.focusTracker.isFocused ).to.true;
-			} );
-
-			it( 'sets view.editable#name', () => {
-				expect( view.editable.name ).to.equal( editable.rootName );
-			} );
-
-			it( 'binds view.editable#isFocused', () => {
-				utils.assertBinding(
-					view.editable,
-					{ isFocused: false },
-					[
-						[ ui.focusTracker, { isFocused: true } ]
-					],
-					{ isFocused: true }
-				);
-			} );
-
-			it( 'binds view.editable#isReadOnly', () => {
-				utils.assertBinding(
-					view.editable,
-					{ isReadOnly: false },
-					[
-						[ editable, { isReadOnly: true } ]
-					],
-					{ isReadOnly: true }
-				);
-			} );
-		} );
 	} );
 	} );
 
 
 	describe( 'init()', () => {
 	describe( 'init()', () => {
@@ -98,7 +57,7 @@ describe( 'BalloonEditorUI', () => {
 		} );
 		} );
 
 
 		it( 'initializes keyboard navigation between view#toolbar and view#editable', () => {
 		it( 'initializes keyboard navigation between view#toolbar and view#editable', () => {
-			const toolbar = editor.plugins.get( 'ContextualToolbar' );
+			const toolbar = editor.plugins.get( 'BalloonToolbar' );
 			const toolbarFocusSpy = sinon.stub( toolbar.toolbarView, 'focus' ).returns( {} );
 			const toolbarFocusSpy = sinon.stub( toolbar.toolbarView, 'focus' ).returns( {} );
 			const toolbarShowSpy = sinon.stub( toolbar, 'show' ).returns( {} );
 			const toolbarShowSpy = sinon.stub( toolbar, 'show' ).returns( {} );
 			const toolbarHideSpy = sinon.stub( toolbar, 'hide' ).returns( {} );
 			const toolbarHideSpy = sinon.stub( toolbar, 'hide' ).returns( {} );
@@ -131,6 +90,47 @@ describe( 'BalloonEditorUI', () => {
 
 
 			sinon.assert.callOrder( editingFocusSpy, toolbarHideSpy );
 			sinon.assert.callOrder( editingFocusSpy, toolbarHideSpy );
 		} );
 		} );
+
+		describe( 'editable', () => {
+			let editable;
+
+			beforeEach( () => {
+				editable = editor.editing.view.document.getRoot();
+			} );
+
+			it( 'registers view.editable#element in editor focus tracker', () => {
+				ui.focusTracker.isFocused = false;
+
+				view.editable.element.dispatchEvent( new Event( 'focus' ) );
+				expect( ui.focusTracker.isFocused ).to.true;
+			} );
+
+			it( 'sets view.editable#name', () => {
+				expect( view.editable.name ).to.equal( editable.rootName );
+			} );
+
+			it( 'binds view.editable#isFocused', () => {
+				utils.assertBinding(
+					view.editable,
+					{ isFocused: false },
+					[
+						[ ui.focusTracker, { isFocused: true } ]
+					],
+					{ isFocused: true }
+				);
+			} );
+
+			it( 'binds view.editable#isReadOnly', () => {
+				utils.assertBinding(
+					view.editable,
+					{ isReadOnly: false },
+					[
+						[ editable, { isReadOnly: true } ]
+					],
+					{ isReadOnly: true }
+				);
+			} );
+		} );
 	} );
 	} );
 
 
 	describe( 'destroy()', () => {
 	describe( 'destroy()', () => {

+ 1 - 1
packages/ckeditor5-editor-balloon/tests/ballooneditoruiview.js

@@ -1,5 +1,5 @@
 /**
 /**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md.
  * For licensing, see LICENSE.md.
  */
  */
 
 

+ 4 - 4
packages/ckeditor5-editor-balloon/tests/manual/ballooneditor.js

@@ -1,5 +1,5 @@
 /**
 /**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md.
  * For licensing, see LICENSE.md.
  */
  */
 
 
@@ -21,9 +21,9 @@ function initEditors() {
 		BalloonEditor
 		BalloonEditor
 			.create( document.querySelector( selector ), {
 			.create( document.querySelector( selector ), {
 				plugins: [ ArticlePluginSet ],
 				plugins: [ ArticlePluginSet ],
-				toolbar: [ 'headings', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
+				toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
 				image: {
 				image: {
-					toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
+					toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
 				}
 				}
 			} )
 			} )
 			.then( editor => {
 			.then( editor => {
@@ -31,7 +31,7 @@ function initEditors() {
 				console.log( 'It has been added to global `editors` and `editables`.' );
 				console.log( 'It has been added to global `editors` and `editables`.' );
 
 
 				window.editors[ selector ] = editor;
 				window.editors[ selector ] = editor;
-				window.editables.push( editor.editing.view.getRoot() );
+				window.editables.push( editor.editing.view.document.getRoot() );
 
 
 				const observer = testUtils.createObserver();
 				const observer = testUtils.createObserver();
 
 

+ 0 - 4
packages/ckeditor5-editor-balloon/theme/theme.scss

@@ -1,4 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-@import '~@ckeditor/ckeditor5-theme-lark/theme/theme.scss';