@@ -20,7 +20,7 @@ export default class TableStyle extends Plugin {
/**
* @inheritDoc
*/
- static requires() {
+ static get requires() {
return [ TableStyleEditing, TableStyleUI ];
}
@@ -10,6 +10,8 @@
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
import { findAncestor } from './commands/utils';
+import TableUI from './tableui';
+import tableMergeCellIcon from '../theme/icons/table-merge-cell.svg';
* The table style UI feature.
@@ -21,7 +23,43 @@ export default class TableStyleUI extends Plugin {
init() {
+ const editor = this.editor;
+
this._setupUI();
+ editor.ui.componentFactory.add( 'tableCellStyle', locale => {
+ const t = this.editor.t;
+ const options = [
+ {
+ type: 'ui',
+ name: 'borderWidth'
+ },
+ name: 'borderColor'
+ name: 'borderStyle'
+ { type: 'separator' },
+ name: 'backgroundColor'
+ name: 'padding'
+ }
+ ];
+ const dropdownView = editor.plugins.get( TableUI )._prepareDropdown( t( 'Merge cells' ), tableMergeCellIcon, options, locale );
+ dropdownView.isEnabled = true;
+ return dropdownView;
+ } );
_setupUI() {
@@ -192,28 +192,6 @@ export default class TableUI extends Plugin {
commandName: 'splitTableCellHorizontally',
label: t( 'Split cell horizontally' )
- },
- { type: 'separator' },
- {
- type: 'ui',
- name: 'borderWidth'
- name: 'borderColor'
- name: 'borderStyle'
- name: 'backgroundColor'
- name: 'padding'
];
@@ -24,7 +24,7 @@ ClassicEditor
'heading', '|', 'insertTable', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
],
table: {
- contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ],
+ contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableCellStyle' ],
tableToolbar: [ 'bold', 'italic' ]
} )