@ckeditor/ckeditor5-table 35.1.0 → 35.2.0

package/src/ui/inserttableview.js

@@ -7,9 +7,9 @@
  * @module table/ui/inserttableview
  */
 
-import { View, addKeyboardHandlingForGrid } from 'ckeditor5/src/ui';
+import { View, ButtonView, addKeyboardHandlingForGrid } from 'ckeditor5/src/ui';
 
-import { KeystrokeHandler, FocusTracker, uid } from 'ckeditor5/src/utils';
+import { KeystrokeHandler, FocusTracker } from 'ckeditor5/src/utils';
 
 import './../../theme/inserttable.css';
 
@@ -31,23 +31,19 @@ export default class InsertTableView extends View {
 		const bind = this.bindTemplate;
 
 		/**
-		 * A unique id of a label element displaying the current geometry of the table.
-		 * Used by every {@link #items item} of the view as a pointer to an accessible label.
+		 * A collection of table size box items.
 		 *
-		 * @private
 		 * @readonly
-		 * @member {String}
+		 * @member {module:ui/viewcollection~ViewCollection}
 		 */
-		this._geometryLabelId = `ck-editor__label_${ uid() }`;
+		this.items = this._createGridCollection();
 
 		/**
-		 * A collection of table size box items.
+		 * Listen to `keydown` events fired in this view's main element.
 		 *
 		 * @readonly
-		 * @member {module:ui/viewcollection~ViewCollection}
+		 * @member {module:utils/keystrokeHandler~KeystrokeHandler}
 		 */
-		this.items = this._createGridCollection();
-
 		this.keystrokes = new KeystrokeHandler();
 
 		/**
@@ -103,11 +99,11 @@ export default class InsertTableView extends View {
 				{
 					tag: 'div',
 					attributes: {
-						id: this._geometryLabelId,
 						class: [
 							'ck',
 							'ck-insert-table-dropdown__label'
-						]
+						],
+						'aria-hidden': true
 					},
 					children: [
 						{
@@ -124,13 +120,6 @@ export default class InsertTableView extends View {
 
 				click: bind.to( () => {
 					this.fire( 'execute' );
-				} ),
-
-				keydown: bind.to( evt => {
-					if ( evt.key === 'Enter' ) {
-						this.fire( 'execute' );
-						evt.preventDefault();
-					}
 				} )
 			}
 		} );
@@ -138,8 +127,7 @@ export default class InsertTableView extends View {
 		// #rows and #columns are set via changes to #focusTracker on mouse over.
 		this.on( 'boxover', ( evt, domEvt ) => {
 			const { row, column } = domEvt.target.dataset;
-
-			this.items.get( ( row - 1 ) * 10 + ( column - 1 ) ).focus();
+			this.items.get( ( parseInt( row, 10 ) - 1 ) * 10 + ( parseInt( column, 10 ) - 1 ) ).focus();
 		} );
 
 		// This allows the #rows and #columns to be updated when:
@@ -215,6 +203,34 @@ export default class InsertTableView extends View {
 		} );
 	}
 
+	/**
+	 * Creates a new Button for the grid.
+	 *
+	 * @private
+	 * @param {module:utils/locale~Locale} locale The locale instance.
+	 * @param {Number} row Row number.
+	 * @param {Number} column Column number.
+	 * @param {String} label The grid button label.
+	 * @returns {module:ui/button/buttonview~ButtonView}
+	 */
+	_createGridButton( locale, row, column, label ) {
+		const button = new ButtonView( locale );
+
+		button.set( {
+			label,
+			class: 'ck-insert-table-dropdown-grid-box'
+		} );
+
+		button.extendTemplate( {
+			attributes: {
+				'data-row': row,
+				'data-column': column
+			}
+		} );
+
+		return button;
+	}
+
 	/**
 	 * @private
 	 * @returns {module:ui/viewcollection~ViewCollection} A view collection containing boxes to be placed in a table grid.
@@ -226,8 +242,9 @@ export default class InsertTableView extends View {
 		for ( let index = 0; index < 100; index++ ) {
 			const row = Math.floor( index / 10 );
 			const column = index % 10;
+			const label = `${ row + 1 } × ${ column + 1 }`;
 
-			boxes.push( new TableSizeGridBoxView( this.locale, row + 1, column + 1, this._geometryLabelId ) );
+			boxes.push( this._createGridButton( this.locale, row + 1, column + 1, label ) );
 		}
 
 		return this.createCollection( boxes );
@@ -239,51 +256,3 @@ export default class InsertTableView extends View {
 	 * @event boxover
 	 */
 }
