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

Release: v1.0.0-beta.1.

.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.
  */
 

.travis.yml

@@ -1,24 +1,28 @@
 sudo: required
 dist: trusty
 addons:
+  firefox: "latest"
   apt:
     sources:
-      - google-chrome
+    - google-chrome
     packages:
-      - google-chrome-stable
+    - google-chrome-stable
 language: node_js
 node_js:
-  - "6"
+- '6'
 cache:
-  - node_modules
+- node_modules
 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:
-  - npm install @ckeditor/ckeditor5-dev-tests
-  - ckeditor5-dev-tests-install-dependencies
+- npm install @ckeditor/ckeditor5-dev-tests
+- ckeditor5-dev-tests-install-dependencies
 script:
-  - ckeditor5-dev-tests-travis
+- ckeditor5-dev-tests-travis
 after_success:
-  - codeclimate-test-reporter < coverage/lcov.info
-  - ckeditor5-dev-tests-save-revision
+- ckeditor5-dev-tests-save-revision
+env:
+  global:
+  - secure: HvkSDjAVlYflmRnzq4WLYDccK+Ka44NfA7RVnycYmTzpviyjYSt1nSx6bMa/tmWbK+TCzjj6sA/B88Wn1udYe7K6SxZfz4zW1E3kPTgoT3mGuvhpaGfx4Fhbr8N1tXAJ/LCvwFbF5D5tMjMQs1CwCIirtBT8i5f6kqdbDAntA7xSq789yZTdAwgtqEVCOFyNHVKoCQdGmy+7u5rdRHFdTVWcO5k7m6qGeG0L7BOGRQrCBPRfvG+qLrWBJNbxf3jaCiVd760VsmTPXHMjUftDao6X79eXWq+LxG0tZKP+DHxJo88/GIdAP4U2JPupqPua/hKHUkXEn729NtAQsDCnhM3mKbJjc4dTQphR+WVCmNaqoGljjjflQ6M9QgaDqARTq2Vr7sBAgNvf8G5eShklL1k8oQ/4QRCMr6a8AeExvAa9M3rx5Czb3HSwgzf8jDl0g5vd34hiBsTC94GFVZjVGu1c7URcVKV1BWvIaOSHTbJxf4DEpc7+gfOtYy+YN+zS2Wc18TlxoD3NHcAjFVkAY+K4v6QaTmkqQsWmP1N/B0ySTQf3UhoXnyifm22alYMnTzvJgN3IlQ6kht4YeLTCRBZwAjs5p93ymUs6BjTJasB/x3MytsWoXYk2O1LuSitk+kvjEy5ogDixhBeLXZeKlmYhMPNcSz+RqGCqbClTzpI=
+  - secure: uoedx5n7VAfe4o4aRsPtb+BhSArMcfDPy0E+gY9yGBR/qprmck6cyvBAiWUUEehDfhyWKupXk0pWIIQSo7/BfK6SOzwutfBHsIKiJmSP8KYEjT4rpW03Vhd4dkExU8Qg5Er1R878/PunF7XJq51cXfnfcS0lpzwwh6o+qsFoPgs3yRcDZCVVg60MxetQ/5Ob4Pf1ew26MHwqDzT7N0nETkp8EljNe8+RZYMqEeX3FD4oJDli072NJ+0hYOpCt8LfMQecZ/cR+vLdW/nWeqzuXPBp5TkmIqB/MVUG8yVQv6y77Fh3RGuo7ch2gJcVJCMpkmI0zhBtk6Up8Y//wCUBcdXabnO2AOlCnOphBfhFrCd0/lc3OrUDE1vsvwm/mT2rSGpNRXcXD0cpP33RQ2s/stlYkoDOM9sb9S/CGxqRHB8jdrvfU47aee1IYV8vZgr+I0NefK1uNGBk9n+WXNF+d8svpQ1hgTArED7MG4NO1+rUYgKcftCQzmO3RSzC3MOyuH7kq+eTnMU3InEEByzUPBGIStndmv11wIGGh/qCUuVivPTnn6JsR6FEBfF0ADuOSB3Z8RZMBhv1kOBKCv3xsWG6et/ASRFte/eZu0v1AN3LaiZEsfCJ22TNwGaqwmYAzHrpqYf/FViUlGmJCUuJfC9/EWm3fF09o2BqyDu7ZTk=

