Merge pull request ckeditor#9411 from ckeditor/i/9193

Feature (alignment): Added support for the deprecated `align` attribute. Closes ckeditor#9193.

packages/ckeditor5-alignment/docs/features/text-alignment.md

@@ -139,6 +139,12 @@ The {@link module:alignment/alignment~Alignment} plugin registers:
 	We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector CKEditor 5 inspector} for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.
 </info-box>
 
+## Content compatibility
+
+The {@link module:alignment/alignment~Alignment} plugin provides support for the deprecated `align` attribute.
+
+Block elements such as `<p>` with the `align` attribute are accepted by the plugin, but the editor always returns the markup in a modern format, so the transformation is one way only.
+
 ## Contribute
 
 The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-alignment.

packages/ckeditor5-alignment/src/alignmentediting.js

@@ -72,6 +72,13 @@ export default class AlignmentEditing extends Plugin {
 			editor.conversion.for( 'upcast' ).attributeToAttribute( definition );
 		}
 
+		const upcastCompatibilityDefinitions = buildUpcastCompatibilityDefinitions( optionsToConvert );
+
+		// Always upcast from deprecated `align` attribute.
+		for ( const definition of upcastCompatibilityDefinitions ) {
+			editor.conversion.for( 'upcast' ).attributeToAttribute( definition );
+		}
+
 		editor.commands.add( 'alignment', new AlignmentCommand( editor ) );
 	}
 }
@@ -122,6 +129,27 @@ function buildUpcastInlineDefinitions( options ) {
 	return definitions;
 }
 
+// Prepare upcast definitions for deprecated `align` attribute.
+// @private
+function buildUpcastCompatibilityDefinitions( options ) {
+	const definitions = [];
+
+	for ( const { name } of options ) {
+		definitions.push( {
+			view: {
+				key: 'align',
+				value: name
+			},
+			model: {
+				key: 'alignment',
+				value: name
+			}
+		} );
+	}
+
+	return definitions;
+}
+
 // Prepare conversion definitions for upcast and downcast alignment with classes.
 // @private
 function buildClassDefinition( options ) {

packages/ckeditor5-alignment/tests/alignmentediting.js

@@ -556,6 +556,78 @@ describe( 'AlignmentEditing', () => {
 		} );
 	} );
 
+	describe( 'deprecated `align` attribute', () => {
+		it( 'should support allowed `align` values in LTR content', () => {
+			const data = '<p align="left">A</p>' +
+				'<p align="center">B</p>' +
+				'<p align="right">C</p>' +
+				'<p align="justify">D</p>';
+
+			editor.setData( data );
+
+			const expectedModelData = '<paragraph>[]A</paragraph>' +
+				'<paragraph alignment="center">B</paragraph>' +
+				'<paragraph alignment="right">C</paragraph>' +
+				'<paragraph alignment="justify">D</paragraph>';
+
+			const expectedData = '<p>A</p>' +
+				'<p style="text-align:center;">B</p>' +
+				'<p style="text-align:right;">C</p>' +
+				'<p style="text-align:justify;">D</p>';
+
+			expect( getModelData( model ) ).to.equal( expectedModelData );
+			expect( editor.getData() ).to.equal( expectedData );
+		} );
+
+		it( 'should support allowed `align` values in RTL content', async () => {
+			const newEditor = await VirtualTestEditor
+				.create( {
+					language: {
+						content: 'ar'
+					},
+					plugins: [ AlignmentEditing, Paragraph ]
+				} );
+			const model = newEditor.model;
+			const data = '<p align="left">A</p>' +
+				'<p align="center">B</p>' +
+				'<p align="right">C</p>' +
+				'<p align="justify">D</p>';
+
+			newEditor.setData( data );
+
+			const expectedModelData = '<paragraph alignment="left">[]A</paragraph>' +
+				'<paragraph alignment="center">B</paragraph>' +
+				'<paragraph>C</paragraph>' +
+				'<paragraph alignment="justify">D</paragraph>';
+
+			const expectedData = '<p style="text-align:left;">A</p>' +
+				'<p style="text-align:center;">B</p>' +
+				'<p>C</p>' +
+				'<p style="text-align:justify;">D</p>';
+
+			expect( getModelData( model ) ).to.equal( expectedModelData );
+			expect( newEditor.getData() ).to.equal( expectedData );
+
+			return newEditor.destroy();
+		} );
+
+		it( 'should ignore invalid values', () => {
+			const data = '<p align="">A</p>' +
+				'<p align="not-valid">B</p>';
+
+			editor.setData( data );
+
+			const expectedModelData = '<paragraph>[]A</paragraph>' +
+				'<paragraph>B</paragraph>';
+
+			const expectedData = '<p>A</p>' +
+				'<p>B</p>';
+
+			expect( getModelData( model ) ).to.equal( expectedModelData );
+			expect( editor.getData() ).to.equal( expectedData );
+		} );
+	} );
+
 	describe( 'should be extensible', () => {
 		it( 'converters in the data pipeline', () => {
 			blockDefaultConversion( editor.data.downcastDispatcher );