8
0
Просмотр исходного кода

Other: Fix highlight dropdown UI.

Maciej Gołaszewski 8 лет назад
Родитель
Сommit
412b2eb13b

+ 16 - 28
packages/ckeditor5-highlight/src/highlightui.js

@@ -135,69 +135,56 @@ export default class HighlightUI extends Plugin {
 	/**
 	 * Creates split button drop down UI from provided highlight options.
 	 *
-	 * @param {Array.<module:highlight/highlightediting~HighlightOption>} highlighters
+	 * @param {Array.<module:highlight/highlightediting~HighlightOption>} options
 	 * @private
 	 */
-	_addDropdown( highlighters ) {
-		if ( true ) {
-			return;
-		}
-
+	_addDropdown( options ) {
 		const editor = this.editor;
 		const t = editor.t;
 		const componentFactory = editor.ui.componentFactory;
 
-		const startingHighlighter = highlighters[ 0 ];
+		const startingHighlighter = options[ 0 ];
 
 		componentFactory.add( 'highlightDropdown', locale => {
-			const commandName = startingHighlighter.name;
-
 			const model = new Model( {
 				label: t( 'Highlight' ),
 				withText: false,
+				isVertical: false,
 				icon: markerIcon,
 				type: startingHighlighter.type,
 				color: startingHighlighter.color,
-				command: commandName
+				commandValue: startingHighlighter.model
 			} );
 
-			bindModelToCommand( model, editor, commandName );
+			bindModelToCommand( model, editor, 'highlight' );
 
 			const dropdownView = createSplitButtonDropdown( model, locale );
 
 			bindIconStyle( dropdownView, model );
 
 			dropdownView.buttonView.on( 'execute', () => {
-				editor.execute( model.command );
+				editor.execute( 'highlight', { value: model.commandValue } );
 				editor.editing.view.focus();
 			} );
 
 			// Add highlighters buttons to dropdown
-			const buttons = highlighters.map( highlighter => {
-				const buttonView = componentFactory.create( highlighter.name );
-				const commandName = highlighter.name;
+			const buttons = options.map( option => {
+				const buttonView = componentFactory.create( 'highlight:' + option.model );
 
 				this.listenTo( buttonView, 'execute', () => changeToolbarButton( editor, model, {
-					type: highlighter.type,
-					color: highlighter.color,
-					command: commandName,
+					type: option.type,
+					color: option.color,
+					command: 'highlight',
+					commandValue: option.model,
 					icon: markerIcon
 				} ) );
 
 				return buttonView;
 			} );
-
 			// Add rubber button to dropdown.
 			const rubberButton = componentFactory.create( 'removeHighlight' );
 			buttons.push( rubberButton );
 
-			this.listenTo( rubberButton, 'execute', () => changeToolbarButton( editor, model, {
-				type: 'remove',
-				color: undefined,
-				command: 'removeHighlight',
-				icon: rubberIcon
-			} ) );
-
 			// Make toolbar button enabled when any button in dropdown is enabled.
 			model.bind( 'isEnabled' ).to(
 				// Bind to #isEnabled of each command...
@@ -218,10 +205,9 @@ export default class HighlightUI extends Plugin {
 
 			dropdownView.extendTemplate( {
 				attributes: {
-					class: [ 'ck-buttondropdown' ]
+					class: [ 'ck-highlight_button', 'ck-buttondropdown' ]
 				}
 			} );
-
 			dropdownView.panelView.children.add( toolbarView );
 
 			closeDropdownOnBlur( dropdownView );
@@ -234,6 +220,8 @@ export default class HighlightUI extends Plugin {
 					// buttonGroupView.focus();
 				}
 			}, { priority: 'low' } );
+
+			return dropdownView;
 		} );
 	}
 }

+ 7 - 6
packages/ckeditor5-highlight/tests/manual/highlight.js

@@ -14,12 +14,13 @@ ClassicEditor
 		plugins: [ ArticlePluginSet, Highlight ],
 		toolbar: [
 			'headings',
-			'highlight:marker',
-			'highlight:greenMarker',
-			'highlight:pinkMarker',
-			'highlight:bluePen',
-			'highlight:redPen',
-			'removeHighlight',
+			'highlightDropdown',
+			// 'highlight:marker',
+			// 'highlight:greenMarker',
+			// 'highlight:pinkMarker',
+			// 'highlight:bluePen',
+			// 'highlight:redPen',
+			// 'removeHighlight',
 			'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
 		]
 	} )