downcast.js 50 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
  6. import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  7. import UndoEditing from '@ckeditor/ckeditor5-undo/src/undoediting';
  8. import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
  9. import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
  10. import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  11. import { assertEqualMarkup } from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
  12. import { modelTable, viewTable } from '../_utils/utils';
  13. import TableEditing from '../../src/tableediting';
  14. describe( 'downcast converters', () => {
  15. let editor, model, root, view;
  16. testUtils.createSinonSandbox();
  17. beforeEach( async () => {
  18. editor = await VirtualTestEditor.create( { plugins: [ Paragraph, TableEditing, UndoEditing ] } );
  19. model = editor.model;
  20. root = model.document.getRoot( 'main' );
  21. view = editor.editing.view;
  22. } );
  23. afterEach( () => {
  24. return editor.destroy();
  25. } );
  26. describe( 'downcastInsertTable()', () => {
  27. describe( 'editing pipeline', () => {
  28. it( 'should create table as a widget', () => {
  29. setModelData( model, modelTable( [ [ '' ] ] ) );
  30. assertEqualMarkup( getViewData( view, { withoutSelection: true } ),
  31. '<figure class="ck-widget ck-widget_with-selection-handle table" contenteditable="false">' +
  32. '<div class="ck ck-widget__selection-handle"></div>' +
  33. '<table>' +
  34. '<tbody>' +
  35. '<tr>' +
  36. '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  37. '<span style="display:inline-block"></span>' +
  38. '</td>' +
  39. '</tr>' +
  40. '</tbody>' +
  41. '</table>' +
  42. '</figure>'
  43. );
  44. } );
  45. } );
  46. describe( 'data pipeline', () => {
  47. it( 'should create table with tbody and thead', () => {
  48. setModelData( model, modelTable( [
  49. [ '00' ],
  50. [ '10' ]
  51. ], { headingRows: 1 } ) );
  52. assertEqualMarkup( editor.getData(),
  53. '<figure class="table">' +
  54. '<table>' +
  55. '<thead>' +
  56. '<tr><th>00</th></tr>' +
  57. '</thead>' +
  58. '<tbody>' +
  59. '<tr><td>10</td></tr>' +
  60. '</tbody>' +
  61. '</table>' +
  62. '</figure>'
  63. );
  64. } );
  65. it( 'should create table with thead', () => {
  66. setModelData( model, modelTable( [
  67. [ '00' ],
  68. [ '10' ]
  69. ], { headingRows: 2 } ) );
  70. assertEqualMarkup( editor.getData(),
  71. '<figure class="table">' +
  72. '<table>' +
  73. '<thead>' +
  74. '<tr><th>00</th></tr>' +
  75. '<tr><th>10</th></tr>' +
  76. '</thead>' +
  77. '</table>' +
  78. '</figure>'
  79. );
  80. } );
  81. it( 'should create table with heading columns and rows', () => {
  82. setModelData( model, modelTable( [
  83. [ '00', '01', '02', '03' ],
  84. [ '10', '11', '12', '13' ]
  85. ], { headingColumns: 3, headingRows: 1 } ) );
  86. assertEqualMarkup( editor.getData(),
  87. '<figure class="table">' +
  88. '<table>' +
  89. '<thead>' +
  90. '<tr><th>00</th><th>01</th><th>02</th><th>03</th></tr>' +
  91. '</thead>' +
  92. '<tbody>' +
  93. '<tr><th>10</th><th>11</th><th>12</th><td>13</td></tr>' +
  94. '</tbody>' +
  95. '</table>' +
  96. '</figure>'
  97. );
  98. } );
  99. it( 'should create table with block content', () => {
  100. setModelData( model, modelTable( [
  101. [ '<paragraph>00</paragraph><paragraph>foo</paragraph>', '01' ]
  102. ] ) );
  103. assertEqualMarkup( editor.getData(),
  104. '<figure class="table">' +
  105. '<table>' +
  106. '<tbody>' +
  107. '<tr>' +
  108. '<td><p>00</p><p>foo</p></td>' +
  109. '<td>01</td>' +
  110. '</tr>' +
  111. '</tbody>' +
  112. '</table>' +
  113. '</figure>'
  114. );
  115. } );
  116. it( 'should create table with block content (attribute on paragraph)', () => {
  117. editor.conversion.attributeToAttribute(
  118. {
  119. model: { key: 'alignment', values: [ 'right', 'center', 'justify' ] },
  120. view: {
  121. right: { key: 'style', value: { 'text-align': 'right' } },
  122. center: { key: 'style', value: { 'text-align': 'center' } },
  123. justify: { key: 'style', value: { 'text-align': 'justify' } }
  124. }
  125. }
  126. );
  127. setModelData( model, modelTable( [
  128. [ '<paragraph alignment="right">00</paragraph>' ]
  129. ] ) );
  130. assertEqualMarkup( editor.getData(),
  131. '<figure class="table">' +
  132. '<table>' +
  133. '<tbody>' +
  134. '<tr>' +
  135. '<td><p style="text-align:right;">00</p></td>' +
  136. '</tr>' +
  137. '</tbody>' +
  138. '</table>' +
  139. '</figure>'
  140. );
  141. } );
  142. it( 'should be possible to overwrite', () => {
  143. editor.conversion.elementToElement( { model: 'tableRow', view: 'tr', converterPriority: 'high' } );
  144. editor.conversion.elementToElement( { model: 'tableCell', view: 'td', converterPriority: 'high' } );
  145. editor.conversion.for( 'downcast' ).add( dispatcher => {
  146. dispatcher.on( 'insert:table', ( evt, data, conversionApi ) => {
  147. conversionApi.consumable.consume( data.item, 'insert' );
  148. const tableElement = conversionApi.writer.createContainerElement( 'table', { foo: 'bar' } );
  149. const viewPosition = conversionApi.mapper.toViewPosition( data.range.start );
  150. conversionApi.mapper.bindElements( data.item, tableElement );
  151. conversionApi.writer.insert( viewPosition, tableElement );
  152. }, { priority: 'high' } );
  153. } );
  154. setModelData( model, modelTable( [ [ '' ] ] ) );
  155. assertEqualMarkup( editor.getData(),
  156. '<table foo="bar">' +
  157. '<tr><td><p>&nbsp;</p></td></tr>' +
  158. '</table>'
  159. );
  160. } );
  161. it( 'should re-create table on reinsert', () => {
  162. model.schema.register( 'wrapper', {
  163. allowWhere: '$block',
  164. allowContentOf: '$root'
  165. } );
  166. editor.conversion.elementToElement( { model: 'wrapper', view: 'div' } );
  167. setModelData( model, modelTable( [ [ '[]' ] ] ) );
  168. assertEqualMarkup( editor.getData(),
  169. '<figure class="table">' +
  170. '<table>' +
  171. '<tbody>' +
  172. '<tr><td>&nbsp;</td></tr>' +
  173. '</tbody>' +
  174. '</table>' +
  175. '</figure>'
  176. );
  177. model.change( writer => {
  178. const table = model.document.getRoot().getChild( 0 );
  179. const range = writer.createRange( writer.createPositionBefore( table ), writer.createPositionAfter( table ) );
  180. const wrapper = writer.createElement( 'wrapper' );
  181. writer.wrap( range, wrapper );
  182. } );
  183. assertEqualMarkup( editor.getData(),
  184. '<div>' +
  185. '<figure class="table">' +
  186. '<table>' +
  187. '<tbody>' +
  188. '<tr><td>&nbsp;</td></tr>' +
  189. '</tbody>' +
  190. '</table>' +
  191. '</figure>' +
  192. '</div>'
  193. );
  194. } );
  195. describe( 'headingColumns attribute', () => {
  196. it( 'should mark heading columns table cells', () => {
  197. setModelData( model, modelTable( [
  198. [ '00', '01', '02' ],
  199. [ '10', '11', '12' ]
  200. ], { headingColumns: 2 } ) );
  201. assertEqualMarkup( editor.getData(),
  202. '<figure class="table">' +
  203. '<table>' +
  204. '<tbody>' +
  205. '<tr><th>00</th><th>01</th><td>02</td></tr>' +
  206. '<tr><th>10</th><th>11</th><td>12</td></tr>' +
  207. '</tbody>' +
  208. '</table>' +
  209. '</figure>'
  210. );
  211. } );
  212. it( 'should mark heading columns table cells when one has colspan attribute', () => {
  213. setModelData( model, modelTable( [
  214. [ '00', '01', '02', '03' ],
  215. [ { colspan: 2, contents: '10' }, '12', '13' ]
  216. ], { headingColumns: 3 } ) );
  217. assertEqualMarkup( editor.getData(),
  218. '<figure class="table">' +
  219. '<table>' +
  220. '<tbody>' +
  221. '<tr><th>00</th><th>01</th><th>02</th><td>03</td></tr>' +
  222. '<tr><th colspan="2">10</th><th>12</th><td>13</td></tr>' +
  223. '</tbody>' +
  224. '</table>' +
  225. '</figure>'
  226. );
  227. } );
  228. it( 'should work with colspan and rowspan attributes on table cells', () => {
  229. // The table in this test looks like a table below:
  230. //
  231. // Row headings | Normal cells
  232. // |
  233. // +----+----+----+----+
  234. // | 00 | 01 | 02 | 03 |
  235. // | +----+ +----+
  236. // | | 11 | | 13 |
  237. // |----+----+ +----+
  238. // | 20 | | 23 |
  239. // | +----+----+
  240. // | | 32 | 33 |
  241. // +----+----+----+----+
  242. setModelData( model, modelTable( [
  243. [ { rowspan: 2, contents: '00' }, '01', { rowspan: 3, contents: '02' }, '03' ],
  244. [ '11', '13' ],
  245. [ { colspan: 2, rowspan: 2, contents: '20' }, '23' ],
  246. [ '32', '33' ]
  247. ], { headingColumns: 3 } ) );
  248. assertEqualMarkup( editor.getData(),
  249. '<figure class="table">' +
  250. '<table>' +
  251. '<tbody>' +
  252. '<tr><th rowspan="2">00</th><th>01</th><th rowspan="3">02</th><td>03</td></tr>' +
  253. '<tr><th>11</th><td>13</td></tr>' +
  254. '<tr><th rowspan="2" colspan="2">20</th><td>23</td></tr>' +
  255. '<tr><th>32</th><td>33</td></tr>' +
  256. '</tbody>' +
  257. '</table>' +
  258. '</figure>'
  259. );
  260. } );
  261. } );
  262. it( 'should create table with tbody', () => {
  263. setModelData( model, modelTable( [ [ '' ] ] ) );
  264. assertEqualMarkup( editor.getData(),
  265. '<figure class="table">' +
  266. '<table>' +
  267. '<tbody>' +
  268. '<tr><td>&nbsp;</td></tr>' +
  269. '</tbody>' +
  270. '</table>' +
  271. '</figure>'
  272. );
  273. } );
  274. } );
  275. } );
  276. describe( 'downcastInsertRow()', () => {
  277. // The insert row downcast conversion is not executed in data pipeline.
  278. describe( 'editing pipeline', () => {
  279. it( 'should react to changed rows', () => {
  280. setModelData( model, modelTable( [
  281. [ '00', '01' ]
  282. ] ) );
  283. const table = root.getChild( 0 );
  284. model.change( writer => {
  285. const row = writer.createElement( 'tableRow' );
  286. writer.insert( row, table, 1 );
  287. writer.insertElement( 'tableCell', row, 'end' );
  288. writer.insertElement( 'tableCell', row, 'end' );
  289. } );
  290. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  291. [ '00', '01' ],
  292. [ '', '' ]
  293. ], { asWidget: true } ) );
  294. } );
  295. it( 'should properly consume already added rows', () => {
  296. setModelData( model, modelTable( [
  297. [ '00', '01' ]
  298. ] ) );
  299. const table = root.getChild( 0 );
  300. model.change( writer => {
  301. const row = writer.createElement( 'tableRow' );
  302. writer.insert( row, table, 1 );
  303. writer.insertElement( 'tableCell', row, 'end' );
  304. writer.insertElement( 'tableCell', row, 'end' );
  305. } );
  306. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  307. [ '00', '01' ],
  308. [ '', '' ]
  309. ], { asWidget: true } ) );
  310. model.change( writer => {
  311. const row = writer.createElement( 'tableRow' );
  312. writer.insert( row, table, 2 );
  313. writer.insertElement( 'tableCell', row, 'end' );
  314. writer.insertElement( 'tableCell', row, 'end' );
  315. } );
  316. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  317. [ '00', '01' ],
  318. [ '', '' ],
  319. [ '', '' ]
  320. ], { asWidget: true } ) );
  321. } );
  322. it( 'should insert row on proper index', () => {
  323. setModelData( model, modelTable( [
  324. [ '00', '01' ],
  325. [ '21', '22' ],
  326. [ '31', '32' ]
  327. ] ) );
  328. const table = root.getChild( 0 );
  329. model.change( writer => {
  330. const row = writer.createElement( 'tableRow' );
  331. writer.insert( row, table, 1 );
  332. writer.insertElement( 'tableCell', row, 'end' );
  333. writer.insertElement( 'tableCell', row, 'end' );
  334. } );
  335. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  336. [ '00', '01' ],
  337. [ '', '' ],
  338. [ '21', '22' ],
  339. [ '31', '32' ]
  340. ], { asWidget: true } ) );
  341. } );
  342. it( 'should insert row on proper index when table has heading rows defined - insert in body', () => {
  343. setModelData( model, modelTable( [
  344. [ '00', '01' ],
  345. [ '21', '22' ],
  346. [ '31', '32' ]
  347. ], { headingRows: 1, asWidget: true } ) );
  348. const table = root.getChild( 0 );
  349. model.change( writer => {
  350. const row = writer.createElement( 'tableRow' );
  351. writer.insert( row, table, 1 );
  352. writer.insertElement( 'tableCell', row, 'end' );
  353. writer.insertElement( 'tableCell', row, 'end' );
  354. } );
  355. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  356. [ '00', '01' ],
  357. [ '', '' ],
  358. [ '21', '22' ],
  359. [ '31', '32' ]
  360. ], { headingRows: 1, asWidget: true } ) );
  361. } );
  362. it( 'should insert row on proper index when table has heading rows defined - insert in heading', () => {
  363. setModelData( model, modelTable( [
  364. [ '00', '01' ],
  365. [ '21', '22' ],
  366. [ '31', '32' ]
  367. ], { headingRows: 2 } ) );
  368. const table = root.getChild( 0 );
  369. model.change( writer => {
  370. const row = writer.createElement( 'tableRow' );
  371. writer.insert( row, table, 1 );
  372. writer.insertElement( 'tableCell', row, 'end' );
  373. writer.insertElement( 'tableCell', row, 'end' );
  374. } );
  375. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  376. [ '00', '01' ],
  377. [ '', '' ],
  378. [ '21', '22' ],
  379. [ '31', '32' ]
  380. ], { headingRows: 3, asWidget: true } ) );
  381. } );
  382. it( 'should react to changed rows when previous rows\' cells has rowspans', () => {
  383. setModelData( model, modelTable( [
  384. [ { rowspan: 2, contents: '00' }, '01' ],
  385. [ '22' ]
  386. ] ) );
  387. const table = root.getChild( 0 );
  388. model.change( writer => {
  389. const row = writer.createElement( 'tableRow' );
  390. writer.insert( row, table, 2 );
  391. writer.insertElement( 'tableCell', row, 'end' );
  392. writer.insertElement( 'tableCell', row, 'end' );
  393. } );
  394. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  395. [ { rowspan: 2, contents: '00' }, '01' ],
  396. [ '22' ],
  397. [ '', '' ]
  398. ], { asWidget: true } ) );
  399. } );
  400. it( 'should properly create row headings', () => {
  401. setModelData( model, modelTable( [
  402. [ { rowspan: 2, contents: '00' }, '01' ],
  403. [ '22' ]
  404. ], { headingColumns: 1 } ) );
  405. const table = root.getChild( 0 );
  406. model.change( writer => {
  407. const firstRow = writer.createElement( 'tableRow' );
  408. writer.insert( firstRow, table, 2 );
  409. writer.insert( writer.createElement( 'tableCell' ), firstRow, 'end' );
  410. const secondRow = writer.createElement( 'tableRow' );
  411. writer.insert( secondRow, table, 3 );
  412. writer.insert( writer.createElement( 'tableCell' ), secondRow, 'end' );
  413. writer.insert( writer.createElement( 'tableCell' ), secondRow, 'end' );
  414. } );
  415. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  416. [ { rowspan: 2, contents: '00', isHeading: true }, '01' ],
  417. [ '22' ],
  418. [ { contents: '', isHeading: true }, '' ],
  419. [ { contents: '', isHeading: true }, '' ]
  420. ], { asWidget: true } ) );
  421. } );
  422. it( 'should create table cell inside inserted row as a widget', () => {
  423. setModelData( model, modelTable( [ [ '00' ] ] ) );
  424. const table = root.getChild( 0 );
  425. model.change( writer => {
  426. const firstRow = writer.createElement( 'tableRow' );
  427. writer.insert( firstRow, table, 1 );
  428. writer.insert( writer.createElement( 'tableCell' ), firstRow, 'end' );
  429. } );
  430. assertEqualMarkup( getViewData( view, { withoutSelection: true } ),
  431. '<figure class="ck-widget ck-widget_with-selection-handle table" contenteditable="false">' +
  432. '<div class="ck ck-widget__selection-handle"></div>' +
  433. '<table>' +
  434. '<tbody>' +
  435. '<tr>' +
  436. '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  437. '<span style="display:inline-block">00</span>' +
  438. '</td>' +
  439. '</tr>' +
  440. '<tr>' +
  441. '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  442. '<span style="display:inline-block"></span>' +
  443. '</td>' +
  444. '</tr>' +
  445. '</tbody>' +
  446. '</table>' +
  447. '</figure>'
  448. );
  449. } );
  450. } );
  451. } );
  452. describe( 'downcastInsertCell()', () => {
  453. // The insert table cell downcast conversion is not executed in data pipeline.
  454. describe( 'editing pipeline', () => {
  455. it( 'should add tableCell on proper index in tr', () => {
  456. setModelData( model, modelTable( [
  457. [ '00', '01' ]
  458. ] ) );
  459. const table = root.getChild( 0 );
  460. model.change( writer => {
  461. const row = table.getChild( 0 );
  462. writer.insertElement( 'tableCell', row, 1 );
  463. } );
  464. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  465. [ '00', '', '01' ]
  466. ], { asWidget: true } ) );
  467. } );
  468. it( 'should add tableCell on proper index in tr when previous have colspans', () => {
  469. setModelData( model, modelTable( [
  470. [ { colspan: 2, contents: '00' }, '13' ]
  471. ] ) );
  472. const table = root.getChild( 0 );
  473. model.change( writer => {
  474. const row = table.getChild( 0 );
  475. writer.insertElement( 'tableCell', row, 1 );
  476. } );
  477. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  478. [ { colspan: 2, contents: '00' }, '', '13' ]
  479. ], { asWidget: true } ) );
  480. } );
  481. it( 'should add tableCell on proper index in tr when previous row have rowspans', () => {
  482. setModelData( model, modelTable( [
  483. [ { rowspan: 2, contents: '00' }, '01', '02' ],
  484. [ '11', '12' ]
  485. ] ) );
  486. const table = root.getChild( 0 );
  487. model.change( writer => {
  488. writer.insertElement( 'tableCell', table.getChild( 0 ), 1 );
  489. writer.insertElement( 'tableCell', table.getChild( 1 ), 0 );
  490. } );
  491. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  492. [ { rowspan: 2, contents: '00' }, '', '01', '02' ],
  493. [ '', '11', '12' ]
  494. ], { asWidget: true } ) );
  495. } );
  496. it( 'split cell simulation - simple', () => {
  497. setModelData( model, modelTable( [
  498. [ '00', '01' ],
  499. [ '10', '11' ]
  500. ] ) );
  501. const table = root.getChild( 0 );
  502. model.change( writer => {
  503. const firstRow = table.getChild( 0 );
  504. const secondRow = table.getChild( 1 );
  505. writer.insertElement( 'tableCell', firstRow, 1 );
  506. writer.setAttribute( 'colspan', 2, secondRow.getChild( 0 ) );
  507. } );
  508. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  509. [ '00', '', '01' ],
  510. [ { colspan: 2, contents: '10' }, '11' ]
  511. ], { asWidget: true } ) );
  512. } );
  513. it( 'merge simulation - simple', () => {
  514. setModelData( model, modelTable( [
  515. [ '00', '01' ],
  516. [ '10', '11' ]
  517. ] ) );
  518. const table = root.getChild( 0 );
  519. model.change( writer => {
  520. const firstRow = table.getChild( 0 );
  521. writer.setAttribute( 'colspan', 2, firstRow.getChild( 0 ) );
  522. writer.remove( firstRow.getChild( 1 ) );
  523. } );
  524. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  525. [ { colspan: 2, contents: '00' } ],
  526. [ '10', '11' ]
  527. ], { asWidget: true } ) );
  528. } );
  529. it( 'should create inserted table cell as a widget', () => {
  530. setModelData( model, modelTable( [ [ '00' ] ] ) );
  531. const table = root.getChild( 0 );
  532. model.change( writer => {
  533. const row = table.getChild( 0 );
  534. writer.insert( writer.createElement( 'tableCell' ), row, 'end' );
  535. } );
  536. assertEqualMarkup( getViewData( view, { withoutSelection: true } ),
  537. '<figure class="ck-widget ck-widget_with-selection-handle table" contenteditable="false">' +
  538. '<div class="ck ck-widget__selection-handle"></div>' +
  539. '<table>' +
  540. '<tbody>' +
  541. '<tr>' +
  542. '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  543. '<span style="display:inline-block">00</span>' +
  544. '</td>' +
  545. '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  546. '<span style="display:inline-block"></span>' +
  547. '</td>' +
  548. '</tr>' +
  549. '</tbody>' +
  550. '</table>' +
  551. '</figure>'
  552. );
  553. } );
  554. } );
  555. } );
  556. describe( 'downcastTableHeadingColumnsChange()', () => {
  557. // The heading columns change downcast conversion is not executed in data pipeline.
  558. describe( 'editing pipeline', () => {
  559. it( 'should work for adding heading columns', () => {
  560. setModelData( model, modelTable( [
  561. [ '00', '01' ],
  562. [ '10', '11' ]
  563. ] ) );
  564. const table = root.getChild( 0 );
  565. model.change( writer => {
  566. writer.setAttribute( 'headingColumns', 1, table );
  567. } );
  568. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  569. [ { isHeading: true, contents: '00' }, '01' ],
  570. [ { isHeading: true, contents: '10' }, '11' ]
  571. ], { headingColumns: 1, asWidget: true } ) );
  572. } );
  573. it( 'should work for changing heading columns to a bigger number', () => {
  574. setModelData( model, modelTable( [
  575. [ '00', '01', '02', '03' ],
  576. [ '10', '11', '12', '13' ]
  577. ], { headingColumns: 1 } ) );
  578. const table = root.getChild( 0 );
  579. model.change( writer => {
  580. writer.setAttribute( 'headingColumns', 3, table );
  581. } );
  582. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  583. [ { isHeading: true, contents: '00' }, { isHeading: true, contents: '01' }, { isHeading: true, contents: '02' }, '03' ],
  584. [ { isHeading: true, contents: '10' }, { isHeading: true, contents: '11' }, { isHeading: true, contents: '12' }, '13' ]
  585. ], { asWidget: true } ) );
  586. } );
  587. it( 'should work for changing heading columns to a smaller number', () => {
  588. setModelData( model, modelTable( [
  589. [ { isHeading: true, contents: '00' }, { isHeading: true, contents: '01' }, { isHeading: true, contents: '02' }, '03' ],
  590. [ { isHeading: true, contents: '10' }, { isHeading: true, contents: '11' }, { isHeading: true, contents: '12' }, '13' ]
  591. ], { headingColumns: 3 } ) );
  592. const table = root.getChild( 0 );
  593. model.change( writer => {
  594. writer.setAttribute( 'headingColumns', 1, table );
  595. } );
  596. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  597. [ { isHeading: true, contents: '00' }, '01', '02', '03' ],
  598. [ { isHeading: true, contents: '10' }, '11', '12', '13' ]
  599. ], { headingColumns: 3, asWidget: true } ) );
  600. } );
  601. it( 'should work for removing heading columns', () => {
  602. setModelData( model, modelTable( [
  603. [ '00', '01' ],
  604. [ '10', '11' ]
  605. ], { headingColumns: 1 } ) );
  606. const table = root.getChild( 0 );
  607. model.change( writer => {
  608. writer.removeAttribute( 'headingColumns', table );
  609. } );
  610. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  611. [ '00', '01' ],
  612. [ '10', '11' ]
  613. ], { asWidget: true } ) );
  614. } );
  615. it( 'should be possible to overwrite', () => {
  616. editor.conversion.attributeToAttribute( { model: 'headingColumns', view: 'headingColumns', converterPriority: 'high' } );
  617. setModelData( model, modelTable( [ [ '00[] ' ] ] ) );
  618. const table = root.getChild( 0 );
  619. model.change( writer => {
  620. writer.setAttribute( 'headingColumns', 1, table );
  621. } );
  622. assertEqualMarkup( getViewData( view, { withoutSelection: true } ),
  623. '<figure class="ck-widget ck-widget_with-selection-handle table" contenteditable="false" headingColumns="1">' +
  624. '<div class="ck ck-widget__selection-handle"></div>' +
  625. '<table>' +
  626. '<tbody>' +
  627. '<tr>' +
  628. '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  629. '<span style="display:inline-block">00</span>' +
  630. '</td>' +
  631. '</tr>' +
  632. '</tbody>' +
  633. '</table>' +
  634. '</figure>'
  635. );
  636. } );
  637. it( 'should work with adding table cells', () => {
  638. setModelData( model, modelTable( [
  639. [ { rowspan: 2, contents: '00' }, '01', '13', '14' ],
  640. [ '11', '12', '13' ],
  641. [ { colspan: 2, contents: '20' }, '22', '23' ]
  642. ], { headingColumns: 2 } ) );
  643. const table = root.getChild( 0 );
  644. model.change( writer => {
  645. // Inserting column in heading columns so update table's attribute also
  646. writer.setAttribute( 'headingColumns', 3, table );
  647. writer.insertElement( 'tableCell', table.getChild( 0 ), 2 );
  648. writer.insertElement( 'tableCell', table.getChild( 1 ), 1 );
  649. writer.insertElement( 'tableCell', table.getChild( 2 ), 1 );
  650. } );
  651. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  652. [
  653. { isHeading: true, rowspan: 2, contents: '00' },
  654. { isHeading: true, contents: '01' },
  655. { isHeading: true, contents: '' },
  656. '13',
  657. '14'
  658. ],
  659. [
  660. { isHeading: true, contents: '11' },
  661. { isHeading: true, contents: '' },
  662. '12',
  663. '13'
  664. ],
  665. [
  666. { isHeading: true, colspan: 2, contents: '20' },
  667. { isHeading: true, contents: '' },
  668. '22',
  669. '23'
  670. ]
  671. ], { asWidget: true } ) );
  672. } );
  673. it( 'should create renamed cell as a widget', () => {
  674. setModelData( model, modelTable( [ [ '00' ] ] ) );
  675. const table = root.getChild( 0 );
  676. model.change( writer => {
  677. writer.setAttribute( 'headingRows', 1, table );
  678. } );
  679. assertEqualMarkup( getViewData( view, { withoutSelection: true } ),
  680. '<figure class="ck-widget ck-widget_with-selection-handle table" contenteditable="false">' +
  681. '<div class="ck ck-widget__selection-handle"></div>' +
  682. '<table>' +
  683. '<thead>' +
  684. '<tr>' +
  685. '<th class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  686. '<span style="display:inline-block">00</span>' +
  687. '</th>' +
  688. '</tr>' +
  689. '</thead>' +
  690. '</table>' +
  691. '</figure>'
  692. );
  693. } );
  694. } );
  695. } );
  696. describe( 'downcastTableHeadingRowsChange', () => {
  697. // The heading rows change downcast conversion is not executed in data pipeline.
  698. // Note that headingRows table attribute triggers whole table downcast.
  699. describe( 'editing pipeline', () => {
  700. it( 'should work for adding heading rows', () => {
  701. setModelData( model, modelTable( [
  702. [ '00', '01' ],
  703. [ '10', '11' ],
  704. [ '20', '21' ]
  705. ] ) );
  706. const table = root.getChild( 0 );
  707. model.change( writer => {
  708. writer.setAttribute( 'headingRows', 2, table );
  709. } );
  710. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  711. [ '00', '01' ],
  712. [ '10', '11' ],
  713. [ '20', '21' ]
  714. ], { headingRows: 2, asWidget: true } ) );
  715. } );
  716. it( 'should work for changing number of heading rows to a bigger number', () => {
  717. setModelData( model, modelTable( [
  718. [ '00', '01' ],
  719. [ '10', '11' ],
  720. [ '20', '21' ]
  721. ], { headingRows: 1 } ) );
  722. const table = root.getChild( 0 );
  723. model.change( writer => {
  724. writer.setAttribute( 'headingRows', 2, table );
  725. } );
  726. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  727. [ '00', '01' ],
  728. [ '10', '11' ],
  729. [ '20', '21' ]
  730. ], { headingRows: 2, asWidget: true } ) );
  731. } );
  732. it( 'should work for changing number of heading rows to a smaller number', () => {
  733. setModelData( model, modelTable( [
  734. [ '00', '01' ],
  735. [ '10', '11' ],
  736. [ '20', '21' ],
  737. [ '30', '31' ]
  738. ], { headingRows: 3 } ) );
  739. const table = root.getChild( 0 );
  740. model.change( writer => {
  741. writer.setAttribute( 'headingRows', 2, table );
  742. } );
  743. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  744. [ '00', '01' ],
  745. [ '10', '11' ],
  746. [ '20', '21' ],
  747. [ '30', '31' ]
  748. ], { headingRows: 2, asWidget: true } ) );
  749. } );
  750. it( 'should work for removing heading rows', () => {
  751. setModelData( model, modelTable( [
  752. [ '00', '01' ],
  753. [ '10', '11' ]
  754. ], { headingRows: 2 } ) );
  755. const table = root.getChild( 0 );
  756. model.change( writer => {
  757. writer.removeAttribute( 'headingRows', table );
  758. } );
  759. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  760. [ '00', '01' ],
  761. [ '10', '11' ]
  762. ], { asWidget: true } ) );
  763. } );
  764. it( 'should work for making heading rows without tbody', () => {
  765. setModelData( model, modelTable( [
  766. [ '00', '01' ],
  767. [ '10', '11' ]
  768. ] ) );
  769. const table = root.getChild( 0 );
  770. model.change( writer => {
  771. writer.setAttribute( 'headingRows', 2, table );
  772. } );
  773. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  774. [ '00', '01' ],
  775. [ '10', '11' ]
  776. ], { headingRows: 2, asWidget: true } ) );
  777. } );
  778. it( 'should work with adding table rows at the beginning of a table', () => {
  779. setModelData( model, modelTable( [
  780. [ '00', '01' ],
  781. [ '10', '11' ]
  782. ], { headingRows: 1 } ) );
  783. const table = root.getChild( 0 );
  784. model.change( writer => {
  785. writer.setAttribute( 'headingRows', 2, table );
  786. const tableRow = writer.createElement( 'tableRow' );
  787. writer.insert( tableRow, table, 0 );
  788. writer.insertElement( 'tableCell', tableRow, 'end' );
  789. writer.insertElement( 'tableCell', tableRow, 'end' );
  790. } );
  791. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  792. [ '', '' ],
  793. [ '00', '01' ],
  794. [ '10', '11' ]
  795. ], { headingRows: 2, asWidget: true } ) );
  796. } );
  797. it( 'should work with adding a table row and expanding heading', () => {
  798. setModelData( model, modelTable( [
  799. [ '00', '01' ],
  800. [ '10', '11' ],
  801. [ '20', '21' ]
  802. ], { headingRows: 1 } ) );
  803. const table = root.getChild( 0 );
  804. model.change( writer => {
  805. writer.setAttribute( 'headingRows', 2, table );
  806. const tableRow = writer.createElement( 'tableRow' );
  807. writer.insert( tableRow, table, 1 );
  808. writer.insertElement( 'tableCell', tableRow, 'end' );
  809. writer.insertElement( 'tableCell', tableRow, 'end' );
  810. } );
  811. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  812. [ '00', '01' ],
  813. [ '', '' ],
  814. [ '10', '11' ],
  815. [ '20', '21' ]
  816. ], { headingRows: 2, asWidget: true } ) );
  817. } );
  818. it( 'should create renamed cell as a widget', () => {
  819. setModelData( model, modelTable( [ [ '00' ] ] ) );
  820. const table = root.getChild( 0 );
  821. model.change( writer => {
  822. writer.setAttribute( 'headingColumns', 1, table );
  823. } );
  824. assertEqualMarkup( getViewData( view, { withoutSelection: true } ),
  825. '<figure class="ck-widget ck-widget_with-selection-handle table" contenteditable="false">' +
  826. '<div class="ck ck-widget__selection-handle"></div>' +
  827. '<table>' +
  828. '<tbody>' +
  829. '<tr>' +
  830. '<th class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  831. '<span style="display:inline-block">00</span>' +
  832. '</th>' +
  833. '</tr>' +
  834. '</tbody>' +
  835. '</table>' +
  836. '</figure>'
  837. );
  838. } );
  839. it( 'should properly integrate with undo', () => {
  840. setModelData( model, modelTable( [
  841. [ '00', '01' ],
  842. [ '10', '11' ],
  843. [ '20', '21' ]
  844. ], { headingRows: 1 } ) );
  845. const table = root.getChild( 0 );
  846. model.change( writer => {
  847. writer.setAttribute( 'headingRows', 2, table );
  848. } );
  849. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  850. [ '00', '01' ],
  851. [ '10', '11' ],
  852. [ '20', '21' ]
  853. ], { headingRows: 2, asWidget: true } ) );
  854. editor.execute( 'undo' );
  855. assertEqualMarkup( getViewData( view, { withoutSelection: true } ), viewTable( [
  856. [ '00', '01' ],
  857. [ '10', '11' ],
  858. [ '20', '21' ]
  859. ], { headingRows: 1, asWidget: true } ) );
  860. } );
  861. } );
  862. } );
  863. describe( 'downcastRemoveRow()', () => {
  864. // The remove row downcast conversion is not executed in data pipeline.
  865. describe( 'editing pipeline', () => {
  866. it( 'should react to removed row from the beginning of a body rows (no heading rows)', () => {
  867. setModelData( model, modelTable( [
  868. [ '00[]', '01' ],
  869. [ '10', '11' ]
  870. ] ) );
  871. const table = root.getChild( 0 );
  872. model.change( writer => {
  873. writer.remove( table.getChild( 1 ) );
  874. } );
  875. assertEqualMarkup( getViewData( view, { withoutSelection: true } ),
  876. '<figure class="ck-widget ck-widget_with-selection-handle table" contenteditable="false">' +
  877. '<div class="ck ck-widget__selection-handle"></div>' +
  878. '<table>' +
  879. '<tbody>' +
  880. '<tr>' +
  881. '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  882. '<span style="display:inline-block">00</span>' +
  883. '</td>' +
  884. '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  885. '<span style="display:inline-block">01</span>' +
  886. '</td>' +
  887. '</tr>' +
  888. '</tbody>' +
  889. '</table>' +
  890. '</figure>'
  891. );
  892. } );
  893. it( 'should react to removed row from the end of a body rows (no heading rows)', () => {
  894. setModelData( model, modelTable( [
  895. [ '00[]', '01' ],
  896. [ '10', '11' ]
  897. ] ) );
  898. const table = root.getChild( 0 );
  899. model.change( writer => {
  900. writer.remove( table.getChild( 0 ) );
  901. } );
  902. assertEqualMarkup( getViewData( view, { withoutSelection: true } ),
  903. '<figure class="ck-widget ck-widget_with-selection-handle table" contenteditable="false">' +
  904. '<div class="ck ck-widget__selection-handle"></div>' +
  905. '<table>' +
  906. '<tbody>' +
  907. '<tr>' +
  908. '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  909. '<span style="display:inline-block">10</span>' +
  910. '</td>' +
  911. '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  912. '<span style="display:inline-block">11</span>' +
  913. '</td>' +
  914. '</tr>' +
  915. '</tbody>' +
  916. '</table>' +
  917. '</figure>'
  918. );
  919. } );
  920. it( 'should react to removed row from the beginning of a heading rows (no body rows)', () => {
  921. setModelData( model, modelTable( [
  922. [ '00[]', '01' ],
  923. [ '10', '11' ]
  924. ], { headingRows: 2 } ) );
  925. const table = root.getChild( 0 );
  926. model.change( writer => {
  927. // Removing row from a heading section changes requires changing heading rows attribute.
  928. writer.setAttribute( 'headingRows', 1, table );
  929. writer.remove( table.getChild( 0 ) );
  930. } );
  931. assertEqualMarkup( getViewData( view, { withoutSelection: true } ),
  932. '<figure class="ck-widget ck-widget_with-selection-handle table" contenteditable="false">' +
  933. '<div class="ck ck-widget__selection-handle"></div>' +
  934. '<table>' +
  935. '<thead>' +
  936. '<tr>' +
  937. '<th class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  938. '<span style="display:inline-block">10</span>' +
  939. '</th>' +
  940. '<th class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  941. '<span style="display:inline-block">11</span>' +
  942. '</th>' +
  943. '</tr>' +
  944. '</thead>' +
  945. '</table>' +
  946. '</figure>'
  947. );
  948. } );
  949. it( 'should react to removed row from the end of a heading rows (no body rows)', () => {
  950. setModelData( model, modelTable( [
  951. [ '00[]', '01' ],
  952. [ '10', '11' ]
  953. ], { headingRows: 2 } ) );
  954. const table = root.getChild( 0 );
  955. model.change( writer => {
  956. // Removing row from a heading section changes requires changing heading rows attribute.
  957. writer.setAttribute( 'headingRows', 1, table );
  958. writer.remove( table.getChild( 1 ) );
  959. } );
  960. assertEqualMarkup( getViewData( view, { withoutSelection: true } ),
  961. '<figure class="ck-widget ck-widget_with-selection-handle table" contenteditable="false">' +
  962. '<div class="ck ck-widget__selection-handle"></div>' +
  963. '<table>' +
  964. '<thead>' +
  965. '<tr>' +
  966. '<th class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  967. '<span style="display:inline-block">00</span>' +
  968. '</th>' +
  969. '<th class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  970. '<span style="display:inline-block">01</span>' +
  971. '</th>' +
  972. '</tr>' +
  973. '</thead>' +
  974. '</table>' +
  975. '</figure>'
  976. );
  977. } );
  978. it( 'should react to removed row from the end of a heading rows (first cell in body has colspan)', () => {
  979. setModelData( model, modelTable( [
  980. [ '00[]', '01', '02', '03' ],
  981. [ { rowspan: 2, colspan: 2, contents: '10' }, '12', '13' ],
  982. [ '22', '23' ]
  983. ], { headingRows: 1 } ) );
  984. const table = root.getChild( 0 );
  985. model.change( writer => {
  986. // Removing row from a heading section changes requires changing heading rows attribute.
  987. writer.remove( table.getChild( 0 ) );
  988. writer.setAttribute( 'headingRows', 0, table );
  989. } );
  990. assertEqualMarkup( getViewData( view, { withoutSelection: true } ),
  991. '<figure class="ck-widget ck-widget_with-selection-handle table" contenteditable="false">' +
  992. '<div class="ck ck-widget__selection-handle"></div>' +
  993. '<table>' +
  994. '<tbody>' +
  995. '<tr>' +
  996. '<td class="ck-editor__editable ck-editor__nested-editable" ' +
  997. 'colspan="2" contenteditable="true" rowspan="2">' +
  998. '<span style="display:inline-block">10</span>' +
  999. '</td>' +
  1000. '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  1001. '<span style="display:inline-block">12</span>' +
  1002. '</td>' +
  1003. '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  1004. '<span style="display:inline-block">13</span>' +
  1005. '</td>' +
  1006. '</tr>' +
  1007. '<tr>' +
  1008. '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  1009. '<span style="display:inline-block">22</span>' +
  1010. '</td>' +
  1011. '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  1012. '<span style="display:inline-block">23</span>' +
  1013. '</td>' +
  1014. '</tr>' +
  1015. '</tbody>' +
  1016. '</table>' +
  1017. '</figure>'
  1018. );
  1019. } );
  1020. it( 'should remove empty thead if a last row was removed from a heading rows (has heading and body)', () => {
  1021. setModelData( model, modelTable( [
  1022. [ '00[]', '01' ],
  1023. [ '10', '11' ]
  1024. ], { headingRows: 1 } ) );
  1025. const table = root.getChild( 0 );
  1026. model.change( writer => {
  1027. // Removing row from a heading section changes requires changing heading rows attribute.
  1028. writer.removeAttribute( 'headingRows', table );
  1029. writer.remove( table.getChild( 0 ) );
  1030. } );
  1031. assertEqualMarkup( getViewData( view, { withoutSelection: true } ),
  1032. '<figure class="ck-widget ck-widget_with-selection-handle table" contenteditable="false">' +
  1033. '<div class="ck ck-widget__selection-handle"></div>' +
  1034. '<table>' +
  1035. '<tbody>' +
  1036. '<tr>' +
  1037. '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  1038. '<span style="display:inline-block">10</span>' +
  1039. '</td>' +
  1040. '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  1041. '<span style="display:inline-block">11</span>' +
  1042. '</td>' +
  1043. '</tr>' +
  1044. '</tbody>' +
  1045. '</table>' +
  1046. '</figure>'
  1047. );
  1048. } );
  1049. it( 'should remove empty tbody if a last row was removed a body rows (has heading and body)', () => {
  1050. setModelData( model, modelTable( [
  1051. [ '00[]', '01' ],
  1052. [ '10', '11' ]
  1053. ], { headingRows: 1 } ) );
  1054. const table = root.getChild( 0 );
  1055. model.change( writer => {
  1056. writer.remove( table.getChild( 1 ) );
  1057. } );
  1058. assertEqualMarkup( getViewData( view, { withoutSelection: true } ),
  1059. '<figure class="ck-widget ck-widget_with-selection-handle table" contenteditable="false">' +
  1060. '<div class="ck ck-widget__selection-handle"></div>' +
  1061. '<table>' +
  1062. '<thead>' +
  1063. '<tr>' +
  1064. '<th class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  1065. '<span style="display:inline-block">00</span>' +
  1066. '</th>' +
  1067. '<th class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  1068. '<span style="display:inline-block">01</span>' +
  1069. '</th>' +
  1070. '</tr>' +
  1071. '</thead>' +
  1072. '</table>' +
  1073. '</figure>'
  1074. );
  1075. } );
  1076. } );
  1077. } );
  1078. describe( 'marker highlight conversion on table cell', () => {
  1079. describe( 'single class in highlight descriptor', () => {
  1080. beforeEach( async () => {
  1081. editor = await VirtualTestEditor.create( { plugins: [ Paragraph, TableEditing ] } );
  1082. model = editor.model;
  1083. root = model.document.getRoot( 'main' );
  1084. view = editor.editing.view;
  1085. markerConversion( editor.conversion );
  1086. } );
  1087. it( 'should apply marker class on tableCell - on inserting a table', () => {
  1088. setModelData( model, modelTable( [ [ '00' ] ] ) );
  1089. model.change( writer => {
  1090. const cell = root.getNodeByPath( [ 0, 0, 0 ] );
  1091. writer.addMarker( 'marker:yellow', {
  1092. range: writer.createRangeOn( cell ),
  1093. usingOperation: false
  1094. } );
  1095. checkCustomPropertyForHighlight( editor.editing.mapper.toViewElement( cell ) );
  1096. } );
  1097. assertEqualMarkup( getViewData( view, { withoutSelection: true } ),
  1098. '<figure class="ck-widget ck-widget_with-selection-handle table" contenteditable="false">' +
  1099. '<div class="ck ck-widget__selection-handle"></div>' +
  1100. '<table>' +
  1101. '<tbody>' +
  1102. '<tr>' +
  1103. '<td class="ck-editor__editable ck-editor__nested-editable highlight-yellow" contenteditable="true">' +
  1104. '<span style="display:inline-block">00</span>' +
  1105. '</td>' +
  1106. '</tr>' +
  1107. '</tbody>' +
  1108. '</table>' +
  1109. '</figure>'
  1110. );
  1111. model.change( writer => {
  1112. writer.removeMarker( 'marker:yellow' );
  1113. } );
  1114. assertEqualMarkup( getViewData( view, { withoutSelection: true } ),
  1115. '<figure class="ck-widget ck-widget_with-selection-handle table" contenteditable="false">' +
  1116. '<div class="ck ck-widget__selection-handle"></div>' +
  1117. '<table>' +
  1118. '<tbody>' +
  1119. '<tr>' +
  1120. '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  1121. '<span style="display:inline-block">00</span>' +
  1122. '</td>' +
  1123. '</tr>' +
  1124. '</tbody>' +
  1125. '</table>' +
  1126. '</figure>'
  1127. );
  1128. } );
  1129. it( 'should apply marker class on tableCell - on inserting a row', () => {
  1130. setModelData( model, modelTable( [ [ '00' ] ] ) );
  1131. const table = root.getChild( 0 );
  1132. model.change( writer => {
  1133. const firstRow = writer.createElement( 'tableRow' );
  1134. const cell = writer.createElement( 'tableCell' );
  1135. writer.insert( firstRow, table, 1 );
  1136. writer.insert( cell, firstRow, 'end' );
  1137. writer.addMarker( 'marker:yellow', {
  1138. range: writer.createRangeOn( cell ),
  1139. usingOperation: false
  1140. } );
  1141. } );
  1142. const cell = root.getNodeByPath( [ 0, 1, 0 ] );
  1143. checkCustomPropertyForHighlight( editor.editing.mapper.toViewElement( cell ) );
  1144. assertEqualMarkup( getViewData( view, { withoutSelection: true } ),
  1145. '<figure class="ck-widget ck-widget_with-selection-handle table" contenteditable="false">' +
  1146. '<div class="ck ck-widget__selection-handle"></div>' +
  1147. '<table>' +
  1148. '<tbody>' +
  1149. '<tr>' +
  1150. '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  1151. '<span style="display:inline-block">00</span>' +
  1152. '</td>' +
  1153. '</tr>' +
  1154. '<tr>' +
  1155. '<td class="ck-editor__editable ck-editor__nested-editable highlight-yellow" contenteditable="true">' +
  1156. '<span style="display:inline-block"></span>' +
  1157. '</td>' +
  1158. '</tr>' +
  1159. '</tbody>' +
  1160. '</table>' +
  1161. '</figure>'
  1162. );
  1163. model.change( writer => {
  1164. writer.removeMarker( 'marker:yellow' );
  1165. } );
  1166. assertEqualMarkup( getViewData( view, { withoutSelection: true } ),
  1167. '<figure class="ck-widget ck-widget_with-selection-handle table" contenteditable="false">' +
  1168. '<div class="ck ck-widget__selection-handle"></div>' +
  1169. '<table>' +
  1170. '<tbody>' +
  1171. '<tr>' +
  1172. '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  1173. '<span style="display:inline-block">00</span>' +
  1174. '</td>' +
  1175. '</tr>' +
  1176. '<tr>' +
  1177. '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  1178. '<span style="display:inline-block"></span>' +
  1179. '</td>' +
  1180. '</tr>' +
  1181. '</tbody>' +
  1182. '</table>' +
  1183. '</figure>'
  1184. );
  1185. } );
  1186. it( 'should apply marker class on tableCell - on inserting a table cell', () => {
  1187. setModelData( model, modelTable( [ [ '00' ] ] ) );
  1188. const table = root.getChild( 0 );
  1189. model.change( writer => {
  1190. const row = table.getChild( 0 );
  1191. const cell = writer.createElement( 'tableCell' );
  1192. writer.insert( cell, row, 'end' );
  1193. writer.addMarker( 'marker:yellow', {
  1194. range: writer.createRangeOn( cell ),
  1195. usingOperation: false
  1196. } );
  1197. } );
  1198. const cell = root.getNodeByPath( [ 0, 0, 1 ] );
  1199. checkCustomPropertyForHighlight( editor.editing.mapper.toViewElement( cell ) );
  1200. assertEqualMarkup( getViewData( view, { withoutSelection: true } ),
  1201. '<figure class="ck-widget ck-widget_with-selection-handle table" contenteditable="false">' +
  1202. '<div class="ck ck-widget__selection-handle"></div>' +
  1203. '<table>' +
  1204. '<tbody>' +
  1205. '<tr>' +
  1206. '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  1207. '<span style="display:inline-block">00</span>' +
  1208. '</td>' +
  1209. '<td class="ck-editor__editable ck-editor__nested-editable highlight-yellow" contenteditable="true">' +
  1210. '<span style="display:inline-block"></span>' +
  1211. '</td>' +
  1212. '</tr>' +
  1213. '</tbody>' +
  1214. '</table>' +
  1215. '</figure>'
  1216. );
  1217. model.change( writer => {
  1218. writer.removeMarker( 'marker:yellow' );
  1219. } );
  1220. assertEqualMarkup( getViewData( view, { withoutSelection: true } ),
  1221. '<figure class="ck-widget ck-widget_with-selection-handle table" contenteditable="false">' +
  1222. '<div class="ck ck-widget__selection-handle"></div>' +
  1223. '<table>' +
  1224. '<tbody>' +
  1225. '<tr>' +
  1226. '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  1227. '<span style="display:inline-block">00</span>' +
  1228. '</td>' +
  1229. '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  1230. '<span style="display:inline-block"></span>' +
  1231. '</td>' +
  1232. '</tr>' +
  1233. '</tbody>' +
  1234. '</table>' +
  1235. '</figure>'
  1236. );
  1237. } );
  1238. it( 'should preserve marker class on tableCell - when changing heading columns', () => {
  1239. setModelData( model, modelTable( [
  1240. [ '00', '01', '02', '03' ],
  1241. [ '10', '11', '12', '13' ]
  1242. ], { headingColumns: 1 } ) );
  1243. const table = root.getChild( 0 );
  1244. model.change( writer => {
  1245. const cell = root.getNodeByPath( [ 0, 0, 1 ] );
  1246. writer.addMarker( 'marker:yellow', {
  1247. range: writer.createRangeOn( cell ),
  1248. usingOperation: false
  1249. } );
  1250. } );
  1251. model.change( writer => {
  1252. writer.setAttribute( 'headingColumns', 3, table );
  1253. } );
  1254. const cell = root.getNodeByPath( [ 0, 0, 1 ] );
  1255. const viewElement = editor.editing.mapper.toViewElement( cell );
  1256. checkCustomPropertyForHighlight( viewElement );
  1257. expect( viewElement.hasClass( 'highlight-yellow' ) ).to.be.true;
  1258. model.change( writer => {
  1259. writer.removeMarker( 'marker:yellow' );
  1260. } );
  1261. expect( viewElement.hasClass( 'highlight-yellow' ) ).to.be.false;
  1262. } );
  1263. it( 'should preserve marker class on tableCell - when changing heading rows', () => {
  1264. setModelData( model, modelTable( [
  1265. [ '00', '01' ],
  1266. [ '10', '11' ],
  1267. [ '20', '21' ]
  1268. ], { headingRows: 1 } ) );
  1269. const table = root.getChild( 0 );
  1270. model.change( writer => {
  1271. const cell = root.getNodeByPath( [ 0, 1, 0 ] );
  1272. writer.addMarker( 'marker:yellow', {
  1273. range: writer.createRangeOn( cell ),
  1274. usingOperation: false
  1275. } );
  1276. } );
  1277. model.change( writer => {
  1278. writer.setAttribute( 'headingRows', 2, table );
  1279. } );
  1280. const cell = root.getNodeByPath( [ 0, 1, 0 ] );
  1281. const viewElement = editor.editing.mapper.toViewElement( cell );
  1282. checkCustomPropertyForHighlight( viewElement );
  1283. expect( viewElement.hasClass( 'highlight-yellow' ) ).to.be.true;
  1284. model.change( writer => {
  1285. writer.removeMarker( 'marker:yellow' );
  1286. } );
  1287. expect( viewElement.hasClass( 'highlight-yellow' ) ).to.be.false;
  1288. } );
  1289. } );
  1290. describe( 'multiple classes in highlight descriptor', () => {
  1291. beforeEach( async () => {
  1292. editor = await VirtualTestEditor.create( { plugins: [ Paragraph, TableEditing ] } );
  1293. model = editor.model;
  1294. root = model.document.getRoot( 'main' );
  1295. view = editor.editing.view;
  1296. markerConversion( editor.conversion, [ 'marker', 'user-marker' ] );
  1297. } );
  1298. it( 'should apply marker class on tableCell - on inserting a table', () => {
  1299. setModelData( model, modelTable( [ [ '00' ] ] ) );
  1300. model.change( writer => {
  1301. const cell = root.getNodeByPath( [ 0, 0, 0 ] );
  1302. writer.addMarker( 'marker:yellow', {
  1303. range: writer.createRangeOn( cell ),
  1304. usingOperation: false
  1305. } );
  1306. checkCustomPropertyForHighlight( editor.editing.mapper.toViewElement( cell ) );
  1307. } );
  1308. assertEqualMarkup( getViewData( view, { withoutSelection: true } ),
  1309. '<figure class="ck-widget ck-widget_with-selection-handle table" contenteditable="false">' +
  1310. '<div class="ck ck-widget__selection-handle"></div>' +
  1311. '<table>' +
  1312. '<tbody>' +
  1313. '<tr>' +
  1314. '<td class="ck-editor__editable ck-editor__nested-editable highlight-yellow marker user-marker"' +
  1315. ' contenteditable="true">' +
  1316. '<span style="display:inline-block">00</span>' +
  1317. '</td>' +
  1318. '</tr>' +
  1319. '</tbody>' +
  1320. '</table>' +
  1321. '</figure>'
  1322. );
  1323. model.change( writer => {
  1324. writer.removeMarker( 'marker:yellow' );
  1325. } );
  1326. assertEqualMarkup( getViewData( view, { withoutSelection: true } ),
  1327. '<figure class="ck-widget ck-widget_with-selection-handle table" contenteditable="false">' +
  1328. '<div class="ck ck-widget__selection-handle"></div>' +
  1329. '<table>' +
  1330. '<tbody>' +
  1331. '<tr>' +
  1332. '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
  1333. '<span style="display:inline-block">00</span>' +
  1334. '</td>' +
  1335. '</tr>' +
  1336. '</tbody>' +
  1337. '</table>' +
  1338. '</figure>'
  1339. );
  1340. } );
  1341. } );
  1342. function markerConversion( conversion, extraClasses = null ) {
  1343. conversion.for( 'editingDowncast' ).markerToHighlight( {
  1344. model: 'marker',
  1345. view: data => {
  1346. const className = 'highlight-' + data.markerName.split( ':' )[ 1 ];
  1347. return {
  1348. classes: extraClasses ? [ ...extraClasses, className ] : className
  1349. };
  1350. }
  1351. } );
  1352. }
  1353. function checkCustomPropertyForHighlight( viewElement ) {
  1354. const set = viewElement.getCustomProperty( 'addHighlight' );
  1355. const remove = viewElement.getCustomProperty( 'removeHighlight' );
  1356. expect( typeof set ).to.equal( 'function' );
  1357. expect( typeof remove ).to.equal( 'function' );
  1358. }
  1359. } );
  1360. } );