setheadercolumncommand.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533
  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 ModelTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/modeltesteditor';
  6. import { getData, setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  7. import SetHeaderColumnCommand from '../../src/commands/setheadercolumncommand';
  8. import { assertSelectedCells, defaultConversion, defaultSchema, modelTable } from '../_utils/utils';
  9. import TableSelection from '../../src/tableselection';
  10. import TableUtils from '../../src/tableutils';
  11. import { assertEqualMarkup } from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
  12. describe( 'SetHeaderColumnCommand', () => {
  13. let editor, model, command;
  14. beforeEach( () => {
  15. return ModelTestEditor
  16. .create( {
  17. plugins: [ TableUtils, TableSelection ]
  18. } )
  19. .then( newEditor => {
  20. editor = newEditor;
  21. model = editor.model;
  22. command = new SetHeaderColumnCommand( editor );
  23. defaultSchema( model.schema );
  24. defaultConversion( editor.conversion );
  25. } );
  26. } );
  27. afterEach( () => {
  28. return editor.destroy();
  29. } );
  30. describe( 'isEnabled', () => {
  31. it( 'should be false if selection is not in a table', () => {
  32. setData( model, '<paragraph>foo[]</paragraph>' );
  33. expect( command.isEnabled ).to.be.false;
  34. } );
  35. it( 'should be true if selection is in table', () => {
  36. setData( model, '<table><tableRow><tableCell><paragraph>foo[]</paragraph></tableCell></tableRow></table>' );
  37. expect( command.isEnabled ).to.be.true;
  38. } );
  39. it( 'should be true if multiple columns are selected', () => {
  40. setData( model, modelTable( [
  41. [ '01', '02', '03' ]
  42. ] ) );
  43. const tableSelection = editor.plugins.get( TableSelection );
  44. const modelRoot = model.document.getRoot();
  45. tableSelection.setCellSelection(
  46. modelRoot.getNodeByPath( [ 0, 0, 0 ] ),
  47. modelRoot.getNodeByPath( [ 0, 0, 1 ] )
  48. );
  49. expect( command.isEnabled ).to.be.true;
  50. } );
  51. it( 'should be true if multiple header columns are selected', () => {
  52. setData( model, modelTable( [
  53. [ '01', '02', '03' ]
  54. ], { headingColumns: 2 } ) );
  55. const tableSelection = editor.plugins.get( TableSelection );
  56. const modelRoot = model.document.getRoot();
  57. tableSelection.setCellSelection(
  58. modelRoot.getNodeByPath( [ 0, 0, 0 ] ),
  59. modelRoot.getNodeByPath( [ 0, 0, 1 ] )
  60. );
  61. expect( command.isEnabled ).to.be.true;
  62. } );
  63. } );
  64. describe( 'value', () => {
  65. it( 'should be false if selection is not in a heading column', () => {
  66. setData( model, modelTable( [
  67. [ '01', '02' ],
  68. [ '11', '12[]' ]
  69. ], { headingColumns: 1 } ) );
  70. expect( command.value ).to.be.false;
  71. } );
  72. it( 'should be true if selection is in a heading column', () => {
  73. setData( model, modelTable( [
  74. [ '01[]', '02' ],
  75. [ '11', '12' ]
  76. ], { headingColumns: 1 } ) );
  77. expect( command.value ).to.be.true;
  78. } );
  79. it( 'should be true if multiple header columns are selected', () => {
  80. setData( model, modelTable( [
  81. [ '01', '02', '03' ]
  82. ], { headingColumns: 2 } ) );
  83. const tableSelection = editor.plugins.get( TableSelection );
  84. const modelRoot = model.document.getRoot();
  85. tableSelection.setCellSelection(
  86. modelRoot.getNodeByPath( [ 0, 0, 0 ] ),
  87. modelRoot.getNodeByPath( [ 0, 0, 1 ] )
  88. );
  89. expect( command.value ).to.be.true;
  90. } );
  91. it( 'should be true if multiple header columns are selected in reversed order', () => {
  92. setData( model, modelTable( [
  93. [ '01', '02', '03' ]
  94. ], { headingColumns: 2 } ) );
  95. const tableSelection = editor.plugins.get( TableSelection );
  96. const modelRoot = model.document.getRoot();
  97. tableSelection.setCellSelection(
  98. modelRoot.getNodeByPath( [ 0, 0, 1 ] ),
  99. modelRoot.getNodeByPath( [ 0, 0, 0 ] )
  100. );
  101. expect( command.value ).to.be.true;
  102. } );
  103. it( 'should be false if selection is in a heading row', () => {
  104. setData( model, modelTable( [
  105. [ '01', '02[]' ],
  106. [ '11', '12' ]
  107. ], { headingRows: 1, headingColumns: 1 } ) );
  108. expect( command.value ).to.be.false;
  109. } );
  110. it( 'should be false if only part of selected columns are headers', () => {
  111. setData( model, modelTable( [
  112. [ '01', '02', '03', '04' ]
  113. ], { headingColumns: 2 } ) );
  114. const tableSelection = editor.plugins.get( TableSelection );
  115. const modelRoot = model.document.getRoot();
  116. tableSelection.setCellSelection(
  117. modelRoot.getNodeByPath( [ 0, 0, 1 ] ),
  118. modelRoot.getNodeByPath( [ 0, 0, 2 ] )
  119. );
  120. expect( command.value ).to.be.false;
  121. } );
  122. } );
  123. describe( 'execute()', () => {
  124. it( 'should set heading columns attribute that cover column with collapsed selection', () => {
  125. setData( model, modelTable( [
  126. [ '00', '01[]', '02', '03' ]
  127. ] ) );
  128. command.execute();
  129. assertEqualMarkup( getData( model ), modelTable( [
  130. [ '00', '01[]', '02', '03' ]
  131. ], { headingColumns: 2 } ) );
  132. } );
  133. it( 'should set heading columns attribute that cover column with entire cell selected', () => {
  134. setData( model, modelTable( [
  135. [ '00', '01', '02', '03' ]
  136. ] ) );
  137. const tableSelection = editor.plugins.get( TableSelection );
  138. const modelRoot = model.document.getRoot();
  139. tableSelection.setCellSelection(
  140. modelRoot.getNodeByPath( [ 0, 0, 1 ] ),
  141. modelRoot.getNodeByPath( [ 0, 0, 1 ] )
  142. );
  143. command.execute();
  144. assertEqualMarkup( getData( model, { withoutSelection: true } ), modelTable( [
  145. [ '00', '01', '02', '03' ]
  146. ], { headingColumns: 2 } ) );
  147. assertSelectedCells( model, [
  148. [ 0, 1, 0, 0 ]
  149. ] );
  150. } );
  151. it( 'should set heading columns attribute below current selection column', () => {
  152. setData( model, modelTable( [
  153. [ '00', '01[]', '02', '03' ]
  154. ], { headingColumns: 3 } ) );
  155. command.execute();
  156. assertEqualMarkup( getData( model ), modelTable( [
  157. [ '00', '01[]', '02', '03' ]
  158. ], { headingColumns: 1 } ) );
  159. } );
  160. it( 'should remove "headingColumns" attribute from table if no value was given', () => {
  161. setData( model, modelTable( [
  162. [ '[]00', '01', '02', '03' ]
  163. ], { headingColumns: 3 } ) );
  164. command.execute();
  165. assertEqualMarkup( getData( model ), modelTable( [
  166. [ '[]00', '01', '02', '03' ]
  167. ] ) );
  168. } );
  169. describe( 'multi-cell selection', () => {
  170. describe( 'setting header', () => {
  171. it( 'should set it correctly in a middle of single-row, multiple cell selection', () => {
  172. setData( model, modelTable( [
  173. [ '00', '01', '02', '03' ]
  174. ] ) );
  175. const tableSelection = editor.plugins.get( TableSelection );
  176. const modelRoot = model.document.getRoot();
  177. tableSelection.setCellSelection(
  178. modelRoot.getNodeByPath( [ 0, 0, 1 ] ),
  179. modelRoot.getNodeByPath( [ 0, 0, 2 ] )
  180. );
  181. command.execute();
  182. assertEqualMarkup( getData( model, { withoutSelection: true } ), modelTable( [
  183. [ '00', '01', '02', '03' ]
  184. ], {
  185. headingColumns: 3
  186. } ) );
  187. assertSelectedCells( model, [
  188. [ 0, 1, 1, 0 ]
  189. ] );
  190. } );
  191. it( 'should set it correctly in a middle of multi-row, multiple cell selection', () => {
  192. setData( model, modelTable( [
  193. [ '00', '01', '02', '03' ],
  194. [ '10', '11', '12', '13' ]
  195. ] ) );
  196. const tableSelection = editor.plugins.get( TableSelection );
  197. const modelRoot = model.document.getRoot();
  198. tableSelection.setCellSelection(
  199. modelRoot.getNodeByPath( [ 0, 0, 1 ] ),
  200. modelRoot.getNodeByPath( [ 0, 1, 1 ] )
  201. );
  202. command.execute();
  203. assertEqualMarkup( getData( model, { withoutSelection: true } ), modelTable( [
  204. [ '00', '01', '02', '03' ],
  205. [ '10', '11', '12', '13' ]
  206. ], {
  207. headingColumns: 2
  208. } ) );
  209. assertSelectedCells( model, [
  210. [ 0, 1, 0, 0 ],
  211. [ 0, 1, 0, 0 ]
  212. ] );
  213. } );
  214. it( 'should remove header columns in case of multiple cell selection', () => {
  215. setData( model, modelTable( [
  216. [ '00', '01', '02', '03' ]
  217. ], { headingColumns: 4 } ) );
  218. const tableSelection = editor.plugins.get( TableSelection );
  219. const modelRoot = model.document.getRoot();
  220. tableSelection.setCellSelection(
  221. modelRoot.getNodeByPath( [ 0, 0, 1 ] ),
  222. modelRoot.getNodeByPath( [ 0, 0, 2 ] )
  223. );
  224. command.execute();
  225. assertEqualMarkup( getData( model, { withoutSelection: true } ), modelTable( [
  226. [ '00', '01', '02', '03' ]
  227. ], {
  228. headingColumns: 1
  229. } ) );
  230. assertSelectedCells( model, [
  231. [ 0, 1, 1, 0 ]
  232. ] );
  233. } );
  234. it( 'should remove header columns in case of multiple cell selection - reversed order', () => {
  235. setData( model, modelTable( [
  236. [ '00', '01', '02', '03' ]
  237. ], {
  238. headingColumns: 4
  239. } ) );
  240. const tableSelection = editor.plugins.get( TableSelection );
  241. const modelRoot = model.document.getRoot();
  242. tableSelection.setCellSelection(
  243. modelRoot.getNodeByPath( [ 0, 0, 2 ] ),
  244. modelRoot.getNodeByPath( [ 0, 0, 1 ] )
  245. );
  246. command.execute();
  247. assertEqualMarkup( getData( model, {
  248. withoutSelection: true
  249. } ), modelTable( [
  250. [ '00', '01', '02', '03' ]
  251. ], {
  252. headingColumns: 1
  253. } ) );
  254. assertSelectedCells( model, [
  255. [ 0, 1, 1, 0 ]
  256. ] );
  257. } );
  258. it( 'should respect forceValue=true in case of multiple cell selection', () => {
  259. setData( model, modelTable( [
  260. [ '00', '01', '02', '03' ]
  261. ], {
  262. headingColumns: 3
  263. } ) );
  264. const tableSelection = editor.plugins.get( TableSelection );
  265. const modelRoot = model.document.getRoot();
  266. tableSelection.setCellSelection(
  267. modelRoot.getNodeByPath( [ 0, 0, 1 ] ),
  268. modelRoot.getNodeByPath( [ 0, 0, 2 ] )
  269. );
  270. command.execute( { forceValue: true } );
  271. assertEqualMarkup( getData( model, {
  272. withoutSelection: true
  273. } ), modelTable( [
  274. [ '00', '01', '02', '03' ]
  275. ], {
  276. headingColumns: 3
  277. } ) );
  278. assertSelectedCells( model, [
  279. [ 0, 1, 1, 0 ]
  280. ] );
  281. } );
  282. it( 'should respect forceValue=false in case of multiple cell selection', () => {
  283. setData( model, modelTable( [
  284. [ '00', '01', '02', '03' ]
  285. ], {
  286. headingColumns: 1
  287. } ) );
  288. const tableSelection = editor.plugins.get( TableSelection );
  289. const modelRoot = model.document.getRoot();
  290. tableSelection.setCellSelection(
  291. modelRoot.getNodeByPath( [ 0, 0, 1 ] ),
  292. modelRoot.getNodeByPath( [ 0, 0, 2 ] )
  293. );
  294. command.execute( { forceValue: false } );
  295. assertEqualMarkup( getData( model, {
  296. withoutSelection: true
  297. } ), modelTable( [
  298. [ '00', '01', '02', '03' ]
  299. ], {
  300. headingColumns: 1
  301. } ) );
  302. assertSelectedCells( model, [
  303. [ 0, 1, 1, 0 ]
  304. ] );
  305. } );
  306. it( 'should set it correctly in table with more than 10 columns (array sort bug)', () => {
  307. setData( model, modelTable( [
  308. [ '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14' ]
  309. ] ) );
  310. const tableSelection = editor.plugins.get( TableSelection );
  311. const modelRoot = model.document.getRoot();
  312. tableSelection.setCellSelection(
  313. modelRoot.getNodeByPath( [ 0, 0, 2 ] ),
  314. modelRoot.getNodeByPath( [ 0, 0, 13 ] )
  315. );
  316. command.execute();
  317. assertEqualMarkup( getData( model, { withoutSelection: true } ), modelTable( [
  318. [ '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14' ]
  319. ], { headingColumns: 14 } ) );
  320. } );
  321. } );
  322. } );
  323. it( 'should toggle of selected column', () => {
  324. setData( model, modelTable( [
  325. [ '00', '01[]', '02', '03' ]
  326. ], { headingColumns: 2 } ) );
  327. command.execute();
  328. assertEqualMarkup( getData( model ), modelTable( [
  329. [ '00', '01[]', '02', '03' ]
  330. ], { headingColumns: 1 } ) );
  331. command.execute();
  332. assertEqualMarkup( getData( model ), modelTable( [
  333. [ '00', '01[]', '02', '03' ]
  334. ], { headingColumns: 2 } ) );
  335. } );
  336. it( 'should respect forceValue parameter (forceValue=true)', () => {
  337. setData( model, modelTable( [
  338. [ '00', '01[]', '02', '03' ]
  339. ], { headingColumns: 3 } ) );
  340. command.execute( { forceValue: true } );
  341. assertEqualMarkup( getData( model ), modelTable( [
  342. [ '00', '01[]', '02', '03' ]
  343. ], { headingColumns: 3 } ) );
  344. } );
  345. it( 'should respect forceValue parameter (forceValue=false)', () => {
  346. setData( model, modelTable( [
  347. [ '00', '01[]', '02', '03' ]
  348. ], { headingColumns: 1 } ) );
  349. command.execute( { forceValue: false } );
  350. assertEqualMarkup( getData( model ), modelTable( [
  351. [ '00', '01[]', '02', '03' ]
  352. ], { headingColumns: 1 } ) );
  353. } );
  354. it( 'should fix col-spanned cells on the edge of an table heading columns section', () => {
  355. // +----+----+----+
  356. // | 00 | 01 |
  357. // +----+ +
  358. // | 10 | |
  359. // +----+----+----+
  360. // | 20 | 21 | 22 |
  361. // +----+----+----+
  362. // ^-- heading columns
  363. setData( model, modelTable( [
  364. [ '00', { contents: '[]01', colspan: 2, rowspan: 2 } ],
  365. [ '10' ],
  366. [ '20', '21', '22' ]
  367. ], { headingColumns: 1 } ) );
  368. command.execute();
  369. // +----+----+----+
  370. // | 00 | 01 | |
  371. // +----+ + +
  372. // | 10 | | |
  373. // +----+----+----+
  374. // | 20 | 21 | 22 |
  375. // +----+----+----+
  376. // ^-- heading columns
  377. assertEqualMarkup( getData( model ), modelTable( [
  378. [ '00', { contents: '[]01', rowspan: 2 }, { contents: '', rowspan: 2 } ],
  379. [ '10' ],
  380. [ '20', '21', '22' ]
  381. ], { headingColumns: 2 } ) );
  382. } );
  383. it( 'should split to at most 2 table cells when fixing col-spanned cells on the edge of an table heading columns section', () => {
  384. // +----+----+----+----+----+----+
  385. // | 00 | 01 |
  386. // +----+ +
  387. // | 10 | |
  388. // +----+----+----+----+----+----+
  389. // | 20 | 21 | 22 | 23 | 24 | 25 |
  390. // +----+----+----+----+----+----+
  391. // ^-- heading columns
  392. setData( model, modelTable( [
  393. [ '00', { contents: '01', colspan: 5, rowspan: 2 } ],
  394. [ '10' ],
  395. [ '20', '21', '22[]', '23', '24', '25' ]
  396. ], { headingColumns: 1 } ) );
  397. command.execute();
  398. // +----+----+----+----+----+----+
  399. // | 00 | 01 | |
  400. // +----+ + +
  401. // | 10 | | |
  402. // +----+----+----+----+----+----+
  403. // | 20 | 21 | 22 | 23 | 24 | 25 |
  404. // +----+----+----+----+----+----+
  405. // ^-- heading columns
  406. assertEqualMarkup( getData( model ), modelTable( [
  407. [ '00', { contents: '01', colspan: 2, rowspan: 2 }, { contents: '', colspan: 3, rowspan: 2 } ],
  408. [ '10' ],
  409. [ '20', '21', '22[]', '23', '24', '25' ]
  410. ], { headingColumns: 3 } ) );
  411. } );
  412. it( 'should fix col-spanned cells on the edge of an table heading columns section when creating section', () => {
  413. // +----+----+
  414. // | 00 |
  415. // +----+----+
  416. // | 10 | 11 |
  417. // +----+----+
  418. // ^-- heading columns
  419. setData( model, modelTable( [
  420. [ { contents: '00', colspan: 2 } ],
  421. [ '10', '[]11' ]
  422. ], { headingColumns: 2 } ) );
  423. command.execute();
  424. // +----+----+
  425. // | 00 | |
  426. // +----+----+
  427. // | 10 | 11 |
  428. // +----+----+
  429. // ^-- heading columns
  430. assertEqualMarkup( getData( model ), modelTable( [
  431. [ '00', '' ],
  432. [ '10', '[]11' ]
  433. ], { headingColumns: 1 } ) );
  434. } );
  435. } );
  436. } );