/** * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md. */ /** * @module table/tableediting */ import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; import { upcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/upcast-converters'; import Range from '@ckeditor/ckeditor5-engine/src/model/range'; import Position from '@ckeditor/ckeditor5-engine/src/model/position'; import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard'; import upcastTable from './converters/upcasttable'; import { downcastInsertCell, downcastInsertRow, downcastInsertTable, downcastRemoveRow, downcastTableHeadingColumnsChange, downcastTableHeadingRowsChange } from './converters/downcast'; import InsertTableCommand from './commands/inserttablecommand'; import InsertRowCommand from './commands/insertrowcommand'; import InsertColumnCommand from './commands/insertcolumncommand'; import SplitCellCommand from './commands/splitcellcommand'; import MergeCellCommand from './commands/mergecellcommand'; import RemoveRowCommand from './commands/removerowcommand'; import RemoveColumnCommand from './commands/removecolumncommand'; import SetHeaderRowCommand from './commands/setheaderrowcommand'; import SetHeaderColumnCommand from './commands/setheadercolumncommand'; import { getParentTable, updateNumericAttribute } from './commands/utils'; import TableWalker from './tablewalker'; import TableUtils from '../src/tableutils'; import '../theme/tableediting.css'; /** * The table editing feature. * * @extends module:core/plugin~Plugin */ export default class TableEditing extends Plugin { /** * @inheritDoc */ init() { const editor = this.editor; const model = editor.model; const schema = model.schema; const conversion = editor.conversion; schema.register( 'table', { allowWhere: '$block', allowAttributes: [ 'headingRows', 'headingColumns' ], isLimit: true, isObject: true } ); schema.register( 'tableRow', { allowIn: 'table', isLimit: true } ); schema.register( 'tableCell', { allowIn: 'tableRow', allowContentOf: '$block', allowAttributes: [ 'colspan', 'rowspan' ], isLimit: true } ); // Table conversion. conversion.for( 'upcast' ).add( upcastTable() ); conversion.for( 'editingDowncast' ).add( downcastInsertTable( { asWidget: true } ) ); conversion.for( 'dataDowncast' ).add( downcastInsertTable() ); // Table row conversion. conversion.for( 'upcast' ).add( upcastElementToElement( { model: 'tableRow', view: 'tr' } ) ); conversion.for( 'editingDowncast' ).add( downcastInsertRow( { asWidget: true } ) ); conversion.for( 'dataDowncast' ).add( downcastInsertRow() ); conversion.for( 'downcast' ).add( downcastRemoveRow() ); // Table cell conversion. conversion.for( 'upcast' ).add( upcastElementToElement( { model: 'tableCell', view: 'td' } ) ); conversion.for( 'upcast' ).add( upcastElementToElement( { model: 'tableCell', view: 'th' } ) ); conversion.for( 'editingDowncast' ).add( downcastInsertCell( { asWidget: true } ) ); conversion.for( 'dataDowncast' ).add( downcastInsertCell() ); // Table attributes conversion. conversion.attributeToAttribute( { model: 'colspan', view: 'colspan' } ); conversion.attributeToAttribute( { model: 'rowspan', view: 'rowspan' } ); // Table heading rows and cols conversion. conversion.for( 'editingDowncast' ).add( downcastTableHeadingColumnsChange( { asWidget: true } ) ); conversion.for( 'dataDowncast' ).add( downcastTableHeadingColumnsChange() ); conversion.for( 'editingDowncast' ).add( downcastTableHeadingRowsChange( { asWidget: true } ) ); conversion.for( 'dataDowncast' ).add( downcastTableHeadingRowsChange() ); // Define all the commands. editor.commands.add( 'insertTable', new InsertTableCommand( editor ) ); editor.commands.add( 'insertTableRowAbove', new InsertRowCommand( editor, { order: 'above' } ) ); editor.commands.add( 'insertTableRowBelow', new InsertRowCommand( editor, { order: 'below' } ) ); editor.commands.add( 'insertTableColumnBefore', new InsertColumnCommand( editor, { order: 'before' } ) ); editor.commands.add( 'insertTableColumnAfter', new InsertColumnCommand( editor, { order: 'after' } ) ); editor.commands.add( 'removeTableRow', new RemoveRowCommand( editor ) ); editor.commands.add( 'removeTableColumn', new RemoveColumnCommand( editor ) ); editor.commands.add( 'splitTableCellVertically', new SplitCellCommand( editor, { direction: 'vertically' } ) ); editor.commands.add( 'splitTableCellHorizontally', new SplitCellCommand( editor, { direction: 'horizontally' } ) ); editor.commands.add( 'mergeTableCellRight', new MergeCellCommand( editor, { direction: 'right' } ) ); editor.commands.add( 'mergeTableCellLeft', new MergeCellCommand( editor, { direction: 'left' } ) ); editor.commands.add( 'mergeTableCellDown', new MergeCellCommand( editor, { direction: 'down' } ) ); editor.commands.add( 'mergeTableCellUp', new MergeCellCommand( editor, { direction: 'up' } ) ); editor.commands.add( 'setTableColumnHeader', new SetHeaderColumnCommand( editor ) ); editor.commands.add( 'setTableRowHeader', new SetHeaderRowCommand( editor ) ); injectTablePostFixer( model, this.editor.plugins.get( TableUtils ) ); // Handle tab key navigation. this.listenTo( editor.editing.view.document, 'keydown', ( ...args ) => this._handleTabOnSelectedTable( ...args ) ); this.listenTo( editor.editing.view.document, 'keydown', ( ...args ) => this._handleTabInsideTable( ...args ) ); } /** * @inheritDoc */ static get requires() { return [ TableUtils ]; } /** * Handles {@link module:engine/view/document~Document#event:keydown keydown} events for the Tab key executed * when the table widget is selected. * * @private * @param {module:utils/eventinfo~EventInfo} eventInfo * @param {module:engine/view/observer/domeventdata~DomEventData} domEventData */ _handleTabOnSelectedTable( eventInfo, domEventData ) { const tabPressed = domEventData.keyCode == keyCodes.tab; // Act only on TAB & SHIFT-TAB - Do not override native CTRL+TAB handler. if ( !tabPressed || domEventData.ctrlKey ) { return; } const editor = this.editor; const selection = editor.model.document.selection; if ( !selection.isCollapsed && selection.rangeCount === 1 && selection.getFirstRange().isFlat ) { const selectedElement = selection.getSelectedElement(); if ( !selectedElement || selectedElement.name != 'table' ) { return; } eventInfo.stop(); domEventData.preventDefault(); domEventData.stopPropagation(); editor.model.change( writer => { writer.setSelection( Range.createIn( selectedElement.getChild( 0 ).getChild( 0 ) ) ); } ); } } /** * Handles {@link module:engine/view/document~Document#event:keydown keydown} events for the Tab key executed inside table * cell. * * @private * @param {module:utils/eventinfo~EventInfo} eventInfo * @param {module:engine/view/observer/domeventdata~DomEventData} domEventData */ _handleTabInsideTable( eventInfo, domEventData ) { const tabPressed = domEventData.keyCode == keyCodes.tab; // Act only on TAB & SHIFT-TAB - Do not override native CTRL+TAB handler. if ( !tabPressed || domEventData.ctrlKey ) { return; } const editor = this.editor; const selection = editor.model.document.selection; const table = getParentTable( selection.getFirstPosition() ); if ( !table ) { return; } domEventData.preventDefault(); domEventData.stopPropagation(); const tableCell = selection.focus.parent; const tableRow = tableCell.parent; const currentRowIndex = table.getChildIndex( tableRow ); const currentCellIndex = tableRow.getChildIndex( tableCell ); const isForward = !domEventData.shiftKey; const isFirstCellInRow = currentCellIndex === 0; if ( !isForward && isFirstCellInRow && currentRowIndex === 0 ) { // It's the first cell of a table - don't do anything (stay in current position). return; } const isLastCellInRow = currentCellIndex === tableRow.childCount - 1; const isLastRow = currentRowIndex === table.childCount - 1; if ( isForward && isLastRow && isLastCellInRow ) { editor.plugins.get( TableUtils ).insertRows( table, { at: table.childCount } ); } let cellToFocus; // Move to first cell in next row. if ( isForward && isLastCellInRow ) { const nextRow = table.getChild( currentRowIndex + 1 ); cellToFocus = nextRow.getChild( 0 ); } // Move to last cell in a previous row. else if ( !isForward && isFirstCellInRow ) { const previousRow = table.getChild( currentRowIndex - 1 ); cellToFocus = previousRow.getChild( previousRow.childCount - 1 ); } // Move to next/previous cell. else { cellToFocus = tableRow.getChild( currentCellIndex + ( isForward ? 1 : -1 ) ); } editor.model.change( writer => { writer.setSelection( Range.createIn( cellToFocus ) ); } ); } } function injectTablePostFixer( model, tableUtils ) { model.document.registerPostFixer( writer => tablePostFixer( writer, model, tableUtils ) ); } function tablePostFixer( writer, model, tableUtils ) { const changes = model.document.differ.getChanges(); let wasFixed = false; const tableRowsOfRemovedCells = []; for ( const entry of changes ) { if ( entry.type == 'insert' ) { let table; if ( entry.name == 'table' ) { table = entry.position.nodeAfter; } if ( entry.name == 'tableRow' ) { const tableRow = entry.position.nodeAfter; table = tableRow.parent; } if ( table ) { wasFixed = fixTableOnInsert( tableUtils, table, writer, wasFixed ); } } if ( entry.type == 'remove' && entry.name == 'tableCell' ) { const tableRow = entry.position.parent; tableRowsOfRemovedCells.push( tableRow ); } } wasFixed = fixTableOnRemoveCells( tableRowsOfRemovedCells, writer ) || wasFixed; return wasFixed; } function getRowsLengths( table ) { const lengths = {}; const headingRows = parseInt( table.getAttribute( 'headingRows' ) || 0 ); const cellsToTrim = []; for ( const data of new TableWalker( table ) ) { const row = data.row; const column = data.column; const colspan = data.colspan; const rowspan = data.rowspan; if ( !lengths[ row ] ) { // Le first row - the first column will be current width including rowspanned cells. lengths[ row ] = column; } lengths[ row ] += colspan; const maxRows = table.childCount; if ( headingRows > row ) { if ( row + rowspan > headingRows ) { const newRowspan = headingRows - row; cellsToTrim.push( { cell: data.cell, rowspan: newRowspan } ); } } else { if ( row + rowspan + headingRows > maxRows ) { const newRowspan = maxRows - row - headingRows + 1; cellsToTrim.push( { cell: data.cell, rowspan: newRowspan } ); } } } return { lengths, cellsToTrim }; } function fixTableOnInsert( tableUtils, table, writer, wasFixed ) { const tableSize = tableUtils.getColumns( table ); const { lengths, cellsToTrim } = getRowsLengths( table ); const isValid = Object.values( lengths ).every( length => length === tableSize ); if ( !isValid ) { const maxColumns = Object.values( lengths ).reduce( ( prev, current ) => current > prev ? current : prev, 0 ); for ( const [ rowIndex, size ] of Object.entries( lengths ) ) { const columnsToInsert = maxColumns - size; if ( columnsToInsert ) { for ( let i = 0; i < columnsToInsert; i++ ) { writer.insertElement( 'tableCell', Position.createAt( table.getChild( rowIndex ), 'end' ) ); } wasFixed = true; } } } if ( cellsToTrim.length ) { for ( const data of cellsToTrim ) { updateNumericAttribute( 'rowspan', data.rowspan, data.cell, writer, 1 ); } } return wasFixed; } function fixTableOnRemoveCells( tableRowsToCheck, writer ) { let wasFixed = false; if ( !tableRowsToCheck.length ) { return wasFixed; } const indexes = tableRowsToCheck.map( tableRow => tableRow.index ); const table = tableRowsToCheck[ 0 ].parent; const allIndexes = [ ...table.getChildren() ].map( tableRow => tableRow.index ); const other = allIndexes.filter( index => !indexes.includes( index ) ); const { lengths } = getRowsLengths( table ); const areSame = indexes.every( index => lengths[ index ] === lengths[ 0 ] ); if ( areSame ) { const properLength = lengths[ 0 ]; other.map( index => { let length = lengths[ index ]; const tableRow = table.getChild( index ); while ( length > properLength ) { const tableCell = tableRow.getChild( tableRow.childCount - 1 ); const howMany = length - properLength; const colspan = parseInt( tableCell.getAttribute( 'colspan' ) || 1 ); if ( colspan > howMany ) { writer.setAttribute( 'colspan', colspan - howMany, tableCell ); length = properLength; } else { writer.remove( tableCell ); length -= colspan; } length = properLength - 10; wasFixed = true; } } ); } return wasFixed; }