/** * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ import { viewFigureToModel, modelToViewAttributeConverter } from '../../src/image/converters'; import { toImageWidget } from '../../src/image/utils'; import { createImageViewElement } from '../../src/image/imageediting'; import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor'; import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view'; import { setData as setModelData, getData as getModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model'; import env from '@ckeditor/ckeditor5-utils/src/env'; import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils'; describe( 'Image converters', () => { let editor, model, document, viewDocument; testUtils.createSinonSandbox(); beforeEach( () => { // Most tests assume non-edge environment but we do not set `contenteditable=false` on Edge so stub `env.isEdge`. testUtils.sinon.stub( env, 'isEdge' ).get( () => false ); return VirtualTestEditor.create() .then( newEditor => { editor = newEditor; model = editor.model; document = model.document; viewDocument = editor.editing.view; const schema = model.schema; schema.register( 'image', { allowWhere: '$block', allowAttributes: [ 'alt', 'src' ], isObject: true, isBlock: true } ); const editingElementCreator = ( modelElement, viewWriter ) => toImageWidget( createImageViewElement( viewWriter ), viewWriter, '' ); editor.conversion.for( 'editingDowncast' ).elementToElement( { model: 'image', view: editingElementCreator } ); editor.conversion.for( 'downcast' ) .add( modelToViewAttributeConverter( 'src' ) ) .add( modelToViewAttributeConverter( 'alt' ) ); } ); } ); describe( 'viewFigureToModel', () => { function expectModel( data ) { expect( getModelData( model, { withoutSelection: true } ) ).to.equal( data ); } let schema, imgConverterCalled; beforeEach( () => { // Since this part of test tests only view->model conversion editing pipeline is not necessary // so defining model->view converters won't be necessary. editor.editing.destroy(); schema = model.schema; schema.extend( '$text', { allowIn: 'image' } ); editor.conversion.for( 'upcast' ) .add( viewFigureToModel() ) .elementToElement( { view: { name: 'img', attributes: { src: true } }, model: ( viewImage, writer ) => { imgConverterCalled = true; return writer.createElement( 'image', { src: viewImage.getAttribute( 'src' ) } ); } } ); } ); it( 'should find img element among children and convert it using already defined converters', () => { editor.setData( '
' ); expectModel( '' ); expect( imgConverterCalled ).to.be.true; } ); it( 'should convert children allowed by schema and omit disallowed', () => { editor.conversion.for( 'upcast' ).elementToElement( { view: 'foo', model: 'foo' } ); editor.conversion.for( 'upcast' ).elementToElement( { view: 'bar', model: 'bar' } ); schema.register( 'foo', { allowIn: 'image' } ); // Is allowed in root, but should not try to split image element. schema.register( 'bar', { allowIn: '$root' } ); editor.setData( '
xy
' ); // Element bar not converted because schema does not allow it. expectModel( 'xy' ); } ); it( 'should split parent element when image is not allowed - in the middle', () => { editor.conversion.for( 'upcast' ).elementToElement( { view: 'div', model: 'div' } ); schema.register( 'div', { inheritAllFrom: '$block' } ); schema.extend( 'image', { disallowIn: 'div' } ); editor.setData( '
' + 'abc' + '
' + '' + '
' + 'def' + '
' ); expectModel( '
abc
def
' ); } ); it( 'should split parent element when image is not allowed - at the end', () => { editor.conversion.elementToElement( { model: 'div', view: 'div' } ); schema.register( 'div', { inheritAllFrom: '$block' } ); schema.extend( 'image', { disallowIn: 'div' } ); editor.setData( '
' + 'abc' + '
' + '' + '
' + '
' ); expectModel( '
abc
' ); } ); it( 'should split parent element when image is not allowed - at the beginning', () => { editor.conversion.elementToElement( { model: 'div', view: 'div' } ); schema.register( 'div', { inheritAllFrom: '$block' } ); schema.extend( 'image', { disallowIn: 'div' } ); editor.setData( '
' + '
' + '' + '
' + 'def' + '
' ); expectModel( '
def
' ); } ); it( 'should be possible to overwrite', () => { editor.data.upcastDispatcher.on( 'element:figure', ( evt, data, conversionApi ) => { conversionApi.consumable.consume( data.viewItem, { name: true } ); conversionApi.consumable.consume( data.viewItem.getChild( 0 ), { name: true } ); const element = conversionApi.writer.createElement( 'myImage', { data: { src: data.viewItem.getChild( 0 ).getAttribute( 'src' ) } } ); conversionApi.writer.insert( element, data.modelCursor ); data.modelRange = conversionApi.writer.createRangeOn( element ); data.modelCursor = data.modelRange.end; }, { priority: 'high' } ); editor.setData( '
xyz
' ); expectModel( '' ); } ); // Test exactly what figure converter does, which is putting it's children element to image element. // If this has not been done, it means that figure converter was not used. it( 'should not convert if figure do not have class="image" attribute', () => { editor.setData( '
xyz
' ); // Default image converter will be fired. expectModel( '' ); } ); it( 'should not convert if there is no img element among children', () => { editor.setData( '
xyz
' ); // Figure converter outputs nothing and text is disallowed in root. expectModel( '' ); } ); it( 'should not convert if img element was not converted', () => { // Image element missing src attribute. editor.setData( '
abcxyz
' ); // Figure converter outputs nothing and text is disallowed in root. expectModel( '' ); } ); } ); describe( 'modelToViewAttributeConverter', () => { it( 'should convert adding attribute to image', () => { setModelData( model, '' ); const image = document.getRoot().getChild( 0 ); model.change( writer => { writer.setAttribute( 'alt', 'foo bar', image ); } ); expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal( '
foo bar
' ); } ); it( 'should convert removing attribute from image', () => { setModelData( model, 'foo bar' ); const image = document.getRoot().getChild( 0 ); model.change( writer => { writer.removeAttribute( 'alt', image ); } ); expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal( '
' ); } ); it( 'should convert change of attribute image', () => { setModelData( model, 'foo bar' ); const image = document.getRoot().getChild( 0 ); model.change( writer => { writer.setAttribute( 'alt', 'baz quix', image ); } ); expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal( '
baz quix
' ); } ); it( 'should not set attribute if change was already consumed', () => { editor.editing.downcastDispatcher.on( 'attribute:alt:image', ( evt, data, conversionApi ) => { conversionApi.consumable.consume( data.item, 'attribute:alt' ); }, { priority: 'high' } ); setModelData( model, 'foo bar' ); expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal( '
' ); } ); it( 'should set attribute on even if other element is present inside figure', () => { editor.model.schema.register( 'foo', { allowIn: 'image' } ); editor.conversion.for( 'downcast' ).elementToElement( { model: 'foo', view: 'foo' } ); setModelData( model, '' ); const image = document.getRoot().getChild( 0 ); model.change( writer => { writer.setAttribute( 'alt', 'foo bar', image ); } ); expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal( '
foo bar
' ); } ); } ); } );