@ckeditor/ckeditor5-alignment 35.3.2 → 36.0.0

package/LICENSE.md

@@ -2,7 +2,7 @@ Software License Agreement
 ==========================
 
 **CKEditor 5 text alignment feature** – https://github.com/ckeditor/ckeditor5-alignment <br>
-Copyright (c) 2003-2022, [CKSource Holding sp. z o.o.](https://cksource.com) All rights reserved.
+Copyright (c) 2003-2023, [CKSource Holding sp. z o.o.](https://cksource.com) All rights reserved.
 
 Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html).
 

package/build/alignment.js

@@ -1,5 +1,5 @@
 !function(t){const e=t.en=t.en||{};e.dictionary=Object.assign(e.dictionary||{},{"Align center":"Align center","Align left":"Align left","Align right":"Align right",Justify:"Justify","Text alignment":"Text alignment","Text alignment toolbar":"Text alignment toolbar"})}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={})),
 /*!
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md.
- */(()=>{var t={704:(t,e,n)=>{t.exports=n(79)("./src/core.js")},273:(t,e,n)=>{t.exports=n(79)("./src/ui.js")},209:(t,e,n)=>{t.exports=n(79)("./src/utils.js")},79:t=>{"use strict";t.exports=CKEditor5.dll}},e={};function n(i){var o=e[i];if(void 0!==o)return o.exports;var r=e[i]={exports:{}};return t[i](r,r.exports,n),r.exports}n.d=(t,e)=>{for(var i in e)n.o(e,i)&&!n.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var i={};(()=>{"use strict";n.r(i),n.d(i,{Alignment:()=>f,AlignmentEditing:()=>g,AlignmentUI:()=>d});var t=n(704),e=n(209);const o=["left","right","center","justify"];function r(t){return o.includes(t)}function a(t,e){return"rtl"==e.contentLanguageDirection?"right"===t:"left"===t}function s(t){const n=t.map((t=>{let e;return e="string"==typeof t?{name:t}:t,e})).filter((t=>{const n=!!o.includes(t.name);return n||(0,e.logWarning)("alignment-config-name-not-recognized",{option:t}),n})),i=n.filter((t=>!!t.className)).length;if(i&&i<n.length)throw new e.CKEditorError("alignment-config-classnames-are-missing",{configuredOptions:t});return n.forEach(((n,i,o)=>{const r=o.slice(i+1);if(r.some((t=>t.name==n.name)))throw new e.CKEditorError("alignment-config-name-already-defined",{option:n,configuredOptions:t});if(n.className){if(r.some((t=>t.className==n.className)))throw new e.CKEditorError("alignment-config-classname-already-defined",{option:n,configuredOptions:t})}})),n}const l="alignment";class c extends t.Command{refresh(){const t=this.editor.locale,n=(0,e.first)(this.editor.model.document.selection.getSelectedBlocks());this.isEnabled=!!n&&this._canBeAligned(n),this.isEnabled&&n.hasAttribute("alignment")?this.value=n.getAttribute("alignment"):this.value="rtl"===t.contentLanguageDirection?"right":"left"}execute(t={}){const e=this.editor,n=e.locale,i=e.model,o=i.document,r=t.value;i.change((t=>{const e=Array.from(o.selection.getSelectedBlocks()).filter((t=>this._canBeAligned(t))),i=e[0].getAttribute("alignment");a(r,n)||i===r||!r?function(t,e){for(const n of t)e.removeAttribute(l,n)}(e,t):function(t,e,n){for(const i of t)e.setAttribute(l,n,i)}(e,t,r)}))}_canBeAligned(t){return this.editor.model.schema.checkAttribute(t,l)}}class g extends t.Plugin{static get pluginName(){return"AlignmentEditing"}constructor(t){super(t),t.config.define("alignment",{options:[...o.map((t=>({name:t})))]})}init(){const t=this.editor,e=t.locale,n=t.model.schema,i=s(t.config.get("alignment.options")).filter((t=>r(t.name)&&!a(t.name,e))),o=i.some((t=>!!t.className));n.extend("$block",{allowAttributes:"alignment"}),t.model.schema.setAttributeProperties("alignment",{isFormatting:!0}),o?t.conversion.attributeToAttribute(function(t){const e={model:{key:"alignment",values:t.map((t=>t.name))},view:{}};for(const n of t)e.view[n.name]={key:"class",value:n.className};return e}(i)):t.conversion.for("downcast").attributeToAttribute(function(t){const e={model:{key:"alignment",values:t.map((t=>t.name))},view:{}};for(const{name:n}of t)e.view[n]={key:"style",value:{"text-align":n}};return e}(i));const l=function(t){const e=[];for(const{name:n}of t)e.push({view:{key:"style",value:{"text-align":n}},model:{key:"alignment",value:n}});return e}(i);for(const e of l)t.conversion.for("upcast").attributeToAttribute(e);const g=function(t){const e=[];for(const{name:n}of t)e.push({view:{key:"align",value:n},model:{key:"alignment",value:n}});return e}(i);for(const e of g)t.conversion.for("upcast").attributeToAttribute(e);t.commands.add("alignment",new c(t))}}var u=n(273);const m=new Map([["left",t.icons.alignLeft],["right",t.icons.alignRight],["center",t.icons.alignCenter],["justify",t.icons.alignJustify]]);class d extends t.Plugin{get localizedOptionTitles(){const t=this.editor.t;return{left:t("Align left"),right:t("Align right"),center:t("Align center"),justify:t("Justify")}}static get pluginName(){return"AlignmentUI"}init(){const t=this.editor,e=t.ui.componentFactory,n=t.t,i=s(t.config.get("alignment.options"));i.map((t=>t.name)).filter(r).forEach((t=>this._addButton(t))),e.add("alignment",(o=>{const r=(0,u.createDropdown)(o),a=i.map((t=>e.create(`alignment:${t.name}`)));(0,u.addToolbarToDropdown)(r,a,{enableActiveItemFocusOnDropdownOpen:!0}),r.buttonView.set({label:n("Text alignment"),tooltip:!0}),r.toolbarView.isVertical=!0,r.toolbarView.ariaLabel=n("Text alignment toolbar"),r.extendTemplate({attributes:{class:"ck-alignment-dropdown"}});const s="rtl"===o.contentLanguageDirection?m.get("right"):m.get("left");return r.buttonView.bind("icon").toMany(a,"isOn",((...t)=>{const e=t.findIndex((t=>t));return e<0?s:a[e].icon})),r.bind("isEnabled").toMany(a,"isEnabled",((...t)=>t.some((t=>t)))),this.listenTo(r,"execute",(()=>{t.editing.view.focus()})),r}))}_addButton(t){const e=this.editor;e.ui.componentFactory.add(`alignment:${t}`,(n=>{const i=e.commands.get("alignment"),o=new u.ButtonView(n);return o.set({label:this.localizedOptionTitles[t],icon:m.get(t),tooltip:!0,isToggleable:!0}),o.bind("isEnabled").to(i),o.bind("isOn").to(i,"value",(e=>e===t)),this.listenTo(o,"execute",(()=>{e.execute("alignment",{value:t}),e.editing.view.focus()})),o}))}}class f extends t.Plugin{static get requires(){return[g,d]}static get pluginName(){return"Alignment"}}})(),(window.CKEditor5=window.CKEditor5||{}).alignment=i})();
+ */(()=>{var t={704:(t,e,n)=>{t.exports=n(79)("./src/core.js")},273:(t,e,n)=>{t.exports=n(79)("./src/ui.js")},209:(t,e,n)=>{t.exports=n(79)("./src/utils.js")},79:t=>{"use strict";t.exports=CKEditor5.dll}},e={};function n(i){var o=e[i];if(void 0!==o)return o.exports;var r=e[i]={exports:{}};return t[i](r,r.exports,n),r.exports}n.d=(t,e)=>{for(var i in e)n.o(e,i)&&!n.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var i={};(()=>{"use strict";n.r(i),n.d(i,{Alignment:()=>f,AlignmentEditing:()=>g,AlignmentUI:()=>d});var t=n(704),e=n(209);const o=["left","right","center","justify"];function r(t){return o.includes(t)}function a(t,e){return"rtl"==e.contentLanguageDirection?"right"===t:"left"===t}function s(t){const n=t.map((t=>{let e;return e="string"==typeof t?{name:t}:t,e})).filter((t=>{const n=o.includes(t.name);return n||(0,e.logWarning)("alignment-config-name-not-recognized",{option:t}),n})),i=n.filter((t=>Boolean(t.className))).length;if(i&&i<n.length)throw new e.CKEditorError("alignment-config-classnames-are-missing",{configuredOptions:t});return n.forEach(((n,i,o)=>{const r=o.slice(i+1);if(r.some((t=>t.name==n.name)))throw new e.CKEditorError("alignment-config-name-already-defined",{option:n,configuredOptions:t});if(n.className){if(r.some((t=>t.className==n.className)))throw new e.CKEditorError("alignment-config-classname-already-defined",{option:n,configuredOptions:t})}})),n}const l="alignment";class c extends t.Command{refresh(){const t=this.editor.locale,n=(0,e.first)(this.editor.model.document.selection.getSelectedBlocks());this.isEnabled=Boolean(n)&&this._canBeAligned(n),this.isEnabled&&n.hasAttribute("alignment")?this.value=n.getAttribute("alignment"):this.value="rtl"===t.contentLanguageDirection?"right":"left"}execute(t={}){const e=this.editor,n=e.locale,i=e.model,o=i.document,r=t.value;i.change((t=>{const e=Array.from(o.selection.getSelectedBlocks()).filter((t=>this._canBeAligned(t))),i=e[0].getAttribute("alignment");a(r,n)||i===r||!r?function(t,e){for(const n of t)e.removeAttribute(l,n)}(e,t):function(t,e,n){for(const i of t)e.setAttribute(l,n,i)}(e,t,r)}))}_canBeAligned(t){return this.editor.model.schema.checkAttribute(t,l)}}class g extends t.Plugin{static get pluginName(){return"AlignmentEditing"}constructor(t){super(t),t.config.define("alignment",{options:o.map((t=>({name:t})))})}init(){const t=this.editor,e=t.locale,n=t.model.schema,i=s(t.config.get("alignment.options")).filter((t=>r(t.name)&&!a(t.name,e))),o=i.some((t=>!!t.className));n.extend("$block",{allowAttributes:"alignment"}),t.model.schema.setAttributeProperties("alignment",{isFormatting:!0}),o?t.conversion.attributeToAttribute(function(t){const e={};for(const n of t)e[n.name]={key:"class",value:n.className};const n={model:{key:"alignment",values:t.map((t=>t.name))},view:e};return n}(i)):t.conversion.for("downcast").attributeToAttribute(function(t){const e={};for(const{name:n}of t)e[n]={key:"style",value:{"text-align":n}};const n={model:{key:"alignment",values:t.map((t=>t.name))},view:e};return n}(i));const l=function(t){const e=[];for(const{name:n}of t)e.push({view:{key:"style",value:{"text-align":n}},model:{key:"alignment",value:n}});return e}(i);for(const e of l)t.conversion.for("upcast").attributeToAttribute(e);const g=function(t){const e=[];for(const{name:n}of t)e.push({view:{key:"align",value:n},model:{key:"alignment",value:n}});return e}(i);for(const e of g)t.conversion.for("upcast").attributeToAttribute(e);t.commands.add("alignment",new c(t))}}var u=n(273);const m=new Map([["left",t.icons.alignLeft],["right",t.icons.alignRight],["center",t.icons.alignCenter],["justify",t.icons.alignJustify]]);class d extends t.Plugin{get localizedOptionTitles(){const t=this.editor.t;return{left:t("Align left"),right:t("Align right"),center:t("Align center"),justify:t("Justify")}}static get pluginName(){return"AlignmentUI"}init(){const t=this.editor,e=t.ui.componentFactory,n=t.t,i=s(t.config.get("alignment.options"));i.map((t=>t.name)).filter(r).forEach((t=>this._addButton(t))),e.add("alignment",(o=>{const r=(0,u.createDropdown)(o);(0,u.addToolbarToDropdown)(r,(()=>i.map((t=>e.create(`alignment:${t.name}`)))),{enableActiveItemFocusOnDropdownOpen:!0,isVertical:!0,ariaLabel:n("Text alignment toolbar")}),r.buttonView.set({label:n("Text alignment"),tooltip:!0}),r.extendTemplate({attributes:{class:"ck-alignment-dropdown"}});const a="rtl"===o.contentLanguageDirection?m.get("right"):m.get("left"),s=t.commands.get("alignment");return r.buttonView.bind("icon").to(s,"value",(t=>m.get(t)||a)),r.bind("isEnabled").to(s,"isEnabled"),this.listenTo(r,"execute",(()=>{t.editing.view.focus()})),r}))}_addButton(t){const e=this.editor;e.ui.componentFactory.add(`alignment:${t}`,(n=>{const i=e.commands.get("alignment"),o=new u.ButtonView(n);return o.set({label:this.localizedOptionTitles[t],icon:m.get(t),tooltip:!0,isToggleable:!0}),o.bind("isEnabled").to(i),o.bind("isOn").to(i,"value",(e=>e===t)),this.listenTo(o,"execute",(()=>{e.execute("alignment",{value:t}),e.editing.view.focus()})),o}))}}class f extends t.Plugin{static get requires(){return[g,d]}static get pluginName(){return"Alignment"}}})(),(window.CKEditor5=window.CKEditor5||{}).alignment=i})();

package/build/translations/ug.js

@@ -1 +1 @@
-!function(n){const i=n.ug=n.ug||{};i.dictionary=Object.assign(i.dictionary||{},{"Align center":"ئوتتۇرىغا توغرىلاش","Align left":"سولغا توغرىلاش","Align right":"ئوڭغا توغرىلاش",Justify:"تەكشىلەش","Text alignment":"تېكىست توغرىلاش","Text alignment toolbar":"تېكىست توغرىلاش قورالبالدىقى"})}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));
+!function(n){const i=n.ug=n.ug||{};i.dictionary=Object.assign(i.dictionary||{},{"Align center":"ئوتتۇرىغا توغرىلاش","Align left":"سولغا توغرىلاش","Align right":"ئوڭغا توغرىلاش",Justify:"ئوڭ سولدىن توغرىلا","Text alignment":"تېكىست توغرىلاش","Text alignment toolbar":"تېكىست توغرىلاش قورالبالدىقى"})}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

