pasting-integration.js 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. /**
  2. * @license Copyright (c) 2003-2017, 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 '../src/clipboard';
  8. import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  9. import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
  10. import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
  11. import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
  12. import Link from '@ckeditor/ckeditor5-link/src/link';
  13. import { setData, getData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  14. describe( 'Pasting – integration', () => {
  15. let element;
  16. beforeEach( () => {
  17. element = document.createElement( 'div' );
  18. document.body.appendChild( element );
  19. } );
  20. afterEach( () => {
  21. element.remove();
  22. } );
  23. describe( 'inline styles', () => {
  24. // See https://github.com/ckeditor/ckeditor5/issues/477.
  25. it( 'pastes inline styles and links (no block)', () => {
  26. return ClassicTestEditor
  27. .create( element, { plugins: [ Clipboard, Paragraph, Bold, Italic, Link ] } )
  28. .then( editor => {
  29. setData( editor.document, '<paragraph>[]</paragraph>' );
  30. pasteHtml( editor, 'x <strong>bold</strong> <i>italic</i> <a href="x">link</a> y' );
  31. expect( getData( editor.document ) ).to.equal(
  32. '<paragraph>' +
  33. 'x <$text bold="true">bold</$text> <$text italic="true">italic</$text> ' +
  34. '<$text linkHref="x">link</$text> y[]' +
  35. '</paragraph>'
  36. );
  37. return editor.destroy();
  38. } );
  39. } );
  40. it( 'pastes inline styles and links (inside known block)', () => {
  41. return ClassicTestEditor
  42. .create( element, { plugins: [ Clipboard, Paragraph, Bold, Italic, Link ] } )
  43. .then( editor => {
  44. setData( editor.document, '<paragraph>[]</paragraph>' );
  45. pasteHtml( editor, '<p>x <strong>bold</strong> <i>italic</i> <a href="x">link</a> y</p>' );
  46. expect( getData( editor.document ) ).to.equal(
  47. '<paragraph>' +
  48. 'x <$text bold="true">bold</$text> <$text italic="true">italic</$text> ' +
  49. '<$text linkHref="x">link</$text> y[]' +
  50. '</paragraph>'
  51. );
  52. return editor.destroy();
  53. } );
  54. } );
  55. it( 'pastes inline styles and links (inside unknown block)', () => {
  56. return ClassicTestEditor
  57. .create( element, { plugins: [ Clipboard, Paragraph, Bold, Italic, Link ] } )
  58. .then( editor => {
  59. setData( editor.document, '<paragraph>[]</paragraph>' );
  60. pasteHtml( editor, '<div>x <strong>bold</strong> <i>italic</i> <a href="x">link</a> y</div>' );
  61. expect( getData( editor.document ) ).to.equal(
  62. '<paragraph>' +
  63. 'x <$text bold="true">bold</$text> <$text italic="true">italic</$text> ' +
  64. '<$text linkHref="x">link</$text> y[]' +
  65. '</paragraph>'
  66. );
  67. return editor.destroy();
  68. } );
  69. } );
  70. it( 'pastes inline styles and links (inside known block but on disallowed position)', () => {
  71. return ClassicTestEditor
  72. .create( element, { plugins: [ Clipboard, Paragraph, BlockQuote, Bold, Italic, Link ] } )
  73. .then( editor => {
  74. setData( editor.document, '<paragraph>[]</paragraph>' );
  75. pasteHtml( editor, '<blockquote>x <strong>bold</strong> <i>italic</i> <a href="x">link</a> y</blockquote>' );
  76. expect( getData( editor.document ) ).to.equal(
  77. '<blockQuote><paragraph>x bold italic link y[]</paragraph></blockQuote>'
  78. );
  79. // The expected result would be this:
  80. //
  81. // '<blockQuote>' +
  82. // '<paragraph>' +
  83. // 'x <$text bold="true">bold</$text> <$text italic="true">italic</$text> ' +
  84. // '<$text linkHref="x">link</$text> y[]' +
  85. // '</paragraph>' +
  86. // '</blockQuote>'
  87. //
  88. // See https://github.com/ckeditor/ckeditor5/issues/477#issuecomment-310428963.
  89. // Although, this may be a deeper problem with ckeditor5-paragraph's wildcard conversion.
  90. return editor.destroy();
  91. } );
  92. } );
  93. } );
  94. describe( 'white spaces', () => {
  95. // See https://github.com/ckeditor/ckeditor5-clipboard/issues/2#issuecomment-310417731.
  96. it( 'keeps spaces around inline styles (Chrome)', () => {
  97. return ClassicTestEditor
  98. .create( element, { plugins: [ Clipboard, Paragraph, Bold, Italic, Link ] } )
  99. .then( editor => {
  100. setData( editor.document, '<paragraph>x[]y</paragraph>' );
  101. pasteHtml( editor,
  102. '<meta charset=\'utf-8\'>' +
  103. '<span style="color: rgb(0, 0, 0); font-family: Times;">This is the<span>\u00a0</span></span>' +
  104. '<a href="url" style="font-family: Times; font-size: medium;">third developer preview</a>' +
  105. '<span style="color: rgb(0, 0, 0); font-family: Times;"><span>\u00a0</span>of<span>\u00a0</span></span>' +
  106. '<strong style="color: rgb(0, 0, 0); font-family: Times;">CKEditor\u00a05</strong>' +
  107. '<span style="color: rgb(0, 0, 0); font-family: Times;">.</span>'
  108. );
  109. expect( getData( editor.document ) ).to.equal(
  110. '<paragraph>' +
  111. 'xThis is the ' +
  112. '<$text linkHref="url">third developer preview</$text> of <$text bold="true">CKEditor\u00a05</$text>' +
  113. '.[]y' +
  114. '</paragraph>'
  115. );
  116. return editor.destroy();
  117. } );
  118. } );
  119. // See https://github.com/ckeditor/ckeditor5-clipboard/issues/2#issuecomment-310417731.
  120. it( 'keeps spaces around inline styles (Safari)', () => {
  121. return ClassicTestEditor
  122. .create( element, { plugins: [ Clipboard, Paragraph, Bold, Italic, Link ] } )
  123. .then( editor => {
  124. setData( editor.document, '<paragraph>x[]y</paragraph>' );
  125. /* eslint-disable max-len */
  126. pasteHtml( editor,
  127. '<span style="color: rgb(0, 0, 0); font-family: -webkit-standard;">This is the<span class="Apple-converted-space">\u00a0</span></span>' +
  128. '<a href="url" style="font-family: -webkit-standard; font-style: normal;">third developer preview</a>' +
  129. '<span style="color: rgb(0, 0, 0); font-family: -webkit-standard;"><span class="Apple-converted-space">\u00a0</span>of<span class="Apple-converted-space">\u00a0</span></span>' +
  130. '<strong style="color: rgb(0, 0, 0); font-family: -webkit-standard;">CKEditor\u00a05</strong>' +
  131. '<span style="color: rgb(0, 0, 0); font-family: -webkit-standard;">.</span>'
  132. );
  133. /* eslint-enable max-len */
  134. expect( getData( editor.document ) ).to.equal(
  135. '<paragraph>' +
  136. 'xThis is the ' +
  137. '<$text linkHref="url">third developer preview</$text> of <$text bold="true">CKEditor\u00a05</$text>' +
  138. '.[]y' +
  139. '</paragraph>'
  140. );
  141. return editor.destroy();
  142. } );
  143. } );
  144. it( 'keeps spaces around inline styles (Firefox)', () => {
  145. return ClassicTestEditor
  146. .create( element, { plugins: [ Clipboard, Paragraph, Bold, Italic, Link ] } )
  147. .then( editor => {
  148. setData( editor.document, '<paragraph>x[]y</paragraph>' );
  149. // Note, when copying the HTML from Firefox's console you'll see only normal spaces,
  150. // but when you check it later in the model it's still an nbsp.
  151. pasteHtml( editor,
  152. 'This is the <a href="url">third developer preview</a> of <strong>CKEditor\u00a05</strong>.'
  153. );
  154. expect( getData( editor.document ) ).to.equal(
  155. '<paragraph>' +
  156. 'xThis is the ' +
  157. '<$text linkHref="url">third developer preview</$text> of <$text bold="true">CKEditor\u00a05</$text>' +
  158. '.[]y' +
  159. '</paragraph>'
  160. );
  161. return editor.destroy();
  162. } );
  163. } );
  164. } );
  165. } );
  166. function pasteHtml( editor, html ) {
  167. editor.editing.view.fire( 'paste', {
  168. dataTransfer: createDataTransfer( { 'text/html': html } ),
  169. preventDefault() {}
  170. } );
  171. }
  172. function createDataTransfer( data ) {
  173. return {
  174. getData( type ) {
  175. return data[ type ];
  176. }
  177. };
  178. }