-
-/**
- * A single grid box view element.
- *
- * This class is used to render the table size selection grid in {@link module:table/ui/inserttableview~InsertTableView}.
- *
- * @private
- */
-class TableSizeGridBoxView extends View {
-	/**
-	 * @inheritDoc
-	 */
-	constructor( locale, row, column, ariaLabelledById ) {
-		super( locale );
-
-		const bind = this.bindTemplate;
-
-		/**
-		 * Controls whether the grid box view is "on".
-		 *
-		 * @observable
-		 * @member {Boolean} #isOn
-		 */
-		this.set( 'isOn', false );
-
-		this.setTemplate( {
-			tag: 'div',
-			attributes: {
-				class: [
-					'ck',
-					'ck-insert-table-dropdown-grid-box',
-					bind.if( 'isOn', 'ck-on' )
-				],
-				'data-row': row,
-				'data-column': column,
-				'tabindex': -1,
-				'aria-labelledby': ariaLabelledById
-			}
-		} );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	focus() {
-		this.element.focus();
-	}
-}

package/src/utils/common.js

@@ -7,6 +7,8 @@
  * @module table/utils/common
  */
 
+import { downcastAttributeToStyle, upcastStyleToAttribute } from './../converters/tableproperties';
+
 /**
  * A common method to update the numeric value. If a value is the default one, it will be unset.
  *
@@ -55,3 +57,25 @@ export function isHeadingColumnCell( tableUtils, tableCell ) {
 
 	return !!headingColumns && column < headingColumns;
 }
+
+/**
+ * Enables conversion for an attribute for simple view-model mappings.
+ *
+ * @param {module:engine/model/schema~Schema} schema
+ * @param {module:engine/conversion/conversion~Conversion} conversion
+ * @param {Object} options
+ * @param {String} options.modelAttribute
+ * @param {String} options.styleName
+ * @param {String} options.defaultValue The default value for the specified `modelAttribute`.
+ * @param {Boolean} [options.reduceBoxSides=false]
+ */
+export function enableProperty( schema, conversion, options ) {
+	const { modelAttribute } = options;
+
+	schema.extend( 'tableCell', {
+		allowAttributes: [ modelAttribute ]
+	} );
+
+	upcastStyleToAttribute( conversion, { viewElement: /^(td|th)$/, ...options } );
+	downcastAttributeToStyle( conversion, { modelElement: 'tableCell', ...options } );
+}

package/src/utils/ui/table-properties.js

@@ -372,29 +372,29 @@ export const defaultColors = [
  */
 export function getLabeledColorInputCreator( options ) {
 	return ( labeledFieldView, viewUid, statusUid ) => {
-		const inputView = new ColorInputView( labeledFieldView.locale, {
+		const colorInputView = new ColorInputView( labeledFieldView.locale, {
 			colorDefinitions: colorConfigToColorGridDefinitions( options.colorConfig ),
 			columns: options.columns,
 			defaultColorValue: options.defaultColorValue
 		} );
 
-		inputView.set( {
+		colorInputView.inputView.set( {
 			id: viewUid,
 			ariaDescribedById: statusUid
 		} );
 
-		inputView.bind( 'isReadOnly' ).to( labeledFieldView, 'isEnabled', value => !value );
-		inputView.bind( 'hasError' ).to( labeledFieldView, 'errorText', value => !!value );
+		colorInputView.bind( 'isReadOnly' ).to( labeledFieldView, 'isEnabled', value => !value );
+		colorInputView.bind( 'hasError' ).to( labeledFieldView, 'errorText', value => !!value );
 
-		inputView.on( 'input', () => {
+		colorInputView.on( 'input', () => {
 			// UX: Make the error text disappear and disable the error indicator as the user
 			// starts fixing the errors.
 			labeledFieldView.errorText = null;
 		} );
 
-		labeledFieldView.bind( 'isEmpty', 'isFocused' ).to( inputView );
+		labeledFieldView.bind( 'isEmpty', 'isFocused' ).to( colorInputView );
 
-		return inputView;
+		return colorInputView;
 	};
 }