|
|
@@ -9,44 +9,30 @@ order: 30
|
|
|
|
|
|
```js
|
|
|
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
|
|
|
-import Model from '@ckeditor/ckeditor5-ui/src/model';
|
|
|
-
|
|
|
-import addToolbarToDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/addtoolbartodropdown';
|
|
|
-import closeDropdownOnBlur from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/closedropdownonblur';
|
|
|
-import closeDropdownOnExecute from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/closedropdownonexecute';
|
|
|
-import createDropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/createdropdownview';
|
|
|
-import createSplitButtonForDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/createsplitbuttonfordropdown';
|
|
|
-import enableModelIfOneIsEnabled from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/enablemodelifoneisenabled';
|
|
|
-import focusDropdownContentsOnArrows from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/focusdropdowncontentsonarrows';
|
|
|
-
|
|
|
-const model = new Model( {
|
|
|
- icon: 'some SVG',
|
|
|
- tooltip: 'My dropdown'
|
|
|
-} );
|
|
|
+import bindOneToMany from '@ckeditor/ckeditor5-ui/src/bindings/bindonetomany';
|
|
|
+import { addToolbarToDropdown, createSplitButtonDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
|
|
|
|
|
|
buttons.push( new ButtonView() );
|
|
|
buttons.push( componentFactory.create( 'someExistingButton' ) );
|
|
|
|
|
|
-model.set( 'buttons', buttons );
|
|
|
+const dropdownView = createSplitButtonDropdown( locale );
|
|
|
|
|
|
-const splitButtonView = createSplitButtonForDropdown( model, locale );
|
|
|
-const dropdownView = createDropdownView( model, splitButtonView, locale );
|
|
|
+dropdownView.set( {
|
|
|
+ icon: 'some SVG',
|
|
|
+ tooltip: 'My dropdown'
|
|
|
+} );
|
|
|
|
|
|
-// Customize dropdown
|
|
|
|
|
|
// This will enable toolbar button when any of button in dropdown is enabled.
|
|
|
-enableModelIfOneIsEnabled( model, buttons );
|
|
|
+bindOneToMany( dropdownView, 'isEnabled', buttons, 'isEnabled',
|
|
|
+ ( ...areEnabled ) => areEnabled.some( isEnabled => isEnabled )
|
|
|
+);
|
|
|
|
|
|
// Make this a dropdown with toolbar inside dropdown panel.
|
|
|
-addToolbarToDropdown( dropdownView, model );
|
|
|
-
|
|
|
-// Add default behavior of dropdown
|
|
|
-closeDropdownOnBlur( dropdownView );
|
|
|
-closeDropdownOnExecute( dropdownView );
|
|
|
-focusDropdownContentsOnArrows( dropdownView );
|
|
|
+addToolbarToDropdown( dropdownView, buttons );
|
|
|
|
|
|
// Execute current action from dropdown's split button action button.
|
|
|
-dropdownView.buttonView.on( 'execute', () => {
|
|
|
+dropdownView.on( 'execute', () => {
|
|
|
editor.execute( 'command', { value: model.commandValue } );
|
|
|
editor.editing.view.focus();
|
|
|
} );
|
|
|
@@ -57,12 +43,7 @@ dropdownView.buttonView.on( 'execute', () => {
|
|
|
```js
|
|
|
import Model from '@ckeditor/ckeditor5-ui/src/model';
|
|
|
|
|
|
-import addListViewToDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/addlistviewtodropdown';
|
|
|
-import closeDropdownOnBlur from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/closedropdownonblur';
|
|
|
-import closeDropdownOnExecute from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/closedropdownonexecute';
|
|
|
-import createDropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/createdropdownview';
|
|
|
-import createButtonForDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/createbuttonfordropdown';
|
|
|
-import focusDropdownContentsOnArrows from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/focusdropdowncontentsonarrows';
|
|
|
+import { addListViewToDropdown, createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
|
|
|
|
|
|
const items = [
|
|
|
new Model( {
|
|
|
@@ -75,28 +56,12 @@ const items = [
|
|
|
} ),
|
|
|
];
|
|
|
|
|
|
-// Create dropdown model.
|
|
|
-const model = new Model( {
|
|
|
- icon: 'some icon SVG',
|
|
|
- items
|
|
|
-} );
|
|
|
-
|
|
|
-const buttonView = createButtonForDropdown( model, locale );
|
|
|
-const dropdownView = createDropdownView( model, buttonView, locale );
|
|
|
-
|
|
|
-// Customize dropdown
|
|
|
-
|
|
|
-// This will enable toolbar button when any of button in dropdown is enabled.
|
|
|
-
|
|
|
-addListViewToDropdown( dropdownView, model, locale );
|
|
|
+const dropdownView = createDropdown( locale );
|
|
|
|
|
|
-// Add default behavior of dropdown
|
|
|
-closeDropdownOnBlur( dropdownView );
|
|
|
-closeDropdownOnExecute( dropdownView );
|
|
|
-focusDropdownContentsOnArrows( dropdownView );
|
|
|
+addListViewToDropdown( dropdownView, items );
|
|
|
|
|
|
// Execute command when an item from the dropdown is selected.
|
|
|
-this.listenTo( dropdownView, 'execute', evt => {
|
|
|
+dropdownView.on( 'execute', evt => {
|
|
|
editor.execute( evt.source.commandName );
|
|
|
editor.editing.view.focus();
|
|
|
} );
|