|
@@ -21,6 +21,9 @@ import global from '@ckeditor/ckeditor5-utils/src/dom/global';
|
|
|
import { createDropdown, addToolbarToDropdown } from '../dropdown/utils';
|
|
import { createDropdown, addToolbarToDropdown } from '../dropdown/utils';
|
|
|
import { attachLinkToDocumentation } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
|
|
import { attachLinkToDocumentation } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
|
|
|
import verticalDotsIcon from '@ckeditor/ckeditor5-core/theme/icons/three-vertical-dots.svg';
|
|
import verticalDotsIcon from '@ckeditor/ckeditor5-core/theme/icons/three-vertical-dots.svg';
|
|
|
|
|
+import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
|
|
|
|
|
+
|
|
|
|
|
+const toPx = toUnit( 'px' );
|
|
|
|
|
|
|
|
import '../../theme/components/toolbar/toolbar.css';
|
|
import '../../theme/components/toolbar/toolbar.css';
|
|
|
|
|
|
|
@@ -61,6 +64,14 @@ export default class ToolbarView extends View {
|
|
|
*/
|
|
*/
|
|
|
this.set( 'ariaLabel', t( 'Editor toolbar' ) );
|
|
this.set( 'ariaLabel', t( 'Editor toolbar' ) );
|
|
|
|
|
|
|
|
|
|
+ /**
|
|
|
|
|
+ * Maximum width of the toolbar element.
|
|
|
|
|
+ *
|
|
|
|
|
+ * @default 'auto'
|
|
|
|
|
+ * @member {String} #maxWidth
|
|
|
|
|
+ */
|
|
|
|
|
+ this.set( 'maxWidth', 'auto' );
|
|
|
|
|
+
|
|
|
/**
|
|
/**
|
|
|
* A collection of toolbar items (buttons, dropdowns, etc.).
|
|
* A collection of toolbar items (buttons, dropdowns, etc.).
|
|
|
*
|
|
*
|
|
@@ -171,7 +182,10 @@ export default class ToolbarView extends View {
|
|
|
bind.to( 'class' )
|
|
bind.to( 'class' )
|
|
|
],
|
|
],
|
|
|
role: 'toolbar',
|
|
role: 'toolbar',
|
|
|
- 'aria-label': bind.to( 'ariaLabel' )
|
|
|
|
|
|
|
+ 'aria-label': bind.to( 'ariaLabel' ),
|
|
|
|
|
+ style: {
|
|
|
|
|
+ maxWidth: bind.to( 'maxWidth', maxWidth => toPx( maxWidth ) )
|
|
|
|
|
+ }
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
children: this.children,
|
|
children: this.children,
|