|
|
@@ -71,7 +71,7 @@ describe( 'ImageEditing', () => {
|
|
|
ClassicTestEditor.create( element, {
|
|
|
plugins: [ ImageEditing ]
|
|
|
} ).then( editor => {
|
|
|
- editor.data.set( '<figure class="image"><img src="foo.png" alt="bar" /></figure>' );
|
|
|
+ editor.data.set( '<figure class="image"><img src="/assets/sample.png" alt="bar" /></figure>' );
|
|
|
|
|
|
const spy = sinon.spy();
|
|
|
|
|
|
@@ -88,25 +88,25 @@ describe( 'ImageEditing', () => {
|
|
|
describe( 'conversion in data pipeline', () => {
|
|
|
describe( 'model to view', () => {
|
|
|
it( 'should convert', () => {
|
|
|
- setModelData( model, '<image src="foo.png" alt="alt text"></image>' );
|
|
|
+ setModelData( model, '<image src="/assets/sample.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="/assets/sample.png"></figure>' );
|
|
|
} );
|
|
|
|
|
|
it( 'should convert without alt attribute', () => {
|
|
|
- setModelData( model, '<image src="foo.png"></image>' );
|
|
|
+ setModelData( model, '<image src="/assets/sample.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="/assets/sample.png"></figure>' );
|
|
|
} );
|
|
|
|
|
|
it( 'should convert srcset attribute to srcset and sizes attribute', () => {
|
|
|
setModelData( model,
|
|
|
- '<image src="foo.png" alt="alt text" srcset=\'{ "data": "small.png 148w, big.png 1024w" }\'></image>'
|
|
|
+ '<image src="/assets/sample.png" alt="alt text" srcset=\'{ "data": "small.png 148w, big.png 1024w" }\'></image>'
|
|
|
);
|
|
|
|
|
|
expect( normalizeHtml( editor.getData() ) ).to.equal(
|
|
|
'<figure class="image">' +
|
|
|
- '<img alt="alt text" sizes="100vw" src="foo.png" srcset="small.png 148w, big.png 1024w"></img>' +
|
|
|
+ '<img alt="alt text" sizes="100vw" src="/assets/sample.png" srcset="small.png 148w, big.png 1024w"></img>' +
|
|
|
'</figure>'
|
|
|
);
|
|
|
} );
|
|
|
@@ -114,17 +114,19 @@ describe( 'ImageEditing', () => {
|
|
|
it( 'should convert srcset attribute to width, srcset and add sizes attribute', () => {
|
|
|
setModelData( model,
|
|
|
'<image ' +
|
|
|
- 'src="foo.png" ' +
|
|
|
+ 'src="/assets/sample.png" ' +
|
|
|
'alt="alt text" ' +
|
|
|
'srcset=\'{ "data": "small.png 148w, big.png 1024w", "width": "1024" }\'>' +
|
|
|
'</image>'
|
|
|
);
|
|
|
|
|
|
+ /* eslint-disable max-len */
|
|
|
expect( normalizeHtml( editor.getData() ) ).to.equal(
|
|
|
'<figure class="image">' +
|
|
|
- '<img alt="alt text" sizes="100vw" src="foo.png" srcset="small.png 148w, big.png 1024w" width="1024"></img>' +
|
|
|
+ '<img alt="alt text" sizes="100vw" src="/assets/sample.png" srcset="small.png 148w, big.png 1024w" width="1024"></img>' +
|
|
|
'</figure>'
|
|
|
);
|
|
|
+ /* eslint-enable max-len */
|
|
|
} );
|
|
|
|
|
|
it( 'should not convert srcset attribute if is already consumed', () => {
|
|
|
@@ -136,7 +138,7 @@ describe( 'ImageEditing', () => {
|
|
|
|
|
|
setModelData( model,
|
|
|
'<image ' +
|
|
|
- 'src="foo.png" ' +
|
|
|
+ 'src="/assets/sample.png" ' +
|
|
|
'alt="alt text" ' +
|
|
|
'srcset=\'{ "data": "small.png 148w, big.png 1024w", "width": "1024" }\'>' +
|
|
|
'</image>'
|
|
|
@@ -144,7 +146,7 @@ describe( 'ImageEditing', () => {
|
|
|
|
|
|
expect( editor.getData() ).to.equal(
|
|
|
'<figure class="image">' +
|
|
|
- '<img alt="alt text" src="foo.png">' +
|
|
|
+ '<img alt="alt text" src="/assets/sample.png">' +
|
|
|
'</figure>'
|
|
|
);
|
|
|
} );
|
|
|
@@ -152,7 +154,7 @@ describe( 'ImageEditing', () => {
|
|
|
it( 'should not convert srcset attribute if has wrong data', () => {
|
|
|
setModelData( model,
|
|
|
'<image ' +
|
|
|
- 'src="foo.png" ' +
|
|
|
+ 'src="/assets/sample.png" ' +
|
|
|
'alt="alt text" ' +
|
|
|
'srcset=\'{ "foo":"bar" }\'>' +
|
|
|
'</image>' );
|
|
|
@@ -164,7 +166,7 @@ describe( 'ImageEditing', () => {
|
|
|
|
|
|
expect( editor.getData() ).to.equal(
|
|
|
'<figure class="image">' +
|
|
|
- '<img alt="alt text" src="foo.png">' +
|
|
|
+ '<img alt="alt text" src="/assets/sample.png">' +
|
|
|
'</figure>'
|
|
|
);
|
|
|
} );
|
|
|
@@ -172,10 +174,10 @@ describe( 'ImageEditing', () => {
|
|
|
|
|
|
describe( 'view to model', () => {
|
|
|
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="/assets/sample.png" alt="alt text" /></figure>' );
|
|
|
|
|
|
expect( getModelData( model, { withoutSelection: true } ) )
|
|
|
- .to.equal( '<image alt="alt text" src="foo.png"></image>' );
|
|
|
+ .to.equal( '<image alt="alt text" src="/assets/sample.png"></image>' );
|
|
|
} );
|
|
|
|
|
|
it( 'should not convert if there is no image class', () => {
|
|
|
@@ -200,10 +202,10 @@ describe( 'ImageEditing', () => {
|
|
|
} );
|
|
|
|
|
|
it( 'should convert without alt attribute', () => {
|
|
|
- editor.setData( '<figure class="image"><img src="foo.png" /></figure>' );
|
|
|
+ editor.setData( '<figure class="image"><img src="/assets/sample.png" /></figure>' );
|
|
|
|
|
|
expect( getModelData( model, { withoutSelection: true } ) )
|
|
|
- .to.equal( '<image src="foo.png"></image>' );
|
|
|
+ .to.equal( '<image src="/assets/sample.png"></image>' );
|
|
|
} );
|
|
|
|
|
|
it( 'should not convert without src attribute', () => {
|
|
|
@@ -223,7 +225,7 @@ describe( 'ImageEditing', () => {
|
|
|
|
|
|
editor.conversion.elementToElement( { model: 'div', view: 'div' } );
|
|
|
|
|
|
- editor.setData( '<div><figure class="image"><img src="foo.png" alt="alt text" /></figure></div>' );
|
|
|
+ editor.setData( '<div><figure class="image"><img src="/assets/sample.png" alt="alt text" /></figure></div>' );
|
|
|
|
|
|
expect( getModelData( model, { withoutSelection: true } ) )
|
|
|
.to.equal( '<div></div>' );
|
|
|
@@ -235,7 +237,7 @@ describe( 'ImageEditing', () => {
|
|
|
conversionApi.consumable.consume( img, { name: true } );
|
|
|
}, { priority: 'high' } );
|
|
|
|
|
|
- editor.setData( '<figure class="image"><img src="foo.png" alt="alt text" /></figure>' );
|
|
|
+ editor.setData( '<figure class="image"><img src="/assets/sample.png" alt="alt text" /></figure>' );
|
|
|
|
|
|
expect( getModelData( model, { withoutSelection: true } ) )
|
|
|
.to.equal( '' );
|
|
|
@@ -246,7 +248,7 @@ describe( 'ImageEditing', () => {
|
|
|
conversionApi.consumable.consume( data.viewItem, { name: true, class: 'image' } );
|
|
|
}, { priority: 'high' } );
|
|
|
|
|
|
- editor.setData( '<figure class="image"><img src="foo.png" alt="alt text" /></figure>' );
|
|
|
+ editor.setData( '<figure class="image"><img src="/assets/sample.png" alt="alt text" /></figure>' );
|
|
|
|
|
|
expect( getModelData( model, { withoutSelection: true } ) )
|
|
|
.to.equal( '' );
|
|
|
@@ -256,16 +258,16 @@ describe( 'ImageEditing', () => {
|
|
|
const conversionSpy = sinon.spy();
|
|
|
editor.data.upcastDispatcher.on( 'element:figcaption', conversionSpy );
|
|
|
|
|
|
- editor.setData( '<figure class="image"><img src="foo.png" alt="alt text" /><figcaption></figcaption></figure>' );
|
|
|
+ editor.setData( '<figure class="image"><img src="/assets/sample.png" alt="alt text" /><figcaption></figcaption></figure>' );
|
|
|
|
|
|
sinon.assert.calledOnce( conversionSpy );
|
|
|
} );
|
|
|
|
|
|
it( 'should convert bare img element', () => {
|
|
|
- editor.setData( '<img src="foo.png" alt="alt text" />' );
|
|
|
+ editor.setData( '<img src="/assets/sample.png" alt="alt text" />' );
|
|
|
|
|
|
expect( getModelData( model, { withoutSelection: true } ) )
|
|
|
- .to.equal( '<image alt="alt text" src="foo.png"></image>' );
|
|
|
+ .to.equal( '<image alt="alt text" src="/assets/sample.png"></image>' );
|
|
|
} );
|
|
|
|
|
|
it( 'should not convert alt attribute on non-img element', () => {
|
|
|
@@ -284,34 +286,41 @@ describe( 'ImageEditing', () => {
|
|
|
it( 'should convert image with srcset attribute', () => {
|
|
|
editor.setData(
|
|
|
'<figure class="image">' +
|
|
|
- '<img src="foo.png" alt="alt text" srcset="small.png 148w, big.png 1024w" />' +
|
|
|
+ '<img src="/assets/sample.png" alt="alt text" srcset="small.png 148w, big.png 1024w" />' +
|
|
|
'</figure>'
|
|
|
);
|
|
|
|
|
|
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="/assets/sample.png" srcset="{"data":"small.png 148w, big.png 1024w"}"></image>'
|
|
|
+ );
|
|
|
} );
|
|
|
|
|
|
it( 'should convert image with srcset and width attributes', () => {
|
|
|
editor.setData(
|
|
|
'<figure class="image">' +
|
|
|
- '<img src="foo.png" alt="alt text" srcset="small.png 148w, big.png 1024w" width="1024" />' +
|
|
|
+ '<img src="/assets/sample.png" alt="alt text" srcset="small.png 148w, big.png 1024w" width="1024" />' +
|
|
|
'</figure>'
|
|
|
);
|
|
|
|
|
|
+ /* eslint-disable max-len */
|
|
|
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="/assets/sample.png" srcset="{"data":"small.png 148w, big.png 1024w","width":"1024"}"></image>'
|
|
|
+ );
|
|
|
+ /* eslint-enable max-len */
|
|
|
} );
|
|
|
|
|
|
it( 'should ignore sizes attribute', () => {
|
|
|
editor.setData(
|
|
|
'<figure class="image">' +
|
|
|
- '<img src="foo.png" alt="alt text" srcset="small.png 148w, big.png 1024w" sizes="50vw" />' +
|
|
|
+ '<img src="/assets/sample.png" alt="alt text" srcset="small.png 148w, big.png 1024w" sizes="50vw" />' +
|
|
|
'</figure>'
|
|
|
);
|
|
|
|
|
|
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="/assets/sample.png" srcset="{"data":"small.png 148w, big.png 1024w"}"></image>'
|
|
|
+ );
|
|
|
} );
|
|
|
|
|
|
describe( 'should autohoist images', () => {
|
|
|
@@ -420,15 +429,15 @@ describe( 'ImageEditing', () => {
|
|
|
describe( 'conversion in editing pipeline', () => {
|
|
|
describe( 'model to view', () => {
|
|
|
it( 'should convert', () => {
|
|
|
- setModelData( model, '<image src="foo.png" alt="alt text"></image>' );
|
|
|
+ setModelData( model, '<image src="/assets/sample.png" alt="alt text"></image>' );
|
|
|
|
|
|
expect( getViewData( view, { 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="/assets/sample.png"></img></figure>'
|
|
|
);
|
|
|
} );
|
|
|
|
|
|
it( 'converted element should be widgetized', () => {
|
|
|
- setModelData( model, '<image src="foo.png" alt="alt text"></image>' );
|
|
|
+ setModelData( model, '<image src="/assets/sample.png" alt="alt text"></image>' );
|
|
|
const figure = viewDocument.getRoot().getChild( 0 );
|
|
|
|
|
|
expect( figure.name ).to.equal( 'figure' );
|
|
|
@@ -436,7 +445,7 @@ describe( 'ImageEditing', () => {
|
|
|
} );
|
|
|
|
|
|
it( 'should convert attribute change', () => {
|
|
|
- setModelData( model, '<image src="foo.png" alt="alt text"></image>' );
|
|
|
+ setModelData( model, '<image src="/assets/sample.png" alt="alt text"></image>' );
|
|
|
const image = doc.getRoot().getChild( 0 );
|
|
|
|
|
|
model.change( writer => {
|
|
|
@@ -444,12 +453,12 @@ describe( 'ImageEditing', () => {
|
|
|
} );
|
|
|
|
|
|
expect( getViewData( view, { withoutSelection: true } ) ).to.equal(
|
|
|
- '<figure class="ck-widget image" contenteditable="false"><img alt="new text" src="foo.png"></img></figure>'
|
|
|
+ '<figure class="ck-widget image" contenteditable="false"><img alt="new text" src="/assets/sample.png"></img></figure>'
|
|
|
);
|
|
|
} );
|
|
|
|
|
|
it( 'should convert attribute removal', () => {
|
|
|
- setModelData( model, '<image src="foo.png" alt="alt text"></image>' );
|
|
|
+ setModelData( model, '<image src="/assets/sample.png" alt="alt text"></image>' );
|
|
|
const image = doc.getRoot().getChild( 0 );
|
|
|
|
|
|
model.change( writer => {
|
|
|
@@ -457,11 +466,11 @@ describe( 'ImageEditing', () => {
|
|
|
} );
|
|
|
|
|
|
expect( getViewData( view, { withoutSelection: true } ) )
|
|
|
- .to.equal( '<figure class="ck-widget image" contenteditable="false"><img src="foo.png"></img></figure>' );
|
|
|
+ .to.equal( '<figure class="ck-widget image" contenteditable="false"><img src="/assets/sample.png"></img></figure>' );
|
|
|
} );
|
|
|
|
|
|
it( 'should not convert change if is already consumed', () => {
|
|
|
- setModelData( model, '<image src="foo.png" alt="alt text"></image>' );
|
|
|
+ setModelData( model, '<image src="/assets/sample.png" alt="alt text"></image>' );
|
|
|
const image = doc.getRoot().getChild( 0 );
|
|
|
|
|
|
editor.editing.downcastDispatcher.on( 'attribute:alt:image', ( evt, data, conversionApi ) => {
|
|
|
@@ -473,21 +482,21 @@ describe( 'ImageEditing', () => {
|
|
|
} );
|
|
|
|
|
|
expect( getViewData( view, { 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="/assets/sample.png"></img></figure>'
|
|
|
);
|
|
|
} );
|
|
|
|
|
|
it( 'should convert srcset attribute to srcset and sizes', () => {
|
|
|
setModelData( model,
|
|
|
'<image ' +
|
|
|
- 'src="foo.png" ' +
|
|
|
+ 'src="/assets/sample.png" ' +
|
|
|
'alt="alt text" ' +
|
|
|
'srcset=\'{ "data":"small.png 148w, big.png 1024w" }\'>' +
|
|
|
'</image>' );
|
|
|
|
|
|
expect( getViewData( view, { withoutSelection: true } ) ).to.equal(
|
|
|
'<figure class="ck-widget image" contenteditable="false">' +
|
|
|
- '<img alt="alt text" sizes="100vw" src="foo.png" srcset="small.png 148w, big.png 1024w"></img>' +
|
|
|
+ '<img alt="alt text" sizes="100vw" src="/assets/sample.png" srcset="small.png 148w, big.png 1024w"></img>' +
|
|
|
'</figure>'
|
|
|
);
|
|
|
} );
|
|
|
@@ -495,7 +504,7 @@ describe( 'ImageEditing', () => {
|
|
|
it( 'should not convert srcset attribute if has wrong data', () => {
|
|
|
setModelData( model,
|
|
|
'<image ' +
|
|
|
- 'src="foo.png" ' +
|
|
|
+ 'src="/assets/sample.png" ' +
|
|
|
'alt="alt text" ' +
|
|
|
'srcset=\'{ "foo":"bar" }\'>' +
|
|
|
'</image>' );
|
|
|
@@ -507,7 +516,7 @@ describe( 'ImageEditing', () => {
|
|
|
|
|
|
expect( getViewData( view, { withoutSelection: true } ) ).to.equal(
|
|
|
'<figure class="ck-widget image" contenteditable="false">' +
|
|
|
- '<img alt="alt text" src="foo.png"></img>' +
|
|
|
+ '<img alt="alt text" src="/assets/sample.png"></img>' +
|
|
|
'</figure>'
|
|
|
);
|
|
|
} );
|
|
|
@@ -515,20 +524,22 @@ describe( 'ImageEditing', () => {
|
|
|
it( 'should convert srcset attribute to srcset, width and sizes', () => {
|
|
|
setModelData( model,
|
|
|
'<image ' +
|
|
|
- 'src="foo.png" ' +
|
|
|
+ 'src="/assets/sample.png" ' +
|
|
|
'alt="alt text" ' +
|
|
|
'srcset=\'{ "data":"small.png 148w, big.png 1024w", "width":"1024" }\'>' +
|
|
|
'</image>' );
|
|
|
|
|
|
+ /* eslint-disable max-len */
|
|
|
expect( getViewData( view, { withoutSelection: true } ) ).to.equal(
|
|
|
'<figure class="ck-widget image" contenteditable="false">' +
|
|
|
- '<img alt="alt text" sizes="100vw" src="foo.png" srcset="small.png 148w, big.png 1024w" width="1024"></img>' +
|
|
|
+ '<img alt="alt text" sizes="100vw" src="/assets/sample.png" srcset="small.png 148w, big.png 1024w" width="1024"></img>' +
|
|
|
'</figure>'
|
|
|
);
|
|
|
+ /* eslint-enable max-len */
|
|
|
} );
|
|
|
|
|
|
it( 'should remove sizes and srcsset attribute when srcset attribute is removed from model', () => {
|
|
|
- setModelData( model, '<image src="foo.png" srcset=\'{ "data": "small.png 148w, big.png 1024w" }\'></image>' );
|
|
|
+ setModelData( model, '<image src="/assets/sample.png" srcset=\'{ "data": "small.png 148w, big.png 1024w" }\'></image>' );
|
|
|
const image = doc.getRoot().getChild( 0 );
|
|
|
|
|
|
model.change( writer => {
|
|
|
@@ -537,7 +548,7 @@ describe( 'ImageEditing', () => {
|
|
|
|
|
|
expect( getViewData( view, { withoutSelection: true } ) ).to.equal(
|
|
|
'<figure class="ck-widget image" contenteditable="false">' +
|
|
|
- '<img src="foo.png"></img>' +
|
|
|
+ '<img src="/assets/sample.png"></img>' +
|
|
|
'</figure>'
|
|
|
);
|
|
|
} );
|
|
|
@@ -545,7 +556,7 @@ describe( 'ImageEditing', () => {
|
|
|
it( 'should remove width, sizes and srcsset attribute when srcset attribute is removed from model', () => {
|
|
|
setModelData( model,
|
|
|
'<image ' +
|
|
|
- 'src="foo.png" ' +
|
|
|
+ 'src="/assets/sample.png" ' +
|
|
|
'srcset=\'{ "data": "small.png 148w, big.png 1024w", "width": "1024" }\'>' +
|
|
|
'</image>'
|
|
|
);
|
|
|
@@ -557,7 +568,7 @@ describe( 'ImageEditing', () => {
|
|
|
|
|
|
expect( getViewData( view, { withoutSelection: true } ) ).to.equal(
|
|
|
'<figure class="ck-widget image" contenteditable="false">' +
|
|
|
- '<img src="foo.png"></img>' +
|
|
|
+ '<img src="/assets/sample.png"></img>' +
|
|
|
'</figure>'
|
|
|
);
|
|
|
} );
|
|
|
@@ -571,7 +582,7 @@ describe( 'ImageEditing', () => {
|
|
|
|
|
|
setModelData( model,
|
|
|
'<image ' +
|
|
|
- 'src="foo.png" ' +
|
|
|
+ 'src="/assets/sample.png" ' +
|
|
|
'alt="alt text" ' +
|
|
|
'srcset=\'{ "data": "small.png 148w, big.png 1024w", "width": "1024" }\'>' +
|
|
|
'</image>'
|
|
|
@@ -579,7 +590,7 @@ describe( 'ImageEditing', () => {
|
|
|
|
|
|
expect( getViewData( view, { withoutSelection: true } ) ).to.equal(
|
|
|
'<figure class="ck-widget image" contenteditable="false">' +
|
|
|
- '<img alt="alt text" src="foo.png"></img>' +
|
|
|
+ '<img alt="alt text" src="/assets/sample.png"></img>' +
|
|
|
'</figure>'
|
|
|
);
|
|
|
} );
|