split.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563
  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 { Client, syncClients, expectClients, clearBuffer } from './utils.js';
  6. describe( 'transform', () => {
  7. let john, kate;
  8. beforeEach( () => {
  9. return Promise.all( [
  10. Client.get( 'john' ).then( client => ( john = client ) ),
  11. Client.get( 'kate' ).then( client => ( kate = client ) )
  12. ] );
  13. } );
  14. afterEach( () => {
  15. clearBuffer();
  16. return Promise.all( [ john.destroy(), kate.destroy() ] );
  17. } );
  18. describe( 'split', () => {
  19. describe( 'by wrap', () => {
  20. it( 'split inside wrapped element', () => {
  21. john.setData( '<paragraph>F[]oo</paragraph>' );
  22. kate.setData( '[<paragraph>Foo</paragraph>]' );
  23. john.split();
  24. kate.wrap( 'blockQuote' );
  25. syncClients();
  26. expectClients(
  27. '<blockQuote>' +
  28. '<paragraph>F</paragraph>' +
  29. '<paragraph>oo</paragraph>' +
  30. '</blockQuote>'
  31. );
  32. } );
  33. it( 'split inside wrapped element, then undo', () => {
  34. john.setData( '<paragraph>F[]oo</paragraph>' );
  35. kate.setData( '[<paragraph>Foo</paragraph>]' );
  36. john.split();
  37. kate.wrap( 'blockQuote' );
  38. syncClients();
  39. kate.undo();
  40. syncClients();
  41. expectClients(
  42. '<paragraph>F</paragraph>' +
  43. '<paragraph>oo</paragraph>'
  44. );
  45. } );
  46. it( 'element in same path, then undo', () => {
  47. // This is pretty weird case. Right now it cannot be reproduced with the features that we have.
  48. john.editor.model.schema.extend( 'paragraph', { allowIn: 'listItem' } );
  49. john.editor.model.schema.extend( 'blockQuote', { allowIn: 'listItem' } );
  50. kate.editor.model.schema.extend( 'paragraph', { allowIn: 'listItem' } );
  51. kate.editor.model.schema.extend( 'blockQuote', { allowIn: 'listItem' } );
  52. john.setData( '<listItem><paragraph>A</paragraph>[]<paragraph>B</paragraph><paragraph>C</paragraph></listItem>' );
  53. kate.setData( '<listItem><paragraph>A</paragraph><paragraph>B</paragraph>[<paragraph>C</paragraph>]</listItem>' );
  54. john.split();
  55. kate.wrap( 'blockQuote' );
  56. syncClients();
  57. expectClients(
  58. '<listItem>' +
  59. '<paragraph>A</paragraph>' +
  60. '</listItem>' +
  61. '<listItem>' +
  62. '<paragraph>B</paragraph>' +
  63. '<blockQuote>' +
  64. '<paragraph>C</paragraph>' +
  65. '</blockQuote>' +
  66. '</listItem>'
  67. );
  68. john.undo();
  69. kate.undo();
  70. syncClients();
  71. expectClients(
  72. '<listItem>' +
  73. '<paragraph>A</paragraph>' +
  74. '<paragraph>B</paragraph>' +
  75. '<paragraph>C</paragraph>' +
  76. '</listItem>'
  77. );
  78. } );
  79. it( 'multiple elements', () => {
  80. john.setData( '<paragraph>F[]oo</paragraph><paragraph>Bar</paragraph>' );
  81. kate.setData( '[<paragraph>Foo</paragraph><paragraph>Bar</paragraph>]' );
  82. john.split();
  83. kate.wrap( 'blockQuote' );
  84. syncClients();
  85. expectClients(
  86. '<blockQuote>' +
  87. '<paragraph>F</paragraph>' +
  88. '<paragraph>oo</paragraph>' +
  89. '<paragraph>Bar</paragraph>' +
  90. '</blockQuote>'
  91. );
  92. } );
  93. it( 'multiple elements, then undo', () => {
  94. john.setData( '<paragraph>F[]oo</paragraph><paragraph>Bar</paragraph>' );
  95. kate.setData( '[<paragraph>Foo</paragraph><paragraph>Bar</paragraph>]' );
  96. john.split();
  97. kate.wrap( 'blockQuote' );
  98. syncClients();
  99. john.undo();
  100. kate.undo();
  101. syncClients();
  102. expectClients(
  103. '<paragraph>Foo</paragraph>' +
  104. '<paragraph>Bar</paragraph>'
  105. );
  106. } );
  107. it( 'intersecting wrap', () => {
  108. john.setData( '<paragraph>Fo[]o</paragraph>' );
  109. kate.setData( '<paragraph>F[oo]</paragraph>' );
  110. john.split();
  111. kate.wrap( 'blockQuote' );
  112. syncClients();
  113. // Below would be the expected effect with correct wrap transformation.
  114. // expectClients(
  115. // '<paragraph>Fo</paragraph>' +
  116. // '<paragraph>o</paragraph>'
  117. // );
  118. expectClients( '<paragraph>Foo</paragraph><paragraph></paragraph>' );
  119. } );
  120. } );
  121. describe( 'by unwrap', () => {
  122. it( 'element in same path', () => {
  123. john.setData( '<blockQuote><paragraph>F[]oo</paragraph></blockQuote>' );
  124. kate.setData( '<blockQuote>[<paragraph>Foo</paragraph>]</blockQuote>' );
  125. john.split();
  126. kate.unwrap();
  127. syncClients();
  128. expectClients(
  129. '<paragraph>F</paragraph>' +
  130. '<paragraph>oo</paragraph>'
  131. );
  132. } );
  133. it( 'text in same path', () => {
  134. john.setData( '<blockQuote><paragraph>F[]oo</paragraph></blockQuote>' );
  135. kate.setData( '<blockQuote><paragraph>[]Foo</paragraph></blockQuote>' );
  136. john.split();
  137. kate.unwrap();
  138. syncClients();
  139. expectClients( '<blockQuote>Foo</blockQuote>' );
  140. } );
  141. it( 'element in same position', () => {
  142. john.setData( '<blockQuote><paragraph>[]Foo</paragraph></blockQuote>' );
  143. kate.setData( '<blockQuote><paragraph>[]Foo</paragraph></blockQuote>' );
  144. john.split();
  145. kate.unwrap();
  146. syncClients();
  147. expectClients( '<blockQuote>Foo</blockQuote>' );
  148. } );
  149. it( 'element in same path, then undo', () => {
  150. john.setData( '<blockQuote><paragraph>F[]oo</paragraph></blockQuote>' );
  151. kate.setData( '<blockQuote>[<paragraph>Foo</paragraph>]</blockQuote>' );
  152. john.split();
  153. kate.unwrap();
  154. syncClients();
  155. john.undo();
  156. syncClients();
  157. expectClients( '<paragraph>Foo</paragraph>' );
  158. } );
  159. it( 'element in same path, then undo both', () => {
  160. john.setData( '<blockQuote><paragraph>F[]oo</paragraph></blockQuote>' );
  161. kate.setData( '<blockQuote>[<paragraph>Foo</paragraph>]</blockQuote>' );
  162. john.split();
  163. kate.unwrap();
  164. syncClients();
  165. john.undo();
  166. kate.undo();
  167. syncClients();
  168. expectClients( '<blockQuote><paragraph>Foo</paragraph></blockQuote>' );
  169. } );
  170. it( 'text in same path, then undo', () => {
  171. john.setData( '<blockQuote><paragraph>F[]oo</paragraph></blockQuote>' );
  172. kate.setData( '<blockQuote><paragraph>[]Foo</paragraph></blockQuote>' );
  173. john.split();
  174. kate.unwrap();
  175. syncClients();
  176. john.undo();
  177. syncClients();
  178. expectClients( '<blockQuote>Foo</blockQuote>' );
  179. } );
  180. it( 'multiple elements', () => {
  181. john.setData( '<blockQuote><paragraph>F[]oo</paragraph><paragraph>Bar</paragraph></blockQuote>' );
  182. kate.setData( '<blockQuote>[<paragraph>Foo</paragraph><paragraph>Bar</paragraph>]</blockQuote>' );
  183. john.split();
  184. kate.unwrap();
  185. syncClients();
  186. expectClients(
  187. '<paragraph>F</paragraph>' +
  188. '<paragraph>oo</paragraph>' +
  189. '<paragraph>Bar</paragraph>'
  190. );
  191. } );
  192. } );
  193. describe( 'by split', () => {
  194. it( 'text in same path #1', () => {
  195. john.setData( '<paragraph>F[]oo</paragraph>' );
  196. kate.setData( '<paragraph>Fo[]o</paragraph>' );
  197. john.split();
  198. kate.split();
  199. syncClients();
  200. expectClients(
  201. '<paragraph>F</paragraph>' +
  202. '<paragraph>o</paragraph>' +
  203. '<paragraph>o</paragraph>'
  204. );
  205. } );
  206. it( 'text in same path #2', () => {
  207. john.setData( '<paragraph>[]Foo</paragraph>' );
  208. kate.setData( '<paragraph>Foo[]</paragraph>' );
  209. john.split();
  210. kate.split();
  211. syncClients();
  212. expectClients(
  213. '<paragraph></paragraph>' +
  214. '<paragraph>Foo</paragraph>' +
  215. '<paragraph></paragraph>'
  216. );
  217. } );
  218. it( 'text in same position', () => {
  219. john.setData( '<paragraph>F[]oo</paragraph>' );
  220. kate.setData( '<paragraph>F[]oo</paragraph>' );
  221. john.split();
  222. kate.split();
  223. syncClients();
  224. expectClients(
  225. '<paragraph>F</paragraph>' +
  226. '<paragraph>oo</paragraph>'
  227. );
  228. } );
  229. it( 'text in same position, then undo', () => {
  230. john.setData( '<paragraph>F[]oo</paragraph>' );
  231. kate.setData( '<paragraph>F[]oo</paragraph>' );
  232. john.split();
  233. kate.split();
  234. syncClients();
  235. john.undo();
  236. syncClients();
  237. expectClients( '<paragraph>Foo</paragraph>' );
  238. } );
  239. it( 'text in same position, then undo and redo', () => {
  240. john.setData( '<paragraph>F[]oo</paragraph>' );
  241. kate.setData( '<paragraph>F[]oo</paragraph>' );
  242. john.split();
  243. kate.split();
  244. syncClients();
  245. john.undo();
  246. syncClients();
  247. kate.undo();
  248. kate.redo();
  249. expectClients( '<paragraph>Foo</paragraph>' );
  250. } );
  251. it( 'text in different path', () => {
  252. john.setData( '<paragraph>F[]oo</paragraph><paragraph>Bar</paragraph>' );
  253. kate.setData( '<paragraph>Foo</paragraph><paragraph>B[]ar</paragraph>' );
  254. john.split();
  255. kate.split();
  256. syncClients();
  257. expectClients(
  258. '<paragraph>F</paragraph>' +
  259. '<paragraph>oo</paragraph>' +
  260. '<paragraph>B</paragraph>' +
  261. '<paragraph>ar</paragraph>'
  262. );
  263. } );
  264. } );
  265. describe( 'by merge', () => {
  266. it( 'element into paragraph #1', () => {
  267. john.setData( '<paragraph>Fo[]o</paragraph><paragraph>Bar</paragraph>' );
  268. kate.setData( '<paragraph>Foo</paragraph>[]<paragraph>Bar</paragraph>' );
  269. john.split();
  270. kate.merge();
  271. syncClients();
  272. expectClients(
  273. '<paragraph>Fo</paragraph>' +
  274. '<paragraph>oBar</paragraph>'
  275. );
  276. } );
  277. it( 'element into paragraph #2', () => {
  278. john.setData( '<paragraph>Foo[]</paragraph><paragraph>Bar</paragraph>' );
  279. kate.setData( '<paragraph>Foo</paragraph>[]<paragraph>Bar</paragraph>' );
  280. john.split();
  281. kate.merge();
  282. syncClients();
  283. expectClients( '<paragraph>Foo</paragraph><paragraph>Bar</paragraph>' );
  284. john.undo();
  285. syncClients();
  286. expectClients( '<paragraph>FooBar</paragraph>' );
  287. } );
  288. it( 'element into paragraph #3', () => {
  289. john.setData( '<paragraph>Foo[]</paragraph><paragraph>Bar</paragraph>' );
  290. kate.setData( '<paragraph>Foo</paragraph>[]<paragraph>Bar</paragraph>' );
  291. john.split();
  292. kate.merge();
  293. syncClients();
  294. expectClients( '<paragraph>Foo</paragraph><paragraph>Bar</paragraph>' );
  295. john.undo();
  296. kate.undo();
  297. syncClients();
  298. expectClients( '<paragraph>Foo</paragraph><paragraph>Bar</paragraph>' );
  299. } );
  300. it( 'element into paragraph #4', () => {
  301. john.setData( '<paragraph>Foo</paragraph><paragraph>B[]ar</paragraph>' );
  302. kate.setData( '<paragraph>Foo</paragraph>[]<paragraph>Bar</paragraph>' );
  303. john.split();
  304. kate.merge();
  305. syncClients();
  306. expectClients(
  307. '<paragraph>FooB</paragraph>' +
  308. '<paragraph>ar</paragraph>'
  309. );
  310. john.undo();
  311. kate.undo();
  312. syncClients();
  313. expectClients( '<paragraph>Foo</paragraph><paragraph>Bar</paragraph>' );
  314. } );
  315. it( 'element into heading', () => {
  316. john.setData( '<heading1>Foo</heading1><paragraph>B[]ar</paragraph>' );
  317. kate.setData( '<heading1>Foo</heading1>[]<paragraph>Bar</paragraph>' );
  318. john.split();
  319. kate.merge();
  320. syncClients();
  321. expectClients(
  322. '<heading1>FooB</heading1>' +
  323. '<paragraph>ar</paragraph>'
  324. );
  325. } );
  326. it( 'element into heading with undo #1', () => {
  327. john.setData( '<heading1>Foo</heading1><paragraph>B[]ar</paragraph>' );
  328. kate.setData( '<heading1>Foo</heading1>[]<paragraph>Bar</paragraph>' );
  329. john.split();
  330. kate.merge();
  331. syncClients();
  332. expectClients(
  333. '<heading1>FooB</heading1>' +
  334. '<paragraph>ar</paragraph>'
  335. );
  336. john.undo();
  337. kate.undo();
  338. syncClients();
  339. expectClients( '<heading1>Foo</heading1><paragraph>Bar</paragraph>' );
  340. } );
  341. it( 'element into heading with undo #2', () => {
  342. john.setData( '<heading1>Foo</heading1><paragraph>B[]ar</paragraph>' );
  343. kate.setData( '<heading1>Foo</heading1>[]<paragraph>Bar</paragraph>' );
  344. john.split();
  345. kate.merge();
  346. kate.undo();
  347. syncClients();
  348. expectClients(
  349. '<heading1>Foo</heading1>' +
  350. '<paragraph>B</paragraph>' +
  351. '<paragraph>ar</paragraph>'
  352. );
  353. } );
  354. } );
  355. describe( 'by delete', () => {
  356. it( 'text from two elements #1', () => {
  357. john.setData( '<paragraph>F[]oo</paragraph><paragraph>Bar</paragraph>' );
  358. kate.setData( '<paragraph>Fo[o</paragraph><paragraph>B]ar</paragraph>' );
  359. john.split();
  360. kate.delete();
  361. syncClients();
  362. expectClients( '<paragraph>F</paragraph><paragraph>oar</paragraph>' );
  363. } );
  364. it( 'text from two elements #2', () => {
  365. john.setData( '<paragraph>Fo[]o</paragraph><paragraph>Bar</paragraph>' );
  366. kate.setData( '<paragraph>F[oo</paragraph><paragraph>B]ar</paragraph>' );
  367. john.split();
  368. kate.delete();
  369. syncClients();
  370. expectClients( '<paragraph>F</paragraph><paragraph>ar</paragraph>' );
  371. } );
  372. it( 'text from one element', () => {
  373. john.setData( '<paragraph>F[]oo Bar</paragraph>' );
  374. kate.setData( '<paragraph>Foo B[ar]</paragraph>' );
  375. john.split();
  376. kate.delete();
  377. syncClients();
  378. expectClients(
  379. '<paragraph>F</paragraph>' +
  380. '<paragraph>oo B</paragraph>'
  381. );
  382. } );
  383. } );
  384. describe( 'by move', () => {
  385. it( 'move inside split element after split position', () => {
  386. john.setData( '<paragraph>F[]oo</paragraph><paragraph>Bar</paragraph>' );
  387. kate.setData( '<paragraph>Foo</paragraph><paragraph>[Ba]r</paragraph>' );
  388. john.split();
  389. kate.move( [ 0, 3 ] );
  390. syncClients();
  391. expectClients(
  392. '<paragraph>F</paragraph>' +
  393. '<paragraph>ooBa</paragraph>' +
  394. '<paragraph>r</paragraph>'
  395. );
  396. } );
  397. it( 'move operation does not really move anything', () => {
  398. john.setData( '<paragraph>[F]oobar</paragraph>' );
  399. kate.setData( '<paragraph>F[oo]bar</paragraph>' );
  400. john.remove();
  401. john.setSelection( [ 0, 4 ] );
  402. john.split();
  403. kate.move( [ 0, 0 ] );
  404. syncClients();
  405. expectClients(
  406. '<paragraph>ooba</paragraph>' +
  407. '<paragraph>r</paragraph>'
  408. );
  409. } );
  410. } );
  411. } );
  412. } );