list.js 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* globals document */
  6. import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
  7. import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
  8. import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  9. import Heading from '@ckeditor/ckeditor5-heading/src/heading';
  10. import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
  11. import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
  12. import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
  13. import Link from '@ckeditor/ckeditor5-link/src/link';
  14. import List from '@ckeditor/ckeditor5-list/src/list';
  15. import PasteFromWord from '../../src/pastefromword';
  16. import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  17. import { expectPaste } from '../_utils/utils';
  18. import simple from '../data/integration/list/simple/input.word2016.html';
  19. import styled from '../data/integration/list/styled/input.word2016.html';
  20. import multiple from '../data/integration/list/multiple/input.word2016.html';
  21. import multipleCombined from '../data/integration/list/multiple-combined/input.word2016.html';
  22. import manyOneItem from '../data/integration/list/many-one-item/input.word2016.html';
  23. import heading1 from '../data/integration/list/heading1/input.word2016.html';
  24. import heading3Styled from '../data/integration/list/heading3-styled/input.word2016.html';
  25. import heading7 from '../data/integration/list/heading7/input.word2016.html';
  26. describe( 'List – integration', () => {
  27. let element, editor;
  28. before( () => {
  29. element = document.createElement( 'div' );
  30. document.body.appendChild( element );
  31. return ClassicTestEditor
  32. .create( element, { plugins: [ Clipboard, Paragraph, Heading, Bold, Italic, Underline, Link, List, PasteFromWord ] } )
  33. .then( editorInstance => {
  34. editor = editorInstance;
  35. } );
  36. } );
  37. beforeEach( () => {
  38. setData( editor.model, '<paragraph>[]</paragraph>' );
  39. } );
  40. after( () => {
  41. editor.destroy();
  42. element.remove();
  43. } );
  44. // Pastes (after cleaning up garbage markup):
  45. //
  46. // <p><span>1.</span<span>Item1</span></p>
  47. // <p><span>2.</span>><span>Item 2</span></p>
  48. //
  49. // which should result in the same output as pasting:
  50. //
  51. // <ol><li>Item1</li><li>Item2</li></ol>
  52. it( 'pastes simple list', () => {
  53. const expectedModel = '<listItem listIndent="0" listType="numbered">Item1</listItem>' +
  54. '<listItem listIndent="0" listType="numbered">Item 2[]</listItem>';
  55. expectPaste( editor, simple, expectedModel );
  56. } );
  57. // Pastes (after cleaning up garbage markup):
  58. //
  59. // <p>List:</p>
  60. // <p><span>·</span><span>B<b>old</b></span></p>
  61. // <p><span>·</span><span><a href="https://cksource.com">Lin</a>k</span></p>
  62. // <p><span>·</span><span><i>M<b>ul<u>tip</u></b><u>le</u></span></i></p>
  63. //
  64. // which should result in the same output as pasting:
  65. //
  66. // <p>List:</p>
  67. // <ul>
  68. // <li>B<b>old</b></li>
  69. // <li><a href="https://cksource.com">Lin</a>k</li>
  70. // <li><i>M<b>ul<u>tip</u></b><u>le</u></i></li>
  71. // </ul>
  72. it( 'pastes list with styled items prepended by a paragraph', () => {
  73. const expectedModel = '<paragraph>List:</paragraph>' +
  74. '<listItem listIndent="0" listType="bulleted">B<$text bold="true">old</$text></listItem>' +
  75. '<listItem listIndent="0" listType="bulleted"><$text linkHref="https://cksource.com">Lin</$text>k</listItem>' +
  76. '<listItem listIndent="0" listType="bulleted"><$text italic="true">M</$text><$text bold="true" italic="true">ul</$text>' +
  77. '<$text bold="true" italic="true" underline="true">tip</$text>' +
  78. '<$text italic="true" underline="true">le[]</$text></listItem>';
  79. expectPaste( editor, styled, expectedModel );
  80. } );
  81. // Pastes (after cleaning up garbage markup):
  82. //
  83. // <p><span>1.</span><span>Item1</span></p>
  84. // <p><span>2.</span><span>Item 2</span></p>
  85. // <p>Some text</p>
  86. // <p><span>·</span><span>Bullet 1</span></p>
  87. //
  88. // which should result in the same output as pasting:
  89. //
  90. // <ol>
  91. // <li>Item1</li>
  92. // <li>Item 2</li>
  93. // </ol>
  94. // <p>Some text</p>
  95. // <ul>
  96. // <li>Bullet 1</li>
  97. // </ul>
  98. it( 'pastes multiple lists separated by the paragraph', () => {
  99. const expectedModel = '<listItem listIndent="0" listType="numbered">Item1</listItem>' +
  100. '<listItem listIndent="0" listType="numbered">Item 2</listItem>' +
  101. '<paragraph>Some text</paragraph>' +
  102. '<listItem listIndent="0" listType="bulleted">Bullet 1[]</listItem>';
  103. expectPaste( editor, multiple, expectedModel );
  104. } );
  105. // Pastes (after cleaning up garbage markup):
  106. //
  107. // <p><span>1.</span><span>Item1</span></p>
  108. // <p><span>2.</span><span>Item 2</span></p>
  109. // <p><span>1.</span><span>Item 1</span></p>
  110. // <p><span>2.</span><span>Item2</span></p>
  111. //
  112. // which should result in the same output as pasting:
  113. //
  114. // <ol>
  115. // <li>Item1</li>
  116. // <li>Item 2</li>
  117. // </ol>
  118. // <ol>
  119. // <li>Item 1</li>
  120. // <li>Item2</li>
  121. // </ol>
  122. //
  123. // It will create one list, see https://github.com/ckeditor/ckeditor5-list/issues/99.
  124. it( 'pastes multiple lists one right after another', () => {
  125. const expectedModel = '<listItem listIndent="0" listType="numbered">Item1</listItem>' +
  126. '<listItem listIndent="0" listType="numbered">Item 2</listItem>' +
  127. '<listItem listIndent="0" listType="numbered">Item 1</listItem>' +
  128. '<listItem listIndent="0" listType="numbered">Item2[]</listItem>';
  129. expectPaste( editor, multipleCombined, expectedModel );
  130. } );
  131. // Pastes (after cleaning up garbage markup):
  132. //
  133. // <p><span>1.</span><span>A</span></p>
  134. // <p><span>1)</span><span>B</span></p>
  135. // <p><span>I.</span><span>C</span></p>
  136. // <p><span>A.</span><span>D</span></p>
  137. // <p><span>a)</span><span>E</span></p>
  138. // <p><span>a.</span><span>F</span></p>
  139. // <p><span>i.</span><span>G</span></p>
  140. // <p></p>
  141. // <p><span>·</span><span>H</span></p>
  142. // <p><span>o</span><span>I</span></p>
  143. // <p></p>
  144. // <p><span>§</span><span>J</span></p>
  145. // <p><span><img... /></span><span>k</span></p>
  146. // <p></p>
  147. // <p><span>1.</span><span>h1</span></p>
  148. //
  149. // which should result in the same output as pasting:
  150. //
  151. // <ol><li>A</li></ol>
  152. // <ol><li>B</li></ol>
  153. // <ol><li>C</li></ol>
  154. // <ol><li>D</li></ol>
  155. // <ol><li>E</li></ol>
  156. // <ol><li>F</li></ol>
  157. // <ol><li>G</li></ol>
  158. // <p></p>
  159. // <ul><li>H</li></ul>
  160. // <ul><li>I</li></ul>
  161. // <p></p>
  162. // <ul><li>J</li></ul>
  163. // <ul><li>k</li></ul>
  164. // <p></p>
  165. // <ol><li>h1</li></ol>
  166. //
  167. // It will create one list, for all lists not separated by any element - see https://github.com/ckeditor/ckeditor5-list/issues/99.
  168. it( 'pastes many one item lists', () => {
  169. const expectedModel = '<listItem listIndent="0" listType="numbered">A</listItem>' +
  170. '<listItem listIndent="0" listType="numbered">B</listItem>' +
  171. '<listItem listIndent="0" listType="numbered">C</listItem>' +
  172. '<listItem listIndent="0" listType="numbered">D</listItem>' +
  173. '<listItem listIndent="0" listType="numbered">E</listItem>' +
  174. '<listItem listIndent="0" listType="numbered">F</listItem>' +
  175. '<listItem listIndent="0" listType="numbered">G</listItem>' +
  176. '<paragraph></paragraph>' +
  177. '<listItem listIndent="0" listType="bulleted">H</listItem>' +
  178. '<listItem listIndent="0" listType="bulleted">I</listItem>' +
  179. '<paragraph></paragraph>' +
  180. '<listItem listIndent="0" listType="bulleted">J</listItem>' +
  181. '<listItem listIndent="0" listType="bulleted">k</listItem>' +
  182. '<paragraph></paragraph>' +
  183. '<listItem listIndent="0" listType="numbered">h1[]</listItem>';
  184. expectPaste( editor, manyOneItem, expectedModel );
  185. } );
  186. // Pastes (after cleaning up garbage markup):
  187. //
  188. // <h1><span>1.</span><span>H1 1</span></h1>
  189. // <h1><span>2.</span><span>H1 2</span></h1>
  190. //
  191. // which should result in the same output as pasting:
  192. //
  193. // <ol>
  194. // <li>H1 1</li>
  195. // <li>H1 2</li>
  196. // </ol>
  197. //
  198. // Since headings cannot be used inside lists, they should be transformed to a regular text.
  199. it( 'pastes list created from headings (h1)', () => {
  200. const expectedModel = '<listItem listIndent="0" listType="numbered">H1 1</listItem>' +
  201. '<listItem listIndent="0" listType="numbered">H1 2[]</listItem>';
  202. expectPaste( editor, heading1, expectedModel );
  203. } );
  204. // Pastes (after cleaning up garbage markup):
  205. //
  206. // <h3><span>·</span><span>H<b>2 1</b></span></h3>
  207. // <h3><span>·</span><span><i><u>H</u></i><u>2</u> 2</span></h3>
  208. //
  209. // which should result in the same output as pasting:
  210. //
  211. // <ul>
  212. // <li>H<b>2 1</b></li>
  213. // <li><i><u>H</u></i><u>2</u> 2</li>
  214. // </ul>
  215. //
  216. // Since headings cannot be used inside lists, they should be transformed to a regular text.
  217. it( 'pastes list created from styled headings (h3)', () => {
  218. const expectedModel = '<listItem listIndent="0" listType="bulleted">H<$text bold="true">2 1</$text></listItem>' +
  219. '<listItem listIndent="0" listType="bulleted"><$text italic="true" underline="true">H</$text>' +
  220. '<$text underline="true">2</$text> 2[]</listItem>';
  221. expectPaste( editor, heading3Styled, expectedModel );
  222. } );
  223. // Pastes (after cleaning up garbage markup):
  224. //
  225. // <p><span>1.</span><span>H 7</span></p>
  226. //
  227. // which should result in the same output as pasting:
  228. //
  229. // <ol>
  230. // <li>H 7</li>
  231. // </ol>
  232. //
  233. // In Word `Heading 7` is represented as `<p class="MsoHeading7"...>`.
  234. it( 'pastes list created from styled headings (h3)', () => {
  235. const expectedModel = '<listItem listIndent="0" listType="numbered">H 7[]</listItem>';
  236. expectPaste( editor, heading7, expectedModel );
  237. } );
  238. } );