diff --git a/lang/contexts.json b/lang/contexts.json index 958920a..f969773 100644 --- a/lang/contexts.json +++ b/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." } diff --git a/src/headingbuttonsui.js b/src/headingbuttonsui.js index 890c868..57a871f 100644 --- a/src/headingbuttonsui.js +++ b/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 }; /** diff --git a/src/utils.js b/src/utils.js index 2c23183..d403523 100644 --- a/src/utils.js +++ b/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 => { diff --git a/tests/headingbuttonsui.js b/tests/headingbuttonsui.js index 4560bae..0a94218 100644 --- a/tests/headingbuttonsui.js +++ b/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', () => { diff --git a/tests/manual/heading-buttons.js b/tests/manual/heading-buttons.js index 270497a..23aa2ff 100644 --- a/tests/manual/heading-buttons.js +++ b/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;