8
0

basic-styles.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  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 Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
  14. import PasteFromOffice from '../../../src/pastefromoffice';
  15. import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  16. import { expectPaste } from '../../_utils/utils';
  17. import { getFixtures } from '../../_utils/fixtures';
  18. describe( 'Basic Styles – integration', () => {
  19. let element, editor, fixtures;
  20. before( () => {
  21. fixtures = getFixtures( 'basic-styles' ).input;
  22. element = document.createElement( 'div' );
  23. document.body.appendChild( element );
  24. return ClassicTestEditor
  25. .create( element, { plugins: [ Clipboard, Paragraph, Heading, Bold, Italic, Underline, Strikethrough, PasteFromOffice ] } )
  26. .then( editorInstance => {
  27. editor = editorInstance;
  28. } );
  29. } );
  30. beforeEach( () => {
  31. setData( editor.model, '<paragraph>[]</paragraph>' );
  32. } );
  33. after( () => {
  34. editor.destroy();
  35. element.remove();
  36. } );
  37. // Pastes: 'Some text <b>with bold</b>.'
  38. // Input same for: Chrome, Firefox and Edge.
  39. describe( 'bold within text', () => {
  40. it( 'pastes in the empty editor', () => {
  41. expectPaste( editor, fixtures.boldWithinText, '<paragraph>Some text <$text bold="true">with bold</$text>.[]</paragraph>' );
  42. } );
  43. it( 'pastes in the paragraph', () => {
  44. setData( editor.model, '<paragraph>More [] text</paragraph>' );
  45. expectPaste( editor, fixtures.boldWithinText,
  46. '<paragraph>More Some text <$text bold="true">with bold</$text>.[] text</paragraph>' );
  47. } );
  48. it( 'pastes in the different block context', () => {
  49. setData( editor.model, '<heading1>More [] text</heading1>' );
  50. expectPaste( editor, fixtures.boldWithinText,
  51. '<heading1>More Some text <$text bold="true">with bold</$text>.[] text</heading1>' );
  52. } );
  53. it( 'pastes in the inline styling context', () => {
  54. setData( editor.model, '<paragraph><$text italic="true">Ita[]lic</$text></paragraph>' );
  55. expectPaste( editor, fixtures.boldWithinText, '<paragraph><$text italic="true">Ita</$text>Some text ' +
  56. '<$text bold="true">with bold</$text>.[]<$text italic="true">lic</$text></paragraph>' );
  57. } );
  58. it( 'pastes inside another bold element', () => {
  59. setData( editor.model, '<paragraph><$text bold="true">Ita[]lic</$text></paragraph>' );
  60. expectPaste( editor, fixtures.boldWithinText, '<paragraph><$text bold="true">Ita</$text>Some text ' +
  61. '<$text bold="true">with bold</$text>.[]<$text bold="true">lic</$text></paragraph>' );
  62. } );
  63. } );
  64. // Pastes: '<i>Italic</i> text.'
  65. // Input same for: Chrome, Firefox and Edge.
  66. describe( 'italic starting text', () => {
  67. it( 'pastes in the empty editor', () => {
  68. expectPaste( editor, fixtures.italicStartingText, '<paragraph><$text italic="true">Italic</$text> text.[]</paragraph>' );
  69. } );
  70. it( 'pastes in the paragraph', () => {
  71. setData( editor.model, '<paragraph>More [] text</paragraph>' );
  72. expectPaste( editor, fixtures.italicStartingText,
  73. '<paragraph>More <$text italic="true">Italic</$text> text.[] text</paragraph>' );
  74. } );
  75. it( 'pastes in the different block context', () => {
  76. setData( editor.model, '<heading1>More [] text</heading1>' );
  77. expectPaste( editor, fixtures.italicStartingText,
  78. '<heading1>More <$text italic="true">Italic</$text> text.[] text</heading1>' );
  79. } );
  80. it( 'pastes in the inline styling context', () => {
  81. setData( editor.model, '<paragraph><$text bold="true">Bol[]d</$text></paragraph>' );
  82. expectPaste( editor, fixtures.italicStartingText, '<paragraph><$text bold="true">Bol</$text><$text italic="true">' +
  83. 'Italic</$text> text.[]<$text bold="true">d</$text></paragraph>' );
  84. } );
  85. it( 'pastes inside another italic element', () => {
  86. setData( editor.model, '<paragraph><$text italic="true">Italic[]</$text></paragraph>' );
  87. expectPaste( editor, fixtures.italicStartingText, '<paragraph><$text italic="true">ItalicItalic</$text> text.[]</paragraph>' );
  88. } );
  89. } );
  90. // Pastes: '<u>Whole text underlined</u>'
  91. // Input same for: Chrome, Firefox and Edge.
  92. describe( 'underlined text', () => {
  93. it( 'pastes in the empty editor', () => {
  94. expectPaste( editor, fixtures.underlinedText,
  95. '<paragraph><$text underline="true">Whole text underlined[]</$text></paragraph>' );
  96. } );
  97. it( 'pastes in the paragraph', () => {
  98. setData( editor.model, '<paragraph>More [] text</paragraph>' );
  99. expectPaste( editor, fixtures.underlinedText, '<paragraph>More <$text underline="true">Whole text underlined[]' +
  100. '</$text> text</paragraph>' );
  101. } );
  102. it( 'pastes in the different block context', () => {
  103. setData( editor.model, '<heading1>More [] text</heading1>' );
  104. expectPaste( editor, fixtures.underlinedText,
  105. '<heading1>More <$text underline="true">Whole text underlined[]</$text> text</heading1>' );
  106. } );
  107. it( 'pastes in the inline styling context', () => {
  108. setData( editor.model, '<paragraph><$text bold="true">Bol[]d</$text></paragraph>' );
  109. expectPaste( editor, fixtures.underlinedText, '<paragraph><$text bold="true">Bol</$text><$text underline="true">' +
  110. 'Whole text underlined[]</$text><$text bold="true">d</$text></paragraph>' );
  111. } );
  112. it( 'pastes inside another underlined element', () => {
  113. setData( editor.model, '<paragraph><$text underline="true">Under []line</$text></paragraph>' );
  114. expectPaste( editor, fixtures.underlinedText, '<paragraph><$text underline="true">Under Whole text underlined[]' +
  115. 'line</$text></paragraph>' );
  116. } );
  117. } );
  118. // Pastes: 'Text <s>incorrect</s>'
  119. // Input same for: Chrome, Firefox and Edge.
  120. describe( 'strikethrough ending text', () => {
  121. it( 'pastes in the empty editor', () => {
  122. expectPaste( editor, fixtures.strikethroughEndingText,
  123. '<paragraph>Text <$text strikethrough="true">incorrect[]</$text></paragraph>' );
  124. } );
  125. it( 'pastes in the paragraph', () => {
  126. setData( editor.model, '<paragraph>More [] text</paragraph>' );
  127. expectPaste( editor, fixtures.strikethroughEndingText, '<paragraph>More Text <$text strikethrough="true">incorrect[]' +
  128. '</$text> text</paragraph>' );
  129. } );
  130. it( 'pastes in the different block context', () => {
  131. setData( editor.model, '<heading1>More [] text</heading1>' );
  132. expectPaste( editor, fixtures.strikethroughEndingText, '<heading1>More Text <$text strikethrough="true">incorrect[]' +
  133. '</$text> text</heading1>' );
  134. } );
  135. it( 'pastes in the inline styling context', () => {
  136. setData( editor.model, '<paragraph><$text bold="true">Bol[]d</$text></paragraph>' );
  137. expectPaste( editor, fixtures.strikethroughEndingText, '<paragraph><$text bold="true">Bol</$text>' +
  138. 'Text <$text strikethrough="true">incorrect[]</$text><$text bold="true">d</$text></paragraph>' );
  139. } );
  140. it( 'pastes inside another strikethrough element', () => {
  141. setData( editor.model, '<paragraph><$text strikethrough="true">[]Foo</$text></paragraph>' );
  142. expectPaste( editor, fixtures.strikethroughEndingText, '<paragraph>Text <$text strikethrough="true">incorrect[]Foo' +
  143. '</$text></paragraph>' );
  144. } );
  145. } );
  146. // Pastes: 'Text <b><u>containi<s>ng</s></u></b><s><u> multi</u>ple</s><i>styling</i>.'
  147. // Input same for: Chrome, Firefox and Edge.
  148. describe( 'mulitple styles single line', () => {
  149. it( 'pastes in the empty editor', () => {
  150. expectPaste( editor, fixtures.multipleStylesSingleLine, '<paragraph>Text ' +
  151. '<$text bold="true" underline="true">containi</$text>' +
  152. '<$text bold="true" strikethrough="true" underline="true">ng</$text>' +
  153. '<$text strikethrough="true" underline="true"> multi</$text>' +
  154. '<$text strikethrough="true">ple </$text>' +
  155. '<$text italic="true">styling</$text>.[]</paragraph>' );
  156. } );
  157. it( 'pastes in the paragraph', () => {
  158. setData( editor.model, '<paragraph>More [] text</paragraph>' );
  159. expectPaste( editor, fixtures.multipleStylesSingleLine, '<paragraph>More Text ' +
  160. '<$text bold="true" underline="true">containi</$text>' +
  161. '<$text bold="true" strikethrough="true" underline="true">ng</$text>' +
  162. '<$text strikethrough="true" underline="true"> multi</$text>' +
  163. '<$text strikethrough="true">ple </$text>' +
  164. '<$text italic="true">styling</$text>.[] text</paragraph>' );
  165. } );
  166. it( 'pastes in the different block context', () => {
  167. setData( editor.model, '<heading1>More [] text</heading1>' );
  168. expectPaste( editor, fixtures.multipleStylesSingleLine, '<heading1>More Text ' +
  169. '<$text bold="true" underline="true">containi</$text>' +
  170. '<$text bold="true" strikethrough="true" underline="true">ng</$text>' +
  171. '<$text strikethrough="true" underline="true"> multi</$text>' +
  172. '<$text strikethrough="true">ple </$text>' +
  173. '<$text italic="true">styling</$text>.[] text</heading1>' );
  174. } );
  175. it( 'pastes in the inline styling context', () => {
  176. setData( editor.model, '<paragraph><$text bold="true">Bol[]d</$text></paragraph>' );
  177. expectPaste( editor, fixtures.multipleStylesSingleLine, '<paragraph><$text bold="true">Bol</$text>Text ' +
  178. '<$text bold="true" underline="true">containi</$text>' +
  179. '<$text bold="true" strikethrough="true" underline="true">ng</$text>' +
  180. '<$text strikethrough="true" underline="true"> multi</$text>' +
  181. '<$text strikethrough="true">ple </$text>' +
  182. '<$text italic="true">styling</$text>.[]' +
  183. '<$text bold="true">d</$text></paragraph>' );
  184. } );
  185. } );
  186. // Pastes:
  187. // <p>Line <b>bold</b> and <i>italics</i></p>
  188. // <p>Line <b><u>foo</u></b><u> bar</u></p>
  189. // <p><s>Third</s> line <b>styling, <i>space on e</i>nd </b></p>
  190. // Input same for: Chrome, Firefox and Edge.
  191. describe( 'mulitple styles multiline', () => {
  192. it( 'pastes in the empty editor', () => {
  193. expectPaste( editor, fixtures.multipleStylesMultiline, '<paragraph>Line ' +
  194. '<$text bold="true">bold</$text> and <$text italic="true">italics</$text></paragraph>' +
  195. '<paragraph>Line <$text bold="true" underline="true">foo</$text><$text underline="true"> bar</$text></paragraph>' +
  196. '<paragraph><$text strikethrough="true">Third</$text> line <$text bold="true">styling, </$text>' +
  197. '<$text bold="true" italic="true">space on e</$text>' +
  198. '<$text bold="true">nd []</$text></paragraph>' ); // The last space '...nd </b></p>' goes missing.
  199. } );
  200. it( 'pastes in the paragraph', () => {
  201. setData( editor.model, '<paragraph>More [] text</paragraph>' );
  202. expectPaste( editor, fixtures.multipleStylesMultiline, '<paragraph>More Line ' +
  203. '<$text bold="true">bold</$text> and <$text italic="true">italics</$text></paragraph>' +
  204. '<paragraph>Line <$text bold="true" underline="true">foo</$text><$text underline="true"> bar</$text></paragraph>' +
  205. '<paragraph><$text strikethrough="true">Third</$text> line <$text bold="true">styling, </$text>' +
  206. '<$text bold="true" italic="true">space on e</$text>' +
  207. '<$text bold="true">nd []</$text> text</paragraph>' ); // The last space '...nd </b></p>' goes missing.
  208. } );
  209. it( 'pastes in the different block context', () => {
  210. setData( editor.model, '<heading1>More [] text</heading1>' );
  211. expectPaste( editor, fixtures.multipleStylesMultiline, '<heading1>More Line ' +
  212. '<$text bold="true">bold</$text> and <$text italic="true">italics</$text></heading1>' +
  213. '<paragraph>Line <$text bold="true" underline="true">foo</$text><$text underline="true"> bar</$text></paragraph>' +
  214. '<paragraph><$text strikethrough="true">Third</$text> line <$text bold="true">styling, </$text>' +
  215. '<$text bold="true" italic="true">space on e</$text>' +
  216. '<$text bold="true">nd []</$text> text</paragraph>' ); // The last space '...nd </b></p>' goes missing.
  217. } );
  218. it( 'pastes in the inline styling context', () => {
  219. setData( editor.model, '<paragraph><$text bold="true">Bol[]d</$text></paragraph>' );
  220. expectPaste( editor, fixtures.multipleStylesMultiline, '<paragraph><$text bold="true">Bol</$text>Line ' +
  221. '<$text bold="true">bold</$text> and <$text italic="true">italics</$text></paragraph>' +
  222. '<paragraph>Line <$text bold="true" underline="true">foo</$text><$text underline="true"> bar</$text></paragraph>' +
  223. '<paragraph><$text strikethrough="true">Third</$text> line <$text bold="true">styling, </$text>' +
  224. '<$text bold="true" italic="true">space on e</$text>' +
  225. '<$text bold="true">nd []d</$text></paragraph>' ); // The last space '...nd </b></p>' goes missing.
  226. } );
  227. } );
  228. } );