Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Commit

Permalink
Aligned image converters to latest conversion API.
Browse files Browse the repository at this point in the history
  • Loading branch information
@oskarwrobel
oskarwrobel committed Jan 30, 2018
1 parent d0b5c69 commit 40de38e
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 32 deletions.
21 changes: 11 additions & 10 deletions src/image/converters.js
View file
Expand Up @@ -26,36 +26,37 @@ import first from '@ckeditor/ckeditor5-utils/src/first';
* @returns {Function}
*/
export function viewFigureToModel() {
return ( evt, data, consumable, conversionApi ) => {
return ( evt, data, conversionApi ) => {
// Do not convert if this is not an "image figure".
if ( !consumable.test( data.input, { name: true, class: 'image' } ) ) {
if ( !conversionApi.consumable.test( data.viewItem, { name: true, class: 'image' } ) ) {
return;
}

// Do not convert if image cannot be placed in model at current position.
if ( !conversionApi.schema.checkChild( data.position, 'image' ) ) {
if ( !conversionApi.schema.checkChild( data.cursorPosition, 'image' ) ) {
return;
}

// Find an image element inside the figure element.
const viewImage = Array.from( data.input.getChildren() ).find( viewChild => viewChild.is( 'img' ) );
const viewImage = Array.from( data.viewItem.getChildren() ).find( viewChild => viewChild.is( 'img' ) );

// Do not convert if image element is absent, is missing src attribute or was already converted.
if ( !viewImage || !viewImage.hasAttribute( 'src' ) || !consumable.test( viewImage, { name: true } ) ) {
if ( !viewImage || !viewImage.hasAttribute( 'src' ) || !conversionApi.consumable.test( viewImage, { name: true } ) ) {
return;
}

// Convert view image to model image.
const output = conversionApi.convertItem( viewImage, consumable, data.position );
const { modelRange } = conversionApi.convertItem( viewImage, data.cursorPosition );

// Get image element from conversion output.
const modelImage = first( output.getItems() );
// Get image element from conversion result.
const modelImage = first( modelRange.getItems() );

// Convert rest of the figure element's children as an image children.
conversionApi.convertChildren( data.input, consumable, ModelPosition.createAt( modelImage ) );
conversionApi.convertChildren( data.viewItem, ModelPosition.createAt( modelImage ) );

// Set model image as conversion result.
data.output = ModelRange.createOn( modelImage );
data.modelRange = ModelRange.createOn( modelImage );
data.cursorPosition = data.modelRange.end;
};
}

Expand Down
10 changes: 5 additions & 5 deletions src/imagestyle/converters.js
View file
Expand Up @@ -48,13 +48,13 @@ export function viewToModelStyleAttribute( styles ) {
// Convert only non–default styles.
const filteredStyles = styles.filter( style => !style.isDefault );

return ( evt, data, consumable, conversionApi ) => {
if ( !data.output ) {
return ( evt, data, conversionApi ) => {
if ( !data.modelRange ) {
return;
}

const viewFigureElement = data.input;
const modelImageElement = first( data.output.getItems() );
const viewFigureElement = data.viewItem;
const modelImageElement = first( data.modelRange.getItems() );

// Check if `imageStyle` attribute is allowed for current element.
if ( !conversionApi.schema.checkAttribute( modelImageElement, 'imageStyle' ) ) {
Expand All @@ -64,7 +64,7 @@ export function viewToModelStyleAttribute( styles ) {
// Convert style one by one.
for ( const style of filteredStyles ) {
// Try to consume class corresponding with style.
if ( consumable.consume( viewFigureElement, { class: style.className } ) ) {
if ( conversionApi.consumable.consume( viewFigureElement, { class: style.className } ) ) {
// And convert this style to model attribute.
conversionApi.writer.setAttribute( 'imageStyle', style.name, modelImageElement );
}
Expand Down
24 changes: 13 additions & 11 deletions tests/image/converters.js
View file
Expand Up @@ -60,13 +60,14 @@ describe( 'Image converters', () => {

dispatcher = editor.data.viewToModel;
dispatcher.on( 'element:figure', viewFigureToModel() );
dispatcher.on( 'element:img', ( evt, data, consumable, conversionApi ) => {
if ( consumable.consume( data.input, { name: true, attribute: 'src' } ) ) {
const image = conversionApi.writer.createElement( 'image', { src: data.input.getAttribute( 'src' ) } );
dispatcher.on( 'element:img', ( evt, data, conversionApi ) => {
if ( conversionApi.consumable.consume( data.viewItem, { name: true, attribute: 'src' } ) ) {
const image = conversionApi.writer.createElement( 'image', { src: data.viewItem.getAttribute( 'src' ) } );

conversionApi.writer.insert( image, data.position );
conversionApi.writer.insert( image, data.cursorPosition );

data.output = ModelRange.createOn( image );
data.modelRange = ModelRange.createOn( image );
data.cursorPosition = data.modelRange.end;

imgConverterCalled = true;
}
Expand Down Expand Up @@ -96,17 +97,18 @@ describe( 'Image converters', () => {
} );

it( 'should be possible to overwrite', () => {
dispatcher.on( 'element:figure', ( evt, data, consumable, conversionApi ) => {
consumable.consume( data.input, { name: true } );
consumable.consume( data.input.getChild( 0 ), { name: true } );
dispatcher.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.input.getChild( 0 ).getAttribute( 'src' )
src: data.viewItem.getChild( 0 ).getAttribute( 'src' )
}
} );
conversionApi.writer.insert( element, data.position );
data.output = ModelRange.createOn( element );
conversionApi.writer.insert( element, data.cursorPosition );
data.modelRange = ModelRange.createOn( element );
data.cursorPosition = data.modelRange.end;
}, { priority: 'high' } );

editor.setData( '<figure class="image"><img src="foo.png" />xyz</figure>' );
Expand Down
11 changes: 5 additions & 6 deletions tests/image/imageengine.js
View file
Expand Up @@ -193,9 +193,9 @@ describe( 'ImageEngine', () => {
} );

it( 'should not convert if img is already consumed', () => {
editor.data.viewToModel.on( 'element:figure', ( evt, data, consumable ) => {
const img = data.input.getChild( 0 );
consumable.consume( img, { name: true } );
editor.data.viewToModel.on( 'element:figure', ( evt, data, conversionApi ) => {
const img = data.viewItem.getChild( 0 );
conversionApi.consumable.consume( img, { name: true } );
}, { priority: 'high' } );

editor.setData( '<figure class="image"><img src="foo.png" alt="alt text" /></figure>' );
Expand All @@ -205,9 +205,8 @@ describe( 'ImageEngine', () => {
} );

it( 'should not convert if figure is already consumed', () => {
editor.data.viewToModel.on( 'element:figure', ( evt, data, consumable ) => {
const figure = data.input;
consumable.consume( figure, { name: true, class: 'image' } );
editor.data.viewToModel.on( 'element:figure', ( evt, data, conversionApi ) => {
conversionApi.consumable.consume( data.viewItem, { name: true, class: 'image' } );
}, { priority: 'high' } );

editor.setData( '<figure class="image"><img src="foo.png" alt="alt text" /></figure>' );
Expand Down

0 comments on commit 40de38e

Please sign in to comment.