package/lang/translations/ug.po

@@ -30,7 +30,7 @@ msgstr "ئوتتۇرىغا توغرىلاش"
 
 msgctxt "Toolbar button tooltip for making the text justified."
 msgid "Justify"
-msgstr "تەكشىلەش"
+msgstr "ئوڭ سولدىن توغرىلا"
 
 msgctxt "Dropdown button tooltip for the text alignment feature."
 msgid "Text alignment"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-alignment",
-  "version": "35.3.2",
+  "version": "36.0.0",
   "description": "Text alignment feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,21 +12,22 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "^35.3.2"
+    "ckeditor5": "^36.0.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-block-quote": "^35.3.2",
-    "@ckeditor/ckeditor5-core": "^35.3.2",
-    "@ckeditor/ckeditor5-dev-utils": "^31.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^35.3.2",
-    "@ckeditor/ckeditor5-engine": "^35.3.2",
-    "@ckeditor/ckeditor5-enter": "^35.3.2",
-    "@ckeditor/ckeditor5-heading": "^35.3.2",
-    "@ckeditor/ckeditor5-image": "^35.3.2",
-    "@ckeditor/ckeditor5-list": "^35.3.2",
-    "@ckeditor/ckeditor5-paragraph": "^35.3.2",
-    "@ckeditor/ckeditor5-theme-lark": "^35.3.2",
-    "@ckeditor/ckeditor5-typing": "^35.3.2",
+    "@ckeditor/ckeditor5-block-quote": "^36.0.0",
+    "@ckeditor/ckeditor5-core": "^36.0.0",
+    "@ckeditor/ckeditor5-dev-utils": "^32.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^36.0.0",
+    "@ckeditor/ckeditor5-engine": "^36.0.0",
+    "@ckeditor/ckeditor5-enter": "^36.0.0",
+    "@ckeditor/ckeditor5-heading": "^36.0.0",
+    "@ckeditor/ckeditor5-image": "^36.0.0",
+    "@ckeditor/ckeditor5-list": "^36.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^36.0.0",
+    "@ckeditor/ckeditor5-theme-lark": "^36.0.0",
+    "@ckeditor/ckeditor5-typing": "^36.0.0",
+    "typescript": "^4.8.4",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"
   },