CHANGELOG.md

@@ -1,6 +1,15 @@
 Changelog
 =========
 
+## [1.0.0-beta.1](https://github.com/ckeditor/ckeditor5-widget/compare/v1.0.0-alpha.2...v1.0.0-beta.1) (2018-03-15)
+
+### Other changes
+
+* Aligned feature class naming to the new scheme. ([23991a4](https://github.com/ckeditor/ckeditor5-widget/commit/23991a4))
+* Migrated package styles to PostCSS. Moved visual styles to `@ckeditor/ckeditor5-theme-lark` (see [ckeditor/ckeditor5-ui#144](https://github.com/ckeditor/ckeditor5-ui/issues/144)). ([857d6d4](https://github.com/ckeditor/ckeditor5-widget/commit/857d6d4))
+* Switched to handling deletion around widgets by using the `delete` event instead of listening directly on key events. Closes [#29](https://github.com/ckeditor/ckeditor5-widget/issues/29). ([ee6cc95](https://github.com/ckeditor/ckeditor5-widget/commit/ee6cc95))
+
+
 ## [1.0.0-alpha.2](https://github.com/ckeditor/ckeditor5-widget/compare/v1.0.0-alpha.1...v1.0.0-alpha.2) (2017-11-14)
 
 ### Bug fixes

LICENSE.md

@@ -2,7 +2,7 @@ Software License Agreement
 ==========================
 
 **CKEditor 5 widget API** – https://github.com/ckeditor/ckeditor5-image <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:
 

README.md

@@ -4,7 +4,9 @@ CKEditor 5 widget API
 [![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-widget.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-widget)
 [![Build Status](https://travis-ci.org/ckeditor/ckeditor5-widget.svg)](https://travis-ci.org/ckeditor/ckeditor5-widget)
-[![Test Coverage](https://codeclimate.com/github/ckeditor/ckeditor5-widget/badges/coverage.svg)](https://codeclimate.com/github/ckeditor/ckeditor5-widget/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-widget/badge.svg?branch=master)](https://coveralls.io/github/ckeditor/ckeditor5-widget?branch=master)
+<br>
 [![Dependency Status](https://david-dm.org/ckeditor/ckeditor5-widget/status.svg)](https://david-dm.org/ckeditor/ckeditor5-widget)
 [![devDependency Status](https://david-dm.org/ckeditor/ckeditor5-widget/dev-status.svg)](https://david-dm.org/ckeditor/ckeditor5-widget?type=dev)
 

docs/api/widget.md

@@ -17,7 +17,7 @@ Browse the API documentation of this package by using the module tree on the lef
 <info-box>
 	The widget API is proposed in a very different way than it was in CKEditor 4. It is just a set of utilities that allow you to implement typical object-like entities. Most of the work actually happens in the {@link api/engine engine} and this API's role is only to properly conduct the engine.
 
-	Therefore, this is just one of the ways how widgets can be proposed. This API can be expected to change (grow) and for now, the only available documentation is in the {@link module:image/image/imageengine~ImageEngine}'s code (which is the only widget API consumer at this stage).
+	Therefore, this is just one of the ways how widgets can be proposed. This API can be expected to change (grow) and for now, the only available documentation is in the {@link module:image/image/imageediting~ImageEditing}'s code (which is the only widget API consumer at this stage).
 </info-box>
 
 ## Installation

package.json

@@ -1,22 +1,23 @@
 {
   "name": "@ckeditor/ckeditor5-widget",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-beta.1",
   "description": "Widget API for CKEditor 5.",
   "keywords": [
     "ckeditor5",
     "ckeditor5-lib"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-engine": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-utils": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-theme-lark": "^1.0.0-alpha.2"
+    "@ckeditor/ckeditor5-core": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-engine": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-utils": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-theme-lark": "^1.0.0-beta.1"
   },
   "devDependencies": {
-    "eslint": "^4.8.0",
-    "eslint-config-ckeditor5": "^1.0.6",
+    "@ckeditor/ckeditor5-typing": "^1.0.0-beta.1",
+    "eslint": "^4.15.0",
+    "eslint-config-ckeditor5": "^1.0.7",
     "husky": "^0.14.3",
-    "lint-staged": "^4.2.3"
+    "lint-staged": "^6.0.0"
   },
   "engines": {
     "node": ">=6.0.0",

src/highlightstack.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.
  */
 
@@ -11,12 +11,14 @@ import EmitterMixin from '@ckeditor/ckeditor5-utils/src/emittermixin';
 import mix from '@ckeditor/ckeditor5-utils/src/mix';
 
 /**
- * Class used to handle correct order of
- * {@link module:engine/conversion/buildmodelconverter~ModelConverterBuilder#toHighlight highlights} on
- * elements. When different highlights are applied to same element correct order should be preserved:
+ * Class used to handle correct order of highlights on elements.
+ *
+ * When different highlights are applied to same element correct order should be preserved:
+ *
  * * highlight with highest priority should be applied,
  * * if two highlights have same priority - sort by CSS class provided in
- * {@link module:engine/conversion/model-to-view-converters~HighlightDescriptor}.
+ * {@link module:engine/conversion/downcast-converters~HighlightDescriptor}.
+ *
  * This way, highlight will be applied with the same rules it is applied on texts.
  */
 export default class HighlightStack {
@@ -31,9 +33,10 @@ export default class HighlightStack {
 	 * Adds highlight descriptor to the stack.
 	 *
 	 * @fires change:top
-	 * @param {module:engine/conversion/model-to-view-converters~HighlightDescriptor} descriptor
+	 * @param {module:engine/conversion/downcast-converters~HighlightDescriptor} descriptor
+	 * @param {module:engine/view/writer~Writer} writer
 	 */
-	add( descriptor ) {
+	add( descriptor, writer ) {
 		const stack = this._stack;
 
 		// Save top descriptor and insert new one. If top is changed - fire event.
@@ -45,7 +48,8 @@ export default class HighlightStack {
 		if ( oldTop !== newTop && !compareDescriptors( oldTop, newTop ) ) {
 			this.fire( 'change:top', {
 				oldDescriptor: oldTop,
-				newDescriptor: newTop
+				newDescriptor: newTop,
+				writer
 			} );
 		}
 	}
@@ -55,8 +59,9 @@ export default class HighlightStack {
 	 *
 	 * @fires change:top
 	 * @param {String} id Id of the descriptor to remove.
+	 * @param {module:engine/view/writer~Writer} writer
 	 */
-	remove( id ) {
+	remove( id, writer ) {
 		const stack = this._stack;
 
 		const oldTop = stack[ 0 ];
@@ -67,7 +72,8 @@ export default class HighlightStack {
 		if ( oldTop !== newTop && !compareDescriptors( oldTop, newTop ) ) {
 			this.fire( 'change:top', {
 				oldDescriptor: oldTop,
-				newDescriptor: newTop
+				newDescriptor: newTop,
+				writer
 			} );
 		}
 	}
@@ -77,7 +83,7 @@ export default class HighlightStack {
 	 * descriptor with same id is already present.
 	 *
 	 * @private
-	 * @param {module:engine/conversion/model-to-view-converters~HighlightDescriptor} descriptor
+	 * @param {module:engine/conversion/downcast-converters~HighlightDescriptor} descriptor
 	 */
 	_insertDescriptor( descriptor ) {
 		const stack = this._stack;
@@ -125,17 +131,17 @@ mix( HighlightStack, EmitterMixin );
 
 // Compares two descriptors by checking their priority and class list.
 //
-// @param {module:engine/conversion/model-to-view-converters~HighlightDescriptor} a
-// @param {module:engine/conversion/model-to-view-converters~HighlightDescriptor} b
+// @param {module:engine/conversion/downcast-converters~HighlightDescriptor} a
+// @param {module:engine/conversion/downcast-converters~HighlightDescriptor} b
 // @returns {Boolean} Returns true if both descriptors are defined and have same priority and classes.
 function compareDescriptors( a, b ) {
 	return a && b && a.priority == b.priority && classesToString( a.class ) == classesToString( b.class );
 }
 
 // Checks whenever first descriptor should be placed in the stack before second one.
 //
-// @param {module:engine/conversion/model-to-view-converters~HighlightDescriptor} a
-// @param {module:engine/conversion/model-to-view-converters~HighlightDescriptor} b
+// @param {module:engine/conversion/downcast-converters~HighlightDescriptor} a
+// @param {module:engine/conversion/downcast-converters~HighlightDescriptor} b
 // @returns {Boolean}
 function shouldABeBeforeB( a, b ) {
 	if ( a.priority > b.priority ) {
@@ -148,7 +154,7 @@ function shouldABeBeforeB( a, b ) {
 	return classesToString( a.class ) > classesToString( b.class );
 }
 
-// Converts CSS classes passed with {@link module:engine/conversion/model-to-view-converters~HighlightDescriptor} to
+// Converts CSS classes passed with {@link module:engine/conversion/downcast-converters~HighlightDescriptor} to
 // sorted string.
 //
 // @param {String|Array<String>} descriptor
@@ -162,8 +168,9 @@ function classesToString( classes ) {
  *
  * @event change:top
  * @param {Object} data Additional information about the change.
- * @param {module:engine/conversion/model-to-view-converters~HighlightDescriptor} [data.newDescriptor] New highlight
+ * @param {module:engine/conversion/downcast-converters~HighlightDescriptor} [data.newDescriptor] New highlight
  * descriptor. It will be `undefined` when last descriptor is removed from the stack.
- * @param {module:engine/conversion/model-to-view-converters~HighlightDescriptor} [data.oldDescriptor] Old highlight
+ * @param {module:engine/conversion/downcast-converters~HighlightDescriptor} [data.oldDescriptor] Old highlight
  * descriptor. It will be `undefined` when first descriptor is added to the stack.
+ * @param {module:engine/view/writer~Writer} writer View writer that can be used to modify element.
  */

src/utils.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.
  */
 
@@ -45,25 +45,27 @@ export function isWidget( element ) {
  * * implements `addHighlight` and `removeHighlight` custom properties to handle view highlight on widgets.
  *
  * @param {module:engine/view/element~Element} element
+ * @param {module:engine/view/writer~Writer} writer
  * @param {Object} [options={}]
  * @param {String|Function} [options.label] Element's label provided to {@link ~setLabel} function. It can be passed as
  * a plain string or a function returning a string.
  * @returns {module:engine/view/element~Element} Returns same element.
  */
-export function toWidget( element, options = {} ) {
-	element.setAttribute( 'contenteditable', 'false' );
+export function toWidget( element, writer, options = {} ) {
+	writer.setAttribute( 'contenteditable', 'false', element );
+	writer.addClass( WIDGET_CLASS_NAME, element );
+	writer.setCustomProperty( widgetSymbol, true, element );
 	element.getFillerOffset = getFillerOffset;
-	element.addClass( WIDGET_CLASS_NAME );
-	element.setCustomProperty( widgetSymbol, true );
 
 	if ( options.label ) {
-		setLabel( element, options.label );
+		setLabel( element, options.label, writer );
 	}
 
 	setHighlightHandling(
 		element,
-		( element, descriptor ) => element.addClass( ...normalizeToArray( descriptor.class ) ),
-		( element, descriptor ) => element.removeClass( ...normalizeToArray( descriptor.class ) )
+		writer,
+		( element, descriptor, writer ) => writer.addClass( normalizeToArray( descriptor.class ), element ),
+		( element, descriptor, writer ) => writer.removeClass( normalizeToArray( descriptor.class ), element )
 	);
 
 	return element;
@@ -79,24 +81,25 @@ export function toWidget( element, options = {} ) {
  * properly determine which highlight descriptor should be used at given time.
  *
  * @param {module:engine/view/element~Element} element
+ * @param {module:engine/view/writer~Writer} writer
  * @param {Function} add
  * @param {Function} remove
  */
-export function setHighlightHandling( element, add, remove ) {
+export function setHighlightHandling( element, writer, add, remove ) {
 	const stack = new HighlightStack();
 
 	stack.on( 'change:top', ( evt, data ) => {
 		if ( data.oldDescriptor ) {
-			remove( element, data.oldDescriptor );
+			remove( element, data.oldDescriptor, data.writer );
 		}
 
 		if ( data.newDescriptor ) {
-			add( element, data.newDescriptor );
+			add( element, data.newDescriptor, data.writer );
 		}
 	} );
 
-	element.setCustomProperty( 'addHighlight', ( element, descriptor ) => stack.add( descriptor ) );
-	element.setCustomProperty( 'removeHighlight', ( element, id ) => stack.remove( id ) );
+	writer.setCustomProperty( 'addHighlight', ( element, descriptor, writer ) => stack.add( descriptor, writer ), element );
+	writer.setCustomProperty( 'removeHighlight', ( element, id, writer ) => stack.remove( id, writer ), element );
 }
 
 /**
@@ -106,9 +109,10 @@ export function setHighlightHandling( element, add, remove ) {
  *
  * @param {module:engine/view/element~Element} element
  * @param {String|Function} labelOrCreator
+ *  * @param {module:engine/view/writer~Writer} writer
  */
-export function setLabel( element, labelOrCreator ) {
-	element.setCustomProperty( labelSymbol, labelOrCreator );
+export function setLabel( element, labelOrCreator, writer ) {
+	writer.setCustomProperty( labelSymbol, labelOrCreator, element );
 }
 
 /**
@@ -137,22 +141,22 @@ export function getLabel( element ) {
  * @param {module:engine/view/editableelement~EditableElement} editable
  * @returns {module:engine/view/editableelement~EditableElement} Returns same element that was provided in `editable` param.
  */
-export function toWidgetEditable( editable ) {
-	editable.addClass( 'ck-editable' );
+export function toWidgetEditable( editable, writer ) {
+	writer.addClass( 'ck-editable', editable );
 
 	// Set initial contenteditable value.
-	editable.setAttribute( 'contenteditable', editable.isReadOnly ? 'false' : 'true' );
+	writer.setAttribute( 'contenteditable', editable.isReadOnly ? 'false' : 'true', editable );
 
 	// Bind contenteditable property to element#isReadOnly.
 	editable.on( 'change:isReadOnly', ( evt, property, is ) => {
-		editable.setAttribute( 'contenteditable', is ? 'false' : 'true' );
+		writer.setAttribute( 'contenteditable', is ? 'false' : 'true', editable );
 	} );
 
 	editable.on( 'change:isFocused', ( evt, property, is ) => {
 		if ( is ) {
-			editable.addClass( 'ck-editable_focused' );
+			writer.addClass( 'ck-editable_focused', editable );
 		} else {
-			editable.removeClass( 'ck-editable_focused' );
+			writer.removeClass( 'ck-editable_focused', editable );
 		}
 	} );