Browse Source

Merge pull request #16 from ckeditor/t/ckeditor5/1151

Feature: Integrated the indent block feature with different editor content directions (LTR and RTL). See ckeditor/ckeditor5#1151.
Piotrek Koszuliński 6 years ago
parent
commit
09938f5874

+ 4 - 0
packages/ckeditor5-indent/docs/features/indent.md

@@ -93,6 +93,10 @@ In the demo below the CSS classes are defined as follows:
 }
 ```
 
+<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}
 
 ## Indenting lists

+ 27 - 17
packages/ckeditor5-indent/src/indentblock.js

@@ -96,16 +96,18 @@ export default class IndentBlock extends Plugin {
 	 */
 	_setupConversionUsingOffset() {
 		const conversion = this.editor.conversion;
+		const locale = this.editor.locale;
+		const marginProperty = locale.contentLanguageDirection === 'rtl' ? 'margin-right' : 'margin-left';
 
 		conversion.for( 'upcast' ).attributeToAttribute( {
 			view: {
 				styles: {
-					'margin-left': /[\s\S]+/
+					[ marginProperty ]: /[\s\S]+/
 				}
 			},
 			model: {
 				key: 'blockIndent',
-				value: viewElement => viewElement.getStyle( 'margin-left' )
+				value: viewElement => viewElement.getStyle( marginProperty )
 			}
 		} );
 
@@ -118,7 +120,7 @@ export default class IndentBlock extends Plugin {
 			},
 			model: {
 				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 {
 					key: 'style',
 					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:
-// - '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.
 	const marginEntries = marginStyleValue.split( ' ' );
 
-	let left;
+	let marginValue;
 
 	// If only one value defined, ie: `margin: 1px`.
-	left = marginEntries[ 0 ];
+	marginValue = marginEntries[ 0 ];
 
 	// If only two values defined, ie: `margin: 1px 2px`.
 	if ( marginEntries[ 1 ] ) {
-		left = marginEntries[ 1 ];
+		marginValue = marginEntries[ 1 ];
 	}
 
 	// If four values defined, ie: `margin: 1px 2px 3px 4px`.
 	if ( marginEntries[ 3 ] ) {
-		left = marginEntries[ 3 ];
+		if ( side === 'margin-left' ) {
+			marginValue = marginEntries[ 3 ];
+		} else {
+			marginValue = marginEntries[ 1 ];
+		}
 	}
 
-	return left;
+	return marginValue;
 }
 
 /**

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

@@ -35,10 +35,14 @@ export default class IndentUI extends Plugin {
 	 */
 	init() {
 		const editor = this.editor;
+		const locale = editor.locale;
 		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 );
 	}
 
 	/**

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

@@ -68,104 +68,208 @@ describe( 'IndentBlock', () => {
 
 	describe( 'conversion', () => {
 		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;
 						model = editor.model;
 						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', () => {
-				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 IndentUI from '../src/indentui';
 
+import indentIcon from '../theme/icons/indent.svg';
+import outdentIcon from '../theme/icons/outdent.svg';
+
 describe( 'IndentUI', () => {
 	let editor, element;
 
@@ -49,7 +52,6 @@ describe( 'IndentUI', () => {
 
 		expect( indentButton ).to.be.instanceOf( ButtonView );
 		expect( indentButton.label ).to.equal( 'Increase indent' );
-		expect( indentButton.icon ).to.match( /<svg / );
 	} );
 
 	it( 'should set up button for outdent', () => {
@@ -57,7 +59,66 @@ describe( 'IndentUI', () => {
 
 		expect( outdentButton ).to.be.instanceOf( ButtonView );
 		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', () => {

+ 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.