8
0

utils.js 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. import {
  6. downcastInsertCell,
  7. downcastInsertRow,
  8. downcastInsertTable,
  9. downcastRemoveRow,
  10. downcastTableHeadingColumnsChange,
  11. downcastTableHeadingRowsChange
  12. } from '../../src/converters/downcast';
  13. import upcastTable, { upcastTableCell } from '../../src/converters/upcasttable';
  14. /**
  15. * Returns a model representation of a table shorthand notation:
  16. *
  17. * modelTable( [
  18. * [ '00' ] // first row
  19. * [ '10' ] // second row
  20. * ] );
  21. *
  22. * will output:
  23. *
  24. * '<table><tableRow><tableCell>00</tableCell></tableRow><tableRow><tableCell>10</tableCell></tableRow></table>'
  25. *
  26. * Each table row passed in `tableData` array is represented as an array of strings or objects. A string defines text contents of a cell.
  27. *
  28. * Passing an object allows to pass additional table cell attributes:
  29. *
  30. * const tableCellData = {
  31. * colspan: 2,
  32. * rowspan: 4,
  33. * contents: 'foo' // text contents of a cell
  34. * };
  35. *
  36. * @param {Array.<String>} tableData
  37. * @param {Object} [attributes] Optional table attributes: `headingRows` and `headingColumns`.
  38. *
  39. * @returns {String}
  40. */
  41. export function modelTable( tableData, attributes ) {
  42. const tableRows = makeRows( tableData, {
  43. cellElement: 'tableCell',
  44. rowElement: 'tableRow',
  45. headingElement: 'tableCell',
  46. wrappingElement: 'paragraph',
  47. enforceWrapping: true
  48. } );
  49. return `<table${ formatAttributes( attributes ) }>${ tableRows }</table>`;
  50. }
  51. /**
  52. * Returns a view representation of a table shorthand notation:
  53. *
  54. * viewTable( [
  55. * [ '00', '01' ] // first row
  56. * [ '10', '11' ] // second row
  57. * ] );
  58. *
  59. * will output:
  60. *
  61. * '<table><tbody><tr><td>00</td><td>01<td></tr><tr><td>10</td><td>11<td></tr></tbody></table>'
  62. *
  63. * Each table row passed in `tableData` array is represented as an array of strings or objects. A string defines text contents of a cell.
  64. *
  65. * Passing an object allows to pass additional table cell attributes:
  66. *
  67. * const tableCellData = {
  68. * colspan: 2,
  69. * rowspan: 4,
  70. * isHeading: true, // will render table cell as `<th>` element
  71. * contents: 'foo' // text contents of a cell
  72. * };
  73. *
  74. * @param {Array.<Array.<String|Object>>} tableData The table data array.
  75. * @param {Object} [attributes] Optional table attributes: `headingRows` and `headingColumns` - passing them will properly render rows
  76. * in `<tbody>` or `<thead>` sections.
  77. *
  78. * @returns {String}
  79. */
  80. export function viewTable( tableData, attributes = {} ) {
  81. const headingRows = attributes.headingRows || 0;
  82. const thead = headingRows > 0 ? `<thead>${ makeRows( tableData.slice( 0, headingRows ), {
  83. cellElement: 'th',
  84. rowElement: 'tr',
  85. headingElement: 'th',
  86. wrappingElement: 'p'
  87. } ) }</thead>` : '';
  88. const tbody = tableData.length > headingRows ?
  89. `<tbody>${ makeRows( tableData.slice( headingRows ), {
  90. cellElement: 'td',
  91. rowElement: 'tr',
  92. headingElement: 'th',
  93. wrappingElement: 'p'
  94. } ) }</tbody>` : '';
  95. return `<figure class="table"><table>${ thead }${ tbody }</table></figure>`;
  96. }
  97. /**
  98. * Formats model or view table - useful for chai assertions debugging.
  99. *
  100. * @param {String} tableString
  101. * @returns {String}
  102. */
  103. export function formatTable( tableString ) {
  104. return tableString
  105. .replace( /<tableRow>/g, '\n<tableRow>\n ' )
  106. .replace( /<thead>/g, '\n<thead>\n ' )
  107. .replace( /<tbody>/g, '\n<tbody>\n ' )
  108. .replace( /<tr>/g, '\n<tr>\n ' )
  109. .replace( /<\/tableRow>/g, '\n</tableRow>' )
  110. .replace( /<\/thead>/g, '\n</thead>' )
  111. .replace( /<\/tbody>/g, '\n</tbody>' )
  112. .replace( /<\/tr>/g, '\n</tr>' )
  113. .replace( /<\/table>/g, '\n</table>' )
  114. .replace( /<\/figure>/g, '\n</figure>' );
  115. }
  116. /**
  117. * Returns formatted model table string.
  118. *
  119. * @param {Array.<String>} tableData
  120. * @param {Object} [attributes]
  121. * @returns {String}
  122. */
  123. export function formattedModelTable( tableData, attributes ) {
  124. const tableString = modelTable( tableData, attributes );
  125. return formatTable( tableString );
  126. }
  127. /**
  128. * Returns formatted view table string.
  129. *
  130. * @param {Array.<String>} tableData
  131. * @param {Object} [attributes]
  132. * @returns {String}
  133. */
  134. export function formattedViewTable( tableData, attributes ) {
  135. return formatTable( viewTable( tableData, attributes ) );
  136. }
  137. export function defaultSchema( schema ) {
  138. schema.register( 'table', {
  139. allowWhere: '$block',
  140. allowAttributes: [ 'headingRows', 'headingColumns' ],
  141. isObject: true
  142. } );
  143. schema.register( 'tableRow', { allowIn: 'table' } );
  144. schema.register( 'tableCell', {
  145. allowIn: 'tableRow',
  146. allowContentOf: '$block',
  147. allowAttributes: [ 'colspan', 'rowspan' ],
  148. isLimit: true
  149. } );
  150. schema.extend( '$block', { allowIn: 'tableCell' } );
  151. schema.register( 'paragraph', { inheritAllFrom: '$block' } );
  152. }
  153. export function defaultConversion( conversion, asWidget = false ) {
  154. conversion.elementToElement( { model: 'paragraph', view: 'p' } );
  155. // Table conversion.
  156. conversion.for( 'upcast' ).add( upcastTable() );
  157. conversion.for( 'downcast' ).add( downcastInsertTable( { asWidget } ) );
  158. // Table row conversion.
  159. conversion.for( 'downcast' ).add( downcastInsertRow( { asWidget } ) );
  160. conversion.for( 'downcast' ).add( downcastRemoveRow( { asWidget } ) );
  161. // Table cell conversion.
  162. conversion.for( 'downcast' ).add( downcastInsertCell( { asWidget } ) );
  163. conversion.for( 'upcast' ).add( upcastTableCell() );
  164. // conversion.for( 'upcast' ).add( upcastElementToElement( { model: 'tableCell', view: 'td' } ) );
  165. // conversion.for( 'upcast' ).add( upcastElementToElement( { model: 'tableCell', view: 'th' } ) );
  166. // Table attributes conversion.
  167. conversion.attributeToAttribute( { model: 'colspan', view: 'colspan' } );
  168. conversion.attributeToAttribute( { model: 'rowspan', view: 'rowspan' } );
  169. conversion.for( 'downcast' ).add( downcastTableHeadingColumnsChange( { asWidget } ) );
  170. conversion.for( 'downcast' ).add( downcastTableHeadingRowsChange( { asWidget } ) );
  171. }
  172. // Formats table cell attributes
  173. //
  174. // @param {Object} attributes Attributes of a cell.
  175. function formatAttributes( attributes ) {
  176. let attributesString = '';
  177. if ( attributes ) {
  178. const entries = Object.entries( attributes );
  179. if ( entries.length ) {
  180. attributesString = ' ' + entries.map( entry => `${ entry[ 0 ] }="${ entry[ 1 ] }"` ).join( ' ' );
  181. }
  182. }
  183. return attributesString;
  184. }
  185. // Formats passed table data to a set of table rows.
  186. function makeRows( tableData, options ) {
  187. const { cellElement, rowElement, headingElement, wrappingElement, enforceWrapping } = options;
  188. return tableData
  189. .reduce( ( previousRowsString, tableRow ) => {
  190. const tableRowString = tableRow.reduce( ( tableRowString, tableCellData ) => {
  191. let contents = tableCellData;
  192. const isObject = typeof tableCellData === 'object';
  193. let resultingCellElement = cellElement;
  194. if ( isObject ) {
  195. contents = tableCellData.contents;
  196. // TODO: check...
  197. if ( tableCellData.isHeading ) {
  198. resultingCellElement = headingElement;
  199. }
  200. delete tableCellData.contents;
  201. delete tableCellData.isHeading;
  202. }
  203. if ( !( contents.replace( '[', '' ).replace( ']', '' ).startsWith( '<' ) ) && enforceWrapping ) {
  204. contents = `<${ wrappingElement }>${ contents }</${ wrappingElement }>`;
  205. }
  206. const formattedAttributes = formatAttributes( isObject ? tableCellData : '' );
  207. tableRowString += `<${ resultingCellElement }${ formattedAttributes }>${ contents }</${ resultingCellElement }>`;
  208. return tableRowString;
  209. }, '' );
  210. return `${ previousRowsString }<${ rowElement }>${ tableRowString }</${ rowElement }>`;
  211. }, '' );
  212. }