Merge pull request #59 from ckeditor/t/38

Feature: Styled items in the headings toolbar dropdown. Closes #38.

src/heading.js

@@ -14,6 +14,8 @@ import Model from '@ckeditor/ckeditor5-ui/src/model';
 import createListDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/list/createlistdropdown';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 
+import '../theme/theme.scss';
+
 /**
  * The headings feature. It introduces the `headings` drop-down list and the `heading` command which allow
  * to convert paragraphs into headings.
@@ -42,7 +44,8 @@ export default class Heading extends Plugin {
 			// Add the option to the collection.
 			dropdownItems.add( new Model( {
 				commandName: option.modelElement,
-				label: option.title
+				label: option.title,
+				class: option.class
 			} ) );
 
 			commands.push( editor.commands.get( option.modelElement ) );

src/headingengine.js

@@ -30,12 +30,13 @@ export default class HeadingEngine extends Plugin {
 
 		// TODO: This needs proper documentation, i.e. why paragraph entry does not need
 		// more properties (https://github.com/ckeditor/ckeditor5/issues/403).
+		// TODO: Document CSS classes as well.
 		editor.config.define( 'heading', {
 			options: [
-				{ modelElement: 'paragraph', title: 'Paragraph' },
-				{ modelElement: 'heading1', viewElement: 'h2', title: 'Heading 1' },
-				{ modelElement: 'heading2', viewElement: 'h3', title: 'Heading 2' },
-				{ modelElement: 'heading3', viewElement: 'h4', title: 'Heading 3' }
+				{ modelElement: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+				{ modelElement: 'heading1', viewElement: 'h2', title: 'Heading 1', class: 'ck-heading_heading1' },
+				{ modelElement: 'heading2', viewElement: 'h3', title: 'Heading 2', class: 'ck-heading_heading2' },
+				{ modelElement: 'heading3', viewElement: 'h4', title: 'Heading 3', class: 'ck-heading_heading3' }
 			]
 		} );
 	}

tests/heading.js

@@ -198,5 +198,18 @@ describe( 'Heading', () => {
 				} );
 			}
 		} );
+
+		describe( 'class', () => {
+			it( 'is set for the listView#items in the panel', () => {
+				const listView = dropdown.listView;
+
+				expect( listView.items.map( item => item.class ) ).to.deep.equal( [
+					'ck-heading_paragraph',
+					'ck-heading_heading1',
+					'ck-heading_heading2',
+					'ck-heading_heading3'
+				] );
+			} );
+		} );
 	} );
 } );

tests/headingengine.js

@@ -105,10 +105,10 @@ describe( 'HeadingEngine', () => {
 			describe( 'default value', () => {
 				it( 'should be set', () => {
 					expect( editor.config.get( 'heading.options' ) ).to.deep.equal( [
-						{ modelElement: 'paragraph', title: 'Paragraph' },
-						{ modelElement: 'heading1', viewElement: 'h2', title: 'Heading 1' },
-						{ modelElement: 'heading2', viewElement: 'h3', title: 'Heading 2' },
-						{ modelElement: 'heading3', viewElement: 'h4', title: 'Heading 3' }
+						{ modelElement: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+						{ modelElement: 'heading1', viewElement: 'h2', title: 'Heading 1', class: 'ck-heading_heading1' },
+						{ modelElement: 'heading2', viewElement: 'h3', title: 'Heading 2', class: 'ck-heading_heading2' },
+						{ modelElement: 'heading3', viewElement: 'h4', title: 'Heading 3', class: 'ck-heading_heading3' }
 					] );
 				} );
 			} );

theme/theme.scss

@@ -0,0 +1,20 @@
+// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+.ck-heading_heading {
+	&1 {
+		font-size: 1.5em;
+	}
+
+	&2 {
+		font-size: 1.3em;
+	}
+
+	&3 {
+		font-size: 1.1em;
+	}
+}
+
+[class*="ck-heading_heading"] {
+	font-weight: bold;
+}