| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283 |
- /**
- * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
- import { upcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/upcast-converters';
- import {
- downcastInsertCell,
- downcastInsertRow,
- downcastInsertTable,
- downcastRemoveRow,
- downcastTableHeadingColumnsChange,
- downcastTableHeadingRowsChange
- } from '../../src/converters/downcast';
- import upcastTable, { upcastTableCell } from '../../src/converters/upcasttable';
- /**
- * Returns a model representation of a table shorthand notation:
- *
- * modelTable( [
- * [ '00' ] // first row
- * [ '10' ] // second row
- * ] );
- *
- * will output:
- *
- * '<table><tableRow><tableCell>00</tableCell></tableRow><tableRow><tableCell>10</tableCell></tableRow></table>'
- *
- * Each table row passed in `tableData` array is represented as an array of strings or objects. A string defines text contents of a cell.
- *
- * Passing an object allows to pass additional table cell attributes:
- *
- * const tableCellData = {
- * colspan: 2,
- * rowspan: 4,
- * contents: 'foo' // text contents of a cell
- * };
- *
- * @param {Array.<Array.<String>|Object>} tableData
- * @param {Object} [attributes] Optional table attributes: `headingRows` and `headingColumns`.
- *
- * @returns {String}
- */
- export function modelTable( tableData, attributes ) {
- const tableRows = makeRows( tableData, {
- cellElement: 'tableCell',
- rowElement: 'tableRow',
- headingElement: 'tableCell',
- wrappingElement: 'paragraph',
- enforceWrapping: true
- } );
- return `<table${ formatAttributes( attributes ) }>${ tableRows }</table>`;
- }
- /**
- * Returns a view representation of a table shorthand notation:
- *
- * viewTable( [
- * [ '00', '01' ] // first row
- * [ '10', '11' ] // second row
- * ] );
- *
- * will output:
- *
- * '<table><tbody><tr><td>00</td><td>01<td></tr><tr><td>10</td><td>11<td></tr></tbody></table>'
- *
- * Each table row passed in `tableData` array is represented as an array of strings or objects. A string defines text contents of a cell.
- *
- * Passing an object allows to pass additional table cell attributes:
- *
- * const tableCellData = {
- * colspan: 2,
- * rowspan: 4,
- * isHeading: true, // will render table cell as `<th>` element
- * contents: 'foo' // text contents of a cell
- * };
- *
- * @param {Array.<Array.<String|Object>>} tableData The table data array.
- * @param {Object} [attributes] Optional table attributes: `headingRows` and `headingColumns` - passing them will properly render rows
- * in `<tbody>` or `<thead>` sections.
- *
- * @returns {String}
- */
- export function viewTable( tableData, attributes = {} ) {
- const headingRows = attributes.headingRows || 0;
- const asWidget = !!attributes.asWidget;
- const thead = headingRows > 0 ? `<thead>${ makeRows( tableData.slice( 0, headingRows ), {
- cellElement: 'th',
- rowElement: 'tr',
- headingElement: 'th',
- wrappingElement: asWidget ? 'span' : 'p',
- enforceWrapping: asWidget,
- asWidget
- } ) }</thead>` : '';
- const tbody = tableData.length > headingRows ?
- `<tbody>${ makeRows( tableData.slice( headingRows ), {
- cellElement: 'td',
- rowElement: 'tr',
- headingElement: 'th',
- wrappingElement: asWidget ? 'span' : 'p',
- enforceWrapping: asWidget,
- asWidget
- } ) }</tbody>` : '';
- const figureAttributes = asWidget ? 'class="ck-widget ck-widget_selectable table" contenteditable="false"' : 'class="table"';
- const widgetHandler = '<div class="ck ck-widget__selection-handler"></div>';
- return `<figure ${ figureAttributes }>${ asWidget ? widgetHandler : '' }<table>${ thead }${ tbody }</table></figure>`;
- }
- /**
- * Formats model or view table - useful for chai assertions debugging.
- *
- * @param {String} tableString
- * @returns {String}
- */
- export function formatTable( tableString ) {
- return tableString
- .replace( /<tableRow>/g, '\n<tableRow>\n ' )
- .replace( /<thead>/g, '\n<thead>\n ' )
- .replace( /<tbody>/g, '\n<tbody>\n ' )
- .replace( /<tr>/g, '\n<tr>\n ' )
- .replace( /<\/tableRow>/g, '\n</tableRow>' )
- .replace( /<\/thead>/g, '\n</thead>' )
- .replace( /<\/tbody>/g, '\n</tbody>' )
- .replace( /<\/tr>/g, '\n</tr>' )
- .replace( /<\/table>/g, '\n</table>' )
- .replace( /<\/figure>/g, '\n</figure>' );
- }
- /**
- * Returns formatted model table string.
- *
- * @param {Array.<String>} tableData
- * @param {Object} [attributes]
- * @returns {String}
- */
- export function formattedModelTable( tableData, attributes ) {
- const tableString = modelTable( tableData, attributes );
- return formatTable( tableString );
- }
- /**
- * Returns formatted view table string.
- *
- * @param {Array.<String>} tableData
- * @param {Object} [attributes]
- * @returns {String}
- */
- export function formattedViewTable( tableData, attributes ) {
- return formatTable( viewTable( tableData, attributes ) );
- }
- export function defaultSchema( schema, registerParagraph = true ) {
- schema.register( 'table', {
- allowWhere: '$block',
- allowAttributes: [ 'headingRows', 'headingColumns' ],
- isLimit: true,
- isObject: true
- } );
- schema.register( 'tableRow', {
- allowIn: 'table',
- isLimit: true
- } );
- schema.register( 'tableCell', {
- allowIn: 'tableRow',
- allowAttributes: [ 'colspan', 'rowspan' ],
- isLimit: true
- } );
- // Allow all $block content inside table cell.
- schema.extend( '$block', { allowIn: 'tableCell' } );
- // Disallow table in table.
- schema.addChildCheck( ( context, childDefinition ) => {
- if ( childDefinition.name == 'table' && Array.from( context.getNames() ).includes( 'table' ) ) {
- return false;
- }
- } );
- // Disallow image in table.
- schema.addChildCheck( ( context, childDefinition ) => {
- if ( childDefinition.name == 'image' && Array.from( context.getNames() ).includes( 'table' ) ) {
- return false;
- }
- } );
- if ( registerParagraph ) {
- schema.register( 'paragraph', { inheritAllFrom: '$block' } );
- }
- }
- export function defaultConversion( conversion, asWidget = false ) {
- conversion.elementToElement( { model: 'paragraph', view: 'p' } );
- // Table conversion.
- conversion.for( 'upcast' ).add( upcastTable() );
- conversion.for( 'downcast' ).add( downcastInsertTable( { asWidget } ) );
- // Table row conversion.
- conversion.for( 'upcast' ).add( upcastElementToElement( { model: 'tableRow', view: 'tr' } ) );
- conversion.for( 'downcast' ).add( downcastInsertRow( { asWidget } ) );
- conversion.for( 'downcast' ).add( downcastRemoveRow( { asWidget } ) );
- // Table cell conversion.
- conversion.for( 'upcast' ).add( upcastTableCell( 'td' ) );
- conversion.for( 'upcast' ).add( upcastTableCell( 'th' ) );
- conversion.for( 'downcast' ).add( downcastInsertCell( { asWidget } ) );
- // Table attributes conversion.
- conversion.attributeToAttribute( { model: 'colspan', view: 'colspan' } );
- conversion.attributeToAttribute( { model: 'rowspan', view: 'rowspan' } );
- conversion.for( 'downcast' ).add( downcastTableHeadingColumnsChange( { asWidget } ) );
- conversion.for( 'downcast' ).add( downcastTableHeadingRowsChange( { asWidget } ) );
- }
- // Formats table cell attributes
- //
- // @param {Object} attributes Attributes of a cell.
- function formatAttributes( attributes ) {
- let attributesString = '';
- if ( attributes ) {
- const entries = Object.entries( attributes );
- if ( entries.length ) {
- attributesString = ' ' + entries.map( entry => `${ entry[ 0 ] }="${ entry[ 1 ] }"` ).join( ' ' );
- }
- }
- return attributesString;
- }
- // Formats passed table data to a set of table rows.
- function makeRows( tableData, options ) {
- const { cellElement, rowElement, headingElement, wrappingElement, enforceWrapping, asWidget } = options;
- return tableData
- .reduce( ( previousRowsString, tableRow ) => {
- const tableRowString = tableRow.reduce( ( tableRowString, tableCellData ) => {
- const isObject = typeof tableCellData === 'object';
- let contents = isObject ? tableCellData.contents : tableCellData;
- let resultingCellElement = cellElement;
- if ( isObject ) {
- if ( tableCellData.isHeading ) {
- resultingCellElement = headingElement;
- }
- delete tableCellData.contents;
- delete tableCellData.isHeading;
- }
- const attributes = isObject ? tableCellData : {};
- if ( asWidget ) {
- attributes.class = 'ck-editor__editable ck-editor__nested-editable';
- attributes.contenteditable = 'true';
- }
- if ( !( contents.replace( '[', '' ).replace( ']', '' ).startsWith( '<' ) ) && enforceWrapping ) {
- contents = `<${ wrappingElement }>${ contents }</${ wrappingElement }>`;
- }
- const formattedAttributes = formatAttributes( attributes );
- tableRowString += `<${ resultingCellElement }${ formattedAttributes }>${ contents }</${ resultingCellElement }>`;
- return tableRowString;
- }, '' );
- return `${ previousRowsString }<${ rowElement }>${ tableRowString }</${ rowElement }>`;
- }, '' );
- }
|