pasting-integration.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  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. /* 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.model, '<paragraph>[]</paragraph>' );
  30. pasteHtml( editor, 'x <strong>bold</strong> <i>italic</i> <a href="x">link</a> y' );
  31. expect( getData( editor.model ) ).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.model, '<paragraph>[]</paragraph>' );
  45. pasteHtml( editor, '<p>x <strong>bold</strong> <i>italic</i> <a href="x">link</a> y</p>' );
  46. expect( getData( editor.model ) ).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.model, '<paragraph>[]</paragraph>' );
  60. pasteHtml( editor, '<div>x <strong>bold</strong> <i>italic</i> <a href="x">link</a> y</div>' );
  61. expect( getData( editor.model ) ).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.model, '<paragraph>[]</paragraph>' );
  75. pasteHtml( editor, '<blockquote>x <strong>bold</strong> <i>italic</i> <a href="x">link</a> y</blockquote>' );
  76. expect( getData( editor.model ) ).to.equal(
  77. '<blockQuote>' +
  78. '<paragraph>' +
  79. 'x <$text bold="true">bold</$text> <$text italic="true">italic</$text> ' +
  80. '<$text linkHref="x">link</$text> y[]' +
  81. '</paragraph>' +
  82. '</blockQuote>'
  83. );
  84. return editor.destroy();
  85. } );
  86. } );
  87. } );
  88. describe( 'white spaces', () => {
  89. // See https://github.com/ckeditor/ckeditor5-clipboard/issues/2#issuecomment-310417731.
  90. it( 'keeps spaces around inline styles (Chrome)', () => {
  91. return ClassicTestEditor
  92. .create( element, { plugins: [ Clipboard, Paragraph, Bold, Italic, Link ] } )
  93. .then( editor => {
  94. setData( editor.model, '<paragraph>x[]y</paragraph>' );
  95. pasteHtml( editor,
  96. '<meta charset=\'utf-8\'>' +
  97. '<span style="color: rgb(0, 0, 0); font-family: Times;">This is the<span>\u00a0</span></span>' +
  98. '<a href="url" style="font-family: Times; font-size: medium;">third developer preview</a>' +
  99. '<span style="color: rgb(0, 0, 0); font-family: Times;"><span>\u00a0</span>of<span>\u00a0</span></span>' +
  100. '<strong style="color: rgb(0, 0, 0); font-family: Times;">CKEditor\u00a05</strong>' +
  101. '<span style="color: rgb(0, 0, 0); font-family: Times;">.</span>'
  102. );
  103. expect( getData( editor.model ) ).to.equal(
  104. '<paragraph>' +
  105. 'xThis is the ' +
  106. '<$text linkHref="url">third developer preview</$text> of <$text bold="true">CKEditor\u00a05</$text>' +
  107. '.[]y' +
  108. '</paragraph>'
  109. );
  110. return editor.destroy();
  111. } );
  112. } );
  113. // See https://github.com/ckeditor/ckeditor5-clipboard/issues/2#issuecomment-310417731.
  114. it( 'keeps spaces around inline styles (Safari)', () => {
  115. return ClassicTestEditor
  116. .create( element, { plugins: [ Clipboard, Paragraph, Bold, Italic, Link ] } )
  117. .then( editor => {
  118. setData( editor.model, '<paragraph>x[]y</paragraph>' );
  119. /* eslint-disable max-len */
  120. pasteHtml( editor,
  121. '<span style="color: rgb(0, 0, 0); font-family: -webkit-standard;">This is the<span class="Apple-converted-space">\u00a0</span></span>' +
  122. '<a href="url" style="font-family: -webkit-standard; font-style: normal;">third developer preview</a>' +
  123. '<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>' +
  124. '<strong style="color: rgb(0, 0, 0); font-family: -webkit-standard;">CKEditor\u00a05</strong>' +
  125. '<span style="color: rgb(0, 0, 0); font-family: -webkit-standard;">.</span>'
  126. );
  127. /* eslint-enable max-len */
  128. expect( getData( editor.model ) ).to.equal(
  129. '<paragraph>' +
  130. 'xThis is the ' +
  131. '<$text linkHref="url">third developer preview</$text> of <$text bold="true">CKEditor\u00a05</$text>' +
  132. '.[]y' +
  133. '</paragraph>'
  134. );
  135. return editor.destroy();
  136. } );
  137. } );
  138. it( 'keeps spaces around inline styles (Firefox)', () => {
  139. return ClassicTestEditor
  140. .create( element, { plugins: [ Clipboard, Paragraph, Bold, Italic, Link ] } )
  141. .then( editor => {
  142. setData( editor.model, '<paragraph>x[]y</paragraph>' );
  143. // Note, when copying the HTML from Firefox's console you'll see only normal spaces,
  144. // but when you check it later in the model it's still an nbsp.
  145. pasteHtml( editor,
  146. 'This is the <a href="url">third developer preview</a> of <strong>CKEditor\u00a05</strong>.'
  147. );
  148. expect( getData( editor.model ) ).to.equal(
  149. '<paragraph>' +
  150. 'xThis is the ' +
  151. '<$text linkHref="url">third developer preview</$text> of <$text bold="true">CKEditor\u00a05</$text>' +
  152. '.[]y' +
  153. '</paragraph>'
  154. );
  155. return editor.destroy();
  156. } );
  157. } );
  158. } );
  159. } );
  160. function pasteHtml( editor, html ) {
  161. editor.editing.view.document.fire( 'paste', {
  162. dataTransfer: createDataTransfer( { 'text/html': html } ),
  163. stopPropagation() {},
  164. preventDefault() {}
  165. } );
  166. }
  167. function createDataTransfer( data ) {
  168. return {
  169. getData( type ) {
  170. return data[ type ];
  171. }
  172. };
  173. }