list.js 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  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 PasteFromOffice from '../../../src/pastefromoffice';
  16. import { setData, stringify } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  17. import { pasteHtml } from '../../_utils/utils';
  18. import simple from '../../_data/list/simple/input.word2016.html';
  19. import styled from '../../_data/list/styled/input.word2016.html';
  20. import multiple from '../../_data/list/multiple/input.word2016.html';
  21. import multipleCombined from '../../_data/list/multiple-combined/input.word2016.html';
  22. import manyOneItem from '../../_data/list/many-one-item/input.word2016.html';
  23. import heading1 from '../../_data/list/heading1/input.word2016.html';
  24. import heading3Styled from '../../_data/list/heading3-styled/input.word2016.html';
  25. import heading7 from '../../_data/list/heading7/input.word2016.html';
  26. describe( 'List – integration', () => {
  27. let element, editor, insertedModel;
  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, PasteFromOffice ] } )
  33. .then( editorInstance => {
  34. editor = editorInstance;
  35. const model = editor.model;
  36. const insertContent = model.insertContent;
  37. sinon.stub( editor.model, 'insertContent' ).callsFake( ( content, selection ) => {
  38. // Save model string representation now as it may change after `insertContent()` function call
  39. // so accessing it later may not work as it may have empty/changed structure.
  40. insertedModel = stringify( content );
  41. insertContent.call( model, content, selection );
  42. } );
  43. } );
  44. } );
  45. beforeEach( () => {
  46. setData( editor.model, '<paragraph>[]</paragraph>' );
  47. } );
  48. afterEach( () => {
  49. insertedModel = null;
  50. } );
  51. after( () => {
  52. sinon.restore();
  53. editor.destroy();
  54. element.remove();
  55. } );
  56. // Pastes (after cleaning up garbage markup):
  57. //
  58. // <p><span>1.</span<span>Item1</span></p>
  59. // <p><span>2.</span>><span>Item 2</span></p>
  60. //
  61. // which should result in the same output as pasting:
  62. //
  63. // <ol><li>Item1</li><li>Item2</li></ol>
  64. it( 'pastes simple list', () => {
  65. const expectedModel = '<listItem listIndent="0" listType="numbered">Item1</listItem>' +
  66. '<listItem listIndent="0" listType="numbered">Item 2</listItem>';
  67. expectContent( simple, expectedModel );
  68. } );
  69. // Pastes (after cleaning up garbage markup):
  70. //
  71. // <p>List:</p>
  72. // <p><span>·</span><span>B<b>old</b></span></p>
  73. // <p><span>·</span><span><a href="https://cksource.com">Lin</a>k</span></p>
  74. // <p><span>·</span><span><i>M<b>ul<u>tip</u></b><u>le</u></span></i></p>
  75. //
  76. // which should result in the same output as pasting:
  77. //
  78. // <p>List:</p>
  79. // <ul>
  80. // <li>B<b>old</b></li>
  81. // <li><a href="https://cksource.com">Lin</a>k</li>
  82. // <li><i>M<b>ul<u>tip</u></b><u>le</u></i></li>
  83. // </ul>
  84. it( 'pastes list with styled items prepended by a paragraph', () => {
  85. const expectedModel = '<paragraph>List:</paragraph>' +
  86. '<listItem listIndent="0" listType="bulleted">B<$text bold="true">old</$text></listItem>' +
  87. '<listItem listIndent="0" listType="bulleted"><$text linkHref="https://cksource.com">Lin</$text>k</listItem>' +
  88. '<listItem listIndent="0" listType="bulleted"><$text italic="true">M</$text><$text bold="true" italic="true">ul</$text>' +
  89. '<$text bold="true" italic="true" underline="true">tip</$text>' +
  90. '<$text italic="true" underline="true">le</$text></listItem>';
  91. expectContent( styled, expectedModel );
  92. } );
  93. // Pastes (after cleaning up garbage markup):
  94. //
  95. // <p><span>1.</span><span>Item1</span></p>
  96. // <p><span>2.</span><span>Item 2</span></p>
  97. // <p>Some text</p>
  98. // <p><span>·</span><span>Bullet 1</span></p>
  99. //
  100. // which should result in the same output as pasting:
  101. //
  102. // <ol>
  103. // <li>Item1</li>
  104. // <li>Item 2</li>
  105. // </ol>
  106. // <p>Some text</p>
  107. // <ul>
  108. // <li>Bullet 1</li>
  109. // </ul>
  110. it( 'pastes multiple lists separated by the paragraph', () => {
  111. const expectedModel = '<listItem listIndent="0" listType="numbered">Item1</listItem>' +
  112. '<listItem listIndent="0" listType="numbered">Item 2</listItem>' +
  113. '<paragraph>Some text</paragraph>' +
  114. '<listItem listIndent="0" listType="bulleted">Bullet 1</listItem>';
  115. expectContent( multiple, expectedModel );
  116. } );
  117. // Pastes (after cleaning up garbage markup):
  118. //
  119. // <p><span>1.</span><span>Item1</span></p>
  120. // <p><span>2.</span><span>Item 2</span></p>
  121. // <p><span>1.</span><span>Item 1</span></p>
  122. // <p><span>2.</span><span>Item2</span></p>
  123. //
  124. // which should result in the same output as pasting:
  125. //
  126. // <ol>
  127. // <li>Item1</li>
  128. // <li>Item 2</li>
  129. // </ol>
  130. // <ol>
  131. // <li>Item 1</li>
  132. // <li>Item2</li>
  133. // </ol>
  134. //
  135. // It will create one list, see https://github.com/ckeditor/ckeditor5-list/issues/99.
  136. it( 'pastes multiple lists one right after another', () => {
  137. const expectedModel = '<listItem listIndent="0" listType="numbered">Item1</listItem>' +
  138. '<listItem listIndent="0" listType="numbered">Item 2</listItem>' +
  139. '<listItem listIndent="0" listType="numbered">Item 1</listItem>' +
  140. '<listItem listIndent="0" listType="numbered">Item2</listItem>';
  141. expectContent( multipleCombined, expectedModel );
  142. } );
  143. // Pastes (after cleaning up garbage markup):
  144. //
  145. // <p><span>1.</span><span>A</span></p>
  146. // <p><span>1)</span><span>B</span></p>
  147. // <p><span>I.</span><span>C</span></p>
  148. // <p><span>A.</span><span>D</span></p>
  149. // <p><span>a)</span><span>E</span></p>
  150. // <p><span>a.</span><span>F</span></p>
  151. // <p><span>i.</span><span>G</span></p>
  152. // <p></p>
  153. // <p><span>·</span><span>H</span></p>
  154. // <p><span>o</span><span>I</span></p>
  155. // <p></p>
  156. // <p><span>§</span><span>J</span></p>
  157. // <p><span><img... /></span><span>k</span></p>
  158. // <p></p>
  159. // <p><span>1.</span><span>h1</span></p>
  160. //
  161. // which should result in the same output as pasting:
  162. //
  163. // <ol><li>A</li></ol>
  164. // <ol><li>B</li></ol>
  165. // <ol><li>C</li></ol>
  166. // <ol><li>D</li></ol>
  167. // <ol><li>E</li></ol>
  168. // <ol><li>F</li></ol>
  169. // <ol><li>G</li></ol>
  170. // <p></p>
  171. // <ul><li>H</li></ul>
  172. // <ul><li>I</li></ul>
  173. // <p></p>
  174. // <ul><li>J</li></ul>
  175. // <ul><li>k</li></ul>
  176. // <p></p>
  177. // <ol><li>h1</li></ol>
  178. //
  179. // It will create one list, for all lists not separated by any element - see https://github.com/ckeditor/ckeditor5-list/issues/99.
  180. it( 'pastes many one item lists', () => {
  181. const expectedModel = '<listItem listIndent="0" listType="numbered">A</listItem>' +
  182. '<listItem listIndent="0" listType="numbered">B</listItem>' +
  183. '<listItem listIndent="0" listType="numbered">C</listItem>' +
  184. '<listItem listIndent="0" listType="numbered">D</listItem>' +
  185. '<listItem listIndent="0" listType="numbered">E</listItem>' +
  186. '<listItem listIndent="0" listType="numbered">F</listItem>' +
  187. '<listItem listIndent="0" listType="numbered">G</listItem>' +
  188. '<paragraph></paragraph>' +
  189. '<listItem listIndent="0" listType="bulleted">H</listItem>' +
  190. '<listItem listIndent="0" listType="bulleted">I</listItem>' +
  191. '<paragraph></paragraph>' +
  192. '<listItem listIndent="0" listType="bulleted">J</listItem>' +
  193. '<listItem listIndent="0" listType="bulleted">k</listItem>' +
  194. '<paragraph></paragraph>' +
  195. '<listItem listIndent="0" listType="numbered">h1</listItem>';
  196. expectContent( manyOneItem, expectedModel );
  197. } );
  198. // Pastes (after cleaning up garbage markup):
  199. //
  200. // <h1><span>1.</span><span>H1 1</span></h1>
  201. // <h1><span>2.</span><span>H1 2</span></h1>
  202. //
  203. // which should result in the same output as pasting:
  204. //
  205. // <ol>
  206. // <li>H1 1</li>
  207. // <li>H1 2</li>
  208. // </ol>
  209. //
  210. // Since headings cannot be used inside lists, they should be transformed to a regular text.
  211. it( 'pastes list created from headings (h1)', () => {
  212. const expectedModel = '<listItem listIndent="0" listType="numbered">H1 1</listItem>' +
  213. '<listItem listIndent="0" listType="numbered">H1 2</listItem>';
  214. expectContent( heading1, expectedModel );
  215. } );
  216. // Pastes (after cleaning up garbage markup):
  217. //
  218. // <h3><span>·</span><span>H<b>2 1</b></span></h3>
  219. // <h3><span>·</span><span><i><u>H</u></i><u>2</u> 2</span></h3>
  220. //
  221. // which should result in the same output as pasting:
  222. //
  223. // <ul>
  224. // <li>H<b>2 1</b></li>
  225. // <li><i><u>H</u></i><u>2</u> 2</li>
  226. // </ul>
  227. //
  228. // Since headings cannot be used inside lists, they should be transformed to a regular text.
  229. it( 'pastes list created from styled headings (h3)', () => {
  230. const expectedModel = '<listItem listIndent="0" listType="bulleted">H<$text bold="true">2 1</$text></listItem>' +
  231. '<listItem listIndent="0" listType="bulleted"><$text italic="true" underline="true">H</$text>' +
  232. '<$text underline="true">2</$text> 2</listItem>';
  233. expectContent( heading3Styled, expectedModel );
  234. } );
  235. // Pastes (after cleaning up garbage markup):
  236. //
  237. // <p><span>1.</span><span>H 7</span></p>
  238. //
  239. // which should result in the same output as pasting:
  240. //
  241. // <ol>
  242. // <li>H 7</li>
  243. // </ol>
  244. //
  245. // In Word `Heading 7` is represented as `<p class="MsoHeading7"...>`.
  246. it( 'pastes list created from styled headings (h3)', () => {
  247. const expectedModel = '<listItem listIndent="0" listType="numbered">H 7</listItem>';
  248. expectContent( heading7, expectedModel );
  249. } );
  250. function expectContent( input, expectedModel ) {
  251. pasteHtml( editor, input );
  252. expect( insertedModel ).to.equal( expectedModel );
  253. }
  254. } );