tableselection.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580
  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. /* globals document */
  6. import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  7. import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
  8. import {
  9. getData as getModelData,
  10. setData as setModelData,
  11. stringify as stringifyModel
  12. } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  13. import TableEditing from '../src/tableediting';
  14. import TableSelection from '../src/tableselection';
  15. import { assertSelectedCells, modelTable } from './_utils/utils';
  16. import DocumentFragment from '@ckeditor/ckeditor5-engine/src/model/documentfragment';
  17. import Typing from '@ckeditor/ckeditor5-typing/src/typing';
  18. import { assertEqualMarkup } from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
  19. describe( 'TableSelection', () => {
  20. let editorElement, editor, model, tableSelection, modelRoot;
  21. beforeEach( () => {
  22. editorElement = document.createElement( 'div' );
  23. document.body.appendChild( editorElement );
  24. } );
  25. afterEach( async () => {
  26. editorElement.remove();
  27. await editor.destroy();
  28. } );
  29. describe( 'init()', () => {
  30. beforeEach( async () => {
  31. editor = await createEditor();
  32. model = editor.model;
  33. modelRoot = model.document.getRoot();
  34. tableSelection = editor.plugins.get( TableSelection );
  35. setModelData( model, modelTable( [
  36. [ '11[]', '12', '13' ],
  37. [ '21', '22', '23' ],
  38. [ '31', '32', '33' ]
  39. ] ) );
  40. } );
  41. it( 'should have pluginName', () => {
  42. expect( TableSelection.pluginName ).to.equal( 'TableSelection' );
  43. } );
  44. describe( 'plugin disabling support', () => {
  45. it( 'should collapse multi-cell selection when the plugin gets disabled', () => {
  46. const firstCell = modelRoot.getNodeByPath( [ 0, 0, 0 ] );
  47. const lastCell = modelRoot.getNodeByPath( [ 0, 1, 1 ] );
  48. tableSelection.setCellSelection(
  49. firstCell,
  50. lastCell
  51. );
  52. tableSelection.forceDisabled( 'foo' );
  53. const ranges = [ ...model.document.selection.getRanges() ];
  54. expect( ranges ).to.have.length( 1 );
  55. expect( ranges[ 0 ].isCollapsed ).to.be.true;
  56. expect( ranges[ 0 ].start.path ).to.deep.equal( [ 0, 0, 0, 0, 0 ] );
  57. } );
  58. it( 'should reenable table selection when reenabling the plugin', () => {
  59. tableSelection.forceDisabled( 'foo' );
  60. tableSelection.clearForceDisabled( 'foo' );
  61. const firstCell = modelRoot.getNodeByPath( [ 0, 0, 0 ] );
  62. const lastCell = modelRoot.getNodeByPath( [ 0, 1, 1 ] );
  63. tableSelection.setCellSelection(
  64. firstCell,
  65. lastCell
  66. );
  67. assertSelectedCells( model, [
  68. [ 1, 1, 0 ],
  69. [ 1, 1, 0 ],
  70. [ 0, 0, 0 ]
  71. ] );
  72. } );
  73. it( 'should do nothing if there were no multi-cell selections', () => {
  74. tableSelection.forceDisabled( 'foo' );
  75. const ranges = [ ...model.document.selection.getRanges() ];
  76. expect( ranges ).to.have.length( 1 );
  77. expect( ranges[ 0 ].isCollapsed ).to.be.true;
  78. expect( ranges[ 0 ].start.path ).to.deep.equal( [ 0, 0, 0, 0, 2 ] );
  79. } );
  80. } );
  81. } );
  82. describe( 'getSelectedTableCells()', () => {
  83. beforeEach( async () => {
  84. editor = await createEditor();
  85. model = editor.model;
  86. modelRoot = model.document.getRoot();
  87. tableSelection = editor.plugins.get( TableSelection );
  88. setModelData( model, modelTable( [
  89. [ '11[]', '12', '13' ],
  90. [ '21', '22', '23' ],
  91. [ '31', '32', '33' ]
  92. ] ) );
  93. } );
  94. it( 'should return nothing if selection is not started', () => {
  95. expect( tableSelection.getSelectedTableCells() ).to.be.null;
  96. } );
  97. it( 'should return two table cells', () => {
  98. const firstCell = modelRoot.getNodeByPath( [ 0, 0, 0 ] );
  99. const lastCell = modelRoot.getNodeByPath( [ 0, 0, 1 ] );
  100. tableSelection.setCellSelection(
  101. firstCell,
  102. lastCell
  103. );
  104. expect( tableSelection.getSelectedTableCells() ).to.deep.equal( [
  105. firstCell, lastCell
  106. ] );
  107. } );
  108. it( 'should return four table cells for diagonal selection', () => {
  109. const firstCell = modelRoot.getNodeByPath( [ 0, 0, 0 ] );
  110. const lastCell = modelRoot.getNodeByPath( [ 0, 1, 1 ] );
  111. tableSelection.setCellSelection(
  112. firstCell,
  113. lastCell
  114. );
  115. expect( tableSelection.getSelectedTableCells() ).to.deep.equal( [
  116. firstCell, modelRoot.getNodeByPath( [ 0, 0, 1 ] ), modelRoot.getNodeByPath( [ 0, 1, 0 ] ), lastCell
  117. ] );
  118. } );
  119. it( 'should return row table cells', () => {
  120. const firstCell = modelRoot.getNodeByPath( [ 0, 0, 0 ] );
  121. const lastCell = modelRoot.getNodeByPath( [ 0, 0, 2 ] );
  122. tableSelection.setCellSelection(
  123. firstCell,
  124. lastCell
  125. );
  126. expect( tableSelection.getSelectedTableCells() ).to.deep.equal( [
  127. firstCell, modelRoot.getNodeByPath( [ 0, 0, 1 ] ), lastCell
  128. ] );
  129. } );
  130. it( 'should return column table cells', () => {
  131. const firstCell = modelRoot.getNodeByPath( [ 0, 0, 1 ] );
  132. const lastCell = modelRoot.getNodeByPath( [ 0, 2, 1 ] );
  133. tableSelection.setCellSelection( firstCell, lastCell );
  134. expect( tableSelection.getSelectedTableCells() ).to.deep.equal( [
  135. firstCell, modelRoot.getNodeByPath( [ 0, 1, 1 ] ), lastCell
  136. ] );
  137. } );
  138. it( 'should return cells in source order despite backward selection', () => {
  139. const firstCell = modelRoot.getNodeByPath( [ 0, 0, 2 ] );
  140. const lastCell = modelRoot.getNodeByPath( [ 0, 0, 1 ] );
  141. tableSelection.setCellSelection( firstCell, lastCell );
  142. expect( tableSelection.getSelectedTableCells() ).to.deep.equal( [
  143. lastCell, firstCell
  144. ] );
  145. } );
  146. } );
  147. describe( 'getSelectionAsFragment()', () => {
  148. beforeEach( async () => {
  149. editor = await createEditor();
  150. model = editor.model;
  151. modelRoot = model.document.getRoot();
  152. tableSelection = editor.plugins.get( TableSelection );
  153. setModelData( model, modelTable( [
  154. [ '11[]', '12', '13' ],
  155. [ '21', '22', '23' ],
  156. [ '31', '32', '33' ]
  157. ] ) );
  158. } );
  159. it( 'should return undefined if no table cells are selected', () => {
  160. expect( tableSelection.getSelectionAsFragment() ).to.be.null;
  161. } );
  162. it( 'should return document fragment for selected table cells', () => {
  163. tableSelection.setCellSelection(
  164. modelRoot.getNodeByPath( [ 0, 0, 0 ] ),
  165. modelRoot.getNodeByPath( [ 0, 1, 1 ] )
  166. );
  167. expect( tableSelection.getSelectionAsFragment() ).to.be.instanceOf( DocumentFragment );
  168. } );
  169. it( 'should return cells in the source order in case of forward selection', () => {
  170. tableSelection.setCellSelection(
  171. modelRoot.getNodeByPath( [ 0, 0, 0 ] ),
  172. modelRoot.getNodeByPath( [ 0, 1, 1 ] )
  173. );
  174. expect( stringifyModel( tableSelection.getSelectionAsFragment() ) ).to.equal( modelTable( [
  175. [ '11', '12' ],
  176. [ '21', '22' ]
  177. ] ) );
  178. } );
  179. it( 'should return cells in the source order in case of backward selection', () => {
  180. tableSelection.setCellSelection(
  181. modelRoot.getNodeByPath( [ 0, 1, 1 ] ),
  182. modelRoot.getNodeByPath( [ 0, 0, 0 ] )
  183. );
  184. expect( editor.model.document.selection.isBackward ).to.be.true;
  185. expect( stringifyModel( tableSelection.getSelectionAsFragment() ) ).to.equal( modelTable( [
  186. [ '11', '12' ],
  187. [ '21', '22' ]
  188. ] ) );
  189. } );
  190. it( 'should adjust the selection dimensions if it\'s rectangular but last row has only row-spanned cells', () => {
  191. // +----+----+----+
  192. // | 00 | 01 | 02 |
  193. // +----+----+----+
  194. // | 10 | 11 | 12 |
  195. // + + +----+
  196. // | | | 22 |
  197. // +----+----+----+
  198. setModelData( model, modelTable( [
  199. [ '00', '01', '02' ],
  200. [ { contents: '10', rowspan: 2 }, { contents: '11', rowspan: 2 }, '12' ],
  201. [ '22' ]
  202. ] ) );
  203. tableSelection.setCellSelection(
  204. modelRoot.getNodeByPath( [ 0, 0, 0 ] ),
  205. modelRoot.getNodeByPath( [ 0, 1, 1 ] )
  206. );
  207. // +----+----+
  208. // | 00 | 01 |
  209. // +----+----+
  210. // | 10 | 11 |
  211. // + + +
  212. // | | |
  213. // +----+----+
  214. expect( stringifyModel( tableSelection.getSelectionAsFragment() ) ).to.equal( modelTable( [
  215. [ '00', '01' ],
  216. [ { contents: '10', rowspan: 2 }, { contents: '11', rowspan: 2 } ],
  217. [] // This is an empty row that should be here to properly handle pasting of this table fragment.
  218. ] ) );
  219. } );
  220. it( 'should adjust the selection dimensions if it\'s rectangular but last column has only col-spanned cells', () => {
  221. // +----+----+----+
  222. // | 00 | 01 |
  223. // +----+----+----+
  224. // | 10 | 11 |
  225. // +----+----+----+
  226. // | 20 | 21 | 22 |
  227. // +----+----+----+
  228. setModelData( model, modelTable( [
  229. [ '00', { contents: '01', colspan: 2 } ],
  230. [ '10', { contents: '11', colspan: 2 } ],
  231. [ '20', '21', '22' ]
  232. ] ) );
  233. tableSelection.setCellSelection(
  234. modelRoot.getNodeByPath( [ 0, 0, 0 ] ),
  235. modelRoot.getNodeByPath( [ 0, 1, 1 ] )
  236. );
  237. // +----+----+----+
  238. // | 00 | 01 |
  239. // +----+----+----+
  240. // | 10 | 11 |
  241. // +----+----+----+
  242. expect( stringifyModel( tableSelection.getSelectionAsFragment() ) ).to.equal( modelTable( [
  243. [ '00', { contents: '01', colspan: 2 } ],
  244. [ '10', { contents: '11', colspan: 2 } ]
  245. ] ) );
  246. } );
  247. it( 'should crop table fragment to rectangular selection', () => {
  248. // +----+----+----+
  249. // | 00 | 01 |
  250. // +----+----+----+
  251. // | 10 | 11 | 12 |
  252. // + +----+----+
  253. // | | 21 | 22 |
  254. // +----+----+----+
  255. setModelData( model, modelTable( [
  256. [ '00', { contents: '01', colspan: 2 } ],
  257. [ { contents: '10', rowspan: 2 }, '11', '12' ],
  258. [ '21', '22' ]
  259. ] ) );
  260. tableSelection.setCellSelection(
  261. modelRoot.getNodeByPath( [ 0, 0, 0 ] ),
  262. modelRoot.getNodeByPath( [ 0, 1, 1 ] )
  263. );
  264. // +----+----+
  265. // | 00 | 01 |
  266. // +----+----+
  267. // | 10 | 11 |
  268. // +----+----+
  269. expect( stringifyModel( tableSelection.getSelectionAsFragment() ) ).to.equal( modelTable( [
  270. [ '00', '01' ],
  271. [ '10', '11' ]
  272. ] ) );
  273. } );
  274. } );
  275. describe( 'delete content', () => {
  276. beforeEach( async () => {
  277. editor = await createEditor();
  278. model = editor.model;
  279. modelRoot = model.document.getRoot();
  280. tableSelection = editor.plugins.get( TableSelection );
  281. setModelData( model, modelTable( [
  282. [ '11[]', '12', '13' ],
  283. [ '21', '22', '23' ],
  284. [ '31', '32', '33' ]
  285. ] ) );
  286. } );
  287. it( 'should put selection in the last selected cell after removing content (backward delete)', () => {
  288. tableSelection.setCellSelection(
  289. modelRoot.getChild( 0 ).getChild( 0 ).getChild( 0 ),
  290. modelRoot.getChild( 0 ).getChild( 1 ).getChild( 1 )
  291. );
  292. editor.execute( 'delete' );
  293. assertEqualMarkup( getModelData( model ), modelTable( [
  294. [ '', '', '13' ],
  295. [ '', '[]', '23' ],
  296. [ '31', '32', '33' ]
  297. ] ) );
  298. } );
  299. it( 'should put selection in the last selected cell after removing content (forward delete)', () => {
  300. tableSelection.setCellSelection(
  301. modelRoot.getChild( 0 ).getChild( 0 ).getChild( 0 ),
  302. modelRoot.getChild( 0 ).getChild( 1 ).getChild( 1 )
  303. );
  304. editor.execute( 'delete' );
  305. assertEqualMarkup( getModelData( model ), modelTable( [
  306. [ '', '', '13' ],
  307. [ '', '[]', '23' ],
  308. [ '31', '32', '33' ]
  309. ] ) );
  310. } );
  311. it( 'should clear single cell if selected', () => {
  312. tableSelection.setCellSelection(
  313. modelRoot.getChild( 0 ).getChild( 0 ).getChild( 0 ),
  314. modelRoot.getChild( 0 ).getChild( 0 ).getChild( 0 )
  315. );
  316. editor.execute( 'forwardDelete' );
  317. assertEqualMarkup( getModelData( model ), modelTable( [
  318. [ '[]', '12', '13' ],
  319. [ '21', '22', '23' ],
  320. [ '31', '32', '33' ]
  321. ] ) );
  322. } );
  323. it( 'should work with document selection passed to Model#deleteContent()', () => {
  324. tableSelection.setCellSelection(
  325. modelRoot.getNodeByPath( [ 0, 0, 0 ] ),
  326. modelRoot.getNodeByPath( [ 0, 1, 1 ] )
  327. );
  328. model.change( () => {
  329. model.deleteContent( model.document.selection );
  330. } );
  331. assertEqualMarkup( getModelData( model ), modelTable( [
  332. [ '', '', '13' ],
  333. [ '', '[]', '23' ],
  334. [ '31', '32', '33' ]
  335. ] ) );
  336. } );
  337. it( 'should work with any arbitrary selection passed to Model#deleteContent() (delete backwards)', () => {
  338. const selection = model.createSelection( [
  339. model.createRange(
  340. model.createPositionFromPath( modelRoot, [ 0, 0, 0 ] ),
  341. model.createPositionFromPath( modelRoot, [ 0, 0, 1 ] )
  342. ),
  343. model.createRange(
  344. model.createPositionFromPath( modelRoot, [ 0, 0, 1 ] ),
  345. model.createPositionFromPath( modelRoot, [ 0, 0, 2 ] )
  346. )
  347. ] );
  348. model.change( writer => {
  349. model.deleteContent( selection );
  350. writer.setSelection( selection );
  351. } );
  352. assertEqualMarkup( getModelData( model ), modelTable( [
  353. [ '', '[]', '13' ],
  354. [ '21', '22', '23' ],
  355. [ '31', '32', '33' ]
  356. ] ) );
  357. } );
  358. it( 'should work with any arbitrary selection passed to Model#deleteContent() (delete forwards)', () => {
  359. const selection = model.createSelection( [
  360. model.createRange(
  361. model.createPositionFromPath( modelRoot, [ 0, 0, 0 ] ),
  362. model.createPositionFromPath( modelRoot, [ 0, 0, 1 ] )
  363. ),
  364. model.createRange(
  365. model.createPositionFromPath( modelRoot, [ 0, 0, 1 ] ),
  366. model.createPositionFromPath( modelRoot, [ 0, 0, 2 ] )
  367. )
  368. ] );
  369. model.change( writer => {
  370. model.deleteContent( selection, {
  371. direction: 'forward'
  372. } );
  373. writer.setSelection( selection );
  374. } );
  375. assertEqualMarkup( getModelData( model ), modelTable( [
  376. [ '[]', '', '13' ],
  377. [ '21', '22', '23' ],
  378. [ '31', '32', '33' ]
  379. ] ) );
  380. } );
  381. } );
  382. describe( 'getAnchorCell() and getFocusCell()', () => {
  383. beforeEach( async () => {
  384. editor = await createEditor();
  385. model = editor.model;
  386. modelRoot = model.document.getRoot();
  387. tableSelection = editor.plugins.get( TableSelection );
  388. setModelData( model, modelTable( [
  389. [ '[]00', '01', '02' ],
  390. [ '10', '11', '12' ],
  391. [ '20', '21', '22' ]
  392. ] ) );
  393. } );
  394. it( 'should return null if no table cell is selected', () => {
  395. expect( tableSelection.getAnchorCell() ).to.be.null;
  396. expect( tableSelection.getFocusCell() ).to.be.null;
  397. } );
  398. it( 'getAnchorCell() should return the table cell from the first range in the selection', () => {
  399. const anchorCell = modelRoot.getNodeByPath( [ 0, 0, 0 ] );
  400. const focusCell = modelRoot.getNodeByPath( [ 0, 1, 1 ] );
  401. tableSelection.setCellSelection( anchorCell, focusCell );
  402. expect( tableSelection.getAnchorCell() ).to.equal( anchorCell );
  403. } );
  404. it( 'getFocusCell() should return the table cell from the last range in the selection', () => {
  405. const anchorCell = modelRoot.getNodeByPath( [ 0, 0, 0 ] );
  406. const focusCell = modelRoot.getNodeByPath( [ 0, 1, 1 ] );
  407. tableSelection.setCellSelection( anchorCell, focusCell );
  408. expect( tableSelection.getFocusCell() ).to.equal( focusCell );
  409. } );
  410. } );
  411. describe( 'the selection ranges order', () => {
  412. let selection, table;
  413. beforeEach( async () => {
  414. editor = await createEditor();
  415. model = editor.model;
  416. selection = model.document.selection;
  417. modelRoot = model.document.getRoot();
  418. tableSelection = editor.plugins.get( TableSelection );
  419. setModelData( model, modelTable( [
  420. [ '00', '01', '02' ],
  421. [ '10', '11', '12' ],
  422. [ '20', '21', '22' ]
  423. ] ) );
  424. table = modelRoot.getChild( 0 );
  425. } );
  426. it( 'should be to below right', () => {
  427. const anchorCell = table.getChild( 1 ).getChild( 1 );
  428. const focusCell = table.getChild( 2 ).getChild( 2 );
  429. tableSelection.setCellSelection( anchorCell, focusCell );
  430. assertSelection( anchorCell, focusCell, 4 );
  431. expect( tableSelection.getFocusCell() ).to.equal( focusCell );
  432. expect( tableSelection.getAnchorCell() ).to.equal( anchorCell );
  433. expect( selection.isBackward ).to.be.false;
  434. } );
  435. it( 'should be to below left', () => {
  436. const anchorCell = table.getChild( 1 ).getChild( 1 );
  437. const focusCell = table.getChild( 2 ).getChild( 0 );
  438. tableSelection.setCellSelection( anchorCell, focusCell );
  439. assertSelection( anchorCell, focusCell, 4 );
  440. expect( tableSelection.getFocusCell() ).to.equal( focusCell );
  441. expect( tableSelection.getAnchorCell() ).to.equal( anchorCell );
  442. expect( selection.isBackward ).to.be.true;
  443. } );
  444. it( 'should be to above left', () => {
  445. const anchorCell = table.getChild( 1 ).getChild( 1 );
  446. const focusCell = table.getChild( 0 ).getChild( 0 );
  447. tableSelection.setCellSelection( anchorCell, focusCell );
  448. assertSelection( anchorCell, focusCell, 4 );
  449. expect( tableSelection.getFocusCell() ).to.equal( focusCell );
  450. expect( tableSelection.getAnchorCell() ).to.equal( anchorCell );
  451. expect( selection.isBackward ).to.be.true;
  452. } );
  453. it( 'should be to above right', () => {
  454. const anchorCell = table.getChild( 1 ).getChild( 1 );
  455. const focusCell = table.getChild( 0 ).getChild( 2 );
  456. tableSelection.setCellSelection( anchorCell, focusCell );
  457. assertSelection( anchorCell, focusCell, 4 );
  458. expect( tableSelection.getFocusCell() ).to.equal( focusCell );
  459. expect( tableSelection.getAnchorCell() ).to.equal( anchorCell );
  460. expect( selection.isBackward ).to.be.true;
  461. } );
  462. function assertSelection( anchorCell, focusCell, count ) {
  463. const cells = [ ...selection.getRanges() ].map( range => range.getContainedElement() );
  464. expect( selection.rangeCount ).to.equal( count );
  465. expect( cells[ 0 ] ).to.equal( anchorCell );
  466. expect( cells[ cells.length - 1 ] ).to.equal( focusCell );
  467. }
  468. } );
  469. function createEditor() {
  470. return ClassicTestEditor.create( editorElement, {
  471. plugins: [ TableEditing, TableSelection, Paragraph, Typing ]
  472. } );
  473. }
  474. } );