8
0
Просмотр исходного кода

Merge branch 'master' into t/ckeditor5-widget/95

Maciej Gołaszewski 6 лет назад
Родитель
Сommit
84426677c6
26 измененных файлов с 596 добавлено и 176 удалено
  1. 17 0
      packages/ckeditor5-indent/CHANGELOG.md
  2. 4 0
      packages/ckeditor5-indent/README.md
  3. 5 15
      packages/ckeditor5-indent/docs/_snippets/features/custom-indent-block-classes.html
  4. 1 3
      packages/ckeditor5-indent/docs/_snippets/features/custom-indent-block-classes.js
  5. 2 2
      packages/ckeditor5-indent/docs/_snippets/features/indent.html
  6. 1 1
      packages/ckeditor5-indent/docs/api/indent.md
  7. 26 26
      packages/ckeditor5-indent/docs/features/indent.md
  8. 25 0
      packages/ckeditor5-indent/lang/translations/da.po
  9. 25 0
      packages/ckeditor5-indent/lang/translations/en-gb.po
  10. 25 0
      packages/ckeditor5-indent/lang/translations/ku.po
  11. 25 0
      packages/ckeditor5-indent/lang/translations/nl.po
  12. 25 0
      packages/ckeditor5-indent/lang/translations/sr-latn.po
  13. 25 0
      packages/ckeditor5-indent/lang/translations/sr.po
  14. 9 9
      packages/ckeditor5-indent/package.json
  15. 6 6
      packages/ckeditor5-indent/src/indent.js
  16. 38 28
      packages/ckeditor5-indent/src/indentblock.js
  17. 9 9
      packages/ckeditor5-indent/src/indentblockcommand.js
  18. 2 2
      packages/ckeditor5-indent/src/indentcommandbehavior/indentusingclasses.js
  19. 3 3
      packages/ckeditor5-indent/src/indentcommandbehavior/indentusingoffset.js
  20. 2 2
      packages/ckeditor5-indent/src/indentediting.js
  21. 10 6
      packages/ckeditor5-indent/src/indentui.js
  22. 166 62
      packages/ckeditor5-indent/tests/indentblock.js
  23. 63 2
      packages/ckeditor5-indent/tests/indentui.js
  24. 23 0
      packages/ckeditor5-indent/tests/manual/rtl.html
  25. 49 0
      packages/ckeditor5-indent/tests/manual/rtl.js
  26. 10 0
      packages/ckeditor5-indent/tests/manual/rtl.md

+ 17 - 0
packages/ckeditor5-indent/CHANGELOG.md

@@ -1,6 +1,23 @@
 Changelog
 Changelog
 =========
 =========
 
 
+## [10.1.0](https://github.com/ckeditor/ckeditor5-indent/compare/v10.0.1...v10.1.0) (2019-08-26)
+
+### Features
+
+* Integrated the indent block feature with different editor content directions (LTR and RTL). See [ckeditor/ckeditor5#1151](https://github.com/ckeditor/ckeditor5/issues/1151). ([45828ce](https://github.com/ckeditor/ckeditor5-indent/commit/45828ce))
+
+### Bug fixes
+
+* The `'indentBlock'` command should be executed on blocks from the selection according to the schema rules. Closes [#8](https://github.com/ckeditor/ckeditor5-indent/issues/8). ([15caf3e](https://github.com/ckeditor/ckeditor5-indent/commit/15caf3e))
+* The `indentBlock` command will now operate only on selected top-most blocks. Closes [#11](https://github.com/ckeditor/ckeditor5-indent/issues/11). ([7fac8c0](https://github.com/ckeditor/ckeditor5-indent/commit/7fac8c0))
+
+### Other changes
+
+* The issue tracker for this package was moved to https://github.com/ckeditor/ckeditor5/issues. See [ckeditor/ckeditor5#1988](https://github.com/ckeditor/ckeditor5/issues/1988). ([fae33af](https://github.com/ckeditor/ckeditor5-indent/commit/fae33af))
+* Updated translations. ([cc421f3](https://github.com/ckeditor/ckeditor5-indent/commit/cc421f3))
+
+
 ## [10.0.1](https://github.com/ckeditor/ckeditor5-indent/compare/v10.0.0...v10.0.1) (2019-07-10)
 ## [10.0.1](https://github.com/ckeditor/ckeditor5-indent/compare/v10.0.0...v10.0.1) (2019-07-10)
 
 
 Internal changes only (updated dependencies, documentation, etc.).
 Internal changes only (updated dependencies, documentation, etc.).

+ 4 - 0
packages/ckeditor5-indent/README.md

@@ -12,6 +12,10 @@ CKEditor 5 block indentation feature
 
 
 This package implements block indentation support for CKEditor 5.
 This package implements block indentation support for CKEditor 5.
 
 
+## Demo
+
+Check out the [demo in the Block indentation feature](https://ckeditor.com/docs/ckeditor5/latest/features/indent.html#demo) guide.
+
 ## Documentation
 ## Documentation
 
 
 See the [`@ckeditor/ckeditor5-indent` package](https://ckeditor.com/docs/ckeditor5/latest/api/indent.html) page in [CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/latest/).
 See the [`@ckeditor/ckeditor5-indent` package](https://ckeditor.com/docs/ckeditor5/latest/api/indent.html) page in [CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/latest/).

+ 5 - 15
packages/ckeditor5-indent/docs/_snippets/features/custom-indent-block-classes.html

@@ -10,30 +10,20 @@
 	.custom-block-indent-c {
 	.custom-block-indent-c {
 		margin-left: 30%;
 		margin-left: 30%;
 	}
 	}
-
-	.custom-block-indent-d {
-		margin-left: 40%;
-	}
-
-	.custom-block-indent-e {
-		margin-left: 50%;
-	}
 </style>
 </style>
 
 
 <div id="snippet-indent-block-classes">
 <div id="snippet-indent-block-classes">
 	<h2>Block indentation using CSS classes</h2>
 	<h2>Block indentation using CSS classes</h2>
 
 
-	<p>If you want more semantics in your content, use CSS classes instead of fixed indentation units. You can then adjust
-		the levels in the styles sheets of your application whenever you want.&nbsp;</p>
+	<p>This is a normal paragraph with no indentation applied.</p>
 
 
 	<h3 class="custom-block-indent-a">This heading has the <code>.custom-block-indent-a</code> class</h3>
 	<h3 class="custom-block-indent-a">This heading has the <code>.custom-block-indent-a</code> class</h3>
 
 
-	<p class="custom-block-indent-a">And this paragraph shares the same class, and that puts it at the same level.</p>
+	<p class="custom-block-indent-a">This paragraph shares the same class and that puts it at the same level.</p>
 
 
 	<h4 class="custom-block-indent-b">But this one has the <code>.custom-block-indent-b</code> class</h4>
 	<h4 class="custom-block-indent-b">But this one has the <code>.custom-block-indent-b</code> class</h4>
 
 
-	<p class="custom-block-indent-b">Using classes instead of fixed units (<code>px</code> or <code>em</code>) has another
-		advantage. You retain control over what indentation levels are used in the documents. For instance, you can limit
-		indentation to 2 or 3 different levels and there is no way users can go beyond that (<code>.custom-block-indent-e</code> class level).
-		That should help you keep your content clean and predictable.</p>
+	<p class="custom-block-indent-b">This paragraph shares the same indentation class.</p>
+
+	<p class="custom-block-indent-c">This paragraph has the <code>.custom-block-indent-c</code> class. This is the maximum indentation level allowed in the configuration.</p>
 </div>
 </div>

+ 1 - 3
packages/ckeditor5-indent/docs/_snippets/features/custom-indent-block-classes.js

@@ -31,9 +31,7 @@ ClassicEditor
 			classes: [
 			classes: [
 				'custom-block-indent-a',
 				'custom-block-indent-a',
 				'custom-block-indent-b',
 				'custom-block-indent-b',
-				'custom-block-indent-c',
-				'custom-block-indent-d',
-				'custom-block-indent-e'
+				'custom-block-indent-c'
 			]
 			]
 		}
 		}
 	} )
 	} )

+ 2 - 2
packages/ckeditor5-indent/docs/_snippets/features/indent.html

@@ -8,12 +8,12 @@
 
 
 	<h3>Indenting list items</h3>
 	<h3>Indenting list items</h3>
 
 
-	<p>Block indentation buttons work with lists too! Check out the following list and play with different indentation levels:</p>
+	<p>Block indentation buttons work with lists, too! Check out the following list and play with different indentation levels:</p>
 
 
 	<ul>
 	<ul>
 		<li>This is the shallowest list item.&nbsp;<ul>
 		<li>This is the shallowest list item.&nbsp;<ul>
 				<li>And this one is nested.</li>
 				<li>And this one is nested.</li>
-				<li>This one is nested too.<ul>
+				<li>This one is nested, too.<ul>
 						<li>And this one goes even deeper.</li>
 						<li>And this one goes even deeper.</li>
 					</ul>
 					</ul>
 				</li>
 				</li>

+ 1 - 1
packages/ckeditor5-indent/docs/api/indent.md

@@ -6,7 +6,7 @@ category: api-reference
 
 
 [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-indent.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-indent)
 [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-indent.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-indent)
 
 
-This package implements the indent feature for CKEditor 5.
+This package implements the indentation feature for CKEditor 5.
 
 
 ## Demo
 ## Demo
 
 

+ 26 - 26
packages/ckeditor5-indent/docs/features/indent.md

@@ -5,19 +5,21 @@ category: features
 
 
 {@snippet features/build-indent-source}
 {@snippet features/build-indent-source}
 
 
-## Demo
+The block indentation feature allows you to set indentation for text blocks such as paragraphs or headings and lists. It is implemented by three plugins: {@link module:indent/indent~Indent}, {@link module:indent/indentblock~IndentBlock} and {@link module:list/list~List}.
 
 
-The indentation feature allows to set indentation of text blocks like paragraphs or headings and lists.
+## Demo
 
 
 {@snippet features/indent}
 {@snippet features/indent}
 
 
 ## Configuring the block indentation feature
 ## Configuring the block indentation feature
 
 
+This feature offers a few configuration options that can be used to adjust the text block indentation behavior.
+
 ### Using offset and unit
 ### Using offset and unit
 
 
 By default, the block indentation feature increases or decreases the current indentation by the given offset, using the given unit.
 By default, the block indentation feature increases or decreases the current indentation by the given offset, using the given unit.
 
 
-The editor used in the {@link features/indent#demo demo} section above uses the default configuration, which defines a `40px` indentation step.
+The rich-text editor from the {@link features/indent#demo demo} section above uses the default configuration, which defines a `40px` indentation step.
 
 
 You can change that value to, for example, `1em`:
 You can change that value to, for example, `1em`:
 
 
@@ -41,7 +43,9 @@ ClassicEditor
 
 
 ### Using CSS classes
 ### Using CSS classes
 
 
-Alternatively, the block indentation feature can be configured to set indentation by applying one of defined CSS classes:
+If you want more semantics in your content, use CSS classes instead of fixed indentation units. You can then adjust the levels in the style sheets of your application whenever you want. 
+
+Here is how you can configure the block indentation feature to set indentation by applying one of the defined CSS classes:
 
 
 ```js
 ```js
 import Indent from '@ckeditor/ckeditor5-indent/src/indent';
 import Indent from '@ckeditor/ckeditor5-indent/src/indent';
@@ -57,9 +61,7 @@ ClassicEditor
 			classes: [
 			classes: [
 				'custom-block-indent-a', // First step - smallest indentation.
 				'custom-block-indent-a', // First step - smallest indentation.
 				'custom-block-indent-b',
 				'custom-block-indent-b',
-				'custom-block-indent-c',
-				'custom-block-indent-d',
-				'custom-block-indent-e'  // Last step - biggest indentation.
+				'custom-block-indent-c'  // Last step - biggest indentation.
 			]
 			]
 		}
 		}
 	} )
 	} )
