Updated heading after the removal of Controller class.

src/heading.js

@@ -8,8 +8,7 @@ import HeadingEngine from './headingengine.js';
 import Feature from '../core/feature.js';
 
 import Model from '../ui/model.js';
-import ListDropdownController from '../ui/dropdown/list/listdropdown.js';
-import ListDropdownView from '../ui/dropdown/list/listdropdownview.js';
+import createListDropdown from '../ui/dropdown/list/createlistdropdown.js';
 
 import Collection from '../utils/collection.js';
 
@@ -40,7 +39,7 @@ export default class Heading extends Feature {
 		// Add formats to collection.
 		for ( let format of formats ) {
 			collection.add( new Model( {
-				id: format.id,
+				formatId: format.id,
 				label: format.label
 			} ) );
 		}
@@ -51,24 +50,24 @@ export default class Heading extends Feature {
 			isOn: false,
 			label: 'Heading',
 			withText: true,
-
-			// Create item list model.
-			content: new Model( {
-				items: collection
-			} )
+			items: collection
 		} );
 
 		// Bind dropdown model to command.
 		dropdownModel.bind( 'isEnabled' ).to( command, 'isEnabled' );
 		dropdownModel.bind( 'label' ).to( command, 'value', format => format.label );
 
-		// Execute command when an item from the dropdown is selected.
-		this.listenTo( dropdownModel, 'execute', ( evt ) => {
-			editor.execute( 'heading', { formatId: evt.source.id } );
-			editor.editing.view.focus();
-		} );
-
 		// Register UI component.
-		editor.ui.featureComponents.add( 'headings', ListDropdownController, ListDropdownView, dropdownModel );
+		editor.ui.featureComponents.add( 'headings', ( locale ) => {
+			const dropdown = createListDropdown( dropdownModel, locale );
+
+			// Execute command when an item from the dropdown is selected.
+			this.listenTo( dropdown, 'execute', ( { source: { formatId } } ) => {
+				editor.execute( 'heading', { formatId } );
+				editor.editing.view.focus();
+			} );
+
+			return dropdown;
+		} );
 	}
 }

tests/heading.js

@@ -8,13 +8,13 @@
 import ClassicTestEditor from '/tests/core/_utils/classictesteditor.js';
 import Heading from '/ckeditor5/heading/heading.js';
 import HeadingEngine from '/ckeditor5/heading/headingengine.js';
-import ListDropdown from '/ckeditor5/ui/dropdown/list/listdropdown.js';
+import DropdownView from '/ckeditor5/ui/dropdown/dropdownview.js';
 import testUtils from '/tests/core/_utils/utils.js';
 
 testUtils.createSinonSandbox();
 
 describe( 'Heading', () => {
-	let editor, controller;
+	let editor, dropdown;
 
 	beforeEach( () => {
 		const editorElement = document.createElement( 'div' );
@@ -26,7 +26,7 @@ describe( 'Heading', () => {
 		} )
 		.then( newEditor => {
 			editor = newEditor;
-			controller = editor.ui.featureComponents.create( 'headings' );
+			dropdown = editor.ui.featureComponents.create( 'headings' );
 		} );
 	} );
 
@@ -43,51 +43,48 @@ describe( 'Heading', () => {
 	} );
 
 	it( 'should register formats feature component', () => {
-		const controller = editor.ui.featureComponents.create( 'headings' );
+		const dropdown = editor.ui.featureComponents.create( 'headings' );
 
-		expect( controller ).to.be.instanceOf( ListDropdown );
+		expect( dropdown ).to.be.instanceOf( DropdownView );
 	} );
 
 	it( 'should execute format command on model execute event', () => {
 		const executeSpy = testUtils.sinon.spy( editor, 'execute' );
-		const controller = editor.ui.featureComponents.create( 'headings' );
-		const model = controller.model;
+		const dropdown = editor.ui.featureComponents.create( 'headings' );
 
-		model.id = 'foo';
-		model.fire( 'execute' );
+		dropdown.formatId = 'foo';
+		dropdown.fire( 'execute' );
 
 		sinon.assert.calledOnce( executeSpy );
 		sinon.assert.calledWithExactly( executeSpy, 'heading', { formatId: 'foo' } );
 	} );
 
 	it( 'should focus view after command execution', () => {
 		const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' );
-		const controller = editor.ui.featureComponents.create( 'headings' );
-		const model = controller.model;
+		const dropdown = editor.ui.featureComponents.create( 'headings' );
 
-		model.fire( 'execute' );
+		dropdown.fire( 'execute' );
 
 		sinon.assert.calledOnce( focusSpy );
 	} );
 
 	describe( 'model to command binding', () => {
-		let model, command;
+		let command;
 
 		beforeEach( () => {
-			model = controller.model;
 			command = editor.commands.get( 'heading' );
 		} );
 
 		it( 'isEnabled', () => {
-			expect( model.isEnabled ).to.be.true;
+			expect( dropdown.buttonView.isEnabled ).to.be.true;
 			command.isEnabled = false;
-			expect( model.isEnabled ).to.be.false;
+			expect( dropdown.buttonView.isEnabled ).to.be.false;
 		} );
 
 		it( 'label', () => {
-			expect( model.label ).to.equal( 'Paragraph' );
+			expect( dropdown.buttonView.label ).to.equal( 'Paragraph' );
 			command.value = command.formats[ 1 ];
-			expect( model.label ).to.equal( 'Heading 1' );
+			expect( dropdown.buttonView.label ).to.equal( 'Heading 1' );
 		} );
 	} );
 } );