Browse Source

Stub border width UI using prompt command.

Maciej Gołaszewski 6 years ago
parent
commit
48012a8e06

+ 57 - 0
packages/ckeditor5-table/src/tablestyle.js

@@ -8,6 +8,8 @@
  */
  */
 
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import { findAncestor } from './commands/utils';
 
 
 /**
 /**
  * The table editing feature.
  * The table editing feature.
@@ -51,6 +53,61 @@ export default class TableStyle extends Plugin {
 		setupConversion( conversion, 'padding', 'tableCell' );
 		setupConversion( conversion, 'padding', 'tableCell' );
 		setupConversion( conversion, 'vertical-align', 'tableCell' );
 		setupConversion( conversion, 'vertical-align', 'tableCell' );
 		setupConversion( conversion, 'width', 'tableCell' );
 		setupConversion( conversion, 'width', 'tableCell' );
+
+		// editor.ui.componentFactory.add( 'borderColor' );
+		// editor.ui.componentFactory.add( 'borderStyle' );
+		editor.ui.componentFactory.add( 'borderWidth', locale => {
+			const button = new ButtonView( locale );
+
+			button.set( {
+				label: 'borderWidth',
+				icon: false,
+				tooltip: true,
+				withText: true
+			} );
+
+			button.on( 'execute', () => {
+				const model = editor.model;
+				const document = model.document;
+				const selection = document.selection;
+				const firstPosition = selection.getFirstPosition();
+
+				const tableCell = findAncestor( 'tableCell', firstPosition );
+
+				const border = tableCell.getAttribute( 'border' );
+
+				let currentWidth;
+
+				if ( border ) {
+					const borderWidth = border && border.width;
+
+					// Unify width to one value. If different values are set default to top (or right, etc).
+					currentWidth = borderWidth.top || borderWidth.right || borderWidth.bottom || borderWidth.left;
+				}
+
+				// eslint-disable-next-line no-undef,no-alert
+				const newWidth = prompt( 'width', currentWidth || '' );
+
+				const parts = /^([0-9]*[.]?[0-9]*)([a-z]{2,4})?/.exec( newWidth );
+				const unit = parts[ 2 ];
+
+				const borderWidthToSet = parts[ 1 ] + ( unit || 'px' );
+
+				// TODO: Command, setting new value is dumb on `border` object.
+				editor.model.change( writer => {
+					writer.setAttribute( 'border', Object.assign( {}, border, {
+						width: {
+							top: borderWidthToSet,
+							right: borderWidthToSet,
+							bottom: borderWidthToSet,
+							left: borderWidthToSet
+						}
+					} ), tableCell );
+				} );
+			} );
+
+			return button;
+		} );
 	}
 	}
 }
 }
 
 

+ 7 - 2
packages/ckeditor5-table/src/tableui.js

@@ -192,6 +192,11 @@ export default class TableUI extends Plugin {
 						commandName: 'splitTableCellHorizontally',
 						commandName: 'splitTableCellHorizontally',
 						label: t( 'Split cell horizontally' )
 						label: t( 'Split cell horizontally' )
 					}
 					}
+				},
+				{ type: 'separator' },
+				{
+					type: 'ui',
+					name: 'borderWidth'
 				}
 				}
 			];
 			];
 
 
@@ -222,7 +227,7 @@ export default class TableUI extends Plugin {
 			addListOption( option, editor, commands, itemDefinitions );
 			addListOption( option, editor, commands, itemDefinitions );
 		}
 		}
 
 
-		addListToDropdown( dropdownView, itemDefinitions );
+		addListToDropdown( dropdownView, itemDefinitions, editor.ui.componentFactory );
 
 
 		// Decorate dropdown's button.
 		// Decorate dropdown's button.
 		dropdownView.buttonView.set( {
 		dropdownView.buttonView.set( {
@@ -256,7 +261,7 @@ function addListOption( option, editor, commands, itemDefinitions ) {
 	const model = option.model = new Model( option.model );
 	const model = option.model = new Model( option.model );
 	const { commandName, bindIsOn } = option.model;
 	const { commandName, bindIsOn } = option.model;
 
 
-	if ( option.type !== 'separator' ) {
+	if ( option.type === 'button' || option.type === 'switchbutton' ) {
 		const command = editor.commands.get( commandName );
 		const command = editor.commands.get( commandName );
 
 
 		commands.push( command );
 		commands.push( command );