8
0

utils.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  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. const WIDGET_TABLE_CELL_CLASS = 'ck-editor__editable ck-editor__nested-editable';
  15. /**
  16. * Returns a model representation of a table shorthand notation:
  17. *
  18. * modelTable( [
  19. * [ '00' ] // first row
  20. * [ '10' ] // second row
  21. * ] );
  22. *
  23. * will output:
  24. *
  25. * '<table><tableRow><tableCell>00</tableCell></tableRow><tableRow><tableCell>10</tableCell></tableRow></table>'
  26. *
  27. * Each table row passed in `tableData` array is represented as an array of strings or objects. A string defines text contents of a cell.
  28. *
  29. * Passing an object allows to pass additional table cell attributes:
  30. *
  31. * const tableCellData = {
  32. * colspan: 2,
  33. * rowspan: 4,
  34. * contents: 'foo' // text contents of a cell
  35. * };
  36. *
  37. * @param {Array.<Array.<String>|Object>} tableData
  38. * @param {Object} [attributes] Optional table attributes: `headingRows` and `headingColumns`.
  39. *
  40. * @returns {String}
  41. */
  42. export function modelTable( tableData, attributes ) {
  43. const tableRows = makeRows( tableData, {
  44. cellElement: 'tableCell',
  45. rowElement: 'tableRow',
  46. headingElement: 'tableCell',
  47. wrappingElement: 'paragraph',
  48. enforceWrapping: true
  49. } );
  50. return `<table${ formatAttributes( attributes ) }>${ tableRows }</table>`;
  51. }
  52. /**
  53. * Returns a view representation of a table shorthand notation:
  54. *
  55. * viewTable( [
  56. * [ '00', '01' ] // first row
  57. * [ '10', '11' ] // second row
  58. * ] );
  59. *
  60. * will output:
  61. *
  62. * '<table><tbody><tr><td>00</td><td>01<td></tr><tr><td>10</td><td>11<td></tr></tbody></table>'
  63. *
  64. * Each table row passed in `tableData` array is represented as an array of strings or objects. A string defines text contents of a cell.
  65. *
  66. * Passing an object allows to pass additional table cell attributes:
  67. *
  68. * const tableCellData = {
  69. * colspan: 2,
  70. * rowspan: 4,
  71. * isHeading: true, // will render table cell as `<th>` element
  72. * contents: 'foo' // text contents of a cell
  73. * };
  74. *
  75. * @param {Array.<Array.<String|Object>>} tableData The table data array.
  76. * @param {Object} [attributes] Optional table attributes: `headingRows` and `headingColumns` - passing them will properly render rows
  77. * in `<tbody>` or `<thead>` sections.
  78. *
  79. * @returns {String}
  80. */
  81. export function viewTable( tableData, attributes = {} ) {
  82. const headingRows = attributes.headingRows || 0;
  83. const asWidget = !!attributes.asWidget;
  84. const thead = headingRows > 0 ? `<thead>${ makeRows( tableData.slice( 0, headingRows ), {
  85. cellElement: 'th',
  86. rowElement: 'tr',
  87. headingElement: 'th',
  88. wrappingElement: asWidget ? 'span' : 'p',
  89. enforceWrapping: asWidget,
  90. asWidget
  91. } ) }</thead>` : '';
  92. const tbody = tableData.length > headingRows ?
  93. `<tbody>${ makeRows( tableData.slice( headingRows ), {
  94. cellElement: 'td',
  95. rowElement: 'tr',
  96. headingElement: 'th',
  97. wrappingElement: asWidget ? 'span' : 'p',
  98. enforceWrapping: asWidget,
  99. asWidget
  100. } ) }</tbody>` : '';
  101. const figureAttributes = asWidget ?
  102. 'class="ck-widget ck-widget_with-selection-handler table" contenteditable="false"' : 'class="table"';
  103. const widgetHandler = '<div class="ck ck-widget__selection-handler"></div>';
  104. return `<figure ${ figureAttributes }>${ asWidget ? widgetHandler : '' }<table>${ thead }${ tbody }</table></figure>`;
  105. }
  106. /**
  107. * Formats model or view table - useful for chai assertions debugging.
  108. *
  109. * @param {String} tableString
  110. * @returns {String}
  111. */
  112. export function formatTable( tableString ) {
  113. return tableString
  114. .replace( /<tableRow>/g, '\n<tableRow>\n ' )
  115. .replace( /<thead>/g, '\n<thead>\n ' )
  116. .replace( /<tbody>/g, '\n<tbody>\n ' )
  117. .replace( /<tr>/g, '\n<tr>\n ' )
  118. .replace( /<\/tableRow>/g, '\n</tableRow>' )
  119. .replace( /<\/thead>/g, '\n</thead>' )
  120. .replace( /<\/tbody>/g, '\n</tbody>' )
  121. .replace( /<\/tr>/g, '\n</tr>' )
  122. .replace( /<\/table>/g, '\n</table>' )
  123. .replace( /<\/figure>/g, '\n</figure>' );
  124. }
  125. /**
  126. * Returns formatted model table string.
  127. *
  128. * @param {Array.<String>} tableData
  129. * @param {Object} [attributes]
  130. * @returns {String}
  131. */
  132. export function formattedModelTable( tableData, attributes ) {
  133. const tableString = modelTable( tableData, attributes );
  134. return formatTable( tableString );
  135. }
  136. /**
  137. * Returns formatted view table string.
  138. *
  139. * @param {Array.<String>} tableData
  140. * @param {Object} [attributes]
  141. * @returns {String}
  142. */
  143. export function formattedViewTable( tableData, attributes ) {
  144. return formatTable( viewTable( tableData, attributes ) );
  145. }
  146. export function defaultSchema( schema, registerParagraph = true ) {
  147. schema.register( 'table', {
  148. allowWhere: '$block',
  149. allowAttributes: [ 'headingRows', 'headingColumns' ],
  150. isLimit: true,
  151. isObject: true,
  152. isBlock: true
  153. } );
  154. schema.register( 'tableRow', {
  155. allowIn: 'table',
  156. isLimit: true
  157. } );
  158. schema.register( 'tableCell', {
  159. allowIn: 'tableRow',
  160. allowAttributes: [ 'colspan', 'rowspan' ],
  161. isLimit: true
  162. } );
  163. // Allow all $block content inside table cell.
  164. schema.extend( '$block', { allowIn: 'tableCell' } );
  165. // Disallow table in table.
  166. schema.addChildCheck( ( context, childDefinition ) => {
  167. if ( childDefinition.name == 'table' && Array.from( context.getNames() ).includes( 'table' ) ) {
  168. return false;
  169. }
  170. } );
  171. if ( registerParagraph ) {
  172. schema.register( 'paragraph', { inheritAllFrom: '$block' } );
  173. }
  174. // Styles
  175. schema.extend( 'tableCell', {
  176. allowAttributes: [ 'border' ]
  177. } );
  178. }
  179. export function defaultConversion( conversion, asWidget = false ) {
  180. conversion.elementToElement( { model: 'paragraph', view: 'p' } );
  181. // Table conversion.
  182. conversion.for( 'upcast' ).add( upcastTable() );
  183. conversion.for( 'downcast' ).add( downcastInsertTable( { asWidget } ) );
  184. // Table row conversion.
  185. conversion.for( 'upcast' ).elementToElement( { model: 'tableRow', view: 'tr' } );
  186. conversion.for( 'downcast' ).add( downcastInsertRow( { asWidget } ) );
  187. conversion.for( 'downcast' ).add( downcastRemoveRow( { asWidget } ) );
  188. // Table cell conversion.
  189. conversion.for( 'upcast' ).add( upcastTableCell( 'td' ) );
  190. conversion.for( 'upcast' ).add( upcastTableCell( 'th' ) );
  191. conversion.for( 'downcast' ).add( downcastInsertCell( { asWidget } ) );
  192. // Table attributes conversion.
  193. conversion.attributeToAttribute( { model: 'colspan', view: 'colspan' } );
  194. conversion.attributeToAttribute( { model: 'rowspan', view: 'rowspan' } );
  195. conversion.for( 'downcast' ).add( downcastTableHeadingColumnsChange( { asWidget } ) );
  196. conversion.for( 'downcast' ).add( downcastTableHeadingRowsChange( { asWidget } ) );
  197. // Styles
  198. conversion.for( 'upcast' ).attributeToAttribute( {
  199. view: {
  200. name: 'td',
  201. styles: {
  202. border: /[\s\S]+/
  203. }
  204. },
  205. model: {
  206. key: 'border',
  207. value: viewElement => viewElement.getStyle( 'border' )
  208. }
  209. } );
  210. }
  211. // Formats table cell attributes
  212. //
  213. // @param {Object} attributes Attributes of a cell.
  214. function formatAttributes( attributes ) {
  215. let attributesString = '';
  216. if ( attributes ) {
  217. const entries = Object.entries( attributes );
  218. if ( entries.length ) {
  219. attributesString = ' ' + entries.map( entry => `${ entry[ 0 ] }="${ entry[ 1 ] }"` ).join( ' ' );
  220. }
  221. }
  222. return attributesString;
  223. }
  224. // Formats passed table data to a set of table rows.
  225. function makeRows( tableData, options ) {
  226. const { cellElement, rowElement, headingElement, wrappingElement, enforceWrapping, asWidget } = options;
  227. return tableData
  228. .reduce( ( previousRowsString, tableRow ) => {
  229. const tableRowString = tableRow.reduce( ( tableRowString, tableCellData ) => {
  230. const isObject = typeof tableCellData === 'object';
  231. let contents = isObject ? tableCellData.contents : tableCellData;
  232. let resultingCellElement = cellElement;
  233. if ( isObject ) {
  234. if ( tableCellData.isHeading ) {
  235. resultingCellElement = headingElement;
  236. }
  237. delete tableCellData.contents;
  238. delete tableCellData.isHeading;
  239. }
  240. const attributes = isObject ? tableCellData : {};
  241. if ( asWidget ) {
  242. attributes.class = WIDGET_TABLE_CELL_CLASS + ( attributes.class ? ` ${ attributes.class }` : '' );
  243. attributes.contenteditable = 'true';
  244. }
  245. if ( !( contents.replace( '[', '' ).replace( ']', '' ).startsWith( '<' ) ) && enforceWrapping ) {
  246. contents = `<${ wrappingElement }>${ contents }</${ wrappingElement }>`;
  247. }
  248. const formattedAttributes = formatAttributes( attributes );
  249. tableRowString += `<${ resultingCellElement }${ formattedAttributes }>${ contents }</${ resultingCellElement }>`;
  250. return tableRowString;
  251. }, '' );
  252. return `${ previousRowsString }<${ rowElement }>${ tableRowString }</${ rowElement }>`;
  253. }, '' );
  254. }