@ckeditor/ckeditor5-table 35.0.1 → 35.2.0

package/src/ui/colorinputview.js

@@ -7,8 +7,9 @@
  * @module table/ui/colorinputview
  */
 
-import { View, InputTextView, ButtonView, createDropdown, ColorGridView } from 'ckeditor5/src/ui';
+import { View, InputTextView, ButtonView, createDropdown, ColorGridView, FocusCycler, ViewCollection } from 'ckeditor5/src/ui';
 import { icons } from 'ckeditor5/src/core';
+import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
 
 import '../../theme/colorinput.css';
 
@@ -34,8 +35,6 @@ export default class ColorInputView extends View {
 	constructor( locale, options ) {
 		super( locale );
 
-		const bind = this.bindTemplate;
-
 		/**
 		 * The value of the input.
 		 *
@@ -45,14 +44,6 @@ export default class ColorInputView extends View {
 		 */
 		this.set( 'value', '' );
 
-		/**
-		 * The `id` attribute of the input (i.e. to pair with the `<label>` element).
-		 *
-		 * @observable
-		 * @member {String} #id
-		 */
-		this.set( 'id' );
-
 		/**
 		 * Controls whether the input view is in read-only mode.
 		 *
@@ -62,16 +53,6 @@ export default class ColorInputView extends View {
 		 */
 		this.set( 'isReadOnly', false );
 
-		/**
-		 * Set to `true` when the field has some error. Usually controlled via
-		 * {@link module:ui/labeledinput/labeledinputview~LabeledInputView#errorText}.
-		 *
-		 * @observable
-		 * @member {Boolean} #hasError
-		 * @default false
-		 */
-		this.set( 'hasError', false );
-
 		/**
 		 * An observable flag set to `true` when the input is focused by the user.
 		 * `false` otherwise.
@@ -94,40 +75,54 @@ export default class ColorInputView extends View {
 		this.set( 'isEmpty', true );
 
 		/**
-		 * The `id` of the element describing this field. When the field has
-		 * some error, it helps screen readers read the error text.
+		 * A cached reference to the options passed to the constructor.
+		 *
+		 * @member {Object}
+		 */
+		this.options = options;
+
+		/**
+		 * Tracks information about the DOM focus in the view.
 		 *
-		 * @observable
-		 * @member {String} #ariaDescribedById
+		 * @readonly
+		 * @member {module:utils/focustracker~FocusTracker}
 		 */
-		this.set( 'ariaDescribedById' );
+		this.focusTracker = new FocusTracker();
 
 		/**
-		 * A cached reference to the options passed to the constructor.
+		 * A collection of views that can be focused in the view.
 		 *
-		 * @member {Object}
+		 * @readonly
+		 * @protected
+		 * @member {module:ui/viewcollection~ViewCollection}
 		 */
-		this.options = options;
+		this._focusables = new ViewCollection();
 
 		/**
 		 * An instance of the dropdown allowing to select a color from a grid.
 		 *
-		 * @protected
 		 * @member {module:ui/dropdown/dropdown~DropdownView}
 		 */
-		this._dropdownView = this._createDropdownView();
+		this.dropdownView = this._createDropdownView();
 
 		/**
 		 * An instance of the input allowing the user to type a color value.
 		 *
-		 * @protected
 		 * @member {module:ui/inputtext/inputtextview~InputTextView}
 		 */
-		this._inputView = this._createInputTextView();
+		this.inputView = this._createInputTextView();
+
+		/**
+		 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+		 *
+		 * @readonly
+		 * @member {module:utils/keystrokehandler~KeystrokeHandler}
+		 */
+		this.keystrokes = new KeystrokeHandler();
 
 		/**
 		 * The flag that indicates whether the user is still typing.
-		 * If set to true, it means that the text input field ({@link #_inputView}) still has the focus.
+		 * If set to true, it means that the text input field ({@link #inputView}) still has the focus.
 		 * So, we should interrupt the user by replacing the input's value.
 		 *
 		 * @protected
@@ -135,36 +130,72 @@ export default class ColorInputView extends View {
 		 */
 		this._stillTyping = false;
 
+		/**
+		 * Helps cycling over focusable items in the view.
+		 *
+		 * @readonly
+		 * @protected
+		 * @member {module:ui/focuscycler~FocusCycler}
+		 */
+		this._focusCycler = new FocusCycler( {
+			focusables: this._focusables,
+			focusTracker: this.focusTracker,
+			keystrokeHandler: this.keystrokes,
+			actions: {
+				// Navigate items backwards using the <kbd>Shift</kbd> + <kbd>Tab</kbd> keystroke.
+				focusPrevious: 'shift + tab',
+
+				// Navigate items forwards using the <kbd>Tab</kbd> key.
+				focusNext: 'tab'
+			}
+		} );
+
 		this.setTemplate( {
 			tag: 'div',
 			attributes: {
 				class: [
 					'ck',
-					'ck-input-color',
-					bind.if( 'hasError', 'ck-error' )
-				],
-				id: bind.to( 'id' ),
-				'aria-invalid': bind.if( 'hasError', true ),
-				'aria-describedby': bind.to( 'ariaDescribedById' )
+					'ck-input-color'
+				]
 			},
 			children: [
-				this._dropdownView,
-				this._inputView
+				this.dropdownView,
+				this.inputView
 			]
 		} );
 
 		this.on( 'change:value', ( evt, name, inputValue ) => this._setInputValue( inputValue ) );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	render() {
+		super.render();
+
+		// Start listening for the keystrokes coming from the dropdown panel view.
+		this.keystrokes.listenTo( this.dropdownView.panelView.element );
+	}
+
 	/**
 	 * Focuses the input.
 	 */
 	focus() {
-		this._inputView.focus();
+		this.inputView.focus();
 	}
 
 	/**
-	 * Creates and configures the {@link #_dropdownView}.
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.focusTracker.destroy();
+		this.keystrokes.destroy();
+	}
+
+	/**
+	 * Creates and configures the {@link #dropdownView}.
 	 *
 	 * @private
 	 */
@@ -215,6 +246,12 @@ export default class ColorInputView extends View {
 		dropdown.panelView.children.add( colorGrid );
 		dropdown.bind( 'isEnabled' ).to( this, 'isReadOnly', value => !value );
 
+		this._focusables.add( removeColorButton );
+		this._focusables.add( colorGrid );
+
+		this.focusTracker.add( removeColorButton.element );
+		this.focusTracker.add( colorGrid.element );
+
 		return dropdown;
 	}
 
@@ -222,7 +259,7 @@ export default class ColorInputView extends View {
 	 * Creates and configures an instance of {@link module:ui/inputtext/inputtextview~InputTextView}.
 	 *
 	 * @private
-	 * @returns {module:ui/inputtext/inputtextview~InputTextView} A configured instance to be set as {@link #_inputView}.
+	 * @returns {module:ui/inputtext/inputtextview~InputTextView} A configured instance to be set as {@link #inputView}.
 	 */
 	_createInputTextView() {
 		const locale = this.locale;
@@ -275,7 +312,7 @@ export default class ColorInputView extends View {
 		removeColorButton.label = removeColorButtonLabel;
 		removeColorButton.on( 'execute', () => {
 			this.value = defaultColor;
-			this._dropdownView.isOpen = false;
+			this.dropdownView.isOpen = false;
 			this.fire( 'input' );
 		} );
 
@@ -283,7 +320,7 @@ export default class ColorInputView extends View {
 	}
 
 	/**
-	 * Creates and configures the color grid inside the {@link #_dropdownView}.
+	 * Creates and configures the color grid inside the {@link #dropdownView}.
 	 *
 	 * @private
 	 */
@@ -295,7 +332,7 @@ export default class ColorInputView extends View {
 
 		colorGrid.on( 'execute', ( evtData, data ) => {
 			this.value = data.value;
-			this._dropdownView.isOpen = false;
+			this.dropdownView.isOpen = false;
 			this.fire( 'input' );
 		} );
 		colorGrid.bind( 'selectedColor' ).to( this, 'value' );
@@ -304,7 +341,7 @@ export default class ColorInputView extends View {
 	}
 
 	/**
-	 * Sets {@link #_inputView}'s value property to the color value or color label,
+	 * Sets {@link #inputView}'s value property to the color value or color label,
 	 * if there is one and the user is not typing.
 	 *
 	 * Handles cases like:
@@ -322,9 +359,9 @@ export default class ColorInputView extends View {
 			const mappedColor = this.options.colorDefinitions.find( def => normalizedInputValue === normalizeColor( def.color ) );
 
 			if ( mappedColor ) {
-				this._inputView.value = mappedColor.label;
+				this.inputView.value = mappedColor.label;
 			} else {
-				this._inputView.value = inputValue || '';
+				this.inputView.value = inputValue || '';
 			}
 		}
 	}

package/src/ui/inserttableview.js

@@ -7,7 +7,9 @@
  * @module table/ui/inserttableview
  */
 
-import { View } from 'ckeditor5/src/ui';
+import { View, ButtonView, addKeyboardHandlingForGrid } from 'ckeditor5/src/ui';
+
+import { KeystrokeHandler, FocusTracker } from 'ckeditor5/src/utils';
 
 import './../../theme/inserttable.css';
 
@@ -36,6 +38,22 @@ export default class InsertTableView extends View {
 		 */
 		this.items = this._createGridCollection();
 
+		/**
+		 * Listen to `keydown` events fired in this view's main element.
+		 *
+		 * @readonly
+		 * @member {module:utils/keystrokeHandler~KeystrokeHandler}
+		 */
+		this.keystrokes = new KeystrokeHandler();
+
+		/**
+		 * Tracks information about the DOM focus in the grid.
+		 *
+		 * @readonly
+		 * @member {module:utils/focustracker~FocusTracker}
+		 */
+		this.focusTracker = new FocusTracker();
+
 		/**
 		 * The currently selected number of rows of the new table.
 		 *
@@ -81,7 +99,11 @@ export default class InsertTableView extends View {
 				{
 					tag: 'div',
 					attributes: {
-						class: [ 'ck-insert-table-dropdown__label' ]
+						class: [
+							'ck',
+							'ck-insert-table-dropdown__label'
+						],
+						'aria-hidden': true
 					},
 					children: [
 						{
@@ -102,8 +124,21 @@ 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( ( parseInt( row, 10 ) - 1 ) * 10 + ( parseInt( column, 10 ) - 1 ) ).focus();
+		} );
+
+		// This allows the #rows and #columns to be updated when:
+		// * the user navigates the grid using the keyboard,
+		// * the user moves the mouse over grid items.
+		this.focusTracker.on( 'change:focusedElement', ( evt, name, focusedElement ) => {
+			if ( !focusedElement ) {
+				return;
+			}
+
+			const { row, column } = focusedElement.dataset;
 
 			// As row & column indexes are zero-based transform it to number of selected rows & columns.
 			this.set( {
@@ -112,29 +147,39 @@ export default class InsertTableView extends View {
 			} );
 		} );
 
-		this.on( 'change:columns', () => {
-			this._highlightGridBoxes();
-		} );
+		this.on( 'change:columns', () => this._highlightGridBoxes() );
+		this.on( 'change:rows', () => this._highlightGridBoxes() );
+	}
+
+	render() {
+		super.render();
 
-		this.on( 'change:rows', () => {
-			this._highlightGridBoxes();
+		addKeyboardHandlingForGrid( {
+			keystrokeHandler: this.keystrokes,
+			focusTracker: this.focusTracker,
+			gridItems: this.items,
+			numberOfColumns: 10
 		} );
+
+		for ( const item of this.items ) {
+			this.focusTracker.add( item.element );
+		}
+
+		this.keystrokes.listenTo( this.element );
 	}
 
 	/**
 	 * @inheritDoc
 	 */
 	focus() {
-		// The dropdown panel expects DropdownPanelFocusable interface on views passed to dropdown panel. See #30.
-		// The method should be implemented while working on keyboard support for this view. See #22.
+		this.items.get( 0 ).focus();
 	}
 
 	/**
 	 * @inheritDoc
 	 */
 	focusLast() {
-		// The dropdown panel expects DropdownPanelFocusable interface on views passed to dropdown panel. See #30.
-		// The method should be implemented while working on keyboard support for this view. See #22.
+		this.items.get( 0 ).focus();
 	}
 
 	/**
@@ -158,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.
@@ -169,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 ) );
+			boxes.push( this._createGridButton( this.locale, row + 1, column + 1, label ) );
 		}
 
 		return this.createCollection( boxes );
@@ -182,41 +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 ) {
-		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-insert-table-dropdown-grid-box',
-					bind.if( 'isOn', 'ck-on' )
-				],
-				'data-row': row,
-				'data-column': column
-			}
-		} );
-	}
-}

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;
 	};
 }
 

package/theme/tablecolumnresize.css

@@ -12,9 +12,12 @@
 	--ck-table-column-resizer-position-offset: calc(var(--ck-table-column-resizer-width) * -0.5 - 0.5px);
 }
 
+.ck-content .table .ck-table-resized {
+	table-layout: fixed;
+}
+
 .ck-content .table table {
 	overflow: hidden;
-	table-layout: fixed;
 }
 
 .ck-content .table td,
@@ -22,7 +25,7 @@
 	position: relative;
 }
 
-.ck-content .table .table-column-resizer {
+.ck.ck-editor__editable .table .ck-table-column-resizer {
 	position: absolute;
 	/* The resizer element resides in each cell so to occupy the entire height of the table, which is unknown from a CSS point of view,
 	   it is extended to an extremely high height. Even for screens with a very high pixel density, the resizer will fulfill its role as
@@ -37,23 +40,23 @@
 	z-index: var(--ck-z-default);
 }
 
+.ck.ck-editor__editable.ck-column-resize_disabled .table .ck-table-column-resizer {
+	display: none;
+}
+
 /* The resizer elements, which are extended to an extremely high height, break the drag & drop feature in Chrome. To make it work again,
    all resizers must be hidden while the table is dragged. */
-.ck-content .table[draggable] .table-column-resizer {
+.ck.ck-editor__editable .table[draggable] .ck-table-column-resizer {
 	display: none;
 }
 
-.ck-content .table .table-column-resizer:hover,
-.ck-content .table .table-column-resizer__active {
+.ck.ck-editor__editable .table .ck-table-column-resizer:hover,
+.ck.ck-editor__editable .table .ck-table-column-resizer__active {
 	background-color: var(--ck-color-table-column-resizer-hover);
 	opacity: 0.25;
 }
 
-.ck-content[dir=rtl] .table .table-column-resizer {
+.ck.ck-editor__editable[dir=rtl] .table .ck-table-column-resizer {
 	left: var(--ck-table-column-resizer-position-offset);
 	right: unset;
 }
-
-.ck-content.ck-read-only .table .table-column-resizer {
-	display: none;
-}