8
0
Quellcode durchsuchen

Merge branch 'master' into t/ckeditor5/645

Aleksander Nowodzinski vor 8 Jahren
Ursprung
Commit
9200c1915e
19 geänderte Dateien mit 351 neuen und 104 gelöschten Zeilen
  1. 0 0
      packages/ckeditor5-alignment/docs/_snippets/features/build-text-alignment-source.html
  2. 14 0
      packages/ckeditor5-alignment/docs/_snippets/features/build-text-alignment-source.js
  3. 5 0
      packages/ckeditor5-alignment/docs/_snippets/features/custom-text-alignment-options.html
  4. 25 0
      packages/ckeditor5-alignment/docs/_snippets/features/custom-text-alignment-options.js
  5. 5 0
      packages/ckeditor5-alignment/docs/_snippets/features/custom-text-alignment-toolbar.html
  6. 22 0
      packages/ckeditor5-alignment/docs/_snippets/features/custom-text-alignment-toolbar.js
  7. 9 0
      packages/ckeditor5-alignment/docs/_snippets/features/text-alignment.html
  8. 22 0
      packages/ckeditor5-alignment/docs/_snippets/features/text-alignment.js
  9. 30 0
      packages/ckeditor5-alignment/docs/api/alignment.md
  10. 96 0
      packages/ckeditor5-alignment/docs/features/text-alignment.md
  11. 52 2
      packages/ckeditor5-alignment/src/alignment.js
  12. 21 21
      packages/ckeditor5-alignment/src/alignmentcommand.js
  13. 21 52
      packages/ckeditor5-alignment/src/alignmentediting.js
  14. 17 16
      packages/ckeditor5-alignment/src/alignmentui.js
  15. 1 1
      packages/ckeditor5-alignment/tests/alignmentcommand.js
  16. 4 5
      packages/ckeditor5-alignment/tests/alignmentediting.js
  17. 4 4
      packages/ckeditor5-alignment/tests/alignmentui.js
  18. 1 1
      packages/ckeditor5-alignment/tests/manual/alignmentconfig.js
  19. 2 2
      packages/ckeditor5-alignment/tests/manual/alignmentconfig.md

+ 0 - 0
packages/ckeditor5-alignment/docs/_snippets/features/build-text-alignment-source.html


+ 14 - 0
packages/ckeditor5-alignment/docs/_snippets/features/build-text-alignment-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 Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
+
+ClassicEditor.build.plugins.push( Alignment );
+
+window.ClassicEditor = ClassicEditor;

+ 5 - 0
packages/ckeditor5-alignment/docs/_snippets/features/custom-text-alignment-options.html

@@ -0,0 +1,5 @@
+<div id="snippet-custom-text-alignment-options">
+	<h2>The three greatest things you learn from traveling</h2>
+
+	<p style="text-align: right">Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons I’ve learned over the years of traveling.</p>
+</div>

+ 25 - 0
packages/ckeditor5-alignment/docs/_snippets/features/custom-text-alignment-options.js

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

+ 5 - 0
packages/ckeditor5-alignment/docs/_snippets/features/custom-text-alignment-toolbar.html

@@ -0,0 +1,5 @@
+<div id="snippet-custom-text-alignment-toolbar">
+	<h2>The three greatest things you learn from traveling</h2>
+
+	<p style="text-align: right">Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons I’ve learned over the years of traveling.</p>
+</div>

+ 22 - 0
packages/ckeditor5-alignment/docs/_snippets/features/custom-text-alignment-toolbar.js