@@ -67,7 +69,9 @@ ClassicEditor
 	.catch( ... );
 	.catch( ... );
 ```
 ```
 
 
-The editor will restrict indentation levels to a set of provided classes. The biggest indentation is the class that has last index in the array.
+Using classes instead of fixed units (`px` or `em`) has another advantage &mdash; you retain control over what indentation levels are used in the documents. For instance, you can limit indentation to 2 or 3 different levels and there is no way the users can go beyond that. In the example above, the `.custom-block-indent-c` class level is the maximum allowed indentation value. This should help keep your content clean and predictable.
+
+In this configuration the WYSIWYG editor will restrict indentation levels to the set of provided classes. The class with the last index in the array has the biggest indentation.
 
 
 In the demo below the CSS classes are defined as follows:
 In the demo below the CSS classes are defined as follows:
 
 
@@ -83,30 +87,26 @@ In the demo below the CSS classes are defined as follows:
 .custom-block-indent-c {
 .custom-block-indent-c {
 	margin-left: 30%;
 	margin-left: 30%;
 }
 }
-
-.custom-block-indent-d {
-	margin-left: 40%;
-}
-
-.custom-block-indent-e {
-	margin-left: 50%;
-}
 ```
 ```
 
 
+<info-box>
+	Note that for <abbr title="right-to-left">RTL</abbr> content, `'margin-right'` should be used instead. Learn more about {@link features/ui-language#setting-the-language-of-the-content configuring language of the editor content}.
+</info-box>
+
 {@snippet features/custom-indent-block-classes}
 {@snippet features/custom-indent-block-classes}
 
 
 ## Indenting lists
 ## Indenting lists
 
 
-The same set of buttons (`outdent`, `indent`), besides controlling block indentation, allows indenting list items (nesting them). This is completely transparent to the user.
+Besides controlling text block indentation, the same set of buttons (`outdent`, `indent`) allows for indenting list items (nesting them).
 
 
-From the code perspective, the buttons are implemented by the {@link module:indent/indent~Indent} plugin, but neither those buttons nor respective commands implement any functionality by default.
+This mechanism is completely transparent to the user. From the code perspective, the buttons are implemented by the {@link module:indent/indent~Indent} plugin, but neither these buttons nor the respective commands implement any functionality by default.
 
 
-The target behavior comes in two other plugins:
+The target behavior comes from two other plugins:
 
 
-* {@link module:indent/indentblock~IndentBlock} &mdash; The indent block feature controls the indentation of elements such as paragraphs and headings.
-* {@link module:list/list~List} &mdash; The list feature implements the indentation (nesting) of lists.
+* {@link module:indent/indentblock~IndentBlock} &ndash; The indent block feature controls the indentation of elements such as paragraphs and headings.
+* {@link module:list/list~List} &ndash; The list feature implements the indentation (nesting) of lists.
 
 
-This means, that if you want to allow indenting lists only, you can do that by load only the `Indent` and `List` plugins. If you want the full behavior, you need to load all 3 plugins.
+This means that if you want to allow indenting lists only, you can do that by loading only the `Indent` and `List` plugins. If you want the full behavior, you need to load all 3 plugins (`Indent`, `IndentBlock` and `List`).
 
 
 ## Installation
 ## Installation
 
 
@@ -141,13 +141,13 @@ The {@link module:indent/indent~Indent} plugin registers the following component
 
 
 * The `'indent'` command.
 * The `'indent'` command.
 
 
-	Note, this command does not implement any behavior itself. It executes either `indentBlock` (described below) or `indentList`, depending on which of these commands is enabled.
+	This command does not implement any indentation behavior by itself. It executes either `indentBlock` (described below) or `indentList`, depending on which of these commands is enabled.
 
 
 	Read more in the [Indenting lists](#indenting-lists) section above.
 	Read more in the [Indenting lists](#indenting-lists) section above.
 
 
 * The `'outdent'` command.
 * The `'outdent'` command.
 
 
-	Note, this command does not implement any behavior itself. It executes either `outdentBlock` (described below) or `outdentList`, depending on which of these commands is enabled.
+	This command does not implement any indentation behavior by itself. It executes either `outdentBlock` (described below) or `outdentList`, depending on which of these commands is enabled.
 
 
 	Read more in the [Indenting lists](#indenting-lists) section above.
 	Read more in the [Indenting lists](#indenting-lists) section above.
 
 
@@ -155,7 +155,7 @@ The {@link module:indent/indentblock~IndentBlock} plugin registers the following
 
 
 * The {@link module:indent/indentblockcommand~IndentBlockCommand `'indentBlock'`} command.
 * The {@link module:indent/indentblockcommand~IndentBlockCommand `'indentBlock'`} command.
 
 
-	You can increase the indentation of the block in which the selection is set by:
+	You can increase the indentation of the text block that contains the selection by:
 
 
 	```js
 	```js
 	editor.execute( 'indentBlock' );
 	editor.execute( 'indentBlock' );
@@ -163,7 +163,7 @@ The {@link module:indent/indentblock~IndentBlock} plugin registers the following
 
 
 * The {@link module:indent/indentblockcommand~IndentBlockCommand `'outdentBlock'`} command.
 * The {@link module:indent/indentblockcommand~IndentBlockCommand `'outdentBlock'`} command.
 
 
-	You can decrease the indentation of the block in which the selection is set by:
+	You can decrease the indentation of the text block that contains the selection by:
 
 
 	```js
 	```js
 	editor.execute( 'outdentBlock' );
 	editor.execute( 'outdentBlock' );

+ 25 - 0
packages/ckeditor5-indent/lang/translations/da.po

@@ -0,0 +1,25 @@
+# Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+#
+#                                     !!! IMPORTANT !!!
+#
+#         Before you edit this file, please keep in mind that contributing to the project
+#                translations is possible ONLY via the Transifex online service.
+#
+#         To submit your translations, visit https://www.transifex.com/ckeditor/ckeditor5.
+#
+#                   To learn more, check out the official contributor's guide:
+#     https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html
+#
+msgid ""
+msgstr ""
+"Language-Team: Danish (https://www.transifex.com/ckeditor/teams/11143/da/)\n"
+"Language: da\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgctxt "Toolbar button tooltip for the increase indentation feature."
+msgid "Increase indent"
+msgstr "Forøg indrykning"
+
+msgctxt "Toolbar button tooltip for the decrease indentation feature."
+msgid "Decrease indent"
+msgstr "Formindsk indrykning"

+ 25 - 0
packages/ckeditor5-indent/lang/translations/en-gb.po

@@ -0,0 +1,25 @@
+# Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+#
+#                                     !!! IMPORTANT !!!
+#
+#         Before you edit this file, please keep in mind that contributing to the project
+#                translations is possible ONLY via the Transifex online service.
+#
+#         To submit your translations, visit https://www.transifex.com/ckeditor/ckeditor5.
+#
+#                   To learn more, check out the official contributor's guide:
+#     https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html
+#
+msgid ""
+msgstr ""
+"Language-Team: English (United Kingdom) (https://www.transifex.com/ckeditor/teams/11143/en_GB/)\n"
+"Language: en_GB\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgctxt "Toolbar button tooltip for the increase indentation feature."
+msgid "Increase indent"
+msgstr "Increase indent"
+
+msgctxt "Toolbar button tooltip for the decrease indentation feature."
+msgid "Decrease indent"
+msgstr "Decrease indent"

+ 25 - 0
packages/ckeditor5-indent/lang/translations/ku.po

@@ -0,0 +1,25 @@
+# Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+#
+#                                     !!! IMPORTANT !!!
+#
+#         Before you edit this file, please keep in mind that contributing to the project
+#                translations is possible ONLY via the Transifex online service.
+#
+#         To submit your translations, visit https://www.transifex.com/ckeditor/ckeditor5.
+#
+#                   To learn more, check out the official contributor's guide:
+#     https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html
+#
+msgid ""
+msgstr ""
+"Language-Team: Kurdish (https://www.transifex.com/ckeditor/teams/11143/ku/)\n"
+"Language: ku\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgctxt "Toolbar button tooltip for the increase indentation feature."
+msgid "Increase indent"
+msgstr "زیادکردنی بۆشایی"
+
+msgctxt "Toolbar button tooltip for the decrease indentation feature."
+msgid "Decrease indent"
+msgstr "کەمکردنەوەی بۆشایی"

+ 25 - 0
packages/ckeditor5-indent/lang/translations/nl.po

@@ -0,0 +1,25 @@
+# Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+#
+#                                     !!! IMPORTANT !!!
+#
+#         Before you edit this file, please keep in mind that contributing to the project
+#                translations is possible ONLY via the Transifex online service.
+#
+#         To submit your translations, visit https://www.transifex.com/ckeditor/ckeditor5.
+#
+#                   To learn more, check out the official contributor's guide:
+#     https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html
+#
+msgid ""
+msgstr ""
+"Language-Team: Dutch (https://www.transifex.com/ckeditor/teams/11143/nl/)\n"
+"Language: nl\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgctxt "Toolbar button tooltip for the increase indentation feature."
+msgid "Increase indent"
+msgstr "Inspringen"
+
+msgctxt "Toolbar button tooltip for the decrease indentation feature."
+msgid "Decrease indent"
+msgstr "Minder inspringen"

+ 25 - 0
packages/ckeditor5-indent/lang/translations/sr-latn.po

@@ -0,0 +1,25 @@
+# Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+#
+#                                     !!! IMPORTANT !!!
+#
+#         Before you edit this file, please keep in mind that contributing to the project
+#                translations is possible ONLY via the Transifex online service.
+#
+#         To submit your translations, visit https://www.transifex.com/ckeditor/ckeditor5.
+#
+#                   To learn more, check out the official contributor's guide:
+#     https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html
+#
+msgid ""
+msgstr ""
+"Language-Team: Serbian (Latin) (https://www.transifex.com/ckeditor/teams/11143/sr@latin/)\n"
+"Language: sr@latin\n"
+"Plural-Forms: nplurals=3; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);\n"
+
+msgctxt "Toolbar button tooltip for the increase indentation feature."
+msgid "Increase indent"
+msgstr "Povećaj uclačenje"
+
+msgctxt "Toolbar button tooltip for the decrease indentation feature."
+msgid "Decrease indent"
+msgstr "Smanji uvlačenje"

+ 25 - 0
packages/ckeditor5-indent/lang/translations/sr.po

@@ -0,0 +1,25 @@
+# Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+#
+#                                     !!! IMPORTANT !!!
+#
+#         Before you edit this file, please keep in mind that contributing to the project
+#                translations is possible ONLY via the Transifex online service.
+#
+#         To submit your translations, visit https://www.transifex.com/ckeditor/ckeditor5.
+#
+#                   To learn more, check out the official contributor's guide:
+#     https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html
+#
+msgid ""
+msgstr ""
+"Language-Team: Serbian (https://www.transifex.com/ckeditor/teams/11143/sr/)\n"
+"Language: sr\n"
+"Plural-Forms: nplurals=3; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);\n"
+
+msgctxt "Toolbar button tooltip for the increase indentation feature."
+msgid "Increase indent"
+msgstr "Повећај увлачење"
+
+msgctxt "Toolbar button tooltip for the decrease indentation feature."
+msgid "Decrease indent"
+msgstr "Смањи увлачење"

+ 9 - 9
packages/ckeditor5-indent/package.json

@@ -1,6 +1,6 @@
 {
 {
   "name": "@ckeditor/ckeditor5-indent",
   "name": "@ckeditor/ckeditor5-indent",
-  "version": "10.0.1",
+  "version": "10.1.0",
   "description": "Block indentation feature for CKEditor 5.",
   "description": "Block indentation feature for CKEditor 5.",
   "keywords": [
   "keywords": [
     "ckeditor",
     "ckeditor",
@@ -10,15 +10,15 @@
     "ckeditor5-plugin"
     "ckeditor5-plugin"
   ],
   ],
   "dependencies": {
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^12.2.1",
-    "@ckeditor/ckeditor5-utils": "^13.0.1"
+    "@ckeditor/ckeditor5-core": "^12.3.0",
+    "@ckeditor/ckeditor5-utils": "^14.0.0"
   },
   },
   "devDependencies": {
   "devDependencies": {
-    "@ckeditor/ckeditor5-editor-classic": "^12.1.3",
-    "@ckeditor/ckeditor5-engine": "^13.2.1",
-    "@ckeditor/ckeditor5-heading": "^11.0.4",
-    "@ckeditor/ckeditor5-paragraph": "^11.0.4",
-    "@ckeditor/ckeditor5-ui": "^13.0.2",
+    "@ckeditor/ckeditor5-editor-classic": "^12.1.4",
+    "@ckeditor/ckeditor5-engine": "^14.0.0",
+    "@ckeditor/ckeditor5-heading": "^11.0.5",
+    "@ckeditor/ckeditor5-paragraph": "^11.0.5",
+    "@ckeditor/ckeditor5-ui": "^14.0.0",
     "eslint": "^5.15.3",
     "eslint": "^5.15.3",
     "eslint-config-ckeditor5": "^2.0.0",
     "eslint-config-ckeditor5": "^2.0.0",
     "husky": "^1.3.1",
     "husky": "^1.3.1",
@@ -31,7 +31,7 @@
   "author": "CKSource (http://cksource.com/)",
   "author": "CKSource (http://cksource.com/)",
   "license": "GPL-2.0-or-later",
   "license": "GPL-2.0-or-later",
   "homepage": "https://ckeditor.com/ckeditor-5",
   "homepage": "https://ckeditor.com/ckeditor-5",
-  "bugs": "https://github.com/ckeditor/ckeditor5-indent/issues",
+  "bugs": "https://github.com/ckeditor/ckeditor5/issues",
   "repository": {
   "repository": {
     "type": "git",
     "type": "git",
     "url": "https://github.com/ckeditor/ckeditor5-indent.git"
     "url": "https://github.com/ckeditor/ckeditor5-indent.git"

+ 6 - 6
packages/ckeditor5-indent/src/indent.js

@@ -15,22 +15,22 @@ import IndentUI from './indentui';
 /**
 /**
  * The indent feature.
  * The indent feature.
  *
  *
- * This plugin acts as a single entry point plugin for other features that implement indenting of elements like lists or paragraphs.
+ * This plugin acts as a single entry point plugin for other features that implement indentation of elements like lists or paragraphs.
  *
  *
  * The compatible features are:
  * The compatible features are:
  *
  *
  * * The {@link module:list/list~List} or {@link module:list/listediting~ListEditing} feature for list indentation.
  * * The {@link module:list/list~List} or {@link module:list/listediting~ListEditing} feature for list indentation.
  * * The {@link module:indent/indentblock~IndentBlock} feature for block indentation.
  * * The {@link module:indent/indentblock~IndentBlock} feature for block indentation.
  *
  *
- * This is a "glue" plugin which loads the following plugins:
+ * This is a "glue" plugin that loads the following plugins:
  *
  *
- * * The {@link module:indent/indentediting~IndentEditing indent editing feature} and
+ * * The {@link module:indent/indentediting~IndentEditing indent editing feature}.
  * * The {@link module:indent/indentui~IndentUI indent UI feature}.
  * * The {@link module:indent/indentui~IndentUI indent UI feature}.
  *
  *
- * The dependent plugins register the `'indent'` and `'outdent'` commands and it introduce the `'indent'` and `'outdent'` buttons
- * which allow to increase or decrease text indentation of supported elements.
+ * The dependent plugins register the `'indent'` and `'outdent'` commands and introduce the `'indent'` and `'outdent'` buttons
+ * that allow to increase or decrease text indentation of supported elements.
  *
  *
- * **Note**: In order the commands and buttons to work at least one of compatible features is required.
+ * **Note**: In order for the commands and buttons to work, at least one of compatible features is required.
  *
  *
  * @extends module:core/plugin~Plugin
  * @extends module:core/plugin~Plugin
  */
  */

+ 38 - 28
packages/ckeditor5-indent/src/indentblock.js

@@ -18,8 +18,8 @@ import IndentUsingClasses from './indentcommandbehavior/indentusingclasses';
  *
  *
  * It registers the `'indentBlock'` and `'outdentBlock'` commands.
  * It registers the `'indentBlock'` and `'outdentBlock'` commands.
  *
  *
- * If the plugin {@link module:indent/indent~Indent} is defined it also attaches the `'indentBlock'` and `'outdentBlock'` commands to
- * `'indent'` and `'outdent'` commands.
+ * If the plugin {@link module:indent/indent~Indent} is defined, it also attaches the `'indentBlock'` and `'outdentBlock'` commands to
+ * the `'indent'` and `'outdent'` commands.
  *
  *
  * @extends module:core/plugin~Plugin
  * @extends module:core/plugin~Plugin
  */
  */
@@ -96,16 +96,18 @@ export default class IndentBlock extends Plugin {
 	 */
 	 */
 	_setupConversionUsingOffset() {
 	_setupConversionUsingOffset() {
 		const conversion = this.editor.conversion;
 		const conversion = this.editor.conversion;
+		const locale = this.editor.locale;
+		const marginProperty = locale.contentLanguageDirection === 'rtl' ? 'margin-right' : 'margin-left';
 
 
 		conversion.for( 'upcast' ).attributeToAttribute( {
 		conversion.for( 'upcast' ).attributeToAttribute( {
 			view: {
 			view: {
 				styles: {
 				styles: {
-					'margin-left': /[\s\S]+/
+					[ marginProperty ]: /[\s\S]+/
 				}
 				}
 			},
 			},
 			model: {
 			model: {
 				key: 'blockIndent',
 				key: 'blockIndent',
-				value: viewElement => viewElement.getStyle( 'margin-left' )
+				value: viewElement => viewElement.getStyle( marginProperty )
 			}
 			}
 		} );
 		} );
 
 
@@ -118,7 +120,7 @@ export default class IndentBlock extends Plugin {
 			},
 			},
 			model: {
 			model: {
 				key: 'blockIndent',
 				key: 'blockIndent',
-				value: viewElement => normalizeToMarginLeftStyle( viewElement.getStyle( 'margin' ) )
+				value: viewElement => normalizeToMarginSideStyle( viewElement.getStyle( 'margin' ), marginProperty )
 			}
 			}
 		} );
 		} );
 
 
@@ -128,7 +130,7 @@ export default class IndentBlock extends Plugin {
 				return {
 				return {
 					key: 'style',
 					key: 'style',
 					value: {
 					value: {
-						'margin-left': modelAttributeValue
+						[ marginProperty ]: modelAttributeValue
 					}
 					}
 				};
 				};
 			}
 			}
@@ -162,36 +164,44 @@ export default class IndentBlock extends Plugin {
 	}
 	}
 }
 }
 
 
-// Normalizes the margin shorthand value to the value of `margin-left` CSS property.
+// Normalizes the margin shorthand value to the value of margin-left or margin-right CSS property.
 //
 //
 // As such it will return:
 // As such it will return:
-// - '1em' for '1em'
-// - '1em' for '2px 1em'
-// - '1em' for '2px 1em 3px'
-// - '1em' for '2px 10px 3px 1em'
 //
 //
-// @param {String} Margin style value.
-// @returns {String} Extracted value of margin-left.
-function normalizeToMarginLeftStyle( marginStyleValue ) {
+// - '1em' -> '1em'
+// - '2px 1em' -> '1em'
+// - '2px 1em 3px' -> '1em'
+// - '2px 10px 3px 1em'
+//		-> '1em' (side "margin-left")
+//		-> '10px' (side "margin-right")
+//
+// @param {String} marginStyleValue Margin style value.
+// @param {String} side "margin-left" or "margin-right" depending on which margin should be returned.
+// @returns {String} Extracted value of margin-left or margin-right.
+function normalizeToMarginSideStyle( marginStyleValue, side ) {
 	// Splits the margin shorthand, ie margin: 2em 4em.
 	// Splits the margin shorthand, ie margin: 2em 4em.
 	const marginEntries = marginStyleValue.split( ' ' );
 	const marginEntries = marginStyleValue.split( ' ' );
 
 
-	let left;
+	let marginValue;
 
 
 	// If only one value defined, ie: `margin: 1px`.
 	// If only one value defined, ie: `margin: 1px`.
-	left = marginEntries[ 0 ];
+	marginValue = marginEntries[ 0 ];
 
 
 	// If only two values defined, ie: `margin: 1px 2px`.
 	// If only two values defined, ie: `margin: 1px 2px`.
 	if ( marginEntries[ 1 ] ) {
 	if ( marginEntries[ 1 ] ) {
-		left = marginEntries[ 1 ];
+		marginValue = marginEntries[ 1 ];
 	}
 	}
 
 
 	// If four values defined, ie: `margin: 1px 2px 3px 4px`.
 	// If four values defined, ie: `margin: 1px 2px 3px 4px`.
 	if ( marginEntries[ 3 ] ) {
 	if ( marginEntries[ 3 ] ) {
-		left = marginEntries[ 3 ];
+		if ( side === 'margin-left' ) {
+			marginValue = marginEntries[ 3 ];
+		} else {
+			marginValue = marginEntries[ 1 ];
+		}
 	}
 	}
 
 
-	return left;
+	return marginValue;
 }
 }
 
 
 /**
 /**
@@ -205,7 +215,7 @@ function normalizeToMarginLeftStyle( marginStyleValue ) {
 /**
 /**
  * The configuration of the block indentation feature.
  * The configuration of the block indentation feature.
  *
  *
- * If no {@link module:indent/indentblock~IndentBlockConfig#classes} are set the block indentation feature will use
+ * If no {@link module:indent/indentblock~IndentBlockConfig#classes} are set, the block indentation feature will use
  * {@link module:indent/indentblock~IndentBlockConfig#offset} and {@link module:indent/indentblock~IndentBlockConfig#unit} to
  * {@link module:indent/indentblock~IndentBlockConfig#offset} and {@link module:indent/indentblock~IndentBlockConfig#unit} to
  * create indentation steps.
  * create indentation steps.
  *
  *
@@ -219,25 +229,25 @@ function normalizeToMarginLeftStyle( marginStyleValue ) {
  *			.then( ... )
  *			.then( ... )
  *			.catch( ... );
  *			.catch( ... );
  *
  *
- * Alternatively the block indentation feature may set one of defined {@link module:indent/indentblock~IndentBlockConfig#classes} as
+ * Alternatively, the block indentation feature may set one of defined {@link module:indent/indentblock~IndentBlockConfig#classes} as
  * indentation steps:
  * indentation steps:
  *
  *
  *		ClassicEditor
  *		ClassicEditor
  *			.create( editorElement, {
  *			.create( editorElement, {
  * 				indentBlock: {
  * 				indentBlock: {
  *					classes: [
  *					classes: [
- *						'indent-a', // First step - smallest indentation.
+ *						'indent-a', // The first step - smallest indentation.
  *						'indent-b',
  *						'indent-b',
  *						'indent-c',
  *						'indent-c',
  *						'indent-d',
  *						'indent-d',
- *						'indent-e' // Last step - biggest indentation.
+ *						'indent-e' // The last step - biggest indentation.
  *					]
  *					]
  * 				}
  * 				}
  *			} )
  *			} )
  *			.then( ... )
  *			.then( ... )
  *			.catch( ... );
  *			.catch( ... );
  *
  *
- * In the above example only 5 indentation steps will be available.
+ * In the example above only 5 indentation steps will be available.
  *
  *
  * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
  * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
  *
  *
@@ -245,7 +255,7 @@ function normalizeToMarginLeftStyle( marginStyleValue ) {
  */
  */
 
 
 /**
 /**
- * The size in indentation {@link module:indent/indentblock~IndentBlockConfig#unit units} of each indentation step.
+ * The size of indentation {@link module:indent/indentblock~IndentBlockConfig#unit units} for each indentation step.
  *
  *
  * @default 40
  * @default 40
  * @member {Number} module:indent/indentblock~IndentBlockConfig#offset
  * @member {Number} module:indent/indentblock~IndentBlockConfig#offset
@@ -259,9 +269,9 @@ function normalizeToMarginLeftStyle( marginStyleValue ) {
  */
  */
 
 
 /**
 /**
- * An optional list of classes to use for indenting the contents. If not set or set to empty array, no classes will be used and instead
- * the {@link module:indent/indentblock~IndentBlockConfig#unit `indentBlock.unit`} and
- * {@link module:indent/indentblock~IndentBlockConfig#offset `indentBlock.offset`} properties will be used.
+ * An optional list of classes to use for indenting the editor content. If not set or set to an empty array, no classes will be used.
+ * The {@link module:indent/indentblock~IndentBlockConfig#unit `indentBlock.unit`} and
+ * {@link module:indent/indentblock~IndentBlockConfig#offset `indentBlock.offset`} properties will be used instead.
  *
  *
  * @default undefined
  * @default undefined
  * @member {Array.<String>|undefined} module:indent/indentblock~IndentBlockConfig#classes
  * @member {Array.<String>|undefined} module:indent/indentblock~IndentBlockConfig#classes

+ 9 - 9
packages/ckeditor5-indent/src/indentblockcommand.js

@@ -13,14 +13,14 @@ import first from '@ckeditor/ckeditor5-utils/src/first';
 /**
 /**
  * The indent block command.
  * The indent block command.
  *
  *
- * The command is registered by the {@link module:indent/indentblock~IndentBlock} as `'indentBlock'` - for indenting blocks and
- * `'outdentBlock'` - for outdenting blocks.
+ * The command is registered by the {@link module:indent/indentblock~IndentBlock} as `'indentBlock'` for indenting blocks and
+ * `'outdentBlock'` for outdenting blocks.
  *
  *
- * To increase block indentation at current selection execute the command:
+ * To increase block indentation at the current selection, execute the command:
  *
  *
  *		editor.execute( 'indentBlock' );
  *		editor.execute( 'indentBlock' );
  *
  *
- * To decrease block indentation at current selection execute the command:
+ * To decrease block indentation at the current selection, execute the command:
  *
  *
  *		editor.execute( 'outdentBlock' );
  *		editor.execute( 'outdentBlock' );
  *
  *
@@ -30,14 +30,14 @@ export default class IndentBlockCommand extends Command {
 	/**
 	/**
 	 * Creates an instance of the command.
 	 * Creates an instance of the command.
 	 *
 	 *
-	 * @param {module:core/editor/editor~Editor} editor Editor instance.
+	 * @param {module:core/editor/editor~Editor} editor The editor instance.
 	 * @param {module:indent/indentblockcommand~IndentBehavior} indentBehavior
 	 * @param {module:indent/indentblockcommand~IndentBehavior} indentBehavior
 	 */
 	 */
 	constructor( editor, indentBehavior ) {
 	constructor( editor, indentBehavior ) {
 		super( editor );
 		super( editor );
 
 
 		/**
 		/**
-		 * Command's indentation behavior.
+		 * The command's indentation behavior.
 		 *
 		 *
 		 * @type {module:indent/indentblockcommand~IndentBehavior}
 		 * @type {module:indent/indentblockcommand~IndentBehavior}
 		 * @private
 		 * @private
@@ -49,7 +49,7 @@ export default class IndentBlockCommand extends Command {
 	 * @inheritDoc
 	 * @inheritDoc
 	 */
 	 */
 	refresh() {
 	refresh() {
-		// Check whether any of position's ancestor is a list item.
+		// Check whether any of the position's ancestors is a list item.
 		const editor = this.editor;
 		const editor = this.editor;
 		const model = editor.model;
 		const model = editor.model;
 
 
@@ -106,10 +106,10 @@ function getBlocksToChange( model ) {
  */
  */
 
 
 /**
 /**
- * Performs check if command should be enabled.
+ * Checks if the command should be enabled.
  *
  *
  * @method #checkEnabled
  * @method #checkEnabled
- * @param {String} indentAttributeValue Current indent attribute value.
+ * @param {String} indentAttributeValue The current indent attribute value.
  * @returns {Boolean}
  * @returns {Boolean}
  */
  */
 
 

+ 2 - 2
packages/ckeditor5-indent/src/indentcommandbehavior/indentusingclasses.js

@@ -18,7 +18,7 @@ export default class IndentUsingClasses {
 	 *
 	 *
 	 * @param {Object} config
 	 * @param {Object} config
 	 * @param {String} config.direction The direction of indentation.
 	 * @param {String} config.direction The direction of indentation.
-	 * @param {Array.<String>} config.classes List of classes used for indentation.
+	 * @param {Array.<String>} config.classes A list of classes used for indentation.
 	 */
 	 */
 	constructor( config ) {
 	constructor( config ) {
 		/**
 		/**
@@ -29,7 +29,7 @@ export default class IndentUsingClasses {
 		this.isForward = config.direction === 'forward';
 		this.isForward = config.direction === 'forward';
 
 
 		/**
 		/**
-		 * List of classes used for indentation.
+		 * A list of classes used for indentation.
 		 *
 		 *
 		 * @type {Array.<String>}
 		 * @type {Array.<String>}
 		 */
 		 */

+ 3 - 3
packages/ckeditor5-indent/src/indentcommandbehavior/indentusingoffset.js

@@ -14,11 +14,11 @@
  */
  */
 export default class IndentUsingOffset {
 export default class IndentUsingOffset {
 	/**
 	/**
-	 * Creates an instance of the behavior.
+	 * Creates an instance of the indentation behavior.
 	 *
 	 *
 	 * @param {Object} config
 	 * @param {Object} config
 	 * @param {String} config.direction The direction of indentation.
 	 * @param {String} config.direction The direction of indentation.
-	 * @param {Number} config.offset Offset of next indentation step.
+	 * @param {Number} config.offset The offset of the next indentation step.
 	 * @param {String} config.unit Indentation unit.
 	 * @param {String} config.unit Indentation unit.
 	 */
 	 */
 	constructor( config ) {
 	constructor( config ) {
@@ -30,7 +30,7 @@ export default class IndentUsingOffset {
 		this.isForward = config.direction === 'forward';
 		this.isForward = config.direction === 'forward';
 
 
 		/**
 		/**
-		 * Offset of next indentation step.
+		 * The offset of the next indentation step.
 		 *
 		 *
 		 * @type {Number}
 		 * @type {Number}
 		 */
 		 */

+ 2 - 2
packages/ckeditor5-indent/src/indentediting.js

@@ -15,8 +15,8 @@ import MultiCommand from '@ckeditor/ckeditor5-core/src/multicommand';
  *
  *
  * This plugin registers the `'indent'` and `'outdent'` commands.
  * This plugin registers the `'indent'` and `'outdent'` commands.
  *
  *
- * **Note**: In order for the commands to work, at least one of the compatible features is required. Read more in:
- * {@link module:indent/indent~Indent indent feature} API docs.
+ * **Note**: In order for the commands to work, at least one of the compatible features is required. Read more in the
+ * {@link module:indent/indent~Indent indent feature} API documentation.
  *
  *
  * @extends module:core/plugin~Plugin
  * @extends module:core/plugin~Plugin
  */
  */

+ 10 - 6
packages/ckeditor5-indent/src/indentui.js

@@ -13,12 +13,12 @@ import indentIcon from '../theme/icons/indent.svg';
 import outdentIcon from '../theme/icons/outdent.svg';
 import outdentIcon from '../theme/icons/outdent.svg';
 
 
 /**
 /**
- * The indent feature.
+ * The indent UI feature.
  *
  *
  * This plugin registers the `'indent'` and `'outdent'` buttons.
  * This plugin registers the `'indent'` and `'outdent'` buttons.
  *
  *
- * **Note**: In order the commands to work at least one of compatible features is required. Read more in
- * {@link module:indent/indent~Indent indent feature} api docs.
+ * **Note**: In order for the commands to work, at least one of the compatible features is required. Read more in
+ * the {@link module:indent/indent~Indent indent feature} API documentation.
  *
  *
  * @extends module:core/plugin~Plugin
  * @extends module:core/plugin~Plugin
  */
  */
@@ -35,14 +35,18 @@ export default class IndentUI extends Plugin {
 	 */
 	 */
 	init() {
 	init() {
 		const editor = this.editor;
 		const editor = this.editor;
+		const locale = editor.locale;
 		const t = editor.t;
 		const t = editor.t;
 
 
-		this._defineButton( 'indent', t( 'Increase indent' ), indentIcon );
-		this._defineButton( 'outdent', t( 'Decrease indent' ), outdentIcon );
+		const localizedIndentIcon = locale.uiLanguageDirection == 'ltr' ? indentIcon : outdentIcon;
+		const localizedOutdentIcon = locale.uiLanguageDirection == 'ltr' ? outdentIcon : indentIcon;
+
+		this._defineButton( 'indent', t( 'Increase indent' ), localizedIndentIcon );
+		this._defineButton( 'outdent', t( 'Decrease indent' ), localizedOutdentIcon );
 	}
 	}
 
 
 	/**
 	/**
-	 * Defines an UI button.
+	 * Defines a UI button.
 	 *
 	 *
 	 * @param {String} commandName
 	 * @param {String} commandName
 	 * @param {String} label
 	 * @param {String} label

+ 166 - 62
packages/ckeditor5-indent/tests/indentblock.js

@@ -68,104 +68,208 @@ describe( 'IndentBlock', () => {
 
 
 	describe( 'conversion', () => {
 	describe( 'conversion', () => {
 		describe( 'using offset', () => {
 		describe( 'using offset', () => {
-			beforeEach( () => {
-				return createTestEditor( { indentBlock: { offset: 50, unit: 'px' } } )
-					.then( newEditor => {
+			describe( 'left–to–right content', () => {
+				beforeEach( () => {
+					return createTestEditor( {
+						indentBlock: { offset: 50, unit: 'px' }
+					} ).then( newEditor => {
 						editor = newEditor;
 						editor = newEditor;
 						model = editor.model;
 						model = editor.model;
 						doc = model.document;
 						doc = model.document;
 					} );
 					} );
-			} );
+				} );
 
 
-			it( 'should convert margin-left to indent attribute (known offset)', () => {
-				editor.setData( '<p style="margin-left:50px">foo</p>' );
+				it( 'should convert margin-left to indent attribute (known offset)', () => {
+					editor.setData( '<p style="margin-left:50px">foo</p>' );
 
 
-				const paragraph = doc.getRoot().getChild( 0 );
+					const paragraph = doc.getRoot().getChild( 0 );
 
 
-				expect( paragraph.hasAttribute( 'blockIndent' ) ).to.be.true;
-				expect( paragraph.getAttribute( 'blockIndent' ) ).to.equal( '50px' );
+					expect( paragraph.hasAttribute( 'blockIndent' ) ).to.be.true;
+					expect( paragraph.getAttribute( 'blockIndent' ) ).to.equal( '50px' );
 
 
-				expect( editor.getData() ).to.equal( '<p style="margin-left:50px;">foo</p>' );
-				expect( getViewData( editor.editing.view, { withoutSelection: true } ) )
-					.to.equal( '<p style="margin-left:50px">foo</p>' );
-			} );
+					expect( editor.getData() ).to.equal( '<p style="margin-left:50px;">foo</p>' );
+					expect( getViewData( editor.editing.view, { withoutSelection: true } ) )
+						.to.equal( '<p style="margin-left:50px">foo</p>' );
+				} );
 
 
-			it( 'should convert margin-left to indent attribute (any offset)', () => {
-				editor.setData( '<p style="margin-left:42em">foo</p>' );
+				it( 'should convert margin-left to indent attribute (any offset)', () => {
+					editor.setData( '<p style="margin-left:42em">foo</p>' );
 
 
-				const paragraph = doc.getRoot().getChild( 0 );
+					const paragraph = doc.getRoot().getChild( 0 );
 
 
-				expect( paragraph.hasAttribute( 'blockIndent' ) ).to.be.true;
-				expect( paragraph.getAttribute( 'blockIndent' ) ).to.equal( '42em' );
+					expect( paragraph.hasAttribute( 'blockIndent' ) ).to.be.true;
+					expect( paragraph.getAttribute( 'blockIndent' ) ).to.equal( '42em' );
 
 
-				expect( editor.getData() ).to.equal( '<p style="margin-left:42em;">foo</p>' );
-				expect( getViewData( editor.editing.view, { withoutSelection: true } ) )
-					.to.equal( '<p style="margin-left:42em">foo</p>' );
-			} );
+					expect( editor.getData() ).to.equal( '<p style="margin-left:42em;">foo</p>' );
+					expect( getViewData( editor.editing.view, { withoutSelection: true } ) )
+						.to.equal( '<p style="margin-left:42em">foo</p>' );
+				} );
 
 
-			it( 'should convert margin shortcut to indent attribute (one entry)', () => {
-				editor.setData( '<p style="margin:42em">foo</p>' );
+				it( 'should convert margin shortcut to indent attribute (one entry)', () => {
+					editor.setData( '<p style="margin:42em">foo</p>' );
 
 
-				const paragraph = doc.getRoot().getChild( 0 );
+					const paragraph = doc.getRoot().getChild( 0 );
 
 
-				expect( paragraph.hasAttribute( 'blockIndent' ) ).to.be.true;
-				expect( paragraph.getAttribute( 'blockIndent' ) ).to.equal( '42em' );
+					expect( paragraph.hasAttribute( 'blockIndent' ) ).to.be.true;
+					expect( paragraph.getAttribute( 'blockIndent' ) ).to.equal( '42em' );
 
 
-				expect( editor.getData() ).to.equal( '<p style="margin-left:42em;">foo</p>' );
-				expect( getViewData( editor.editing.view, { withoutSelection: true } ) )
-					.to.equal( '<p style="margin-left:42em">foo</p>' );
-			} );
+					expect( editor.getData() ).to.equal( '<p style="margin-left:42em;">foo</p>' );
+					expect( getViewData( editor.editing.view, { withoutSelection: true } ) )
+						.to.equal( '<p style="margin-left:42em">foo</p>' );
+				} );
 
 
-			it( 'should convert margin shortcut to indent attribute (two entries)', () => {
-				editor.setData( '<p style="margin:24em 42em">foo</p>' );
+				it( 'should convert margin shortcut to indent attribute (two entries)', () => {
+					editor.setData( '<p style="margin:24em 42em">foo</p>' );
 
 
-				const paragraph = doc.getRoot().getChild( 0 );
+					const paragraph = doc.getRoot().getChild( 0 );
 
 
-				expect( paragraph.hasAttribute( 'blockIndent' ) ).to.be.true;
-				expect( paragraph.getAttribute( 'blockIndent' ) ).to.equal( '42em' );
+					expect( paragraph.hasAttribute( 'blockIndent' ) ).to.be.true;
+					expect( paragraph.getAttribute( 'blockIndent' ) ).to.equal( '42em' );
 
 
-				expect( editor.getData() ).to.equal( '<p style="margin-left:42em;">foo</p>' );
-				expect( getViewData( editor.editing.view, { withoutSelection: true } ) )
-					.to.equal( '<p style="margin-left:42em">foo</p>' );
-			} );
+					expect( editor.getData() ).to.equal( '<p style="margin-left:42em;">foo</p>' );
+					expect( getViewData( editor.editing.view, { withoutSelection: true } ) )
+						.to.equal( '<p style="margin-left:42em">foo</p>' );
+				} );
 
 
-			it( 'should convert margin shortcut to indent attribute (three entries)', () => {
-				editor.setData( '<p style="margin:24em 42em 20em">foo</p>' );
+				it( 'should convert margin shortcut to indent attribute (three entries)', () => {
+					editor.setData( '<p style="margin:24em 42em 20em">foo</p>' );
 
 
-				const paragraph = doc.getRoot().getChild( 0 );
+					const paragraph = doc.getRoot().getChild( 0 );
 
 
-				expect( paragraph.hasAttribute( 'blockIndent' ) ).to.be.true;
-				expect( paragraph.getAttribute( 'blockIndent' ) ).to.equal( '42em' );
+					expect( paragraph.hasAttribute( 'blockIndent' ) ).to.be.true;
+					expect( paragraph.getAttribute( 'blockIndent' ) ).to.equal( '42em' );
+
+					expect( editor.getData() ).to.equal( '<p style="margin-left:42em;">foo</p>' );
+					expect( getViewData( editor.editing.view, { withoutSelection: true } ) )
+						.to.equal( '<p style="margin-left:42em">foo</p>' );
+				} );
 
 
-				expect( editor.getData() ).to.equal( '<p style="margin-left:42em;">foo</p>' );
-				expect( getViewData( editor.editing.view, { withoutSelection: true } ) )
-					.to.equal( '<p style="margin-left:42em">foo</p>' );
+				it( 'should convert margin shortcut to indent attribute (four entries)', () => {
+					editor.setData( '<p style="margin:24em 40em 24em 42em">foo</p>' );
+
+					const paragraph = doc.getRoot().getChild( 0 );
+
+					expect( paragraph.hasAttribute( 'blockIndent' ) ).to.be.true;
+					expect( paragraph.getAttribute( 'blockIndent' ) ).to.equal( '42em' );
+
+					expect( editor.getData() ).to.equal( '<p style="margin-left:42em;">foo</p>' );
+					expect( getViewData( editor.editing.view, { withoutSelection: true } ) )
+						.to.equal( '<p style="margin-left:42em">foo</p>' );
+				} );
 			} );
 			} );
 
 
-			it( 'should convert margin shortcut to indent attribute (four entries)', () => {
-				editor.setData( '<p style="margin:24em 40em 24em 42em">foo</p>' );
+			describe( 'right–to–left content', () => {
+				beforeEach( () => {
+					return createTestEditor( {
+						indentBlock: { offset: 50, unit: 'px' },
+						language: {
+							content: 'ar'
+						}
+					} ).then( newEditor => {
+						editor = newEditor;
+						model = editor.model;
+						doc = model.document;
+					} );
+				} );
 
 
-				const paragraph = doc.getRoot().getChild( 0 );
+				it( 'should convert margin-right to indent attribute (known offset)', () => {
+					editor.setData( '<p style="margin-right:50px">foo</p>' );
 
 
-				expect( paragraph.hasAttribute( 'blockIndent' ) ).to.be.true;
-				expect( paragraph.getAttribute( 'blockIndent' ) ).to.equal( '42em' );
+					const paragraph = doc.getRoot().getChild( 0 );
+
+					expect( paragraph.hasAttribute( 'blockIndent' ) ).to.be.true;
+					expect( paragraph.getAttribute( 'blockIndent' ) ).to.equal( '50px' );
+
+					expect( editor.getData() ).to.equal( '<p style="margin-right:50px;">foo</p>' );
+					expect( getViewData( editor.editing.view, { withoutSelection: true } ) )
+						.to.equal( '<p style="margin-right:50px">foo</p>' );
+				} );
 
 
-				expect( editor.getData() ).to.equal( '<p style="margin-left:42em;">foo</p>' );
-				expect( getViewData( editor.editing.view, { withoutSelection: true } ) )
-					.to.equal( '<p style="margin-left:42em">foo</p>' );
+				it( 'should convert margin-right to indent attribute (any offset)', () => {
+					editor.setData( '<p style="margin-right:42em">foo</p>' );
+
+					const paragraph = doc.getRoot().getChild( 0 );
+
+					expect( paragraph.hasAttribute( 'blockIndent' ) ).to.be.true;
+					expect( paragraph.getAttribute( 'blockIndent' ) ).to.equal( '42em' );
+
+					expect( editor.getData() ).to.equal( '<p style="margin-right:42em;">foo</p>' );
+					expect( getViewData( editor.editing.view, { withoutSelection: true } ) )
+						.to.equal( '<p style="margin-right:42em">foo</p>' );
+				} );
+
+				it( 'should convert margin shortcut to indent attribute (one entry)', () => {
+					editor.setData( '<p style="margin:42em">foo</p>' );
+
+					const paragraph = doc.getRoot().getChild( 0 );
+
+					expect( paragraph.hasAttribute( 'blockIndent' ) ).to.be.true;
+					expect( paragraph.getAttribute( 'blockIndent' ) ).to.equal( '42em' );
+
+					expect( editor.getData() ).to.equal( '<p style="margin-right:42em;">foo</p>' );
+					expect( getViewData( editor.editing.view, { withoutSelection: true } ) )
+						.to.equal( '<p style="margin-right:42em">foo</p>' );
+				} );
+
+				it( 'should convert margin shortcut to indent attribute (two entries)', () => {
+					editor.setData( '<p style="margin:24em 42em">foo</p>' );
+
+					const paragraph = doc.getRoot().getChild( 0 );
+
+					expect( paragraph.hasAttribute( 'blockIndent' ) ).to.be.true;
+					expect( paragraph.getAttribute( 'blockIndent' ) ).to.equal( '42em' );
+
+					expect( editor.getData() ).to.equal( '<p style="margin-right:42em;">foo</p>' );
+					expect( getViewData( editor.editing.view, { withoutSelection: true } ) )
+						.to.equal( '<p style="margin-right:42em">foo</p>' );
+				} );
+
+				it( 'should convert margin shortcut to indent attribute (three entries)', () => {
+					editor.setData( '<p style="margin:24em 42em 20em">foo</p>' );
+
+					const paragraph = doc.getRoot().getChild( 0 );
+
+					expect( paragraph.hasAttribute( 'blockIndent' ) ).to.be.true;
+					expect( paragraph.getAttribute( 'blockIndent' ) ).to.equal( '42em' );
+
+					expect( editor.getData() ).to.equal( '<p style="margin-right:42em;">foo</p>' );
+					expect( getViewData( editor.editing.view, { withoutSelection: true } ) )
+						.to.equal( '<p style="margin-right:42em">foo</p>' );
+				} );
+
+				it( 'should convert margin shortcut to indent attribute (four entries)', () => {
+					editor.setData( '<p style="margin:24em 40em 24em 42em">foo</p>' );
+
+					const paragraph = doc.getRoot().getChild( 0 );
+
+					expect( paragraph.hasAttribute( 'blockIndent' ) ).to.be.true;
+					expect( paragraph.getAttribute( 'blockIndent' ) ).to.equal( '40em' );
+
+					expect( editor.getData() ).to.equal( '<p style="margin-right:40em;">foo</p>' );
+					expect( getViewData( editor.editing.view, { withoutSelection: true } ) )
+						.to.equal( '<p style="margin-right:40em">foo</p>' );
+				} );
 			} );
 			} );
 
 
 			it( 'should not convert class to indent attribute', () => {
 			it( 'should not convert class to indent attribute', () => {
-				editor.setData( '<p class="indent-1">foo</p>' );
+				return createTestEditor( {
+					indentBlock: { offset: 50, unit: 'px' }
+				} ).then( newEditor => {
+					editor = newEditor;
+					model = editor.model;
+					doc = model.document;
 
 
-				const paragraph = doc.getRoot().getChild( 0 );
+					editor.setData( '<p class="indent-1">foo</p>' );
 
 
-				expect( paragraph.hasAttribute( 'blockIndent' ) ).to.be.false;
+					const paragraph = doc.getRoot().getChild( 0 );
 
 
-				const expectedView = '<p>foo</p>';
+					expect( paragraph.hasAttribute( 'blockIndent' ) ).to.be.false;
 
 
-				expect( editor.getData() ).to.equal( expectedView );
-				expect( getViewData( editor.editing.view, { withoutSelection: true } ) ).to.equal( expectedView );
+					const expectedView = '<p>foo</p>';
+
+					expect( editor.getData() ).to.equal( expectedView );
+					expect( getViewData( editor.editing.view, { withoutSelection: true } ) ).to.equal( expectedView );
+				} );
 			} );
 			} );
 		} );
 		} );
 
 

+ 63 - 2
packages/ckeditor5-indent/tests/indentui.js

@@ -12,6 +12,9 @@ import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import IndentEditing from '../src/indentediting';
 import IndentEditing from '../src/indentediting';
 import IndentUI from '../src/indentui';
 import IndentUI from '../src/indentui';
 
 
+import indentIcon from '../theme/icons/indent.svg';
+import outdentIcon from '../theme/icons/outdent.svg';
+
 describe( 'IndentUI', () => {
 describe( 'IndentUI', () => {
 	let editor, element;
 	let editor, element;
 
 
@@ -49,7 +52,6 @@ describe( 'IndentUI', () => {
 
 
 		expect( indentButton ).to.be.instanceOf( ButtonView );
 		expect( indentButton ).to.be.instanceOf( ButtonView );
 		expect( indentButton.label ).to.equal( 'Increase indent' );
 		expect( indentButton.label ).to.equal( 'Increase indent' );
-		expect( indentButton.icon ).to.match( /<svg / );
 	} );
 	} );
 
 
 	it( 'should set up button for outdent', () => {
 	it( 'should set up button for outdent', () => {
@@ -57,7 +59,66 @@ describe( 'IndentUI', () => {
 
 
 		expect( outdentButton ).to.be.instanceOf( ButtonView );
 		expect( outdentButton ).to.be.instanceOf( ButtonView );
 		expect( outdentButton.label ).to.equal( 'Decrease indent' );
 		expect( outdentButton.label ).to.equal( 'Decrease indent' );
-		expect( outdentButton.icon ).to.match( /<svg / );
+	} );
+
+	describe( 'icons', () => {
+		describe( 'left–to–right UI', () => {
+			it( 'should display the right icon for indent', () => {
+				const indentButton = editor.ui.componentFactory.create( 'indent' );
+
+				expect( indentButton.icon ).to.equal( indentIcon );
+			} );
+
+			it( 'should display the right icon for outdent', () => {
+				const outdentButton = editor.ui.componentFactory.create( 'outdent' );
+
+				expect( outdentButton.icon ).to.equal( outdentIcon );
+			} );
+		} );
+
+		describe( 'right–to–left UI', () => {
+			it( 'should display the right icon for indent', () => {
+				const element = document.createElement( 'div' );
+				document.body.appendChild( element );
+
+				return ClassicTestEditor
+					.create( element, {
+						plugins: [ IndentUI, IndentEditing ],
+						language: 'ar'
+					} )
+					.then( newEditor => {
+						const indentButton = newEditor.ui.componentFactory.create( 'indent' );
+
+						expect( indentButton.icon ).to.equal( outdentIcon );
+
+						return newEditor.destroy();
+					} )
+					.then( () => {
+						element.remove();
+					} );
+			} );
+
+			it( 'should display the right icon for outdent', () => {
+				const element = document.createElement( 'div' );
+				document.body.appendChild( element );
+
+				return ClassicTestEditor
+					.create( element, {
+						plugins: [ IndentUI, IndentEditing ],
+						language: 'ar'
+					} )
+					.then( newEditor => {
+						const outdentButton = newEditor.ui.componentFactory.create( 'outdent' );
+
+						expect( outdentButton.icon ).to.equal( indentIcon );
+
+						return newEditor.destroy();
+					} )
+					.then( () => {
+						element.remove();
+					} );
+			} );
+		} );
 	} );
 	} );
 
 
 	it( 'should execute indent command on button execute', () => {
 	it( 'should execute indent command on button execute', () => {

+ 23 - 0
packages/ckeditor5-indent/tests/manual/rtl.html

@@ -0,0 +1,23 @@
+<head>
+	<style>
+		body {
+			max-width: 800px;
+			margin: 20px auto;
+		}
+	</style>
+</head>
+<div id="editor">
+	<h2>Heading 1</h2>
+	<p style="margin-right:1.5em;">Paragraph indented 1.5em</p>
+	<p style="margin-right:30px;">Paragraph indented 30px</p>
+	<p style="margin:0 40px 0 0;">Paragraph indented with margin: 0 40px 0 0</p>
+	<p><strong>Bold</strong> <i>Italic</i> <a href="https://ckeditor.com">Link</a></p>
+	<blockquote>
+		<p>Quote</p>
+		<ul>
+			<li>Quoted UL List item 1</li>
+			<li>Quoted UL List item 2</li>
+		</ul>
+		<p>Quote</p>
+	</blockquote>
+</div>

+ 49 - 0
packages/ckeditor5-indent/tests/manual/rtl.js

@@ -0,0 +1,49 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals console, window, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+
+import Indent from '../../src/indent';
+import IndentBlock from '../../src/indentblock';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		language: 'ar',
+		plugins: [ ArticlePluginSet, Indent, IndentBlock ],
+		toolbar: [
+			'heading',
+			'|',
+			'outdent',
+			'indent',
+			'|',
+			'bulletedList',
+			'numberedList',
+			'|',
+			'blockQuote',
+			'insertTable',
+			'undo',
+			'redo'
+		],
+		image: {
+			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
+		},
+		table: {
+			contentToolbar: [
+				'tableColumn',
+				'tableRow',
+				'mergeTableCells'
+			]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 10 - 0
packages/ckeditor5-indent/tests/manual/rtl.md

@@ -0,0 +1,10 @@
+## Indent block with right–to–left content
+
+**Note**: For the best testing, run manual tests adding Arabic to [additional languages configuration](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/testing-environment.html#running-manual-tests).
+
+---
+
+### Expected
+
+1. All the content in the editor should be aligned to the right.
+1. The indentation should start on the right–side of each block.