T/1: Implement Table UI

src/commands/setheadercolumncommand.js

@@ -0,0 +1,78 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module table/commands/setheadercolumncommand
+ */
+
+import Command from '@ckeditor/ckeditor5-core/src/command';
+
+import { getParentTable, updateNumericAttribute } from './utils';
+
+/**
+ * The header coloumn command.
+ *
+ * @extends module:core/command~Command
+ */
+export default class SetHeaderColumnCommand extends Command {
+	/**
+	 * @inheritDoc
+	 */
+	refresh() {
+		const model = this.editor.model;
+		const doc = model.document;
+		const selection = doc.selection;
+
+		const position = selection.getFirstPosition();
+		const tableParent = getParentTable( position );
+
+		this.isEnabled = !!tableParent;
+
+		this.value = this.isEnabled && this._isInHeading( position.parent, tableParent );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	execute() {
+		const model = this.editor.model;
+		const doc = model.document;
+		const selection = doc.selection;
+		const tableUtils = this.editor.plugins.get( 'TableUtils' );
+
+		const position = selection.getFirstPosition();
+		const tableCell = position.parent;
+		const tableRow = tableCell.parent;
+		const table = tableRow.parent;
+
+		const currentHeadingColumns = parseInt( table.getAttribute( 'headingColumns' ) || 0 );
+
+		const { column } = tableUtils.getCellLocation( tableCell );
+
+		const columnsToSet = column + 1 !== currentHeadingColumns ? column + 1 : column;
+
+		model.change( writer => {
+			updateNumericAttribute( 'headingColumns', columnsToSet, table, writer, 0 );
+		} );
+	}
+
+	/**
+	 * Checks if table cell is in heading section.
+	 *
+	 * @param {module:engine/model/element~Element} tableCell
+	 * @param {module:engine/model/element~Element} table
+	 * @returns {Boolean}
+	 * @private
+	 */
+	_isInHeading( tableCell, table ) {
+		const headingColumns = parseInt( table.getAttribute( 'headingColumns' ) || 0 );
+
+		const tableUtils = this.editor.plugins.get( 'TableUtils' );
+
+		const { column } = tableUtils.getCellLocation( tableCell );
+
+		return !!headingColumns && column < headingColumns;
+	}
+}

src/commands/settableheaderscommand.js → src/commands/setheaderrowcommand.js

@@ -4,7 +4,7 @@
  */
 
 /**
- * @module table/commands/settableheaderscommand
+ * @module table/commands/setheaderrowcommand
  */
 
 import Command from '@ckeditor/ckeditor5-core/src/command';
@@ -14,11 +14,11 @@ import { getParentTable, updateNumericAttribute } from './utils';
 import TableWalker from '../tablewalker';
 
 /**
- * The set table headers command.
+ * The header row command.
  *
  * @extends module:core/command~Command
  */
-export default class SetTableHeadersCommand extends Command {
+export default class SetHeaderRowCommand extends Command {
 	/**
 	 * @inheritDoc
 	 */
@@ -27,27 +27,34 @@ export default class SetTableHeadersCommand extends Command {
 		const doc = model.document;
 		const selection = doc.selection;
 
-		const tableParent = getParentTable( selection.getFirstPosition() );
+		const position = selection.getFirstPosition();
+		const tableParent = getParentTable( position );
 
 		this.isEnabled = !!tableParent;
+
+		this.value = this.isEnabled && this._isInHeading( position.parent, tableParent );
 	}
 
 	/**
 	 * @inheritDoc
 	 */
-	execute( options = {} ) {
+	execute() {
 		const model = this.editor.model;
 		const doc = model.document;
 		const selection = doc.selection;
 
-		const rowsToSet = parseInt( options.rows ) || 0;
+		const position = selection.getFirstPosition();
+		const tableCell = position.parent;
+		const tableRow = tableCell.parent;
+		const table = tableRow.parent;
 
-		const table = getParentTable( selection.getFirstPosition() );
+		const currentHeadingRows = table.getAttribute( 'headingRows' ) || 0;
+		const rowIndex = tableRow.index;
 
-		model.change( writer => {
-			const currentHeadingRows = table.getAttribute( 'headingRows' ) || 0;
+		const rowsToSet = rowIndex + 1 !== currentHeadingRows ? rowIndex + 1 : rowIndex;
 
-			if ( currentHeadingRows !== rowsToSet && rowsToSet > 0 ) {
+		model.change( writer => {
+			if ( rowsToSet ) {
 				// Changing heading rows requires to check if any of a heading cell is overlaping vertically the table head.
 				// Any table cell that has a rowspan attribute > 1 will not exceed the table head so we need to fix it in rows below.
 				const cellsToSplit = getOverlappingCells( table, rowsToSet, currentHeadingRows );
@@ -57,11 +64,23 @@ export default class SetTableHeadersCommand extends Command {
 				}
 			}
 
-			const columnsToSet = parseInt( options.columns ) || 0;
-			updateTableAttribute( table, 'headingColumns', columnsToSet, writer );
-			updateTableAttribute( table, 'headingRows', rowsToSet, writer );
+			updateNumericAttribute( 'headingRows', rowsToSet, table, writer, 0 );
 		} );
 	}
+
+	/**
+	 * Checks if table cell is in heading section.
+	 *
+	 * @param {module:engine/model/element~Element} tableCell
+	 * @param {module:engine/model/element~Element} table
+	 * @returns {Boolean}
+	 * @private
+	 */
+	_isInHeading( tableCell, table ) {
+		const headingRows = parseInt( table.getAttribute( 'headingRows' ) || 0 );
+
+		return !!headingRows && tableCell.parent.index < headingRows;
+	}
 }
 
 // Returns cells that span beyond new heading section.
@@ -86,15 +105,6 @@ function getOverlappingCells( table, headingRowsToSet, currentHeadingRows ) {
 	return cellsToSplit;
 }
 
-// @private
-function updateTableAttribute( table, attributeName, newValue, writer ) {
-	const currentValue = table.getAttribute( attributeName ) || 0;
-
-	if ( newValue !== currentValue ) {
-		updateNumericAttribute( attributeName, newValue, table, writer, 0 );
-	}
-}
-
 // Splits table cell horizontally.
 //
 // @param {module:engine/model/element~Element} tableCell

src/converters/downcast.js

@@ -10,7 +10,8 @@
 import ViewPosition from '@ckeditor/ckeditor5-engine/src/view/position';
 import ViewRange from '@ckeditor/ckeditor5-engine/src/view/range';
 import TableWalker from './../tablewalker';
-import { toWidget, toWidgetEditable } from '@ckeditor/ckeditor5-widget/src/utils';
+import { toWidgetEditable } from '@ckeditor/ckeditor5-widget/src/utils';
+import { toTableWidget } from '../utils';
 
 /**
  * Model table element to view table element conversion helper.
@@ -40,7 +41,7 @@ export function downcastInsertTable( options = {} ) {
 		let tableWidget;
 
 		if ( asWidget ) {
-			tableWidget = toWidget( tableElement, conversionApi.writer );
+			tableWidget = toTableWidget( tableElement, conversionApi.writer );
 		}
 
 		const tableWalker = new TableWalker( table );

src/tableediting.js

@@ -28,11 +28,12 @@ import SplitCellCommand from './commands/splitcellcommand';
 import MergeCellCommand from './commands/mergecellcommand';
 import RemoveRowCommand from './commands/removerowcommand';
 import RemoveColumnCommand from './commands/removecolumncommand';
-import SetTableHeadersCommand from './commands/settableheaderscommand';
+import SetHeaderRowCommand from './commands/setheaderrowcommand';
+import SetHeaderColumnCommand from './commands/setheadercolumncommand';
 import { getParentTable } from './commands/utils';
+import TableUtils from './tableutils';
 
 import './../theme/table.css';
-import TableUtils from './tableutils';
 
 /**
  * The table editing feature.
@@ -111,7 +112,8 @@ export default class TableEditing extends Plugin {
 		editor.commands.add( 'mergeCellDown', new MergeCellCommand( editor, { direction: 'down' } ) );
 		editor.commands.add( 'mergeCellUp', new MergeCellCommand( editor, { direction: 'up' } ) );
 
-		editor.commands.add( 'setTableHeaders', new SetTableHeadersCommand( editor ) );
+		editor.commands.add( 'setColumnHeader', new SetHeaderColumnCommand( editor ) );
+		editor.commands.add( 'setRowHeader', new SetHeaderRowCommand( editor ) );
 
 		// Handle tab key navigation.
 		this.listenTo( editor.editing.view.document, 'keydown', ( ...args ) => this._handleTabOnSelectedTable( ...args ) );