imagecaption-integration.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. import Image from '../../src/image';
  6. import ImageCaption from '../../src/imagecaption';
  7. import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
  8. import DomEventData from '@ckeditor/ckeditor5-engine/src/view/observer/domeventdata';
  9. import Enter from '@ckeditor/ckeditor5-enter/src/enter';
  10. import ShiftEnter from '@ckeditor/ckeditor5-enter/src/shiftenter';
  11. import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  12. import Typing from '@ckeditor/ckeditor5-typing/src/typing';
  13. import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  14. import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
  15. import global from '@ckeditor/ckeditor5-utils/src/dom/global';
  16. describe( 'ImageCaption integration', () => {
  17. let editorElement, editor, model, view, viewDocument;
  18. beforeEach( () => {
  19. editorElement = global.document.createElement( 'div' );
  20. global.document.body.appendChild( editorElement );
  21. } );
  22. afterEach( () => {
  23. editorElement.remove();
  24. } );
  25. describe( 'Enter plugin', () => {
  26. beforeEach( () => {
  27. return ClassicEditor
  28. .create( editorElement, {
  29. plugins: [
  30. Enter, Typing, Paragraph, Image, ImageCaption
  31. ]
  32. } )
  33. .then( newEditor => {
  34. editor = newEditor;
  35. model = editor.model;
  36. view = editor.editing.view;
  37. viewDocument = view.document;
  38. } );
  39. } );
  40. afterEach( () => {
  41. return editor.destroy();
  42. } );
  43. it( 'does nothing if soft enter was pressed', () => {
  44. setModelData(
  45. model,
  46. '<paragraph>Foo.</paragraph><image src="foo.png"><caption>Foo.[]</caption></image><paragraph>Bar.</paragraph>'
  47. );
  48. viewDocument.fire( 'enter', new DomEventData( viewDocument, getDomEvent(), { isSoft: true } ) );
  49. assertModelData(
  50. '<paragraph>Foo.</paragraph>' +
  51. '<image src="foo.png">' +
  52. '<caption>Foo.[]</caption>' +
  53. '</image>' +
  54. '<paragraph>Bar.</paragraph>'
  55. );
  56. /* eslint-disable max-len */
  57. assertViewData(
  58. '<p>Foo.</p>' +
  59. '<figure class="ck-widget image" contenteditable="false">' +
  60. '<img src="foo.png"></img>' +
  61. '<figcaption class="ck-editor__editable ck-editor__nested-editable" contenteditable="true" data-placeholder="Enter image caption">' +
  62. 'Foo.{}' +
  63. '</figcaption>' +
  64. '</figure>' +
  65. '<p>Bar.</p>'
  66. );
  67. /* eslint-enable max-len */
  68. } );
  69. } );
  70. describe( 'ShiftEnter plugin', () => {
  71. beforeEach( () => {
  72. return ClassicEditor
  73. .create( editorElement, {
  74. plugins: [
  75. Enter, ShiftEnter, Typing, Paragraph, Image, ImageCaption
  76. ]
  77. } )
  78. .then( newEditor => {
  79. editor = newEditor;
  80. model = editor.model;
  81. view = editor.editing.view;
  82. viewDocument = view.document;
  83. } );
  84. } );
  85. afterEach( () => {
  86. return editor.destroy();
  87. } );
  88. it( 'inserts a soft break when soft enter was pressed', () => {
  89. setModelData(
  90. model,
  91. '<paragraph>Foo.</paragraph><image src="foo.png"><caption>Foo.[]</caption></image><paragraph>Bar.</paragraph>'
  92. );
  93. viewDocument.fire( 'enter', new DomEventData( viewDocument, getDomEvent(), { isSoft: true } ) );
  94. assertModelData(
  95. '<paragraph>Foo.</paragraph>' +
  96. '<image src="foo.png">' +
  97. '<caption>Foo.<softBreak></softBreak>[]</caption>' +
  98. '</image>' +
  99. '<paragraph>Bar.</paragraph>'
  100. );
  101. /* eslint-disable max-len */
  102. assertViewData(
  103. '<p>Foo.</p>' +
  104. '<figure class="ck-widget image" contenteditable="false">' +
  105. '<img src="foo.png"></img>' +
  106. '<figcaption class="ck-editor__editable ck-editor__nested-editable" contenteditable="true" data-placeholder="Enter image caption">' +
  107. 'Foo.<br></br>[]' +
  108. '</figcaption>' +
  109. '</figure>' +
  110. '<p>Bar.</p>'
  111. );
  112. /* eslint-enable max-len */
  113. } );
  114. } );
  115. describe( 'Enter and ShiftEnter plugins', () => {
  116. beforeEach( () => {
  117. return ClassicEditor
  118. .create( editorElement, {
  119. plugins: [
  120. ShiftEnter, Typing, Paragraph, Image, ImageCaption
  121. ]
  122. } )
  123. .then( newEditor => {
  124. editor = newEditor;
  125. model = editor.model;
  126. view = editor.editing.view;
  127. viewDocument = view.document;
  128. } );
  129. } );
  130. afterEach( () => {
  131. return editor.destroy();
  132. } );
  133. it( 'inserts soft break and text in the caption element', () => {
  134. setModelData(
  135. model,
  136. '<paragraph>Foo.</paragraph><image src="foo.png"><caption>Foo.[]</caption></image><paragraph>Bar.</paragraph>'
  137. );
  138. viewDocument.fire( 'enter', new DomEventData( viewDocument, getDomEvent(), { isSoft: true } ) );
  139. editor.commands.execute( 'input', { text: 'Abc.' } );
  140. viewDocument.fire( 'enter', new DomEventData( viewDocument, getDomEvent(), { isSoft: false } ) );
  141. assertModelData(
  142. '<paragraph>Foo.</paragraph>' +
  143. '<image src="foo.png"><caption>Foo.<softBreak></softBreak>Abc.[]</caption></image>' +
  144. '<paragraph>Bar.</paragraph>'
  145. );
  146. /* eslint-disable max-len */
  147. assertViewData(
  148. '<p>Foo.</p>' +
  149. '<figure class="ck-widget image" contenteditable="false">' +
  150. '<img src="foo.png"></img>' +
  151. '<figcaption class="ck-editor__editable ck-editor__nested-editable" contenteditable="true" data-placeholder="Enter image caption">' +
  152. 'Foo.<br></br>Abc.{}' +
  153. '</figcaption>' +
  154. '</figure>' +
  155. '<p>Bar.</p>'
  156. );
  157. /* eslint-enable max-len */
  158. } );
  159. } );
  160. function getDomEvent() {
  161. return {
  162. preventDefault: sinon.spy()
  163. };
  164. }
  165. function assertModelData( output ) {
  166. expect( getModelData( model ) ).to.equal( output );
  167. }
  168. function assertViewData( output ) {
  169. expect( getViewData( view ) ).to.equal( output );
  170. }
  171. } );