Merge pull request #8459 from antoniolucasnobar/i/8177

Fix (indent): The block indent feature will now work with custom headings. Closes #8177.
ckeditor · Nov 19, 2020 · 23c64f5 · 23c64f5
2 parents 4f9ab32 + 3198279
commit 23c64f5
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 2 deletions.
diff --git a/packages/ckeditor5-indent/src/indentblock.js b/packages/ckeditor5-indent/src/indentblock.js
@@ -14,6 +14,8 @@ import IndentUsingOffset from './indentcommandbehavior/indentusingoffset';
 import IndentUsingClasses from './indentcommandbehavior/indentusingclasses';
 import { addMarginRules } from '@ckeditor/ckeditor5-engine/src/view/styles/margin';
 
+const DEFAULT_ELEMENTS = [ 'paragraph', 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6' ];
+
 /**
  * The block indentation feature.
  *
@@ -79,8 +81,10 @@ export default class IndentBlock extends Plugin {
 		const indentCommand = editor.commands.get( 'indent' );
 		const outdentCommand = editor.commands.get( 'outdent' );
 
-		// Enable block indentation by default in paragraph and default headings.
-		const knownElements = [ 'paragraph', 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6' ];
+		// Enable block indentation to heading configuration options. If it is not defined enable in paragraph and default headings.
+		const options = editor.config.get( 'heading.options' );
+		const configuredElements = options && options.map( option => option.model );
+		const knownElements = configuredElements || DEFAULT_ELEMENTS;
 
 		knownElements.forEach( elementName => {
 			if ( schema.isRegistered( elementName ) ) {

diff --git a/packages/ckeditor5-indent/tests/indentblock-integration.js b/packages/ckeditor5-indent/tests/indentblock-integration.js
@@ -71,6 +71,49 @@ describe( 'IndentBlock - integration', () => {
 		} );
 	} );
 
+	// https://github.com/ckeditor/ckeditor5/issues/8177
+	describe( 'with custom heading', () => {
+		beforeEach( () => {
+			return createTestEditor( {
+				plugins: [ Paragraph, HeadingEditing, IndentEditing, IndentBlock ],
+				indentBlock: { offset: 50, unit: 'px' },
+				heading: {
+					options: [
+						{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+						{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
+						{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
+						{
+							model: 'headingFancy',
+							view: {
+								name: 'h2',
+								classes: 'fancy'
+							},
+							title: 'Heading 2 (fancy)',
+							class: 'ck-heading_heading2_fancy',
+							converterPriority: 'high'
+						}
+					]
+				}
+			} ).then( newEditor => {
+				editor = newEditor;
+				doc = editor.model.document;
+			} );
+		} );
+
+		it( 'should work with custom (user defined) headings', () => {
+			editor.setData( '<h2 class="fancy" style="margin-left:150px">foo</h2>' );
+
+			const customHeading = doc.getRoot().getChild( 0 );
+
+			expect( customHeading.hasAttribute( 'blockIndent' ) ).to.be.true;
+			expect( customHeading.getAttribute( 'blockIndent' ) ).to.equal( '150px' );
+
+			expect( editor.getData() ).to.equal( '<h2 class="fancy" style="margin-left:150px;">foo</h2>' );
+			expect( getViewData( editor.editing.view, { withoutSelection: true } ) )
+				.to.equal( '<h2 class="fancy" style="margin-left:150px">foo</h2>' );
+		} );
+	} );
+
 	// https://github.com/ckeditor/ckeditor5/issues/2359
 	it( 'should work with paragraphs regardless of plugin order', () => {
 		return createTestEditor( {

diff --git a/packages/ckeditor5-indent/tests/manual/indent-block.html b/packages/ckeditor5-indent/tests/manual/indent-block.html
@@ -4,13 +4,22 @@
 			max-width: 800px;
 			margin: 20px auto;
 		}
+
+		/* Styles for the heading in the content and for the dropdown item. */
+		h2.fancy, .ck.ck-button.ck-heading_heading2_fancy {
+			color: hsl(341, 100%, 50%);
+			font-size: 17px;
+		}
 	</style>
 </head>
 <div id="editor">
 	<h2>Heading 1</h2>
 	<p style="margin-left:1.5em;">Paragraph indented 1.5em</p>
 	<p style="margin-left:30px;">Paragraph indented 30px</p>
 	<p style="margin:0 0 0 40px;">Paragraph indented with margin: 0 0 0 40px</p>
+	<h2>Heading 2</h2>
+	<h2 class="fancy" style="margin-left:20px">Custom fancy heading 2 with indent</h2>
+	<h3>Heading 3</h3>
 	<p><strong>Bold</strong> <i>Italic</i> <a href="https://ckeditor.com">Link</a></p>
 	<ul>
 		<li>UL List item 1</li>

diff --git a/packages/ckeditor5-indent/tests/manual/indent-block.js b/packages/ckeditor5-indent/tests/manual/indent-block.js
@@ -32,6 +32,24 @@ ClassicEditor
 		image: {
 			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
 		},
+		heading: {
+			options: [
+				{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+				{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
+				{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
+				{
+					model: 'headingFancy',
+					view: {
+						name: 'h2',
+						classes: 'fancy'
+					},
+					title: 'Heading 2 (fancy)',
+					class: 'ck-heading_heading2_fancy',
+					converterPriority: 'high'
+				},
+				{ model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' }
+			]
+		},
 		table: {
 			contentToolbar: [
 				'tableColumn',