Allow a more flexible toolbar configuration in the dropdown

[oleq]

A follow-up of ckeditor/ckeditor5-highlight#6 (comment). Quoting myself:

Since the highlight feature dropdown uses a basic ToolbarView, I wonder if we could simply make the highlight configuration compatible with the toolbar config. I mean here a support for toolbar separators (|), that developers may want to use to group the buttons if only to separate pens from markers. WDYT?

A mixed-up approach

ClassicEditor
	.create( document.querySelector( '#snippet-custom-highlight-options' ), {
		toolbar: {
			items: [
				'headings', '|', 'highlightDropdown', 'bulletedList', 'numberedList', 'undo', 'redo'
			],
			viewportTopOffset: 60
		},
		highlight: {
			options: [
				{ model: 'greenMarker', class: 'marker-green', ... },
				{ model: 'bluePen', class: 'pen-blue', ... },
				'|',
				{ model: 'fooPen', class: 'pen-foo', ... }
				'|',
				'removeHighlight'
			]
		}
	} )
	.then( editor => {
		window.editor = editor;
	} )
	.catch( err => {
		console.error( err.stack );
	} );

A separate property approach

It makes more sense to me because it doesn't mix up the content logic and the UI.

In such situation, the order in options doesn't matter. We also provide a default toolbar layout, when no specified (and the default is toolbar: [ all options, '|', 'removeHighlight' ])

ClassicEditor
	.create( document.querySelector( '#snippet-custom-highlight-options' ), {
		toolbar: {
			items: [
				'headings', '|', 'highlightDropdown', 'bulletedList', 'numberedList', 'undo', 'redo'
			],
			viewportTopOffset: 60
		},
		highlight: {
			options: [
				{ model: 'greenMarker', class: 'marker-green', ... },
				{ model: 'bluePen', class: 'pen-blue', ... },
				{ model: 'fooPen', class: 'pen-foo', ... }
			],
			toolbar: [ 
				'highlight:greenMarker', 
				'highlight:bluePen', 
				'|', 
				'highlight:fooPen', 
				'|', 
				'removeHighlight' 
			]
		}
	} )
	.then( editor => {
		window.editor = editor;
	} )
	.catch( err => {
		console.error( err.stack );
	} );

[dkonopka]

Separating pens and markers 👍 👍 👍

[oleq]

Related https://github.com/ckeditor/ckeditor5-ui/issues/322.

[jodator]

The second one would be more precise as we can have either highlightDropdown or individual buttons in toolbar:

or

I think that the latter option would be less confusing as you could just omit toolbar setting and use buttons instead.

The question is how to deal with missing toolbar property? Use default algorithm as it is now?

[oleq]

The question is how to deal with missing toolbar property? Use default algorithm as it is now?

Like how to determine the default value of highlight.toolbar? The same way it is determined now.

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity over the last year. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).