imageresizeediting.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  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. /* global document */
  6. // ClassicTestEditor can't be used, as it doesn't handle the focus, which is needed to test resizer visual cues.
  7. import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
  8. import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  9. import Image from '../../src/image';
  10. import ImageResizeEditing from '../../src/imageresize/imageresizeediting';
  11. import ImageResizeCommand from '../../src/imageresize/imageresizecommand';
  12. import ImageStyle from '../../src/imagestyle';
  13. import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  14. import { focusEditor } from '@ckeditor/ckeditor5-widget/tests/widgetresize/_utils/utils';
  15. import { IMAGE_SRC_FIXTURE } from './_utils/utils';
  16. describe( 'ImageResizeEditing', () => {
  17. let editor, editorElement;
  18. beforeEach( () => {
  19. editorElement = document.createElement( 'div' );
  20. document.body.appendChild( editorElement );
  21. } );
  22. afterEach( async () => {
  23. if ( editorElement ) {
  24. editorElement.remove();
  25. }
  26. if ( editor ) {
  27. await editor.destroy();
  28. }
  29. } );
  30. it( 'should be named', () => {
  31. expect( ImageResizeEditing.pluginName ).to.equal( 'ImageResizeEditing' );
  32. } );
  33. describe( 'constructor()', () => {
  34. beforeEach( async () => {
  35. editor = await createEditor( {
  36. plugins: [ Paragraph, Image, ImageStyle, ImageResizeEditing ]
  37. } );
  38. } );
  39. it( 'should define the default value for config.image.resizeUnit', () => {
  40. expect( editor.config.get( 'image.resizeUnit' ) ).to.equal( '%' );
  41. } );
  42. it( 'should define the default value for config.image.resizeOptions', () => {
  43. expect( editor.config.get( 'image.resizeOptions' ) ).to.deep.equal( [ {
  44. name: 'imageResize:original',
  45. value: null,
  46. icon: 'original'
  47. },
  48. {
  49. name: 'imageResize:25',
  50. value: '25',
  51. icon: 'small'
  52. },
  53. {
  54. name: 'imageResize:50',
  55. value: '50',
  56. icon: 'medium'
  57. },
  58. {
  59. name: 'imageResize:75',
  60. value: '75',
  61. icon: 'large'
  62. } ] );
  63. } );
  64. } );
  65. describe( 'conversion', () => {
  66. beforeEach( async () => {
  67. editor = await createEditor();
  68. } );
  69. it( 'upcasts 100px width correctly', () => {
  70. editor.setData( `<figure class="image" style="width:100px;"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  71. expect( editor.model.document.getRoot().getChild( 0 ).getAttribute( 'width' ) ).to.equal( '100px' );
  72. } );
  73. it( 'upcasts 50% width correctly', () => {
  74. editor.setData( `<figure class="image" style="width:50%;"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  75. expect( editor.model.document.getRoot().getChild( 0 ).getAttribute( 'width' ) ).to.equal( '50%' );
  76. } );
  77. it( 'downcasts 100px width correctly', () => {
  78. setData( editor.model, `<image src="${ IMAGE_SRC_FIXTURE }" width="100px"></image>` );
  79. expect( editor.getData() )
  80. .to.equal( `<figure class="image image_resized" style="width:100px;"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  81. } );
  82. it( 'downcasts 50% width correctly', () => {
  83. setData( editor.model, `<image src="${ IMAGE_SRC_FIXTURE }" width="50%"></image>` );
  84. expect( editor.getData() )
  85. .to.equal( `<figure class="image image_resized" style="width:50%;"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  86. } );
  87. it( 'removes style and extra class when no longer resized', () => {
  88. setData( editor.model, `<image src="${ IMAGE_SRC_FIXTURE }" width="50%"></image>` );
  89. const imageModel = editor.model.document.getRoot().getChild( 0 );
  90. editor.model.change( writer => {
  91. writer.removeAttribute( 'width', imageModel );
  92. } );
  93. expect( editor.getData() )
  94. .to.equal( `<figure class="image"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  95. } );
  96. it( 'doesn\'t downcast consumed tokens', () => {
  97. editor.conversion.for( 'downcast' ).add( dispatcher =>
  98. dispatcher.on( 'attribute:width:image', ( evt, data, conversionApi ) => {
  99. conversionApi.consumable.consume( data.item, 'attribute:width:image' );
  100. }, { priority: 'high' } )
  101. );
  102. setData( editor.model, `<image src="${ IMAGE_SRC_FIXTURE }" width="50%"></image>` );
  103. expect( editor.getData() )
  104. .to.equal( `<figure class="image"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  105. } );
  106. } );
  107. describe( 'schema', () => {
  108. beforeEach( async () => {
  109. editor = await createEditor();
  110. } );
  111. it( 'allows the width attribute', () => {
  112. expect( editor.model.schema.checkAttribute( 'image', 'width' ) ).to.be.true;
  113. } );
  114. it( 'defines width as a formatting attribute', () => {
  115. expect( editor.model.schema.getAttributeProperties( 'width' ) ).to.have.property( 'isFormatting', true );
  116. } );
  117. } );
  118. describe( 'command', () => {
  119. beforeEach( async () => {
  120. editor = await createEditor();
  121. } );
  122. it( 'defines the imageResize command', () => {
  123. expect( editor.commands.get( 'imageResize' ) ).to.be.instanceOf( ImageResizeCommand );
  124. } );
  125. } );
  126. function createEditor( config ) {
  127. return ClassicEditor
  128. .create( editorElement, config || {
  129. plugins: [ Paragraph, Image, ImageStyle, ImageResizeEditing ],
  130. image: {
  131. resizeUnit: 'px'
  132. }
  133. } )
  134. .then( newEditor => {
  135. focusEditor( newEditor );
  136. return newEditor;
  137. } );
  138. }
  139. } );