|
@@ -13,7 +13,7 @@ import { isImageWidget } from '../../src/image/utils';
|
|
|
import normalizeHtml from '@ckeditor/ckeditor5-utils/tests/_utils/normalizehtml';
|
|
import normalizeHtml from '@ckeditor/ckeditor5-utils/tests/_utils/normalizehtml';
|
|
|
|
|
|
|
|
describe( 'ImageEngine', () => {
|
|
describe( 'ImageEngine', () => {
|
|
|
- let editor, document, viewDocument;
|
|
|
|
|
|
|
+ let editor, model, document, viewDocument;
|
|
|
|
|
|
|
|
beforeEach( () => {
|
|
beforeEach( () => {
|
|
|
return VirtualTestEditor
|
|
return VirtualTestEditor
|
|
@@ -22,7 +22,8 @@ describe( 'ImageEngine', () => {
|
|
|
} )
|
|
} )
|
|
|
.then( newEditor => {
|
|
.then( newEditor => {
|
|
|
editor = newEditor;
|
|
editor = newEditor;
|
|
|
- document = editor.document;
|
|
|
|
|
|
|
+ model = editor.model;
|
|
|
|
|
+ document = model.document;
|
|
|
viewDocument = editor.editing.view;
|
|
viewDocument = editor.editing.view;
|
|
|
} );
|
|
} );
|
|
|
} );
|
|
} );
|
|
@@ -32,26 +33,26 @@ describe( 'ImageEngine', () => {
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should set proper schema rules', () => {
|
|
it( 'should set proper schema rules', () => {
|
|
|
- expect( document.schema.check( { name: 'image', attributes: [ 'src', 'alt' ], inside: '$root' } ) ).to.be.true;
|
|
|
|
|
- expect( document.schema.objects.has( 'image' ) ).to.be.true;
|
|
|
|
|
|
|
+ expect( model.schema.check( { name: 'image', attributes: [ 'src', 'alt' ], inside: '$root' } ) ).to.be.true;
|
|
|
|
|
+ expect( model.schema.objects.has( 'image' ) ).to.be.true;
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
describe( 'conversion in data pipeline', () => {
|
|
describe( 'conversion in data pipeline', () => {
|
|
|
describe( 'model to view', () => {
|
|
describe( 'model to view', () => {
|
|
|
it( 'should convert', () => {
|
|
it( 'should convert', () => {
|
|
|
- setModelData( document, '<image src="foo.png" alt="alt text"></image>' );
|
|
|
|
|
|
|
+ setModelData( model, '<image src="foo.png" alt="alt text"></image>' );
|
|
|
|
|
|
|
|
expect( editor.getData() ).to.equal( '<figure class="image"><img alt="alt text" src="foo.png"></figure>' );
|
|
expect( editor.getData() ).to.equal( '<figure class="image"><img alt="alt text" src="foo.png"></figure>' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should convert without alt attribute', () => {
|
|
it( 'should convert without alt attribute', () => {
|
|
|
- setModelData( document, '<image src="foo.png"></image>' );
|
|
|
|
|
|
|
+ setModelData( model, '<image src="foo.png"></image>' );
|
|
|
|
|
|
|
|
expect( editor.getData() ).to.equal( '<figure class="image"><img src="foo.png"></figure>' );
|
|
expect( editor.getData() ).to.equal( '<figure class="image"><img src="foo.png"></figure>' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should convert srcset attribute to srcset and sizes attribute', () => {
|
|
it( 'should convert srcset attribute to srcset and sizes attribute', () => {
|
|
|
- setModelData( document,
|
|
|
|
|
|
|
+ setModelData( model,
|
|
|
'<image src="foo.png" alt="alt text" srcset=\'{ "data": "small.png 148w, big.png 1024w" }\'></image>'
|
|
'<image src="foo.png" alt="alt text" srcset=\'{ "data": "small.png 148w, big.png 1024w" }\'></image>'
|
|
|
);
|
|
);
|
|
|
|
|
|
|
@@ -63,7 +64,7 @@ describe( 'ImageEngine', () => {
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should convert srcset attribute to width, srcset and add sizes attribute', () => {
|
|
it( 'should convert srcset attribute to width, srcset and add sizes attribute', () => {
|
|
|
- setModelData( document,
|
|
|
|
|
|
|
+ setModelData( model,
|
|
|
'<image ' +
|
|
'<image ' +
|
|
|
'src="foo.png" ' +
|
|
'src="foo.png" ' +
|
|
|
'alt="alt text" ' +
|
|
'alt="alt text" ' +
|
|
@@ -87,7 +88,7 @@ describe( 'ImageEngine', () => {
|
|
|
consumable.consume( modelImage, consumableType );
|
|
consumable.consume( modelImage, consumableType );
|
|
|
}, { priority: 'high' } );
|
|
}, { priority: 'high' } );
|
|
|
|
|
|
|
|
- setModelData( document,
|
|
|
|
|
|
|
+ setModelData( model,
|
|
|
'<image ' +
|
|
'<image ' +
|
|
|
'src="foo.png" ' +
|
|
'src="foo.png" ' +
|
|
|
'alt="alt text" ' +
|
|
'alt="alt text" ' +
|
|
@@ -103,7 +104,7 @@ describe( 'ImageEngine', () => {
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should not convert srcset attribute if has wrong data', () => {
|
|
it( 'should not convert srcset attribute if has wrong data', () => {
|
|
|
- setModelData( document,
|
|
|
|
|
|
|
+ setModelData( model,
|
|
|
'<image ' +
|
|
'<image ' +
|
|
|
'src="foo.png" ' +
|
|
'src="foo.png" ' +
|
|
|
'alt="alt text" ' +
|
|
'alt="alt text" ' +
|
|
@@ -111,10 +112,8 @@ describe( 'ImageEngine', () => {
|
|
|
'</image>' );
|
|
'</image>' );
|
|
|
|
|
|
|
|
const image = document.getRoot().getChild( 0 );
|
|
const image = document.getRoot().getChild( 0 );
|
|
|
- document.enqueueChanges( () => {
|
|
|
|
|
- const batch = document.batch();
|
|
|
|
|
-
|
|
|
|
|
- batch.removeAttribute( 'srcset', image );
|
|
|
|
|
|
|
+ model.change( writer => {
|
|
|
|
|
+ writer.removeAttribute( 'srcset', image );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
expect( editor.getData() ).to.equal(
|
|
expect( editor.getData() ).to.equal(
|
|
@@ -129,42 +128,42 @@ describe( 'ImageEngine', () => {
|
|
|
it( 'should convert image figure', () => {
|
|
it( 'should convert image figure', () => {
|
|
|
editor.setData( '<figure class="image"><img src="foo.png" alt="alt text" /></figure>' );
|
|
editor.setData( '<figure class="image"><img src="foo.png" alt="alt text" /></figure>' );
|
|
|
|
|
|
|
|
- expect( getModelData( document, { withoutSelection: true } ) )
|
|
|
|
|
|
|
+ expect( getModelData( model, { withoutSelection: true } ) )
|
|
|
.to.equal( '<image alt="alt text" src="foo.png"></image>' );
|
|
.to.equal( '<image alt="alt text" src="foo.png"></image>' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should not convert if there is no image class', () => {
|
|
it( 'should not convert if there is no image class', () => {
|
|
|
editor.setData( '<figure class="quote">My quote</figure>' );
|
|
editor.setData( '<figure class="quote">My quote</figure>' );
|
|
|
|
|
|
|
|
- expect( getModelData( document, { withoutSelection: true } ) )
|
|
|
|
|
|
|
+ expect( getModelData( model, { withoutSelection: true } ) )
|
|
|
.to.equal( '' );
|
|
.to.equal( '' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should not convert if there is no img inside #1', () => {
|
|
it( 'should not convert if there is no img inside #1', () => {
|
|
|
editor.setData( '<figure class="image"></figure>' );
|
|
editor.setData( '<figure class="image"></figure>' );
|
|
|
|
|
|
|
|
- expect( getModelData( document, { withoutSelection: true } ) )
|
|
|
|
|
|
|
+ expect( getModelData( model, { withoutSelection: true } ) )
|
|
|
.to.equal( '' );
|
|
.to.equal( '' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should not convert if there is no img inside #2', () => {
|
|
it( 'should not convert if there is no img inside #2', () => {
|
|
|
editor.setData( '<figure class="image">test</figure>' );
|
|
editor.setData( '<figure class="image">test</figure>' );
|
|
|
|
|
|
|
|
- expect( getModelData( document, { withoutSelection: true } ) )
|
|
|
|
|
|
|
+ expect( getModelData( model, { withoutSelection: true } ) )
|
|
|
.to.equal( '' );
|
|
.to.equal( '' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should convert without alt attribute', () => {
|
|
it( 'should convert without alt attribute', () => {
|
|
|
editor.setData( '<figure class="image"><img src="foo.png" /></figure>' );
|
|
editor.setData( '<figure class="image"><img src="foo.png" /></figure>' );
|
|
|
|
|
|
|
|
- expect( getModelData( document, { withoutSelection: true } ) )
|
|
|
|
|
|
|
+ expect( getModelData( model, { withoutSelection: true } ) )
|
|
|
.to.equal( '<image src="foo.png"></image>' );
|
|
.to.equal( '<image src="foo.png"></image>' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should not convert without src attribute', () => {
|
|
it( 'should not convert without src attribute', () => {
|
|
|
editor.setData( '<figure class="image"><img alt="alt text" /></figure>' );
|
|
editor.setData( '<figure class="image"><img alt="alt text" /></figure>' );
|
|
|
|
|
|
|
|
- expect( getModelData( document, { withoutSelection: true } ) )
|
|
|
|
|
|
|
+ expect( getModelData( model, { withoutSelection: true } ) )
|
|
|
.to.equal( '' );
|
|
.to.equal( '' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
@@ -172,15 +171,15 @@ describe( 'ImageEngine', () => {
|
|
|
const data = editor.data;
|
|
const data = editor.data;
|
|
|
const editing = editor.editing;
|
|
const editing = editor.editing;
|
|
|
|
|
|
|
|
- document.schema.registerItem( 'div', '$block' );
|
|
|
|
|
- document.schema.disallow( { name: 'image', inside: '$root', attributes: 'src' } );
|
|
|
|
|
|
|
+ model.schema.registerItem( 'div', '$block' );
|
|
|
|
|
+ model.schema.disallow( { name: 'image', inside: '$root', attributes: 'src' } );
|
|
|
|
|
|
|
|
buildModelConverter().for( data.modelToView, editing.modelToView ).fromElement( 'div' ).toElement( 'div' );
|
|
buildModelConverter().for( data.modelToView, editing.modelToView ).fromElement( 'div' ).toElement( 'div' );
|
|
|
buildViewConverter().for( data.viewToModel ).fromElement( 'div' ).toElement( 'div' );
|
|
buildViewConverter().for( data.viewToModel ).fromElement( 'div' ).toElement( 'div' );
|
|
|
|
|
|
|
|
editor.setData( '<div><figure class="image"><img src="foo.png" alt="alt text" /></figure></div>' );
|
|
editor.setData( '<div><figure class="image"><img src="foo.png" alt="alt text" /></figure></div>' );
|
|
|
|
|
|
|
|
- expect( getModelData( document, { withoutSelection: true } ) )
|
|
|
|
|
|
|
+ expect( getModelData( model, { withoutSelection: true } ) )
|
|
|
.to.equal( '<div></div>' );
|
|
.to.equal( '<div></div>' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
@@ -192,7 +191,7 @@ describe( 'ImageEngine', () => {
|
|
|
|
|
|
|
|
editor.setData( '<figure class="image"><img src="foo.png" alt="alt text" /></figure>' );
|
|
editor.setData( '<figure class="image"><img src="foo.png" alt="alt text" /></figure>' );
|
|
|
|
|
|
|
|
- expect( getModelData( document, { withoutSelection: true } ) )
|
|
|
|
|
|
|
+ expect( getModelData( model, { withoutSelection: true } ) )
|
|
|
.to.equal( '' );
|
|
.to.equal( '' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
@@ -204,7 +203,7 @@ describe( 'ImageEngine', () => {
|
|
|
|
|
|
|
|
editor.setData( '<figure class="image"><img src="foo.png" alt="alt text" /></figure>' );
|
|
editor.setData( '<figure class="image"><img src="foo.png" alt="alt text" /></figure>' );
|
|
|
|
|
|
|
|
- expect( getModelData( document, { withoutSelection: true } ) )
|
|
|
|
|
|
|
+ expect( getModelData( model, { withoutSelection: true } ) )
|
|
|
.to.equal( '' );
|
|
.to.equal( '' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
@@ -220,7 +219,7 @@ describe( 'ImageEngine', () => {
|
|
|
it( 'should convert bare img element', () => {
|
|
it( 'should convert bare img element', () => {
|
|
|
editor.setData( '<img src="foo.png" alt="alt text" />' );
|
|
editor.setData( '<img src="foo.png" alt="alt text" />' );
|
|
|
|
|
|
|
|
- expect( getModelData( document, { withoutSelection: true } ) )
|
|
|
|
|
|
|
+ expect( getModelData( model, { withoutSelection: true } ) )
|
|
|
.to.equal( '<image alt="alt text" src="foo.png"></image>' );
|
|
.to.equal( '<image alt="alt text" src="foo.png"></image>' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
@@ -228,25 +227,25 @@ describe( 'ImageEngine', () => {
|
|
|
const data = editor.data;
|
|
const data = editor.data;
|
|
|
const editing = editor.editing;
|
|
const editing = editor.editing;
|
|
|
|
|
|
|
|
- document.schema.registerItem( 'div', '$block' );
|
|
|
|
|
- document.schema.allow( { name: 'div', attributes: 'alt', inside: '$root' } );
|
|
|
|
|
|
|
+ model.schema.registerItem( 'div', '$block' );
|
|
|
|
|
+ model.schema.allow( { name: 'div', attributes: 'alt', inside: '$root' } );
|
|
|
|
|
|
|
|
buildModelConverter().for( data.modelToView, editing.modelToView ).fromElement( 'div' ).toElement( 'div' );
|
|
buildModelConverter().for( data.modelToView, editing.modelToView ).fromElement( 'div' ).toElement( 'div' );
|
|
|
buildViewConverter().for( data.viewToModel ).fromElement( 'div' ).toElement( 'div' );
|
|
buildViewConverter().for( data.viewToModel ).fromElement( 'div' ).toElement( 'div' );
|
|
|
|
|
|
|
|
editor.setData( '<div alt="foo"></div>' );
|
|
editor.setData( '<div alt="foo"></div>' );
|
|
|
|
|
|
|
|
- expect( getModelData( document, { withoutSelection: true } ) ).to.equal( '<div></div>' );
|
|
|
|
|
|
|
+ expect( getModelData( model, { withoutSelection: true } ) ).to.equal( '<div></div>' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should handle figure with two images', () => {
|
|
it( 'should handle figure with two images', () => {
|
|
|
- document.schema.allow( { name: '$text', inside: 'image' } );
|
|
|
|
|
|
|
+ model.schema.allow( { name: '$text', inside: 'image' } );
|
|
|
|
|
|
|
|
editor.setData( '<figure class="image"><img src="foo.jpg" /><img src="bar.jpg" />abc</figure>' );
|
|
editor.setData( '<figure class="image"><img src="foo.jpg" /><img src="bar.jpg" />abc</figure>' );
|
|
|
|
|
|
|
|
// The foo.jpg image is properly converted using figure converter. The other image was tried to
|
|
// The foo.jpg image is properly converted using figure converter. The other image was tried to
|
|
|
// be added as a child of foo.jpg and then was autohoisted.
|
|
// be added as a child of foo.jpg and then was autohoisted.
|
|
|
- expect( getModelData( document, { withoutSelection: true } ) )
|
|
|
|
|
|
|
+ expect( getModelData( model, { withoutSelection: true } ) )
|
|
|
.to.equal( '<image src="bar.jpg"></image><image src="foo.jpg">abc</image>' );
|
|
.to.equal( '<image src="bar.jpg"></image><image src="foo.jpg">abc</image>' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
@@ -257,7 +256,7 @@ describe( 'ImageEngine', () => {
|
|
|
'</figure>'
|
|
'</figure>'
|
|
|
);
|
|
);
|
|
|
|
|
|
|
|
- expect( getModelData( document, { withoutSelection: true } ) )
|
|
|
|
|
|
|
+ expect( getModelData( model, { withoutSelection: true } ) )
|
|
|
.to.equal( '<image alt="alt text" src="foo.png" srcset="{"data":"small.png 148w, big.png 1024w"}"></image>' );
|
|
.to.equal( '<image alt="alt text" src="foo.png" srcset="{"data":"small.png 148w, big.png 1024w"}"></image>' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
@@ -268,7 +267,7 @@ describe( 'ImageEngine', () => {
|
|
|
'</figure>'
|
|
'</figure>'
|
|
|
);
|
|
);
|
|
|
|
|
|
|
|
- expect( getModelData( document, { withoutSelection: true } ) ).to.equal(
|
|
|
|
|
|
|
+ expect( getModelData( model, { withoutSelection: true } ) ).to.equal(
|
|
|
'<image alt="alt text" src="foo.png" srcset="{"data":"small.png 148w, big.png 1024w","width":"1024"}"></image>' );
|
|
'<image alt="alt text" src="foo.png" srcset="{"data":"small.png 148w, big.png 1024w","width":"1024"}"></image>' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
@@ -279,13 +278,13 @@ describe( 'ImageEngine', () => {
|
|
|
'</figure>'
|
|
'</figure>'
|
|
|
);
|
|
);
|
|
|
|
|
|
|
|
- expect( getModelData( document, { withoutSelection: true } ) )
|
|
|
|
|
|
|
+ expect( getModelData( model, { withoutSelection: true } ) )
|
|
|
.to.equal( '<image alt="alt text" src="foo.png" srcset="{"data":"small.png 148w, big.png 1024w"}"></image>' );
|
|
.to.equal( '<image alt="alt text" src="foo.png" srcset="{"data":"small.png 148w, big.png 1024w"}"></image>' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
describe( 'should autohoist images', () => {
|
|
describe( 'should autohoist images', () => {
|
|
|
beforeEach( () => {
|
|
beforeEach( () => {
|
|
|
- document.schema.registerItem( 'div', '$block' );
|
|
|
|
|
|
|
+ model.schema.registerItem( 'div', '$block' );
|
|
|
|
|
|
|
|
buildModelConverter()
|
|
buildModelConverter()
|
|
|
.for( editor.data.modelToView, editor.editing.modelToView )
|
|
.for( editor.data.modelToView, editor.editing.modelToView )
|
|
@@ -301,7 +300,7 @@ describe( 'ImageEngine', () => {
|
|
|
it( 'image between non-hoisted elements', () => {
|
|
it( 'image between non-hoisted elements', () => {
|
|
|
editor.setData( '<div>foo<img src="foo.jpg" alt="foo" />bar</div>' );
|
|
editor.setData( '<div>foo<img src="foo.jpg" alt="foo" />bar</div>' );
|
|
|
|
|
|
|
|
- expect( getModelData( document, { withoutSelection: true } ) ).to.equal(
|
|
|
|
|
|
|
+ expect( getModelData( model, { withoutSelection: true } ) ).to.equal(
|
|
|
'<div>foo</div>' +
|
|
'<div>foo</div>' +
|
|
|
'<image alt="foo" src="foo.jpg"></image>' +
|
|
'<image alt="foo" src="foo.jpg"></image>' +
|
|
|
'<div>bar</div>'
|
|
'<div>bar</div>'
|
|
@@ -311,7 +310,7 @@ describe( 'ImageEngine', () => {
|
|
|
it( 'multiple images', () => {
|
|
it( 'multiple images', () => {
|
|
|
editor.setData( '<div>foo<img src="foo.jpg" alt="foo" />ba<img src="foo.jpg" alt="foo" />r</div>' );
|
|
editor.setData( '<div>foo<img src="foo.jpg" alt="foo" />ba<img src="foo.jpg" alt="foo" />r</div>' );
|
|
|
|
|
|
|
|
- expect( getModelData( document, { withoutSelection: true } ) ).to.equal(
|
|
|
|
|
|
|
+ expect( getModelData( model, { withoutSelection: true } ) ).to.equal(
|
|
|
'<div>foo</div>' +
|
|
'<div>foo</div>' +
|
|
|
'<image alt="foo" src="foo.jpg"></image>' +
|
|
'<image alt="foo" src="foo.jpg"></image>' +
|
|
|
'<div>ba</div>' +
|
|
'<div>ba</div>' +
|
|
@@ -323,7 +322,7 @@ describe( 'ImageEngine', () => {
|
|
|
it( 'images on borders of parent', () => {
|
|
it( 'images on borders of parent', () => {
|
|
|
editor.setData( '<div><img src="foo.jpg" alt="foo" />foobar<img src="foo.jpg" alt="foo" /></div>' );
|
|
editor.setData( '<div><img src="foo.jpg" alt="foo" />foobar<img src="foo.jpg" alt="foo" /></div>' );
|
|
|
|
|
|
|
|
- expect( getModelData( document, { withoutSelection: true } ) ).to.equal(
|
|
|
|
|
|
|
+ expect( getModelData( model, { withoutSelection: true } ) ).to.equal(
|
|
|
'<image alt="foo" src="foo.jpg"></image>' +
|
|
'<image alt="foo" src="foo.jpg"></image>' +
|
|
|
'<div>foobar</div>' +
|
|
'<div>foobar</div>' +
|
|
|
'<image alt="foo" src="foo.jpg"></image>'
|
|
'<image alt="foo" src="foo.jpg"></image>'
|
|
@@ -333,18 +332,18 @@ describe( 'ImageEngine', () => {
|
|
|
it( 'images are only content of parent', () => {
|
|
it( 'images are only content of parent', () => {
|
|
|
editor.setData( '<div><img src="foo.jpg" alt="foo" /><img src="foo.jpg" alt="foo" /></div>' );
|
|
editor.setData( '<div><img src="foo.jpg" alt="foo" /><img src="foo.jpg" alt="foo" /></div>' );
|
|
|
|
|
|
|
|
- expect( getModelData( document, { withoutSelection: true } ) ).to.equal(
|
|
|
|
|
|
|
+ expect( getModelData( model, { withoutSelection: true } ) ).to.equal(
|
|
|
'<image alt="foo" src="foo.jpg"></image>' +
|
|
'<image alt="foo" src="foo.jpg"></image>' +
|
|
|
'<image alt="foo" src="foo.jpg"></image>'
|
|
'<image alt="foo" src="foo.jpg"></image>'
|
|
|
);
|
|
);
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'deep autohoisting #1', () => {
|
|
it( 'deep autohoisting #1', () => {
|
|
|
- document.schema.allow( { name: 'div', inside: 'div' } );
|
|
|
|
|
|
|
+ model.schema.allow( { name: 'div', inside: 'div' } );
|
|
|
|
|
|
|
|
editor.setData( '<div>foo<div>xx<img src="foo.jpg" alt="foo" /></div>bar</div>' );
|
|
editor.setData( '<div>foo<div>xx<img src="foo.jpg" alt="foo" /></div>bar</div>' );
|
|
|
|
|
|
|
|
- expect( getModelData( document, { withoutSelection: true } ) ).to.equal(
|
|
|
|
|
|
|
+ expect( getModelData( model, { withoutSelection: true } ) ).to.equal(
|
|
|
'<div>' +
|
|
'<div>' +
|
|
|
'foo' +
|
|
'foo' +
|
|
|
'<div>' +
|
|
'<div>' +
|
|
@@ -357,7 +356,7 @@ describe( 'ImageEngine', () => {
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'deep autohoisting #2', () => {
|
|
it( 'deep autohoisting #2', () => {
|
|
|
- document.schema.allow( { name: 'div', inside: 'div' } );
|
|
|
|
|
|
|
+ model.schema.allow( { name: 'div', inside: 'div' } );
|
|
|
|
|
|
|
|
editor.setData(
|
|
editor.setData(
|
|
|
'<div>x</div>' +
|
|
'<div>x</div>' +
|
|
@@ -365,15 +364,15 @@ describe( 'ImageEngine', () => {
|
|
|
'<div>y</div>'
|
|
'<div>y</div>'
|
|
|
);
|
|
);
|
|
|
|
|
|
|
|
- expect( getModelData( document, { withoutSelection: true } ) ).to.equal(
|
|
|
|
|
|
|
+ expect( getModelData( model, { withoutSelection: true } ) ).to.equal(
|
|
|
'<div>x</div><image alt="foo" src="foo.jpg"></image><div>y</div>'
|
|
'<div>x</div><image alt="foo" src="foo.jpg"></image><div>y</div>'
|
|
|
);
|
|
);
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should not break a limiting element', () => {
|
|
it( 'should not break a limiting element', () => {
|
|
|
- document.schema.registerItem( 'limit', '$block' );
|
|
|
|
|
- document.schema.allow( { name: 'div', inside: 'limit' } );
|
|
|
|
|
- document.schema.limits.add( 'limit' );
|
|
|
|
|
|
|
+ model.schema.registerItem( 'limit', '$block' );
|
|
|
|
|
+ model.schema.allow( { name: 'div', inside: 'limit' } );
|
|
|
|
|
+ model.schema.limits.add( 'limit' );
|
|
|
|
|
|
|
|
buildModelConverter()
|
|
buildModelConverter()
|
|
|
.for( editor.data.modelToView, editor.editing.modelToView ).fromElement( 'limit' ).toElement( 'limit' );
|
|
.for( editor.data.modelToView, editor.editing.modelToView ).fromElement( 'limit' ).toElement( 'limit' );
|
|
@@ -383,13 +382,13 @@ describe( 'ImageEngine', () => {
|
|
|
editor.setData( '<limit><div>foo<img src="foo.jpg" alt="foo" />bar</div></limit>' );
|
|
editor.setData( '<limit><div>foo<img src="foo.jpg" alt="foo" />bar</div></limit>' );
|
|
|
|
|
|
|
|
// <limit> element does not have converters so it is not converted.
|
|
// <limit> element does not have converters so it is not converted.
|
|
|
- expect( getModelData( document, { withoutSelection: true } ) ).to.equal( '<limit><div>foobar</div></limit>' );
|
|
|
|
|
|
|
+ expect( getModelData( model, { withoutSelection: true } ) ).to.equal( '<limit><div>foobar</div></limit>' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should not convert and autohoist image element without src attribute (which is not allowed by schema)', () => {
|
|
it( 'should not convert and autohoist image element without src attribute (which is not allowed by schema)', () => {
|
|
|
editor.setData( '<div>foo<img alt="foo" />bar</div>' );
|
|
editor.setData( '<div>foo<img alt="foo" />bar</div>' );
|
|
|
|
|
|
|
|
- expect( getModelData( document, { withoutSelection: true } ) ).to.equal( '<div>foobar</div>' );
|
|
|
|
|
|
|
+ expect( getModelData( model, { withoutSelection: true } ) ).to.equal( '<div>foobar</div>' );
|
|
|
} );
|
|
} );
|
|
|
} );
|
|
} );
|
|
|
} );
|
|
} );
|
|
@@ -398,7 +397,7 @@ describe( 'ImageEngine', () => {
|
|
|
describe( 'conversion in editing pipeline', () => {
|
|
describe( 'conversion in editing pipeline', () => {
|
|
|
describe( 'model to view', () => {
|
|
describe( 'model to view', () => {
|
|
|
it( 'should convert', () => {
|
|
it( 'should convert', () => {
|
|
|
- setModelData( document, '<image src="foo.png" alt="alt text"></image>' );
|
|
|
|
|
|
|
+ setModelData( model, '<image src="foo.png" alt="alt text"></image>' );
|
|
|
|
|
|
|
|
expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
|
|
expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
|
|
|
'<figure class="ck-widget image" contenteditable="false"><img alt="alt text" src="foo.png"></img></figure>'
|
|
'<figure class="ck-widget image" contenteditable="false"><img alt="alt text" src="foo.png"></img></figure>'
|
|
@@ -406,7 +405,7 @@ describe( 'ImageEngine', () => {
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'converted element should be widgetized', () => {
|
|
it( 'converted element should be widgetized', () => {
|
|
|
- setModelData( document, '<image src="foo.png" alt="alt text"></image>' );
|
|
|
|
|
|
|
+ setModelData( model, '<image src="foo.png" alt="alt text"></image>' );
|
|
|
const figure = viewDocument.getRoot().getChild( 0 );
|
|
const figure = viewDocument.getRoot().getChild( 0 );
|
|
|
|
|
|
|
|
expect( figure.name ).to.equal( 'figure' );
|
|
expect( figure.name ).to.equal( 'figure' );
|
|
@@ -414,13 +413,11 @@ describe( 'ImageEngine', () => {
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should convert attribute change', () => {
|
|
it( 'should convert attribute change', () => {
|
|
|
- setModelData( document, '<image src="foo.png" alt="alt text"></image>' );
|
|
|
|
|
|
|
+ setModelData( model, '<image src="foo.png" alt="alt text"></image>' );
|
|
|
const image = document.getRoot().getChild( 0 );
|
|
const image = document.getRoot().getChild( 0 );
|
|
|
|
|
|
|
|
- document.enqueueChanges( () => {
|
|
|
|
|
- const batch = document.batch();
|
|
|
|
|
-
|
|
|
|
|
- batch.setAttribute( 'alt', 'new text', image );
|
|
|
|
|
|
|
+ model.change( writer => {
|
|
|
|
|
+ writer.setAttribute( 'alt', 'new text', image );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
|
|
expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
|
|
@@ -429,13 +426,11 @@ describe( 'ImageEngine', () => {
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should convert attribute removal', () => {
|
|
it( 'should convert attribute removal', () => {
|
|
|
- setModelData( document, '<image src="foo.png" alt="alt text"></image>' );
|
|
|
|
|
|
|
+ setModelData( model, '<image src="foo.png" alt="alt text"></image>' );
|
|
|
const image = document.getRoot().getChild( 0 );
|
|
const image = document.getRoot().getChild( 0 );
|
|
|
|
|
|
|
|
- document.enqueueChanges( () => {
|
|
|
|
|
- const batch = document.batch();
|
|
|
|
|
-
|
|
|
|
|
- batch.removeAttribute( 'alt', image );
|
|
|
|
|
|
|
+ model.change( writer => {
|
|
|
|
|
+ writer.removeAttribute( 'alt', image );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
expect( getViewData( viewDocument, { withoutSelection: true } ) )
|
|
expect( getViewData( viewDocument, { withoutSelection: true } ) )
|
|
@@ -443,17 +438,15 @@ describe( 'ImageEngine', () => {
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should not convert change if is already consumed', () => {
|
|
it( 'should not convert change if is already consumed', () => {
|
|
|
- setModelData( document, '<image src="foo.png" alt="alt text"></image>' );
|
|
|
|
|
|
|
+ setModelData( model, '<image src="foo.png" alt="alt text"></image>' );
|
|
|
const image = document.getRoot().getChild( 0 );
|
|
const image = document.getRoot().getChild( 0 );
|
|
|
|
|
|
|
|
editor.editing.modelToView.on( 'removeAttribute:alt:image', ( evt, data, consumable ) => {
|
|
editor.editing.modelToView.on( 'removeAttribute:alt:image', ( evt, data, consumable ) => {
|
|
|
consumable.consume( data.item, 'removeAttribute:alt' );
|
|
consumable.consume( data.item, 'removeAttribute:alt' );
|
|
|
}, { priority: 'high' } );
|
|
}, { priority: 'high' } );
|
|
|
|
|
|
|
|
- document.enqueueChanges( () => {
|
|
|
|
|
- const batch = document.batch();
|
|
|
|
|
-
|
|
|
|
|
- batch.removeAttribute( 'alt', image );
|
|
|
|
|
|
|
+ model.change( writer => {
|
|
|
|
|
+ writer.removeAttribute( 'alt', image );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
|
|
expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
|
|
@@ -462,7 +455,7 @@ describe( 'ImageEngine', () => {
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should convert srcset attribute to srcset and sizes', () => {
|
|
it( 'should convert srcset attribute to srcset and sizes', () => {
|
|
|
- setModelData( document,
|
|
|
|
|
|
|
+ setModelData( model,
|
|
|
'<image ' +
|
|
'<image ' +
|
|
|
'src="foo.png" ' +
|
|
'src="foo.png" ' +
|
|
|
'alt="alt text" ' +
|
|
'alt="alt text" ' +
|
|
@@ -477,7 +470,7 @@ describe( 'ImageEngine', () => {
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should not convert srcset attribute if has wrong data', () => {
|
|
it( 'should not convert srcset attribute if has wrong data', () => {
|
|
|
- setModelData( document,
|
|
|
|
|
|
|
+ setModelData( model,
|
|
|
'<image ' +
|
|
'<image ' +
|
|
|
'src="foo.png" ' +
|
|
'src="foo.png" ' +
|
|
|
'alt="alt text" ' +
|
|
'alt="alt text" ' +
|
|
@@ -485,10 +478,8 @@ describe( 'ImageEngine', () => {
|
|
|
'</image>' );
|
|
'</image>' );
|
|
|
|
|
|
|
|
const image = document.getRoot().getChild( 0 );
|
|
const image = document.getRoot().getChild( 0 );
|
|
|
- document.enqueueChanges( () => {
|
|
|
|
|
- const batch = document.batch();
|
|
|
|
|
-
|
|
|
|
|
- batch.removeAttribute( 'srcset', image );
|
|
|
|
|
|
|
+ model.change( writer => {
|
|
|
|
|
+ writer.removeAttribute( 'srcset', image );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
|
|
expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
|
|
@@ -499,7 +490,7 @@ describe( 'ImageEngine', () => {
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should convert srcset attribute to srcset, width and sizes', () => {
|
|
it( 'should convert srcset attribute to srcset, width and sizes', () => {
|
|
|
- setModelData( document,
|
|
|
|
|
|
|
+ setModelData( model,
|
|
|
'<image ' +
|
|
'<image ' +
|
|
|
'src="foo.png" ' +
|
|
'src="foo.png" ' +
|
|
|
'alt="alt text" ' +
|
|
'alt="alt text" ' +
|
|
@@ -514,13 +505,11 @@ describe( 'ImageEngine', () => {
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should remove sizes and srcsset attribute when srcset attribute is removed from model', () => {
|
|
it( 'should remove sizes and srcsset attribute when srcset attribute is removed from model', () => {
|
|
|
- setModelData( document, '<image src="foo.png" srcset=\'{ "data": "small.png 148w, big.png 1024w" }\'></image>' );
|
|
|
|
|
|
|
+ setModelData( model, '<image src="foo.png" srcset=\'{ "data": "small.png 148w, big.png 1024w" }\'></image>' );
|
|
|
const image = document.getRoot().getChild( 0 );
|
|
const image = document.getRoot().getChild( 0 );
|
|
|
|
|
|
|
|
- document.enqueueChanges( () => {
|
|
|
|
|
- const batch = document.batch();
|
|
|
|
|
-
|
|
|
|
|
- batch.removeAttribute( 'srcset', image );
|
|
|
|
|
|
|
+ model.change( writer => {
|
|
|
|
|
+ writer.removeAttribute( 'srcset', image );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
|
|
expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
|
|
@@ -531,7 +520,7 @@ describe( 'ImageEngine', () => {
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should remove width, sizes and srcsset attribute when srcset attribute is removed from model', () => {
|
|
it( 'should remove width, sizes and srcsset attribute when srcset attribute is removed from model', () => {
|
|
|
- setModelData( document,
|
|
|
|
|
|
|
+ setModelData( model,
|
|
|
'<image ' +
|
|
'<image ' +
|
|
|
'src="foo.png" ' +
|
|
'src="foo.png" ' +
|
|
|
'srcset=\'{ "data": "small.png 148w, big.png 1024w", "width": "1024" }\'>' +
|
|
'srcset=\'{ "data": "small.png 148w, big.png 1024w", "width": "1024" }\'>' +
|
|
@@ -539,10 +528,8 @@ describe( 'ImageEngine', () => {
|
|
|
);
|
|
);
|
|
|
const image = document.getRoot().getChild( 0 );
|
|
const image = document.getRoot().getChild( 0 );
|
|
|
|
|
|
|
|
- document.enqueueChanges( () => {
|
|
|
|
|
- const batch = document.batch();
|
|
|
|
|
-
|
|
|
|
|
- batch.removeAttribute( 'srcset', image );
|
|
|
|
|
|
|
+ model.change( writer => {
|
|
|
|
|
+ writer.removeAttribute( 'srcset', image );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
|
|
expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
|
|
@@ -561,7 +548,7 @@ describe( 'ImageEngine', () => {
|
|
|
consumable.consume( modelImage, consumableType );
|
|
consumable.consume( modelImage, consumableType );
|
|
|
}, { priority: 'high' } );
|
|
}, { priority: 'high' } );
|
|
|
|
|
|
|
|
- setModelData( document,
|
|
|
|
|
|
|
+ setModelData( model,
|
|
|
'<image ' +
|
|
'<image ' +
|
|
|
'src="foo.png" ' +
|
|
'src="foo.png" ' +
|
|
|
'alt="alt text" ' +
|
|
'alt="alt text" ' +
|