8
0
Piotrek Koszuliński 7 лет назад
Родитель
Сommit
77521a0ce7

+ 3 - 2
packages/ckeditor5-ui/docs/_snippets/examples/bootstrap-ui-inner.js

@@ -230,8 +230,9 @@ class BootstrapEditorUI {
 			// Create the menu item DOM element.
 			const menuItem = $(
 				`<a href="#" class="dropdown-item heading-item_${ option.model }">` +
-				`${ option.title }` +
-				'</a>' );
+					`${ option.title }` +
+				'</a>'
+			);
 
 			// Upon click, the dropdown menu item should execute the command and focus
 			// the editing view to keep the editing process uninterrupted.

+ 29 - 7
packages/ckeditor5-ui/docs/framework/guides/external-ui.md

@@ -294,7 +294,7 @@ class BootstrapEditorUI {
 		// document root created in the constructor().
 		const editingRoot = editor.editing.view.document.getRoot();
 
-		// Bind the basic observable properties of the editable in DOM with the editing layer.
+		// Bind the basic attributes of the editable in DOM with the editing layer.
 		view.editable.bind( 'isReadOnly' ).to( editingRoot );
 		view.editable.bind( 'isFocused' ).to( editor.editing.view.document );
 		view.editable.name = editingRoot.rootName;
@@ -403,37 +403,59 @@ _setupBootstrapHeadingDropdown() {
 	const dropdownMenu = this.view.dropdownMenu;
 	const dropdownToggle = this.view.dropdownToggle;
 
+	// Retrieve the editor commands for heading and paragraph.
+	const headingCommand = editor.commands.get( 'heading' );
+	const paragraphCommand = editor.commands.get( 'paragraph' );
+
 	// Create a dropdown menu entry for each heading configuration option.
 	editor.config.get( 'heading.options' ).map( option => {
-		// Retrieve the editor command corresponding with the configuration option.
-		const command = editor.commands.get( option.model );
+		// Check is options is paragraph or heading as their commands slightly differ.
+		const isParagraph = option.model === 'paragraph';
 
 		// Create the menu item DOM element.
 		const menuItem = $(
 			`<a href="#" class="dropdown-item heading-item_${ option.model }">` +
 				`${ option.title }` +
-			'</a>' );
+			'</a>'
+		);
 
-		// Upon click, the dropdown menua item should execute the command and focus
+		// Upon click, the dropdown menu item should execute the command and focus
 		// the editing view to keep the editing process uninterrupted.
 		menuItem.click( () => {
-			editor.execute( option.model );
+			const commandName = isParagraph ? 'paragraph' : 'heading';
+			const commandValue = isParagraph ? undefined : { value: option.model };
+
+			editor.execute( commandName, commandValue );
 			editor.editing.view.focus();
 		} );
 
 		dropdownMenu.append( menuItem );
 
+		const command = isParagraph ? paragraphCommand : headingCommand;
+
 		// Make sure the dropdown and its items reflect the state of the
 		// currently active command.
+		const onValueChange = isParagraph ? onValueChangeParagraph : onValueChangeHeading;
 		command.on( 'change:value', onValueChange );
 		onValueChange();
 
 		// Heading commands can become disabled, e.g. when the editor is read-only.
 		// Make sure the UI reflects this state change.
 		command.on( 'change:isEnabled', onIsEnabledChange );
+
 		onIsEnabledChange();
 
-		function onValueChange() {
+		function onValueChangeHeading() {
+			const isActive = !isParagraph && command.value === option.model;
+
+			if ( isActive ) {
+				dropdownToggle.children( ':first' ).text( option.title );
+			}
+
+			menuItem.toggleClass( 'active', isActive );
+		}
+
+		function onValueChangeParagraph() {
 			if ( command.value ) {
 				dropdownToggle.children( ':first' ).text( option.title );
 			}