Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Manual link decorators of block images should not break decorators for links on the inline images #10829

Merged
merged 3 commits into from
Nov 12, 2021
Merged

Manual link decorators of block images should not break decorators for links on the inline images #10829

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f6d730b
Link decorators on block images should not consume for inline images.
niegowski Nov 9, 2021
be4a23c
Added test.
niegowski Nov 9, 2021
caa5911
Inline images should allow all attributes of text so that attribute e…
niegowski Nov 9, 2021
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
1 change: 1 addition & 0 deletions packages/ckeditor5-image/src/image/imageinlineediting.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export default class ImageInlineEditing extends Plugin {
isObject: true,
isInline: true,
allowWhere: '$text',
allowAttributesOf: '$text',
allowAttributes: [ 'alt', 'src', 'srcset' ]
} );

Expand Down
6 changes: 1 addition & 5 deletions packages/ckeditor5-image/tests/image/insertimagecommand.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,10 +254,6 @@ describe( 'InsertImageCommand', () => {
it( 'should set document selection attributes on an image to maintain their continuity in downcast (e.g. links)', () => {
editor.model.schema.extend( '$text', { allowAttributes: [ 'foo', 'bar', 'baz' ] } );

editor.model.schema.extend( 'imageInline', {
allowAttributes: [ 'foo', 'bar' ]
} );

const imgSrc = 'foo/bar.jpg';

setModelData( model, '<paragraph><$text bar="b" baz="c" foo="a">f[o]o</$text></paragraph>' );
Expand All @@ -267,7 +263,7 @@ describe( 'InsertImageCommand', () => {
expect( getModelData( model ) ).to.equal(
'<paragraph>' +
'<$text bar="b" baz="c" foo="a">f</$text>' +
'[<imageInline bar="b" foo="a" src="foo/bar.jpg"></imageInline>]' +
'[<imageInline bar="b" baz="c" foo="a" src="foo/bar.jpg"></imageInline>]' +
'<$text bar="b" baz="c" foo="a">o</$text>' +
'</paragraph>'
);
Expand Down
16 changes: 4 additions & 12 deletions packages/ckeditor5-image/tests/imageupload/uploadimagecommand.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,10 +223,6 @@ describe( 'UploadImageCommand', () => {
it( 'should set document selection attributes on an image to maintain attribute continuity in downcast (e.g. links)', () => {
editor.model.schema.extend( '$text', { allowAttributes: [ 'foo', 'bar', 'baz' ] } );

editor.model.schema.extend( 'imageInline', {
allowAttributes: [ 'foo', 'bar' ]
} );

const file = createNativeFileMock();
setModelData( model, '<paragraph><$text bar="b" baz="c" foo="a">f[o]o</$text></paragraph>' );

Expand All @@ -237,7 +233,7 @@ describe( 'UploadImageCommand', () => {
expect( getModelData( model ) ).to.equal(
'<paragraph>' +
'<$text bar="b" baz="c" foo="a">f</$text>' +
`[<imageInline bar="b" foo="a" uploadId="${ id }"></imageInline>]` +
`[<imageInline bar="b" baz="c" foo="a" uploadId="${ id }"></imageInline>]` +
'<$text bar="b" baz="c" foo="a">o</$text>' +
'</paragraph>'
);
Expand All @@ -246,10 +242,6 @@ describe( 'UploadImageCommand', () => {
it( 'should set document selection attributes on multiple images to maintain attribute continuity in downcast (e.g. links)', () => {
editor.model.schema.extend( '$text', { allowAttributes: [ 'foo', 'bar', 'baz' ] } );

editor.model.schema.extend( 'imageInline', {
allowAttributes: [ 'foo', 'bar' ]
} );

const file = [ createNativeFileMock(), createNativeFileMock(), createNativeFileMock() ];
setModelData( model, '<paragraph><$text bar="b" baz="c" foo="a">f[o]o</$text></paragraph>' );

Expand All @@ -262,9 +254,9 @@ describe( 'UploadImageCommand', () => {
expect( getModelData( model ) ).to.equal(
'<paragraph>' +
'<$text bar="b" baz="c" foo="a">f</$text>' +
`<imageInline bar="b" foo="a" uploadId="${ idA }"></imageInline>` +
`<imageInline bar="b" foo="a" uploadId="${ idB }"></imageInline>` +
`[<imageInline bar="b" foo="a" uploadId="${ idC }"></imageInline>]` +
`<imageInline bar="b" baz="c" foo="a" uploadId="${ idA }"></imageInline>` +
`<imageInline bar="b" baz="c" foo="a" uploadId="${ idB }"></imageInline>` +
`[<imageInline bar="b" baz="c" foo="a" uploadId="${ idC }"></imageInline>]` +
'<$text bar="b" baz="c" foo="a">o</$text>' +
'</paragraph>'
);
Expand Down
11 changes: 7 additions & 4 deletions packages/ckeditor5-link/src/linkimageediting.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,6 @@ export default class LinkImageEditing extends Plugin {
schema.extend( 'imageBlock', { allowAttributes: [ 'linkHref' ] } );
}

if ( editor.plugins.has( 'ImageInlineEditing' ) ) {
schema.extend( 'imageInline', { allowAttributes: [ 'linkHref' ] } );
}

editor.conversion.for( 'upcast' ).add( upcastLink( editor ) );
editor.conversion.for( 'downcast' ).add( downcastImageLink( editor ) );

Expand Down Expand Up @@ -256,6 +252,7 @@ function downcastImageLinkManualDecorator( decorator ) {
// @private
// @returns {Function}
function upcastImageLinkManualDecorator( editor, decorator ) {
const isImageInlinePluginLoaded = editor.plugins.has( 'ImageInlineEditing' );
const imageUtils = editor.plugins.get( 'ImageUtils' );

return dispatcher => {
Expand All @@ -269,6 +266,12 @@ function upcastImageLinkManualDecorator( editor, decorator ) {
return;
}

const blockImageView = imageInLink.findAncestor( element => imageUtils.isBlockImageView( element ) );

if ( isImageInlinePluginLoaded && !blockImageView ) {
return;
}

const matcher = new Matcher( decorator._createPattern() );
const result = matcher.match( viewLink );

Expand Down
38 changes: 38 additions & 0 deletions packages/ckeditor5-link/tests/linkimageediting.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -976,6 +976,44 @@ describe( 'LinkImageEditing', () => {
'</paragraph>'
);
} );

it( 'should properly upcast manual decorators for linked inline images', async () => {
const newEditor = await VirtualTestEditor.create( {
plugins: [ Paragraph, ImageBlockEditing, ImageInlineEditing, LinkImageEditing ],
link: {
decorators: {
isGallery: {
mode: 'manual',
classes: 'gallery'
}
}
}
} );

newEditor.setData(
'<p>' +
'foo ' +
'<a class="gallery" href="https://cksource.com">' +
'abc ' +
'<img src="sample.jpg" alt="bar">' +
' 123' +
'</a>' +
' bar' +
'</p>'
);

expect( getModelData( newEditor.model, { withoutSelection: true } ) ).to.equal(
'<paragraph>' +
'foo ' +
'<$text linkHref="https://cksource.com" linkIsGallery="true">abc </$text>' +
'<imageInline alt="bar" linkHref="https://cksource.com" linkIsGallery="true" src="sample.jpg"></imageInline>' +
'<$text linkHref="https://cksource.com" linkIsGallery="true"> 123</$text>' +
' bar' +
'</paragraph>'
);

await newEditor.destroy();
} );
} );

describe( 'downcast converter', () => {
Expand Down