From 0f2a18161a81e9c8262f578032c8a32032f9d724 Mon Sep 17 00:00:00 2001 From: panr Date: Thu, 9 Jul 2020 11:52:34 +0200 Subject: [PATCH 1/6] Internal (theme-lark): Add styles for the LinkImage icon indicator. --- .../theme/ckeditor5-link/linkimage.css | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkimage.css diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkimage.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkimage.css new file mode 100644 index 00000000000..62da8bcf7b4 --- /dev/null +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkimage.css @@ -0,0 +1,9 @@ +/* + * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + +.ck.ck-link-image_icon { + color: hsl(0, 0%, 100%); + background: hsla(0, 0%, 0%, .4); +} From 656e73693bc158e9cf7452fdbc7c9af81cedb365 Mon Sep 17 00:00:00 2001 From: panr Date: Thu, 9 Jul 2020 11:56:51 +0200 Subject: [PATCH 2/6] Add an icon indicator for linked image. --- packages/ckeditor5-link/src/linkimage.js | 2 ++ .../ckeditor5-link/src/linkimageediting.js | 13 +++++++++++++ packages/ckeditor5-link/theme/linkimage.css | 18 ++++++++++++++++++ 3 files changed, 33 insertions(+) create mode 100644 packages/ckeditor5-link/theme/linkimage.css diff --git a/packages/ckeditor5-link/src/linkimage.js b/packages/ckeditor5-link/src/linkimage.js index 6b5057fe85a..90fb329a982 100644 --- a/packages/ckeditor5-link/src/linkimage.js +++ b/packages/ckeditor5-link/src/linkimage.js @@ -11,6 +11,8 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; import LinkImageEditing from './linkimageediting'; import LinkImageUI from './linkimageui'; +import '../theme/linkimage.css'; + /** * The `LinkImage` plugin. * diff --git a/packages/ckeditor5-link/src/linkimageediting.js b/packages/ckeditor5-link/src/linkimageediting.js index 59e3894819e..e40ae898fd8 100644 --- a/packages/ckeditor5-link/src/linkimageediting.js +++ b/packages/ckeditor5-link/src/linkimageediting.js @@ -11,6 +11,8 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; import ImageEditing from '@ckeditor/ckeditor5-image/src/image/imageediting'; import LinkEditing from './linkediting'; +import linkIcon from '../theme/icons/link.svg'; + /** * The link image engine feature. * @@ -115,6 +117,14 @@ function downcastImageLink() { // But we need to check whether the link element exists. const linkInImage = Array.from( viewFigure.getChildren() ).find( child => child.name === 'a' ); + // Create an icon indicator for a linked image. + const linkIconContainer = writer.createUIElement( 'span', { class: 'ck ck-link-image_icon' }, function( domDocument ) { + const domElement = this.toDomElement( domDocument ); + domElement.innerHTML = linkIcon; + + return domElement; + } ); + // If so, update the attribute if it's defined or remove the entire link if the attribute is empty. if ( linkInImage ) { if ( data.attributeNewValue ) { @@ -135,6 +145,9 @@ function downcastImageLink() { // 3. Move the image to the link. writer.move( writer.createRangeOn( viewFigure.getChild( 1 ) ), writer.createPositionAt( linkElement, 0 ) ); + + // 4. Inset the linked image icon indicator. + writer.insert( writer.createPositionAt( linkElement, 0 ), linkIconContainer ); } } ); }; diff --git a/packages/ckeditor5-link/theme/linkimage.css b/packages/ckeditor5-link/theme/linkimage.css new file mode 100644 index 00000000000..852b0d6d09f --- /dev/null +++ b/packages/ckeditor5-link/theme/linkimage.css @@ -0,0 +1,18 @@ +/* + * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + +.ck.ck-link-image_icon { + position: absolute; + top: var(--ck-spacing-medium); + right: var(--ck-spacing-medium); + width: 18px; + height: 18px; + padding: 5px; + border-radius: var(--ck-border-radius); + + & svg { + fill: currentColor; + } +} From 55b2fdf5742a9abda5188a79b2e8f404c311640c Mon Sep 17 00:00:00 2001 From: panr Date: Thu, 9 Jul 2020 12:45:52 +0200 Subject: [PATCH 3/6] Update element name. --- packages/ckeditor5-link/src/linkimageediting.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ckeditor5-link/src/linkimageediting.js b/packages/ckeditor5-link/src/linkimageediting.js index e40ae898fd8..9357318dfb7 100644 --- a/packages/ckeditor5-link/src/linkimageediting.js +++ b/packages/ckeditor5-link/src/linkimageediting.js @@ -118,7 +118,7 @@ function downcastImageLink() { const linkInImage = Array.from( viewFigure.getChildren() ).find( child => child.name === 'a' ); // Create an icon indicator for a linked image. - const linkIconContainer = writer.createUIElement( 'span', { class: 'ck ck-link-image_icon' }, function( domDocument ) { + const linkIconIndicator = writer.createUIElement( 'span', { class: 'ck ck-link-image_icon' }, function( domDocument ) { const domElement = this.toDomElement( domDocument ); domElement.innerHTML = linkIcon; @@ -147,7 +147,7 @@ function downcastImageLink() { writer.move( writer.createRangeOn( viewFigure.getChild( 1 ) ), writer.createPositionAt( linkElement, 0 ) ); // 4. Inset the linked image icon indicator. - writer.insert( writer.createPositionAt( linkElement, 0 ), linkIconContainer ); + writer.insert( writer.createPositionAt( linkElement, 'end' ), linkIconIndicator ); } } ); }; From ddfdcafdb0dd8442f4d784047df6e2c4d45286a5 Mon Sep 17 00:00:00 2001 From: panr Date: Thu, 9 Jul 2020 12:46:05 +0200 Subject: [PATCH 4/6] Update unit tests. --- .../ckeditor5-link/tests/linkimageediting.js | 24 ++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/packages/ckeditor5-link/tests/linkimageediting.js b/packages/ckeditor5-link/tests/linkimageediting.js index 71ba9af1118..b596c4c0e6e 100644 --- a/packages/ckeditor5-link/tests/linkimageediting.js +++ b/packages/ckeditor5-link/tests/linkimageediting.js @@ -11,6 +11,13 @@ import normalizeHtml from '@ckeditor/ckeditor5-utils/tests/_utils/normalizehtml' import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view'; import ImageCaptionEditing from '@ckeditor/ckeditor5-image/src/imagecaption/imagecaptionediting'; +const linkIconInditatorElement = '' + +''; + describe( 'LinkImageEditing', () => { let editor, model, view; @@ -48,7 +55,9 @@ describe( 'LinkImageEditing', () => { setModelData( model, 'alt text' ); expect( editor.getData() ).to.equal( - '
alt text
' + '
alt text' + + linkIconInditatorElement + + '
' ); } ); @@ -56,7 +65,9 @@ describe( 'LinkImageEditing', () => { setModelData( model, '' ); expect( editor.getData() ).to.equal( - '
' + '
' + + linkIconInditatorElement + + '
' ); } ); @@ -72,6 +83,7 @@ describe( 'LinkImageEditing', () => { '
' + '' + '' + + linkIconInditatorElement + '' + '
' ); @@ -264,6 +276,8 @@ describe( 'LinkImageEditing', () => { '
' + '' + 'alt text' + + // Content of the UIElement is skipped here. + '' + '' + '
' ); @@ -281,6 +295,8 @@ describe( 'LinkImageEditing', () => { '
' + '' + 'alt text' + + // Content of the UIElement is skipped here. + '' + '' + '
' ); @@ -302,7 +318,7 @@ describe( 'LinkImageEditing', () => { } ); } ); - describe( 'figure > a > img + figcaption', () => { + describe( 'figure > a > img + span + figcaption', () => { it( 'should convert a link and the caption element', () => { return VirtualTestEditor .create( { @@ -319,6 +335,8 @@ describe( 'LinkImageEditing', () => { '
' + '' + 'alt text' + + // Content of the UIElement is skipped here. + '' + '' + '
' + From 04f80ea7a9e06071d0f2f41931d94a075bfc5474 Mon Sep 17 00:00:00 2001 From: panr Date: Thu, 9 Jul 2020 12:48:36 +0200 Subject: [PATCH 5/6] Update manual test. --- packages/ckeditor5-link/tests/manual/linkimage.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/ckeditor5-link/tests/manual/linkimage.md b/packages/ckeditor5-link/tests/manual/linkimage.md index 3ea925709f7..81bc409df68 100644 --- a/packages/ckeditor5-link/tests/manual/linkimage.md +++ b/packages/ckeditor5-link/tests/manual/linkimage.md @@ -1,3 +1,5 @@ # Linking Image -Both images should have defined the `linkHref` attribute. +Only the first image should have: +- defined the `linkHref` attribute. +- the linked image icon indicator in the top-right corner (the element should be placed inside the `` element). From a1397b74691ebef3c67c6101a269c8c5d64f8bec Mon Sep 17 00:00:00 2001 From: panr Date: Mon, 13 Jul 2020 16:40:32 +0200 Subject: [PATCH 6/6] Import the icon code instead of creating a static template inside the unit test. --- packages/ckeditor5-link/tests/linkimageediting.js | 11 +++++------ packages/ckeditor5-link/theme/icons/link.svg | 2 +- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/ckeditor5-link/tests/linkimageediting.js b/packages/ckeditor5-link/tests/linkimageediting.js index b596c4c0e6e..eefc1ff46b4 100644 --- a/packages/ckeditor5-link/tests/linkimageediting.js +++ b/packages/ckeditor5-link/tests/linkimageediting.js @@ -11,12 +11,11 @@ import normalizeHtml from '@ckeditor/ckeditor5-utils/tests/_utils/normalizehtml' import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view'; import ImageCaptionEditing from '@ckeditor/ckeditor5-image/src/imagecaption/imagecaptionediting'; -const linkIconInditatorElement = '' + -''; +import linkIcon from '../theme/icons/link.svg'; + +// We can import the SVG code directly to avoid re-edit, but we have to make sure that the icon code has `` closing tag. +// After cleaning up the icons, the closing tag can be re-parsed and some tests will fail. +const linkIconInditatorElement = '' + linkIcon + ''; describe( 'LinkImageEditing', () => { let editor, model, view; diff --git a/packages/ckeditor5-link/theme/icons/link.svg b/packages/ckeditor5-link/theme/icons/link.svg index a9c47657a19..80eb3462be1 100644 --- a/packages/ckeditor5-link/theme/icons/link.svg +++ b/packages/ckeditor5-link/theme/icons/link.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file