@@ -45,13 +46,16 @@
   },
   "files": [
     "lang",
-    "src",
+    "src/**/*.js",
+    "src/**/*.d.ts",
     "theme",
     "build",
     "ckeditor5-metadata.json",
     "CHANGELOG.md"
   ],
   "scripts": {
-    "dll:build": "webpack"
+    "dll:build": "webpack",
+    "build": "tsc -p ./tsconfig.release.json",
+    "postversion": "npm run build"
   }
 }

package/src/alignment.js

@@ -1,17 +1,13 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
  * @module alignment/alignment
  */
-
 import { Plugin } from 'ckeditor5/src/core';
-
 import AlignmentEditing from './alignmentediting';
 import AlignmentUI from './alignmentui';
-
 /**
  * The text alignment plugin.
  *
@@ -20,86 +16,18 @@ import AlignmentUI from './alignmentui';
  *
  * This is a "glue" plugin which loads the {@link module:alignment/alignmentediting~AlignmentEditing} and
  * {@link module:alignment/alignmentui~AlignmentUI} plugins.
- *
- * @extends module:core/plugin~Plugin
  */
 export default class Alignment extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get requires() {
-		return [ AlignmentEditing, AlignmentUI ];
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'Alignment';
-	}
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [AlignmentEditing, AlignmentUI];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        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 configuration 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'` or `'right'` as these are default values which the user should
- * normally be able to choose depending on the
- * {@glink features/ui-language#setting-the-language-of-the-content language of the editor content}.
- *
- *		ClassicEditor
- *			.create( editorElement, {
- *				alignment: {
- *					options: [ 'left', 'right' ]
- *				}
- *			} )
- *			.then( ... )
- *			.catch( ... );
- *
- * By default the alignment is set inline using the `text-align` CSS property. To further customize the alignment,
- * you can provide names of classes for each alignment option using the `className` property.
- *
- * **Note:** Once you define the `className` property for one option, you need to specify it for all other options.
- *
- *		ClassicEditor
- *			.create( editorElement, {
- *				alignment: {
- *					options: [
- *						{ name: 'left', className: 'my-align-left' },
- *						{ name: 'right', className: 'my-align-right' }
- *					]
- *				}
- *			} )
- *			.then( ... )
- *			.catch( ... );
- *
- * See the demo of {@glink features/text-alignment#configuring-alignment-options custom alignment options}.
- *
- * @member {Array.<String|module:alignment/alignmentediting~AlignmentFormat>} module:alignment/alignment~AlignmentConfig#options
- */

package/src/alignmentcommand.js

@@ -1,110 +1,88 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
  * @module alignment/alignmentcommand
  */
-
 import { Command } from 'ckeditor5/src/core';
 import { first } from 'ckeditor5/src/utils';
-
 import { isDefault } from './utils';
-
 const ALIGNMENT = 'alignment';
-
 /**
  * The alignment command plugin.
- *
- * @extends module:core/command~Command
  */
 export default class AlignmentCommand extends Command {
-	/**
-	 * @inheritDoc
-	 */
-	refresh() {
-		const editor = this.editor;
-		const locale = editor.locale;
-		const firstBlock = first( this.editor.model.document.selection.getSelectedBlocks() );
-
-		// As first check whether to enable or disable the command as the value will always be false if the command cannot be enabled.
-		this.isEnabled = !!firstBlock && this._canBeAligned( firstBlock );
-
-		/**
-		 * A value of the current block's alignment.
-		 *
-		 * @observable
-		 * @readonly
-		 * @member {String} #value
-		 */
-		if ( this.isEnabled && firstBlock.hasAttribute( 'alignment' ) ) {
-			this.value = firstBlock.getAttribute( 'alignment' );
-		} else {
-			this.value = locale.contentLanguageDirection === 'rtl' ? 'right' : 'left';
-		}
-	}
-
-	/**
-	 * Executes the command. Applies the alignment `value` to the selected blocks.
-	 * If no `value` is passed, the `value` is the default one or it is equal to the currently selected block's alignment attribute,
-	 * the command will remove the attribute from the selected blocks.
-	 *
-	 * @param {Object} [options] Options for the executed command.
-	 * @param {String} [options.value] The value to apply.
-	 * @fires execute
-	 */
-	execute( options = {} ) {
-		const editor = this.editor;
-		const locale = editor.locale;
-		const model = editor.model;
-		const doc = model.document;
-
-		const value = options.value;
-
-		model.change( writer => {
-			// Get only those blocks from selected that can have alignment set
-			const blocks = Array.from( doc.selection.getSelectedBlocks() ).filter( block => this._canBeAligned( block ) );
-			const currentAlignment = blocks[ 0 ].getAttribute( 'alignment' );
-
-			// Remove alignment attribute if current alignment is:
-			// - default (should not be stored in model as it will bloat model data)
-			// - equal to currently set
-			// - or no value is passed - denotes default alignment.
-			const removeAlignment = isDefault( value, locale ) || currentAlignment === value || !value;
-
-			if ( removeAlignment ) {
-				removeAlignmentFromSelection( blocks, writer );
-			} else {
-				setAlignmentOnSelection( blocks, writer, value );
-			}
-		} );
-	}
-
-	/**
-	 * Checks whether a block can have alignment set.
-	 *
-	 * @private
-	 * @param {module:engine/model/element~Element} block The block to be checked.
-	 * @returns {Boolean}
-	 */
-	_canBeAligned( block ) {
-		return this.editor.model.schema.checkAttribute( block, ALIGNMENT );
-	}
+    /**
+     * @inheritDoc
+     */
+    refresh() {
+        const editor = this.editor;
+        const locale = editor.locale;
+        const firstBlock = first(this.editor.model.document.selection.getSelectedBlocks());
+        // As first check whether to enable or disable the command as the value will always be false if the command cannot be enabled.
+        this.isEnabled = Boolean(firstBlock) && this._canBeAligned(firstBlock);
+        if (this.isEnabled && firstBlock.hasAttribute('alignment')) {
+            this.value = firstBlock.getAttribute('alignment');
+        }
+        else {
+            this.value = locale.contentLanguageDirection === 'rtl' ? 'right' : 'left';
+        }
+    }
+    /**
+     * Executes the command. Applies the alignment `value` to the selected blocks.
+     * If no `value` is passed, the `value` is the default one or it is equal to the currently selected block's alignment attribute,
+     * the command will remove the attribute from the selected blocks.
+     *
+     * @param options Options for the executed command.
+     * @param options.value The value to apply.
+     * @fires execute
+     */
+    execute(options = {}) {
+        const editor = this.editor;
+        const locale = editor.locale;
+        const model = editor.model;
+        const doc = model.document;
+        const value = options.value;
+        model.change(writer => {
+            // Get only those blocks from selected that can have alignment set
+            const blocks = Array.from(doc.selection.getSelectedBlocks()).filter(block => this._canBeAligned(block));
+            const currentAlignment = blocks[0].getAttribute('alignment');
+            // Remove alignment attribute if current alignment is:
+            // - default (should not be stored in model as it will bloat model data)
+            // - equal to currently set
+            // - or no value is passed - denotes default alignment.
+            const removeAlignment = isDefault(value, locale) || currentAlignment === value || !value;
+            if (removeAlignment) {
+                removeAlignmentFromSelection(blocks, writer);
+            }
+            else {
+                setAlignmentOnSelection(blocks, writer, value);
+            }
+        });
+    }
+    /**
+     * Checks whether a block can have alignment set.
+     *
+     * @param block The block to be checked.
+     */
+    _canBeAligned(block) {
+        return this.editor.model.schema.checkAttribute(block, ALIGNMENT);
+    }
 }
-
-// Removes the alignment attribute from blocks.
-// @private
-function removeAlignmentFromSelection( blocks, writer ) {
-	for ( const block of blocks ) {
-		writer.removeAttribute( ALIGNMENT, block );
-	}
+/**
+ * Removes the alignment attribute from blocks.
+ */
+function removeAlignmentFromSelection(blocks, writer) {
+    for (const block of blocks) {
+        writer.removeAttribute(ALIGNMENT, block);
+    }
 }
-
-// Sets the alignment attribute on blocks.
-// @private
-function setAlignmentOnSelection( blocks, writer, alignment ) {
-	for ( const block of blocks ) {
-		writer.setAttribute( ALIGNMENT, alignment, block );
-	}
+/**
+ * Sets the alignment attribute on blocks.
+ */
+function setAlignmentOnSelection(blocks, writer, alignment) {
+    for (const block of blocks) {
+        writer.setAttribute(ALIGNMENT, alignment, block);
+    }
 }