8
0

imageresizeediting.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  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 {
  15. focusEditor
  16. } from '@ckeditor/ckeditor5-widget/tests/widgetresize/_utils/utils';
  17. describe( 'ImageResizeEditing', () => {
  18. // 100x50 black png image
  19. const IMAGE_SRC_FIXTURE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAyCAQAAAAAPLY1AAAAQklEQVR42u3PQREAAAgDoK1/' +
  20. 'aM3g14MGNJMXKiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiJysRFNMgH0RpujAAAAAElFTkSuQmCC';
  21. let absoluteContainer, editor, editorElement;
  22. before( () => {
  23. // This container is required to position editor element in a reliable element.
  24. // @todo ensure whether it's required after migrating the tests.
  25. absoluteContainer = document.createElement( 'div' );
  26. absoluteContainer.style.top = '50px';
  27. absoluteContainer.style.left = '50px';
  28. absoluteContainer.style.height = '1000px';
  29. absoluteContainer.style.width = '500px';
  30. absoluteContainer.style.position = 'absolute';
  31. document.body.appendChild( absoluteContainer );
  32. } );
  33. after( () => {
  34. absoluteContainer.remove();
  35. } );
  36. afterEach( () => {
  37. if ( editorElement ) {
  38. editorElement.remove();
  39. }
  40. if ( editor ) {
  41. return editor.destroy();
  42. }
  43. } );
  44. it( 'should be named', () => {
  45. expect( ImageResizeEditing.pluginName ).to.equal( 'ImageResizeEditing' );
  46. } );
  47. describe( 'conversion', () => {
  48. beforeEach( () => createEditor() );
  49. it( 'upcasts 100px width correctly', () => {
  50. editor.setData( `<figure class="image" style="width:100px;"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  51. expect( editor.model.document.getRoot().getChild( 0 ).getAttribute( 'width' ) ).to.equal( '100px' );
  52. } );
  53. it( 'upcasts 50% width correctly', () => {
  54. editor.setData( `<figure class="image" style="width:50%;"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  55. expect( editor.model.document.getRoot().getChild( 0 ).getAttribute( 'width' ) ).to.equal( '50%' );
  56. } );
  57. it( 'downcasts 100px width correctly', () => {
  58. setData( editor.model, `<image src="${ IMAGE_SRC_FIXTURE }" width="100px"></image>` );
  59. expect( editor.getData() )
  60. .to.equal( `<figure class="image image_resized" style="width:100px;"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  61. } );
  62. it( 'downcasts 50% width correctly', () => {
  63. setData( editor.model, `<image src="${ IMAGE_SRC_FIXTURE }" width="50%"></image>` );
  64. expect( editor.getData() )
  65. .to.equal( `<figure class="image image_resized" style="width:50%;"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  66. } );
  67. it( 'removes style and extra class when no longer resized', () => {
  68. setData( editor.model, `<image src="${ IMAGE_SRC_FIXTURE }" width="50%"></image>` );
  69. const imageModel = editor.model.document.getRoot().getChild( 0 );
  70. editor.model.change( writer => {
  71. writer.removeAttribute( 'width', imageModel );
  72. } );
  73. expect( editor.getData() )
  74. .to.equal( `<figure class="image"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  75. } );
  76. it( 'doesn\'t downcast consumed tokens', () => {
  77. editor.conversion.for( 'downcast' ).add( dispatcher =>
  78. dispatcher.on( 'attribute:width:image', ( evt, data, conversionApi ) => {
  79. conversionApi.consumable.consume( data.item, 'attribute:width:image' );
  80. }, { priority: 'high' } )
  81. );
  82. setData( editor.model, `<image src="${ IMAGE_SRC_FIXTURE }" width="50%"></image>` );
  83. expect( editor.getData() )
  84. .to.equal( `<figure class="image"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  85. } );
  86. } );
  87. describe( 'schema', () => {
  88. beforeEach( () => createEditor() );
  89. it( 'allows the width attribute', () => {
  90. expect( editor.model.schema.checkAttribute( 'image', 'width' ) ).to.be.true;
  91. } );
  92. it( 'defines width as a formatting attribute', () => {
  93. expect( editor.model.schema.getAttributeProperties( 'width' ) ).to.have.property( 'isFormatting', true );
  94. } );
  95. } );
  96. describe( 'command', () => {
  97. beforeEach( () => createEditor() );
  98. it( 'defines the imageResize command', () => {
  99. expect( editor.commands.get( 'imageResize' ) ).to.be.instanceOf( ImageResizeCommand );
  100. } );
  101. } );
  102. function createEditor( config ) {
  103. editorElement = document.createElement( 'div' );
  104. absoluteContainer.appendChild( editorElement );
  105. return ClassicEditor
  106. .create( editorElement, config || {
  107. plugins: [ Paragraph, Image, ImageStyle, ImageResizeEditing ],
  108. image: {
  109. resizeUnit: 'px'
  110. }
  111. } )
  112. .then( newEditor => {
  113. editor = newEditor;
  114. focusEditor( editor );
  115. return editor;
  116. } );
  117. }
  118. } );