liverange.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536
  1. /**
  2. * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* bender-tags: model */
  6. import Document from '/ckeditor5/engine/model/document.js';
  7. import Element from '/ckeditor5/engine/model/element.js';
  8. import Position from '/ckeditor5/engine/model/position.js';
  9. import LiveRange from '/ckeditor5/engine/model/liverange.js';
  10. import Range from '/ckeditor5/engine/model/range.js';
  11. describe( 'LiveRange', () => {
  12. let doc, root, ul, p;
  13. before( () => {
  14. doc = new Document();
  15. root = doc.createRoot();
  16. let lis = [
  17. new Element( 'li', [], 'aaaaaaaaaa' ),
  18. new Element( 'li', [], 'bbbbbbbbbb' ),
  19. new Element( 'li', [], 'cccccccccc' ),
  20. new Element( 'li', [], 'dddddddddd' ),
  21. new Element( 'li', [], 'eeeeeeeeee' ),
  22. new Element( 'li', [], 'ffffffffff' ),
  23. new Element( 'li', [], 'gggggggggg' ),
  24. new Element( 'li', [], 'hhhhhhhhhh' )
  25. ];
  26. ul = new Element( 'ul', [], lis );
  27. p = new Element( 'p', [], 'qwertyuiop' );
  28. root.insertChildren( 0, [ ul, p, 'xyzxyz' ] );
  29. } );
  30. it( 'should be an instance of Range', () => {
  31. let live = new LiveRange( new Position( root, [ 0 ] ), new Position( root, [ 1 ] ) );
  32. live.detach();
  33. expect( live ).to.be.instanceof( Range );
  34. } );
  35. it( 'should listen to a change event of the document that owns this range', () => {
  36. sinon.spy( LiveRange.prototype, 'listenTo' );
  37. let live = new LiveRange( new Position( root, [ 0 ] ), new Position( root, [ 1 ] ) );
  38. live.detach();
  39. expect( live.listenTo.calledWith( doc, 'change' ) ).to.be.true;
  40. LiveRange.prototype.listenTo.restore();
  41. } );
  42. it( 'should stop listening when detached', () => {
  43. sinon.spy( LiveRange.prototype, 'stopListening' );
  44. let live = new LiveRange( new Position( root, [ 0 ] ), new Position( root, [ 1 ] ) );
  45. live.detach();
  46. expect( live.stopListening.called ).to.be.true;
  47. LiveRange.prototype.stopListening.restore();
  48. } );
  49. it( 'createFromElement should return LiveRange', () => {
  50. let range = LiveRange.createFromElement( p );
  51. expect( range ).to.be.instanceof( LiveRange );
  52. range.detach();
  53. } );
  54. it( 'createFromParentsAndOffsets should return LiveRange', () => {
  55. let range = LiveRange.createFromParentsAndOffsets( root, 0, p, 2 );
  56. expect( range ).to.be.instanceof( LiveRange );
  57. range.detach();
  58. } );
  59. it( 'createFromPositionAndShift should return LiveRange', () => {
  60. let range = LiveRange.createFromPositionAndShift( new Position( root, [ 0, 1 ] ), 4 );
  61. expect( range ).to.be.instanceof( LiveRange );
  62. range.detach();
  63. } );
  64. it( 'createFromRange should return LiveRange', () => {
  65. let range = LiveRange.createFromRange( new Range( new Position( root, [ 0 ] ), new Position( root, [ 1 ] ) ) );
  66. expect( range ).to.be.instanceof( LiveRange );
  67. range.detach();
  68. } );
  69. // Examples may seem weird when you compare them with the tree structure generated at the beginning of tests.
  70. // Since change event is fired _after_ operation is executed on tree model, you have to imagine that generated
  71. // structure is representing what is _after_ operation is executed. So live LiveRange properties are describing
  72. // virtual tree that is not existing anymore and event ranges are operating on the tree generated above.
  73. describe( 'should get transformed if', () => {
  74. let live;
  75. beforeEach( () => {
  76. live = new LiveRange( new Position( root, [ 0, 1, 4 ] ), new Position( root, [ 0, 2, 2 ] ) );
  77. } );
  78. afterEach( () => {
  79. live.detach();
  80. } );
  81. describe( 'insertion', () => {
  82. it( 'is in the same parent as range start and before it', () => {
  83. let insertRange = new Range( new Position( root, [ 0, 1, 0 ] ), new Position( root, [ 0, 1, 4 ] ) );
  84. doc.fire( 'change', 'insert', { range: insertRange }, null );
  85. expect( live.start.path ).to.deep.equal( [ 0, 1, 8 ] );
  86. expect( live.end.path ).to.deep.equal( [ 0, 2, 2 ] );
  87. } );
  88. it( 'is in the same parent as range end and before it', () => {
  89. let insertRange = new Range( new Position( root, [ 0, 2, 0 ] ), new Position( root, [ 0, 2, 3 ] ) );
  90. doc.fire( 'change', 'insert', { range: insertRange }, null );
  91. expect( live.start.path ).to.deep.equal( [ 0, 1, 4 ] );
  92. expect( live.end.path ).to.deep.equal( [ 0, 2, 5 ] );
  93. } );
  94. it( 'is at a position before a node from range start path', () => {
  95. let insertRange = new Range( new Position( root, [ 0, 0 ] ), new Position( root, [ 0, 2 ] ) );
  96. doc.fire( 'change', 'insert', { range: insertRange }, null );
  97. expect( live.start.path ).to.deep.equal( [ 0, 3, 4 ] );
  98. expect( live.end.path ).to.deep.equal( [ 0, 4, 2 ] );
  99. } );
  100. it( 'is at a position before a node from range end path', () => {
  101. let insertRange = new Range( new Position( root, [ 0, 2 ] ), new Position( root, [ 0, 3 ] ) );
  102. doc.fire( 'change', 'insert', { range: insertRange }, null );
  103. expect( live.start.path ).to.deep.equal( [ 0, 1, 4 ] );
  104. expect( live.end.path ).to.deep.equal( [ 0, 3, 2 ] );
  105. } );
  106. it( 'is at the live range start position and live range is collapsed', () => {
  107. live.end.path = [ 0, 1, 4 ];
  108. let insertRange = new Range( new Position( root, [ 0, 1, 4 ] ), new Position( root, [ 0, 1, 8 ] ) );
  109. doc.fire( 'change', 'insert', { range: insertRange }, null );
  110. expect( live.start.path ).to.deep.equal( [ 0, 1, 8 ] );
  111. expect( live.end.path ).to.deep.equal( [ 0, 1, 8 ] );
  112. } );
  113. } );
  114. describe( 'range move', () => {
  115. it( 'is to the same parent as range start and before it', () => {
  116. let moveSource = new Position( root, [ 2 ] );
  117. let moveRange = new Range( new Position( root, [ 0, 1, 0 ] ), new Position( root, [ 0, 1, 4 ] ) );
  118. let changes = {
  119. range: moveRange,
  120. sourcePosition: moveSource
  121. };
  122. doc.fire( 'change', 'move', changes, null );
  123. expect( live.start.path ).to.deep.equal( [ 0, 1, 8 ] );
  124. expect( live.end.path ).to.deep.equal( [ 0, 2, 2 ] );
  125. } );
  126. it( 'is to the same parent as range end and before it', () => {
  127. let moveSource = new Position( root, [ 3 ] );
  128. let moveRange = new Range( new Position( root, [ 0, 2, 0 ] ), new Position( root, [ 0, 2, 4 ] ) );
  129. let changes = {
  130. range: moveRange,
  131. sourcePosition: moveSource
  132. };
  133. doc.fire( 'change', 'move', changes, null );
  134. expect( live.start.path ).to.deep.equal( [ 0, 1, 4 ] );
  135. expect( live.end.path ).to.deep.equal( [ 0, 2, 6 ] );
  136. } );
  137. it( 'is to a position before a node from range start path', () => {
  138. let moveSource = new Position( root, [ 2 ] );
  139. let moveRange = new Range( new Position( root, [ 0, 0 ] ), new Position( root, [ 0, 2 ] ) );
  140. let changes = {
  141. range: moveRange,
  142. sourcePosition: moveSource
  143. };
  144. doc.fire( 'change', 'move', changes, null );
  145. expect( live.start.path ).to.deep.equal( [ 0, 3, 4 ] );
  146. expect( live.end.path ).to.deep.equal( [ 0, 4, 2 ] );
  147. } );
  148. it( 'is to a position before a node from range end path', () => {
  149. let moveSource = new Position( root, [ 2 ] );
  150. let moveRange = new Range( new Position( root, [ 0, 2 ] ), new Position( root, [ 0, 3 ] ) );
  151. let changes = {
  152. range: moveRange,
  153. sourcePosition: moveSource
  154. };
  155. doc.fire( 'change', 'move', changes, null );
  156. expect( live.start.path ).to.deep.equal( [ 0, 1, 4 ] );
  157. expect( live.end.path ).to.deep.equal( [ 0, 3, 2 ] );
  158. } );
  159. it( 'is from the same parent as range start and before it', () => {
  160. let moveSource = new Position( root, [ 0, 1, 0 ] );
  161. let moveRange = new Range( new Position( root, [ 2, 0 ] ), new Position( root, [ 2, 3 ] ) );
  162. let changes = {
  163. range: moveRange,
  164. sourcePosition: moveSource
  165. };
  166. doc.fire( 'change', 'move', changes, null );
  167. expect( live.start.path ).to.deep.equal( [ 0, 1, 1 ] );
  168. expect( live.end.path ).to.deep.equal( [ 0, 2, 2 ] );
  169. } );
  170. it( 'is from the same parent as range end and before it', () => {
  171. let moveSource = new Position( root, [ 0, 2, 0 ] );
  172. let moveRange = new Range( new Position( root, [ 2, 0 ] ), new Position( root, [ 2, 2 ] ) );
  173. let changes = {
  174. range: moveRange,
  175. sourcePosition: moveSource
  176. };
  177. doc.fire( 'change', 'move', changes, null );
  178. expect( live.start.path ).to.deep.equal( [ 0, 1, 4 ] );
  179. expect( live.end.path ).to.deep.equal( [ 0, 2, 0 ] );
  180. } );
  181. it( 'is from a position before a node from range start path', () => {
  182. let moveSource = new Position( root, [ 0, 0 ] );
  183. let moveRange = new Range( new Position( root, [ 2, 0 ] ), new Position( root, [ 2, 1 ] ) );
  184. let changes = {
  185. range: moveRange,
  186. sourcePosition: moveSource
  187. };
  188. doc.fire( 'change', 'move', changes, null );
  189. expect( live.start.path ).to.deep.equal( [ 0, 0, 4 ] );
  190. expect( live.end.path ).to.deep.equal( [ 0, 1, 2 ] );
  191. } );
  192. it( 'intersects on live range left side', () => {
  193. let moveSource = new Position( root, [ 0, 1, 2 ] );
  194. let moveRange = new Range( new Position( root, [ 2, 0 ] ), new Position( root, [ 2, 4 ] ) );
  195. let changes = {
  196. range: moveRange,
  197. sourcePosition: moveSource
  198. };
  199. doc.fire( 'change', 'move', changes, null );
  200. expect( live.start.path ).to.deep.equal( [ 0, 1, 2 ] );
  201. expect( live.end.path ).to.deep.equal( [ 0, 2, 2 ] );
  202. } );
  203. it( 'intersects on live range right side', () => {
  204. let moveSource = new Position( root, [ 0, 2, 1 ] );
  205. let moveRange = new Range( new Position( root, [ 2, 0 ] ), new Position( root, [ 2, 4 ] ) );
  206. let changes = {
  207. range: moveRange,
  208. sourcePosition: moveSource
  209. };
  210. doc.fire( 'change', 'move', changes, null );
  211. expect( live.start.path ).to.deep.equal( [ 0, 1, 4 ] );
  212. expect( live.end.path ).to.deep.equal( [ 0, 2, 1 ] );
  213. } );
  214. it( 'intersects on live range left side and live range new start is touching moved range end', () => {
  215. let moveSource = new Position( root, [ 0, 1, 0 ] );
  216. let moveRange = new Range( new Position( root, [ 0, 1 ] ), new Position( root, [ 0, 6 ] ) );
  217. let changes = {
  218. range: moveRange,
  219. sourcePosition: moveSource
  220. };
  221. doc.fire( 'change', 'move', changes, null );
  222. expect( live.start.path ).to.deep.equal( [ 0, 5 ] );
  223. expect( live.end.path ).to.deep.equal( [ 0, 7, 2 ] );
  224. } );
  225. it( 'intersects on live range right side and live range new end is touching moved range start', () => {
  226. live.end.offset = 12;
  227. let moveSource = new Position( root, [ 0, 2, 10 ] );
  228. let moveRange = new Range( new Position( root, [ 0, 3, 0 ] ), new Position( root, [ 0, 3, 5 ] ) );
  229. let changes = {
  230. range: moveRange,
  231. sourcePosition: moveSource
  232. };
  233. doc.fire( 'change', 'move', changes, null );
  234. expect( live.start.path ).to.deep.equal( [ 0, 1, 4 ] );
  235. expect( live.end.path ).to.deep.equal( [ 0, 3, 2 ] );
  236. } );
  237. it( 'is equal to live range', () => {
  238. live.end.path = [ 0, 1, 7 ];
  239. let moveSource = new Position( root, [ 0, 1, 4 ] );
  240. let moveRange = new Range( new Position( root, [ 0, 3, 0 ] ), new Position( root, [ 0, 3, 3 ] ) );
  241. let changes = {
  242. range: moveRange,
  243. sourcePosition: moveSource
  244. };
  245. doc.fire( 'change', 'move', changes, null );
  246. expect( live.start.path ).to.deep.equal( [ 0, 3, 0 ] );
  247. expect( live.end.path ).to.deep.equal( [ 0, 3, 3 ] );
  248. } );
  249. it( 'contains live range', () => {
  250. live.end.path = [ 0, 1, 7 ];
  251. let moveSource = new Position( root, [ 0, 1, 3 ] );
  252. let moveRange = new Range( new Position( root, [ 0, 3, 0 ] ), new Position( root, [ 0, 3, 9 ] ) );
  253. let changes = {
  254. range: moveRange,
  255. sourcePosition: moveSource
  256. };
  257. doc.fire( 'change', 'move', changes, null );
  258. expect( live.start.path ).to.deep.equal( [ 0, 3, 1 ] );
  259. expect( live.end.path ).to.deep.equal( [ 0, 3, 4 ] );
  260. } );
  261. it( 'is inside live range and points to live range', () => {
  262. live.end.path = [ 0, 1, 12 ];
  263. let moveSource = new Position( root, [ 0, 1, 6 ] );
  264. let moveRange = new Range( new Position( root, [ 0, 1, 8 ] ), new Position( root, [ 0, 1, 10 ] ) );
  265. let changes = {
  266. range: moveRange,
  267. sourcePosition: moveSource
  268. };
  269. doc.fire( 'change', 'move', changes, null );
  270. expect( live.start.path ).to.deep.equal( [ 0, 1, 4 ] );
  271. expect( live.end.path ).to.deep.equal( [ 0, 1, 12 ] );
  272. } );
  273. it( 'is intersecting with live range and points to live range', () => {
  274. live.end.path = [ 0, 1, 12 ];
  275. let moveSource = new Position( root, [ 0, 1, 2 ] );
  276. let moveRange = new Range( new Position( root, [ 0, 1, 5 ] ), new Position( root, [ 0, 1, 9 ] ) );
  277. let changes = {
  278. range: moveRange,
  279. sourcePosition: moveSource
  280. };
  281. doc.fire( 'change', 'move', changes, null );
  282. expect( live.start.path ).to.deep.equal( [ 0, 1, 2 ] );
  283. expect( live.end.path ).to.deep.equal( [ 0, 1, 12 ] );
  284. } );
  285. } );
  286. } );
  287. describe( 'should not get transformed if', () => {
  288. let otherRoot;
  289. before( () => {
  290. otherRoot = doc.createRoot( '$root', 'otherRoot' );
  291. } );
  292. let live, clone;
  293. beforeEach( () => {
  294. live = new LiveRange( new Position( root, [ 0, 1, 4 ] ), new Position( root, [ 0, 2, 2 ] ) );
  295. clone = Range.createFromRange( live );
  296. } );
  297. afterEach( () => {
  298. live.detach();
  299. } );
  300. describe( 'insertion', () => {
  301. it( 'is in the same parent as range start and after it', () => {
  302. let insertRange = new Range( new Position( root, [ 0, 1, 7 ] ), new Position( root, [ 0, 1, 9 ] ) );
  303. doc.fire( 'change', 'insert', { range: insertRange }, null );
  304. expect( live.isEqual( clone ) ).to.be.true;
  305. } );
  306. it( 'is in the same parent as range end and after it', () => {
  307. let insertRange = new Range( new Position( root, [ 0, 2, 7 ] ), new Position( root, [ 0, 2, 9 ] ) );
  308. doc.fire( 'change', 'insert', { range: insertRange }, null );
  309. expect( live.isEqual( clone ) ).to.be.true;
  310. } );
  311. it( 'is to a position after a node from range end path', () => {
  312. let insertRange = new Range( new Position( root, [ 3 ] ), new Position( root, [ 4 ] ) );
  313. doc.fire( 'change', 'insert', { range: insertRange }, null );
  314. expect( live.isEqual( clone ) ).to.be.true;
  315. } );
  316. it( 'is in different root', () => {
  317. let insertRange = new Range( new Position( otherRoot, [ 0, 0 ] ), new Position( otherRoot, [ 0, 2 ] ) );
  318. doc.fire( 'change', 'insert', { range: insertRange }, null );
  319. expect( live.isEqual( clone ) ).to.be.true;
  320. } );
  321. } );
  322. describe( 'range move', () => {
  323. it( 'is to the same parent as range start and after it', () => {
  324. let moveSource = new Position( root, [ 4 ] );
  325. let moveRange = new Range( new Position( root, [ 0, 1, 7 ] ), new Position( root, [ 0, 1, 9 ] ) );
  326. let changes = {
  327. range: moveRange,
  328. sourcePosition: moveSource
  329. };
  330. doc.fire( 'change', 'move', changes, null );
  331. expect( live.isEqual( clone ) ).to.be.true;
  332. } );
  333. it( 'is to the same parent as range end and after it', () => {
  334. let moveSource = new Position( root, [ 4 ] );
  335. let moveRange = new Range( new Position( root, [ 0, 2, 3 ] ), new Position( root, [ 0, 2, 5 ] ) );
  336. let changes = {
  337. range: moveRange,
  338. sourcePosition: moveSource
  339. };
  340. doc.fire( 'change', 'move', changes, null );
  341. expect( live.isEqual( clone ) ).to.be.true;
  342. } );
  343. it( 'is to a position after a node from range end path', () => {
  344. let moveSource = new Position( root, [ 4 ] );
  345. let moveRange = new Range( new Position( root, [ 0, 3 ] ), new Position( root, [ 0, 5 ] ) );
  346. let changes = {
  347. range: moveRange,
  348. sourcePosition: moveSource
  349. };
  350. doc.fire( 'change', 'move', changes, null );
  351. expect( live.isEqual( clone ) ).to.be.true;
  352. } );
  353. it( 'is from the same parent as range start and after it', () => {
  354. let moveSource = new Position( root, [ 0, 1, 6 ] );
  355. let moveRange = new Range( new Position( root, [ 4, 0 ] ), new Position( root, [ 4, 3 ] ) );
  356. let changes = {
  357. range: moveRange,
  358. sourcePosition: moveSource
  359. };
  360. doc.fire( 'change', 'move', changes, null );
  361. expect( live.isEqual( clone ) ).to.be.true;
  362. } );
  363. it( 'is from the same parent as range end and after it', () => {
  364. let moveSource = new Position( root, [ 0, 2, 4 ] );
  365. let moveRange = new Range( new Position( root, [ 4, 0 ] ), new Position( root, [ 4, 2 ] ) );
  366. let changes = {
  367. range: moveRange,
  368. sourcePosition: moveSource
  369. };
  370. doc.fire( 'change', 'move', changes, null );
  371. expect( live.isEqual( clone ) ).to.be.true;
  372. } );
  373. it( 'is from a position after a node from range end path', () => {
  374. let moveSource = new Position( root, [ 0, 3 ] );
  375. let moveRange = new Range( new Position( root, [ 5, 0 ] ), new Position( root, [ 5, 1 ] ) );
  376. let changes = {
  377. range: moveRange,
  378. sourcePosition: moveSource
  379. };
  380. doc.fire( 'change', 'move', changes, null );
  381. expect( live.isEqual( clone ) ).to.be.true;
  382. } );
  383. it( 'is to different root', () => {
  384. let moveSource = new Position( root, [ 2 ] );
  385. let moveRange = new Range( new Position( otherRoot, [ 0, 1, 0 ] ), new Position( otherRoot, [ 0, 1, 4 ] ) );
  386. let changes = {
  387. range: moveRange,
  388. sourcePosition: moveSource
  389. };
  390. doc.fire( 'change', 'move', changes, null );
  391. expect( live.isEqual( clone ) ).to.be.true;
  392. } );
  393. it( 'is from different root', () => {
  394. let moveSource = new Position( otherRoot, [ 0, 2, 0 ] );
  395. let moveRange = new Range( new Position( root, [ 2, 0 ] ), new Position( root, [ 2, 2 ] ) );
  396. let changes = {
  397. range: moveRange,
  398. sourcePosition: moveSource
  399. };
  400. doc.fire( 'change', 'move', changes, null );
  401. expect( live.isEqual( clone ) ).to.be.true;
  402. } );
  403. } );
  404. } );
  405. } );