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

Inserting image after the block when selection is placed at its end #28

Merged
merged 2 commits into from
May 11, 2017
Merged

Inserting image after the block when selection is placed at its end #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ab1cfcc
Inserting image after block when selection is at its end.
szymonkups May 10, 2017
8328916
Added tests checking if image is inserted correctly when selection is…
szymonkups May 10, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 31 additions & 14 deletions src/imageuploadcommand.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,20 +44,7 @@ export default class ImageUploadCommand extends Command {
}

doc.enqueueChanges( () => {
let insertPosition;
const selectedElement = selection.getSelectedElement();

// If selected element is placed directly in root - put image after it.
if ( selectedElement && selectedElement.parent.is( 'rootElement' ) ) {
insertPosition = ModelPosition.createAfter( selectedElement );
} else {
// If selection is inside some block - put image before it.
const firstBlock = doc.selection.getSelectedBlocks().next().value;

if ( firstBlock ) {
insertPosition = ModelPosition.createBefore( firstBlock );
}
}
const insertPosition = getInsertionPosition( doc );

// No position to insert.
if ( !insertPosition ) {
Expand All @@ -77,3 +64,33 @@ export default class ImageUploadCommand extends Command {
} );
}
}

/**
* Returns correct image insertion position.
*
* @param {module:engine/model/document~Document} doc
* @returns {module:engine/model/position~Position|undefined}
*/
function getInsertionPosition( doc ) {
const selection = doc.selection;
const selectedElement = selection.getSelectedElement();

// If selected element is placed directly in root - return position after that element.
if ( selectedElement && selectedElement.parent.is( 'rootElement' ) ) {
return ModelPosition.createAfter( selectedElement );
}

const firstBlock = doc.selection.getSelectedBlocks().next().value;

if ( firstBlock ) {
const positionAfter = ModelPosition.createAfter( firstBlock );

// If selection is at the end of the block - return position after the block.
if ( selection.focus.isTouching( positionAfter ) ) {
return positionAfter;
}

// Otherwise return position before the block.
return ModelPosition.createBefore( firstBlock );
}
}
22 changes: 21 additions & 1 deletion tests/imageuploadcommand.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,31 @@ describe( 'ImageUploadCommand', () => {

describe( '_doExecute', () => {
it( 'should insert image', () => {
const file = createNativeFileMock();
setModelData( document, '<paragraph>[]foo</paragraph>' );

command._doExecute( { file } );

const id = fileRepository.getLoader( file ).id;
expect( getModelData( document ) ).to.equal( `[<image uploadId="${ id }"></image>]<paragraph>foo</paragraph>` );
} );

it( 'should insert image after block if selection is at its end', () => {
const file = createNativeFileMock();
setModelData( document, '<paragraph>foo[]</paragraph>' );

command._doExecute( { file } );

const id = fileRepository.getLoader( file ).id;
expect( getModelData( document ) ).to.equal( `<paragraph>foo</paragraph>[<image uploadId="${ id }"></image>]` );
} );

it( 'should insert image before block if selection is in the middle', () => {
const file = createNativeFileMock();
setModelData( document, '<paragraph>f{}oo</paragraph>' );

command._doExecute( { file } );

const id = fileRepository.getLoader( file ).id;
expect( getModelData( document ) ).to.equal( `[<image uploadId="${ id }"></image>]<paragraph>foo</paragraph>` );
} );
Expand Down Expand Up @@ -87,7 +107,7 @@ describe( 'ImageUploadCommand', () => {
const file = createNativeFileMock();
const spy = sinon.spy( batch, 'insert' );

setModelData( document, '<paragraph>foo[]</paragraph>' );
setModelData( document, '<paragraph>[]foo</paragraph>' );

command._doExecute( { batch, file } );
const id = fileRepository.getLoader( file ).id;
Expand Down
2 changes: 1 addition & 1 deletion tests/imageuploadengine.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ describe( 'ImageUploadEngine', () => {
const spy = sinon.spy( editor, 'execute' );
const fileMock = createNativeFileMock();
const dataTransfer = new DataTransfer( { files: [ fileMock ] } );
setModelData( document, '<paragraph>foo bar baz[]</paragraph>' );
setModelData( document, '<paragraph>[]foo bar baz</paragraph>' );

viewDocument.fire( 'clipboardInput', { dataTransfer } );

Expand Down
12 changes: 6 additions & 6 deletions tests/imageuploadprogress.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ describe( 'ImageUploadProgress', () => {
} );

it( 'should convert image\'s "reading" uploadStatus attribute', () => {
setModelData( document, '<paragraph>foo[]</paragraph>' );
setModelData( document, '<paragraph>[]foo</paragraph>' );
editor.execute( 'imageUpload', { file: createNativeFileMock() } );

expect( getViewData( viewDocument ) ).to.equal(
Expand All @@ -64,7 +64,7 @@ describe( 'ImageUploadProgress', () => {
} );

it( 'should convert image\'s "uploading" uploadStatus attribute', ( done ) => {
setModelData( document, '<paragraph>foo[]</paragraph>' );
setModelData( document, '<paragraph>[]foo</paragraph>' );
editor.execute( 'imageUpload', { file: createNativeFileMock() } );

document.once( 'changesDone', () => {
Expand All @@ -82,7 +82,7 @@ describe( 'ImageUploadProgress', () => {
} );

it( 'should update progressbar width on progress', ( done ) => {
setModelData( document, '<paragraph>foo[]</paragraph>' );
setModelData( document, '<paragraph>[]foo</paragraph>' );
editor.execute( 'imageUpload', { file: createNativeFileMock() } );

document.once( 'changesDone', () => {
Expand All @@ -102,7 +102,7 @@ describe( 'ImageUploadProgress', () => {
} );

it( 'should convert image\'s "complete" uploadStatus attribute', ( done ) => {
setModelData( document, '<paragraph>foo[]</paragraph>' );
setModelData( document, '<paragraph>[]foo</paragraph>' );
editor.execute( 'imageUpload', { file: createNativeFileMock() } );

document.once( 'changesDone', () => {
Expand All @@ -126,7 +126,7 @@ describe( 'ImageUploadProgress', () => {
const uploadProgress = editor.plugins.get( ImageUploadProgress );
uploadProgress.placeholder = base64Sample;

setModelData( document, '<paragraph>foo[]</paragraph>' );
setModelData( document, '<paragraph>[]foo</paragraph>' );
editor.execute( 'imageUpload', { file: createNativeFileMock() } );

expect( getViewData( viewDocument ) ).to.equal(
Expand All @@ -141,7 +141,7 @@ describe( 'ImageUploadProgress', () => {
consumable.consume( data.item, eventNameToConsumableType( evt.name ) );
}, { priority: 'highest' } );

setModelData( document, '<paragraph>foo[]</paragraph>' );
setModelData( document, '<paragraph>[]foo</paragraph>' );
editor.execute( 'imageUpload', { file: createNativeFileMock() } );

expect( getViewData( viewDocument ) ).to.equal(
Expand Down