Merge pull request #124 from ckeditor/t/121

Feature: Provided translations and enabled the default icons to make `heading4`, `heading5`, and `heading6` button components usable (as provided by `HeadingButtonUI`). Closes #121.

Author: jodator

lang/contexts.json

@@ -4,5 +4,8 @@
 	"Choose heading": "Default label for the heading dropdown.",
 	"Heading 1": "Dropdown option label for the heading level 1 format.",
 	"Heading 2": "Dropdown option label for the heading level 2 format.",
-	"Heading 3": "Dropdown option label for the heading level 3 format."
+	"Heading 3": "Dropdown option label for the heading level 3 format.",
+	"Heading 4": "Dropdown option label for the heading level 4 format.",
+	"Heading 5": "Dropdown option label for the heading level 5 format.",
+	"Heading 6": "Dropdown option label for the heading level 6 format."
 }

src/headingbuttonsui.js

@@ -14,11 +14,17 @@ import { getLocalizedOptions } from './utils';
 import iconHeading1 from '../theme/icons/heading1.svg';
 import iconHeading2 from '../theme/icons/heading2.svg';
 import iconHeading3 from '../theme/icons/heading3.svg';
+import iconHeading4 from '../theme/icons/heading4.svg';
+import iconHeading5 from '../theme/icons/heading5.svg';
+import iconHeading6 from '../theme/icons/heading6.svg';
 
 const defaultIcons = {
 	heading1: iconHeading1,
 	heading2: iconHeading2,
-	heading3: iconHeading3
+	heading3: iconHeading3,
+	heading4: iconHeading4,
+	heading5: iconHeading5,
+	heading6: iconHeading6
 };
 
 /**

src/utils.js

@@ -15,7 +15,10 @@ export function getLocalizedOptions( editor ) {
 		Paragraph: t( 'Paragraph' ),
 		'Heading 1': t( 'Heading 1' ),
 		'Heading 2': t( 'Heading 2' ),
-		'Heading 3': t( 'Heading 3' )
+		'Heading 3': t( 'Heading 3' ),
+		'Heading 4': t( 'Heading 4' ),
+		'Heading 5': t( 'Heading 5' ),
+		'Heading 6': t( 'Heading 6' )
 	};
 
 	return editor.config.get( 'heading.options' ).map( option => {

tests/headingbuttonsui.js

@@ -24,7 +24,18 @@ describe( 'HeadingButtonUI', () => {
 			return ClassicTestEditor
 				.create( editorElement, {
 					plugins: [ HeadingButtonsUI, HeadingEditing ],
-					toolbar: [ 'heading1', 'heading2', 'heading3' ]
+					toolbar: [ 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6' ],
+					heading: {
+						options: [
+							{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+							{ model: 'heading1', view: 'h2', title: 'Heading 1', class: 'ck-heading_heading1' },
+							{ model: 'heading2', view: 'h3', title: 'Heading 2', class: 'ck-heading_heading2' },
+							{ model: 'heading3', view: 'h4', title: 'Heading 3', class: 'ck-heading_heading3' },
+							{ model: 'heading4', view: 'h5', title: 'Heading 4', class: 'ck-heading_heading4' },
+							{ model: 'heading5', view: 'h6', title: 'Heading 5', class: 'ck-heading_heading5' },
+							{ model: 'heading6', view: 'p', title: 'Heading 6', class: 'ck-heading_heading6' }
+						]
+					}
 				} )
 				.then( newEditor => {
 					editor = newEditor;
@@ -46,6 +57,9 @@ describe( 'HeadingButtonUI', () => {
 			expect( factory.create( 'heading1' ) ).to.be.instanceOf( ButtonView );
 			expect( factory.create( 'heading2' ) ).to.be.instanceOf( ButtonView );
 			expect( factory.create( 'heading3' ) ).to.be.instanceOf( ButtonView );
+			expect( factory.create( 'heading4' ) ).to.be.instanceOf( ButtonView );
+			expect( factory.create( 'heading5' ) ).to.be.instanceOf( ButtonView );
+			expect( factory.create( 'heading6' ) ).to.be.instanceOf( ButtonView );
 		} );
 
 		it( 'should initialize buttons with correct localized data', () => {

tests/manual/heading-buttons.js

@@ -17,7 +17,18 @@ import Undo from '@ckeditor/ckeditor5-undo/src/undo';
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 		plugins: [ Enter, Typing, Undo, Heading, Paragraph, HeadingButtonsUI, ParagraphButtonUI ],
-		toolbar: [ 'paragraph', 'heading1', 'heading2', 'heading3', '|', 'undo', 'redo' ]
+		toolbar: [ 'paragraph', 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6', '|', 'undo', 'redo' ],
+		heading: {
+			options: [
+				{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+				{ model: 'heading1', view: 'h2', title: 'Heading 1', class: 'ck-heading_heading1' },
+				{ model: 'heading2', view: 'h3', title: 'Heading 2', class: 'ck-heading_heading2' },
+				{ model: 'heading3', view: 'h4', title: 'Heading 3', class: 'ck-heading_heading3' },
+				{ model: 'heading4', view: 'h5', title: 'Heading 4', class: 'ck-heading_heading4' },
+				{ model: 'heading5', view: 'h6', title: 'Heading 5', class: 'ck-heading_heading5' },
+				{ model: 'heading6', view: 'p', title: 'Heading 6', class: 'ck-heading_heading6' }
+			]
+		}
 	} )
 	.then( editor => {
 		window.editor = editor;