@@ -0,0 +1,22 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-custom-text-alignment-toolbar' ), {
+		toolbar: {
+			items: [
+				'headings', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify'
+			],
+			viewportTopOffset: 60
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 9 - 0
packages/ckeditor5-alignment/docs/_snippets/features/text-alignment.html

@@ -0,0 +1,9 @@
+<div id="snippet-text-alignment">
+	<h2 style="text-align: right">The three greatest things you learn from traveling</h2>
+
+	<p style="text-align: right">Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons I’ve learned over the years of traveling.</p>
+
+	<h3 style="text-align: center">Appreciation of diversity</h3>
+
+	<p style="text-align: center">Getting used to an entirely different culture can be challenging. While it’s also nice to learn about cultures online or from books, nothing comes close to experiencing cultural diversity in person. You learn to appreciate each and every single one of the differences while you become more culturally fluid.</p>
+</div>

+ 22 - 0
packages/ckeditor5-alignment/docs/_snippets/features/text-alignment.js

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

+ 30 - 0
packages/ckeditor5-alignment/docs/api/alignment.md

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

+ 96 - 0
packages/ckeditor5-alignment/docs/features/text-alignment.md

@@ -0,0 +1,96 @@
+---
+title: Text alignment
+category: features
+---
+
+{@snippet features/build-text-alignment-source}
+
+The {@link module:alignment/alignment~Alignment} feature enables support for text alignment.
+
+## Demo
+
+{@snippet features/text-alignment}
+
+## Configuring alignment options
+
+It is, of course, possible to configure which alignment options the editor should support. Use the {@link module:alignment/alignment~AlignmentConfig#options `alignment.options`} configuration option to do so (you can choose from `'left'`, `'right'`, `'center'` and `'justify'`,  but `'left'` should be always included).
+
+For example, the following editor will support only two alignment to the left and to the right:
+
+```js
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		alignment: {
+			options: [ 'left', 'right' ]
+		},
+		toolbar: [
+			'headings', 'bulletedList', 'numberedList', 'alignmentDropdown', 'undo', 'redo'
+		]
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+{@snippet features/custom-text-alignment-options}
+
+## Configuring the toolbar
+
+You can choose to use the alignment dropdown (`'alignmentDropdown'`) or configure the toolbar to use separate buttons for each of the options:
+
+```js
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		toolbar: [
+			'headings', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify'
+		]
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+{@snippet features/custom-text-alignment-toolbar}
+
+## Installation
+
+To add this feature to your editor install the [`@ckeditor/ckeditor5-alignment`](https://www.npmjs.com/package/@ckeditor/ckeditor5-alignment) package:
+
+```
+npm install --save @ckeditor/ckeditor5-alignment
+```
+
+And add it to your plugin list and toolbar configuration:
+
+```js
+import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ Alignment, ... ],
+		toolbar: [ 'alignmentDropdown', ... ]
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+<info-box info>
+	Read more about {@link builds/guides/development/installing-plugins installing plugins}.
+</info-box>
+
+## Common API
+
+The {@link module:alignment/alignment~Alignment} plugin registers:
+
+* Dropdown: `'alignmentDropdown'`.
+* Buttons and commands: `'alignLeft'`, `'alignRight'`, `'alignCenter'`, `'alignJustify'`.
+
+	The number of options and their names are based on the {@link module:alignment/alignment~AlignmentConfig#options `alignment.options`} configuration option).
+
+	You can align the currently selected block(s) by executing one of these commands:
+
+	```js
+	editor.execute( 'alignCenter' );
+	```
+
+## Contribute
+
+The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-alignment.

+ 52 - 2
packages/ckeditor5-alignment/src/alignment.js

@@ -13,9 +13,12 @@ import AlignmentEditing from './alignmentediting';
 import AlignmentUI from './alignmentui';
 
 /**
- * The alignment plugin.
+ * The text alignment plugin.
  *
- * It requires {@link module:alignment/alignmentediting~AlignmentEditing} and {@link module:alignment/alignmentui~AlignmentUI} plugins.
+ * It loads the {@link module:alignment/alignmentediting~AlignmentEditing} and
+ * {@link module:alignment/alignmentui~AlignmentUI} plugins.
+ *
+ * Read more about the feature in the {@glink api/alignment text alignment package} page.
  *
  * @extends module:core/plugin~Plugin
  */
@@ -34,3 +37,50 @@ export default class Alignment extends Plugin {
 		return 'Alignment';
 	}
 }
+
+/**
+ * The configuration of the {@link module:alignment/alignment~Alignment Alignment feature}.
+ *
+ * Read more in {@link module:alignment/alignment~AlignmentConfig}.
+ *
+ * @member {module:alignment/alignment~AlignmentConfig} module:core/editor/editorconfig~EditorConfig#alignment
+ */
+
+/**
+ * The configuration of the {@link module:alignment/alignment~Alignment Alignment feature}.
+ *
+ *		ClassicEditor
+ *			.create( editorElement, {
+ *				alignment: {
+ *					options: [ 'left', 'right' ]
+ *				}
+ *			} )
+ *			.then( ... )
+ *			.catch( ... );
+ *
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
+ *
+ * @interface AlignmentConfig
+ */
+
+/**
+ * Available alignment options.
+ *
+ * The available options are – `'left'`, `'right'`, `'center'` and `'justify'`. Other values are ignored.
+ *
+ * **Note:** It is recommended to always use `'left'` as it is the default value which the user should
+ * normally be able to choose.
+ *
+ *		ClassicEditor
+ *			.create( editorElement, {
+ *				alignment: {
+ *					options: [ 'left', 'right' ]
+ *				}
+ *			} )
+ *			.then( ... )
+ *			.catch( ... );
+ *
+ * See a demo of {@glink features/text-alignment#configuring-alignment-options custom alignment options}.
+ *
+ * @member {Array.<String>} module:alignment/alignment~AlignmentConfig#options
+ */

+ 21 - 21
packages/ckeditor5-alignment/src/alignmentcommand.js

@@ -22,22 +22,22 @@ export default class AlignmentCommand extends Command {
 	 * Creates an instance of the command.
 	 *
 	 * @param {module:core/editor/editor~Editor} editor The editor instance.
-	 * @param {'left'|'right'|'center'|'justify'} type Alignment type to be handled by this command.
-	 * @param {Boolean} isDefault Indicates if command is of default type.
+	 * @param {'left'|'right'|'center'|'justify'} alignment Alignment value to be handled by this command.
+	 * @param {Boolean} isDefault Indicates if the command is the default alignment.
 	 */
-	constructor( editor, type, isDefault ) {
+	constructor( editor, alignment, isDefault ) {
 		super( editor );
 
 		/**
-		 * The type of the list created by the command.
+		 * The alignment value handled by the command.
 		 *
 		 * @readonly
 		 * @member {'left'|'right'|'center'|'justify'}
 		 */
-		this.type = type;
+		this.alignment = alignment;
 
 		/**
-		 * Whether this command has default type.
+		 * Whether this command is the default alignment.
 		 *
 		 * @readonly
 		 * @private
@@ -47,7 +47,7 @@ export default class AlignmentCommand extends Command {
 
 		/**
 		 * A flag indicating whether the command is active, which means that the selection starts in a block
-		 * that has defined alignment of the same type.
+		 * which has the same alignment as {@link #alignment this command}.
 		 *
 		 * @observable
 		 * @readonly
@@ -74,28 +74,28 @@ export default class AlignmentCommand extends Command {
 	execute() {
 		const editor = this.editor;
 		const model = editor.model;
-		const document = model.document;
+		const doc = model.document;
 
 		model.change( writer => {
 			// Get only those blocks from selected that can have alignment set
-			const blocks = Array.from( document.selection.getSelectedBlocks() ).filter( block => this._canBeAligned( block ) );
+			const blocks = Array.from( doc.selection.getSelectedBlocks() ).filter( block => this._canBeAligned( block ) );
 
 			// Remove alignment attribute if current alignment is as selected or is default one.
 			// Default alignment should not be stored in model as it will bloat model data.
 			if ( this.value || this._isDefault ) {
 				removeAlignmentFromSelection( blocks, writer );
 			} else {
-				setAlignmentOnSelection( blocks, writer, this.type );
+				setAlignmentOnSelection( blocks, writer, this.alignment );
 			}
 		} );
 	}
 
 	/**
-	 * Checks whether block can have aligned set.
+	 * Checks whether block can have alignment set.
 	 *
+	 * @private
 	 * @param {module:engine/model/element~Element} block A block to be checked.
 	 * @returns {Boolean}
-	 * @private
 	 */
 	_canBeAligned( block ) {
 		return this.editor.model.schema.checkAttribute( block, 'alignment' );
@@ -116,20 +116,20 @@ export default class AlignmentCommand extends Command {
 
 		const selectionAlignment = firstBlock.getAttribute( 'alignment' );
 
-		// Command's value will be set when commands type is matched in selection or the selection is default one.
-		return selectionAlignment ? selectionAlignment === this.type : this._isDefault;
+		// Command's value will be on when command's alignment matches the alignment of the current block,
+		// or when it's the default alignment and the block has no alignment set.
+		return selectionAlignment ? selectionAlignment === this.alignment : this._isDefault;
 	}
 }
 
 /**
- * Helper function that returns command name for given style. May produce unknown commands if passed style is not
- * in {@link module:alignment/alignmentediting~AlignmentEditing.supportedStyles}.
+ * Helper function that returns command name for alignment option.
  *
- * @param {String} style
+ * @param {String} option
  * @returns {String}
  */
-export function commandNameFromStyle( style ) {
-	return `align${ upperFirst( style ) }`;
+export function commandNameFromOptionName( option ) {
+	return `align${ upperFirst( option ) }`;
 }
 
 // Removes alignment attribute from blocks.
@@ -142,8 +142,8 @@ function removeAlignmentFromSelection( blocks, writer ) {
 
 // Sets alignment attribute on blocks.
 // @private
-function setAlignmentOnSelection( blocks, writer, type ) {
+function setAlignmentOnSelection( blocks, writer, alignment ) {
 	for ( const block of blocks ) {
-		writer.setAttribute( 'alignment', type, block );
+		writer.setAttribute( 'alignment', alignment, block );
 	}
 }

+ 21 - 52
packages/ckeditor5-alignment/src/alignmentediting.js

@@ -7,12 +7,10 @@
  * @module alignment/alignmentediting
  */
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import AlignmentCommand, { commandNameFromOptionName } from './alignmentcommand';
 
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import buildViewConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildviewconverter';
-import { eventNameToConsumableType } from '@ckeditor/ckeditor5-engine/src/conversion/model-to-view-converters';
-
-import AlignmentCommand, { commandNameFromStyle } from './alignmentcommand';
 
 /**
  * @extends module:core/plugin~Plugin
@@ -24,11 +22,13 @@ export default class AlignmentEditing extends Plugin {
 	constructor( editor ) {
 		super( editor );
 
-		editor.config.define( 'alignment', { styles: [ ...this.constructor.supportedStyles ] } );
+		editor.config.define( 'alignment', {
+			options: [ ...this.constructor.supportedOptions ]
+		} );
 	}
 
 	/**
-	 * List of supported alignment styles:
+	 * List of supported alignment options:
 	 *
 	 * * `'left'`,
 	 * * `'right'`,
@@ -37,9 +37,9 @@ export default class AlignmentEditing extends Plugin {
 	 *
 	 * @static
 	 * @readonly
-	 * @member {Array.<String>} module:alignment/alignmentediting~AlignmentEditing.supportedStyles
+	 * @member {Array.<String>} module:alignment/alignmentediting~AlignmentEditing.supportedOptions
 	 */
-	static get supportedStyles() {
+	static get supportedOptions() {
 		return [ 'left', 'right', 'center', 'justify' ];
 	}
 
@@ -52,7 +52,7 @@ export default class AlignmentEditing extends Plugin {
 		const data = editor.data;
 		const editing = editor.editing;
 
-		const enabledStyles = editor.config.get( 'alignment.styles' );
+		const enabledOptions = editor.config.get( 'alignment.options' );
 
 		// Allow alignment attribute on all blocks.
 		schema.extend( '$block', { allowAttributes: 'alignment' } );
@@ -68,7 +68,7 @@ export default class AlignmentEditing extends Plugin {
 				const textAlign = viewElement.getStyle( 'text-align' );
 
 				// Do not convert empty, default or unknown alignment values.
-				if ( !textAlign || isDefault( textAlign ) || !enabledStyles.includes( textAlign ) ) {
+				if ( !textAlign || isDefault( textAlign ) || !enabledOptions.includes( textAlign ) ) {
 					return;
 				}
 
@@ -76,35 +76,35 @@ export default class AlignmentEditing extends Plugin {
 			} );
 
 		// Add only enabled & supported commands.
-		enabledStyles
+		enabledOptions
 			.filter( isSupported )
-			.forEach( style => {
-				editor.commands.add( commandNameFromStyle( style ), new AlignmentCommand( editor, style, isDefault( style ) ) );
+			.forEach( option => {
+				editor.commands.add( commandNameFromOptionName( option ), new AlignmentCommand( editor, option, isDefault( option ) ) );
 			} );
 	}
 }
 
 /**
- * Checks whether passed style is supported by {@link module:alignment/alignmentediting~AlignmentEditing}.
+ * Checks whether passed option is supported by {@link module:alignment/alignmentediting~AlignmentEditing}.
  *
- * @param {String} style Style value to check.
+ * @param {String} option Option value to check.
  * @returns {Boolean}
  */
-export function isSupported( style ) {
-	return AlignmentEditing.supportedStyles.includes( style );
+export function isSupported( option ) {
+	return AlignmentEditing.supportedOptions.includes( option );
 }
 
 // Dispatcher handler responsible for setting style to a view element.
 // @private
 function convertStyle() {
 	return ( evt, data, consumable, conversionApi ) => {
-		if ( !consumable.consume( data.item, eventNameToConsumableType( evt.name ) ) ) {
+		if ( !consumable.consume( data.item, evt.name ) ) {
 			return;
 		}
 
-		if ( data.attributeNewValue ) { // Set style.
+		if ( data.attributeNewValue ) {
 			conversionApi.mapper.toViewElement( data.item ).setStyle( { 'text-align': data.attributeNewValue } );
-		} else { // Remove style.
+		} else {
 			conversionApi.mapper.toViewElement( data.item ).removeStyle( 'text-align' );
 		}
 	};
@@ -113,37 +113,6 @@ function convertStyle() {
 // Check whether alignment is default one.
 // @private
 function isDefault( textAlign ) {
-	// Right now only RTL is supported so 'left' value is always default one.
+	// Right now only LTR is supported so 'left' value is always the default one.
 	return textAlign === 'left';
 }
-
-/**
- * The configuration of the {@link module:alignment/alignmentediting~AlignmentEditing Alignment feature}.
- *
- * Read more in {@link module:alignment/alignmentediting~AlignmentEditingConfig}.
- *
- * @member {module:alignment/alignmentediting~AlignmentEditingConfig} module:core/editor/editorconfig~EditorConfig#alignment
- */
-
-/**
- * The configuration of the {@link module:alignment/alignmentediting~AlignmentEditing Alignment feature}.
- *
- *		ClassicEditor
- *			.create( editorElement, {
- * 				alignment: {
- *					styles: [ 'left', 'right' ]
- * 				}
- *			} )
- *			.then( ... )
- *			.catch( ... );
- *
- * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
- *
- * @interface AlignmentEditingConfig
- */
-
-/**
- * Enabled alignment styles from supported styles: `left`, `right`, `center` and `justify`. Other values are ignored.
- *
- * @member {String} module:alignment/alignmentediting~AlignmentEditingConfig#styles
- */

+ 17 - 16
packages/ckeditor5-alignment/src/alignmentui.js

@@ -13,7 +13,7 @@ import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import Model from '@ckeditor/ckeditor5-ui/src/model';
 import createButtonDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/button/createbuttondropdown';
 
-import { commandNameFromStyle } from './alignmentcommand';
+import { commandNameFromOptionName } from './alignmentcommand';
 import { isSupported } from './alignmentediting';
 
 import alignLeftIcon from '../theme/icons/align-left.svg';
@@ -31,26 +31,27 @@ const icons = new Map( [
 /**
  * The default Alignment UI plugin.
  *
- * It introduces the `'alignLeft'`, `'alignRight'`, `'alignCenter'` and `'alignJustify'` buttons.
+ * It introduces the `'alignLeft'`, `'alignRight'`, `'alignCenter'` and `'alignJustify'` buttons
+ * and the `'alignmentDropdown'` dropdown.
  *
  * @extends module:core/plugin~Plugin
  */
 export default class AlignmentUI extends Plugin {
 	/**
-	 * Returns the localized style titles provided by the plugin.
+	 * Returns the localized option titles provided by the plugin.
 	 *
 	 * The following localized titles corresponding with
-	 * {@link module:alignment/alignmentediting~AlignmentEditingConfig#styles} are available:
+	 * {@link module:alignment/alignment~AlignmentConfig#options} are available:
 	 *
 	 * * `'left'`,
 	 * * `'right'`,
 	 * * `'center'`,
-	 * * `'justify'`
+	 * * `'justify'`.
 	 *
 	 * @readonly
 	 * @type {Object.<String,String>}
 	 */
-	get localizedStylesTitles() {
+	get localizedOptionTitles() {
 		const t = this.editor.t;
 
 		return {
@@ -75,15 +76,15 @@ export default class AlignmentUI extends Plugin {
 		const editor = this.editor;
 		const componentFactory = editor.ui.componentFactory;
 		const t = editor.t;
-		const styles = editor.config.get( 'alignment.styles' );
+		const options = editor.config.get( 'alignment.options' );
 
-		styles
+		options
 			.filter( isSupported )
-			.forEach( style => this._addButton( style ) );
+			.forEach( option => this._addButton( option ) );
 
 		componentFactory.add( 'alignmentDropdown', locale => {
-			const buttons = styles.map( style => {
-				return componentFactory.create( commandNameFromStyle( style ) );
+			const buttons = options.map( option => {
+				return componentFactory.create( commandNameFromOptionName( option ) );
 			} );
 
 			const model = new Model( {
@@ -104,20 +105,20 @@ export default class AlignmentUI extends Plugin {
 	 * Helper method for initializing a button and linking it with an appropriate command.
 	 *
 	 * @private
-	 * @param {String} style The name of style for which add button.
+	 * @param {String} option The name of the alignment option for which to add a button.
 	 */
-	_addButton( style ) {
+	_addButton( option ) {
 		const editor = this.editor;
 
-		const commandName = commandNameFromStyle( style );
+		const commandName = commandNameFromOptionName( option );
 		const command = editor.commands.get( commandName );
 
 		editor.ui.componentFactory.add( commandName, locale => {
 			const buttonView = new ButtonView( locale );
 
 			buttonView.set( {
-				label: this.localizedStylesTitles[ style ],
-				icon: icons.get( style ),
+				label: this.localizedOptionTitles[ option ],
+				icon: icons.get( option ),
 				tooltip: true
 			} );
 

+ 1 - 1
packages/ckeditor5-alignment/tests/alignmentcommand.js

@@ -57,7 +57,7 @@ describe( 'AlignmentCommand', () => {
 			expect( defaultAlignmentCommand ).to.have.property( 'value', true );
 		} );
 
-		it( 'is false when selection is inside block that has different alignment (default style)', () => {
+		it( 'is false when selection is inside block that has different alignment (default option)', () => {
 			setModelData( model, '<paragraph alignment="justify">x[]x</paragraph>' );
 
 			expect( defaultAlignmentCommand ).to.have.property( 'value', false );

+ 4 - 5
packages/ckeditor5-alignment/tests/alignmentediting.js

@@ -10,7 +10,6 @@ import ListEngine from '@ckeditor/ckeditor5-list/src/listengine';
 import HeadingEngine from '@ckeditor/ckeditor5-heading/src/headingengine';
 import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
 import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
-import { eventNameToConsumableType } from '@ckeditor/ckeditor5-engine/src/conversion/model-to-view-converters';
 
 import AlignmentCommand from '../src/alignmentcommand';
 
@@ -201,17 +200,17 @@ describe( 'AlignmentEditing', () => {
 	} );
 
 	describe( 'config', () => {
-		describe( 'styles', () => {
+		describe( 'options', () => {
 			describe( 'default value', () => {
 				it( 'should be set', () => {
-					expect( editor.config.get( 'alignment.styles' ) ).to.deep.equal( [ 'left', 'right', 'center', 'justify' ] );
+					expect( editor.config.get( 'alignment.options' ) ).to.deep.equal( [ 'left', 'right', 'center', 'justify' ] );
 				} );
 			} );
 
 			it( 'should customize commands', () => {
 				return VirtualTestEditor
 					.create( {
-						alignment: { styles: [ 'left', 'right' ] },
+						alignment: { options: [ 'left', 'right' ] },
 						plugins: [ AlignmentEditing, Paragraph ]
 					} )
 					.then( editor => {
@@ -227,6 +226,6 @@ describe( 'AlignmentEditing', () => {
 
 function blockDefaultConversion( dispatcher ) {
 	dispatcher.on( 'attribute:alignment', ( evt, data, consumable ) => {
-		consumable.consume( data.item, eventNameToConsumableType( evt.name ) );
+		consumable.consume( data.item, evt.name );
 	}, { 'priority': 'high' } );
 }

+ 4 - 4
packages/ckeditor5-alignment/tests/alignmentui.js

@@ -34,13 +34,13 @@ describe( 'Alignment UI', () => {
 		return editor.destroy();
 	} );
 
-	describe( 'localizedStylesTitles()', () => {
-		it( 'should return localized titles of styles', () => {
+	describe( 'localizedOptionTitles()', () => {
+		it( 'should return localized titles of options', () => {
 			const editorMock = { t: str => str };
 
 			const plugin = new AlignmentUI( editorMock );
 
-			expect( plugin.localizedStylesTitles ).to.deep.equal( {
+			expect( plugin.localizedOptionTitles ).to.deep.equal( {
 				'left': 'Align left',
 				'right': 'Align right',
 				'center': 'Align center',
@@ -244,7 +244,7 @@ describe( 'Alignment UI', () => {
 				return ClassicTestEditor
 					.create( element, {
 						plugins: [ AlignmentEditing, AlignmentUI ],
-						alignment: { styles: [ 'center', 'justify' ] }
+						alignment: { options: [ 'center', 'justify' ] }
 					} )
 					.then( newEditor => {
 						editor = newEditor;

+ 1 - 1
packages/ckeditor5-alignment/tests/manual/alignmentconfig.js

@@ -16,7 +16,7 @@ ClassicEditor
 			'headings', 'bold', 'italic', 'link', 'alignmentDropdown', 'bulletedList', 'numberedList',
 			'blockQuote', 'undo', 'redo'
 		],
-		alignment: { styles: [ 'center', 'justify' ] }
+		alignment: { options: [ 'center', 'justify' ] }
 	} )
 	.then( editor => {
 		window.editor = editor;

+ 2 - 2
packages/ckeditor5-alignment/tests/manual/alignmentconfig.md

@@ -1,7 +1,7 @@
 ### Loading
 
 1. The data should be loaded with:
-  * four paragraphs each with different text-alignemnt set,
+  * four paragraphs each with different text-alignment set,
   * two first paragraphs should be aligned to left,
   * third paragraph should be centered,
   * fourth paragraph should be justified,
@@ -13,7 +13,7 @@
 Alignment dropdown button should change to:
 - "left" icon when text has default (left) alignment,
 - "center" icon when text is centered,
-- "jusifty" icon when text is justified.
+- "justify" icon when text is justified.
 
 "Center" alignment button:
 1. should be highlighted only in third paragraph,