Merge 4ddeaac into bd99f11

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

LICENSE.md

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

docs/_snippets/features/build-highlight-source.html

@@ -0,0 +1,23 @@
+<style>
+	.marker {
+		background-color: #ffff66;
+	}
+
+	.marker-green {
+		background-color: #66ff00;
+	}
+
+	.marker-pink {
+		background-color: #ff6fff;
+	}
+
+	.pen-red {
+		background-color: transparent;
+		color: #ff2929;
+	}
+
+	.pen-blue {
+		background-color: transparent;
+		color: #0091ff;
+	}
+</style>

docs/_snippets/features/build-highlight-source.js

@@ -0,0 +1,14 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals window */
+
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
+
+import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';
+
+ClassicEditor.build.plugins.push( Highlight );
+
+window.ClassicEditor = ClassicEditor;

docs/_snippets/features/custom-highlight-options.html

@@ -0,0 +1,5 @@
+<div id="snippet-custom-highlight-options">
+	<p>
+		Here are defined highlighters: <mark class="marker-green">green one</mark> and <mark class="pen-blue">blue one</mark>.
+	</p>
+</div>

docs/_snippets/features/custom-highlight-options.js

@@ -0,0 +1,27 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+ClassicEditor
+	.create( document.querySelector( '#snippet-custom-highlight-options' ), {
+		toolbar: {
+			items: [
+				'headings', '|', 'bulletedList', 'numberedList', 'highlightDropdown', 'undo', 'redo'
+			],
+			viewportTopOffset: 60
+		},
+		highlight: {
+			options: [
+				{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: '#66ff00', type: 'marker' },
+				{ model: 'bluePen', class: 'pen-blue', title: 'Blue pen', color: '#0091ff', type: 'pen' }
+			]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

docs/_snippets/features/highlight-buttons.html

@@ -0,0 +1,12 @@
+<div id="snippet-highlight-buttons">
+	<h2>Highlight feature sample.</h2>
+
+	<p>
+		Here are some markers:
+		<mark class="marker">yellow one</mark>, <mark class="marker-pink">pink one</mark> and <mark class="marker-green">green one</mark>.
+	</p>
+	<p>
+		Here are some pens:
+		<mark class="pen-red">red pen</mark> and <mark class="pen-blue">blue one</mark>.
+	</p>
+</div>

docs/_snippets/features/highlight-buttons.js

@@ -0,0 +1,23 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-highlight-buttons' ), {
+		toolbar: {
+			items: [
+				'headings', '|', 'highlight:marker', 'highlight:greenMarker', 'highlight:pinkMarker', 'highlight:bluePen',
+				'highlight:redPen', 'removeHighlight', '|', 'undo', 'redo'
+			],
+			viewportTopOffset: 60
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

docs/_snippets/features/highlight.html

@@ -0,0 +1,12 @@
+<div id="snippet-highlight">
+	<h2>Highlight feature sample.</h2>
+
+	<p>
+		Here are some markers:
+		<mark class="marker">yellow one</mark>, <mark class="marker-pink">pink one</mark> and <mark class="marker-green">green one</mark>.
+	</p>
+	<p>
+		Here are some pens:
+		<mark class="pen-red">red pen</mark> and <mark class="pen-blue">blue one</mark>.
+	</p>
+</div>

docs/_snippets/features/highlight.js

@@ -0,0 +1,22 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-highlight' ), {
+		toolbar: {
+			items: [
+				'headings', '|', 'bulletedList', 'numberedList', 'highlightDropdown', 'undo', 'redo'
+			],
+			viewportTopOffset: 60
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

docs/api/highlight.md

@@ -0,0 +1,30 @@
+---
+category: api-reference
+---
+
+# CKEditor 5 highlight feature
+
+[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-highlight.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-highlight)
+
+This package implements the highlight feature for CKEditor 5.
+
+## Documentation
+
+See the {@link features/highlight Highlight feature} guide and the {@link module:highlight/highlight~Highlight} plugin documentation.
+
+## Installation
+
+```bash
+npm install --save @ckeditor/ckeditor5-highlight
+```
+
+## Contribute
+
+The source code of this package is available on GitHub in https://github.com/ckeditor/ckeditor5-highlight.
+
+## External links
+
+* [`@ckeditor/ckeditor5-highlight` on npm](https://www.npmjs.com/package/@ckeditor/ckeditor5-highlight)
+* [`ckeditor/ckeditor5-highlight` on GitHub](https://github.com/ckeditor/ckeditor5-highlight)
+* [Issue tracker](https://github.com/ckeditor/ckeditor5-highlight/issues)
+* [Changelog](https://github.com/ckeditor/ckeditor5-highlight/blob/master/CHANGELOG.md)

docs/features/highlight.md

@@ -0,0 +1,138 @@
+---
+title: Highlight
+category: features
+---
+
+{@snippet features/build-highlight-source}
+
+The {@link module:highlight/highlight~Highlight} feature offers a text marking tools that help content authors speed up their work, e.g. reviewing content or marking it for the future reference. It uses inline `<marker>` elements in the view, supports both markers (background color) and pens (text color), and comes with a flexible configuration.
+
+## Demo
+
+{@snippet features/highlight}
+
+## Configuring the highlight options
+
+It is possible to configure which highlight options are supported by the editor.
+You can use the {@link module:highlight/highlight~HighlightConfig#options `highlight.options`} configuration and define your own highlight styles.
+
+For example, the following editor supports only two styles (a green marker and a blue pen):
+
+```js
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		highlight: {
+			options: [
+				{
+					model: 'greenMarker',
+					class: 'marker-green',
+					title: 'Green marker',
+					color: '#66ff00',
+					type: 'marker'
+				},
+				{
+					model: 'bluePen',
+					class: 'pen-blue',
+					title: 'Blue pen',
+					color: '#0091ff',
+					type: 'pen'
+				}
+			]
+		},
+		toolbar: [
+			'headings', '|', 'bulletedList', 'numberedList', 'highlightDropdown', 'undo', 'redo'
+		]
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+{@snippet features/custom-highlight-options}
+
+Instead of using the (default) `highlightDropdown`, the feature also supports a configuration with separate buttons directly in the toolbar:
+
+```js
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		toolbar: {
+			items: [
+				'headings', '|', 'highlight:marker', 'highlight:greenMarker',
+				'highlight:pinkMarker', 'highlight:bluePen',
+				'highlight:redPen', 'removeHighlight', 'undo', 'redo'
+			]
+		}
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+{@snippet features/highlight-buttons}
+
+## Installation
+
+To add this feature to your editor install the [`@ckeditor/ckeditor5-highlight`](https://www.npmjs.com/package/@ckeditor/ckeditor5-highlight) package:
+
+```
+npm install --save @ckeditor/ckeditor5-highlight
+```
+
+And add it to your plugin list and the toolbar configuration:
+
+```js
+import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ Highlight, ... ],
+		toolbar: [ 'highlightDropdown', ... ]
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+<info-box info>
+	Read more about {@link builds/guides/development/installing-plugins installing plugins}.
+</info-box>
+
+## Common API
+
+The {@link module:highlight/highlight~Highlight} plugin registers:
+
+* The `'highlightDropdown'` dropdown,
+* The {@link module:highlight/highlightcommand~HighlightCommand `'highlight'`} command.
+
+	The number of options and their names correspond to the {@link module:highlight/highlight~HighlightConfig#options `highlight.options`} configuration option.
+
+	You can change the highlight of the current selection by executing the command with a desired value:
+
+	```js
+	editor.execute( 'highlight', { value: 'marker' } );
+	```
+
+	The `value` corresponds to the `model` property in configuration object. For the default configuration:
+	```js
+	highlight.options = [
+		{ model: 'marker', class: 'marker', title: 'Marker', color: '#ffff66', type: 'marker' },
+		{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: '#66ff00', type: 'marker' },
+		{ model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: '#ff6fff', type: 'marker' },
+		{ model: 'redPen', class: 'pen-red', title: 'Red pen', color: '#ff2929', type: 'pen' },
+		{ model: 'bluePen', class: 'pen-blue', title: 'Blue pen', color: '#0091ff', type: 'pen' }
+	]
+	```
+
+	the `highlight` command will accept the corresponding strings as values:
+	- `'marker'` – available as a `'highlight:marker'` button.
+	- `'greenMarker'` – available as a `'highlight:greenMarker'` button.
+	- `'pinkMarker'` – available as a `'highlight:pinkMarker'` button.
+	- `'redPen'` – available as a `'highlight:redPen'` button.
+	- `'bluePen'` – available as a `'highlight:bluePen'` button.
+
+	passing an empty `value` will remove any `highlight` from the selection:
+
+	```js
+	editor.execute( 'highlight' );
+	```
+
+## Contribute
+
+The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-highlight.

package.json

@@ -7,22 +7,24 @@
     "ckeditor5-feature"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^1.0.0-alpha.1",
-    "@ckeditor/ckeditor5-engine": "^1.0.0-alpha.1",
-    "@ckeditor/ckeditor5-ui": "^1.0.0-alpha.1"
+    "@ckeditor/ckeditor5-core": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-engine": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-ui": "^1.0.0-alpha.2"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-block-quote": "^1.0.0-alpha.1",
-    "@ckeditor/ckeditor5-enter": "^1.0.0-alpha.1",
-    "@ckeditor/ckeditor5-heading": "^1.0.0-alpha.1",
-    "@ckeditor/ckeditor5-image": "^1.0.0-alpha.1",
-    "@ckeditor/ckeditor5-list": "^1.0.0-alpha.1",
-    "@ckeditor/ckeditor5-paragraph": "^1.0.0-alpha.1",
-    "@ckeditor/ckeditor5-typing": "^1.0.0-alpha.1",
-    "eslint": "^4.8.0",
-    "eslint-config-ckeditor5": "^1.0.6",
+    "@ckeditor/ckeditor5-block-quote": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-editor-classic": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-enter": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-heading": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-image": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-list": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-paragraph": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-typing": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-utils": "^1.0.0-alpha.2",
+    "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",