Przeglądaj źródła

Add temporary table styles dropdown option.

Maciej Gołaszewski 6 lat temu
rodzic
commit
9bdb069496

+ 1 - 1
packages/ckeditor5-table/src/tablestyle.js

@@ -20,7 +20,7 @@ export default class TableStyle extends Plugin {
 	/**
 	 * @inheritDoc
 	 */
-	static requires() {
+	static get requires() {
 		return [ TableStyleEditing, TableStyleUI ];
 	}
 }

+ 38 - 0
packages/ckeditor5-table/src/tablestyleui.js

@@ -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 {
 	 * @inheritDoc
 	 */
 	init() {
+		const editor = this.editor;
+
 		this._setupUI();
+
+		editor.ui.componentFactory.add( 'tableCellStyle', locale => {
+			const t = this.editor.t;
+
+			const options = [
+				{
+					type: 'ui',
+					name: 'borderWidth'
+				},
+				{
+					type: 'ui',
+					name: 'borderColor'
+				},
+				{
+					type: 'ui',
+					name: 'borderStyle'
+				},
+				{ type: 'separator' },
+				{
+					type: 'ui',
+					name: 'backgroundColor'
+				},
+				{
+					type: 'ui',
+					name: 'padding'
+				}
+			];
+
+			const dropdownView = editor.plugins.get( TableUI )._prepareDropdown( t( 'Merge cells' ), tableMergeCellIcon, options, locale );
+
+			dropdownView.isEnabled = true;
+
+			return dropdownView;
+		} );
 	}
 
 	_setupUI() {

+ 0 - 22
packages/ckeditor5-table/src/tableui.js

@@ -192,28 +192,6 @@ export default class TableUI extends Plugin {
 						commandName: 'splitTableCellHorizontally',
 						label: t( 'Split cell horizontally' )
 					}
-				},
-				{ type: 'separator' },
-				{
-					type: 'ui',
-					name: 'borderWidth'
-				},
-				{
-					type: 'ui',
-					name: 'borderColor'
-				},
-				{
-					type: 'ui',
-					name: 'borderStyle'
-				},
-				{ type: 'separator' },
-				{
-					type: 'ui',
-					name: 'backgroundColor'
-				},
-				{
-					type: 'ui',
-					name: 'padding'
 				}
 			];
 

+ 1 - 1
packages/ckeditor5-table/tests/manual/tablestyles.js

@@ -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' ]
 		}
 	} )