From 52e53e6150f2a69645453409e7575397a5eb73e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= Date: Mon, 15 Jun 2020 10:07:18 +0200 Subject: [PATCH 01/16] Highlight text for link with marker. --- packages/ckeditor5-link/src/linkui.js | 27 +++++++++++++++++++ .../theme/ckeditor5-link/link.css | 8 ++++++ 2 files changed, 35 insertions(+) diff --git a/packages/ckeditor5-link/src/linkui.js b/packages/ckeditor5-link/src/linkui.js index 1e78a65f05e..0de1805b1b7 100644 --- a/packages/ckeditor5-link/src/linkui.js +++ b/packages/ckeditor5-link/src/linkui.js @@ -82,6 +82,21 @@ export default class LinkUI extends Plugin { // Attach lifecycle actions to the the balloon. this._enableUserBalloonInteractions(); + + editor.conversion.for( 'downcast' ).markerToHighlight( { + model: 'link-ui', + view: { + classes: [ 'ck-link_selected' ] + } + } ); + + editor.conversion.for( 'downcast' ).markerToElement( { + model: 'link-ui', + view: { + name: 'span', + classes: [ 'ck-link-text-selection', 'ck-link-text-selection_collapsed' ] + } + } ); } /** @@ -382,6 +397,14 @@ export default class LinkUI extends Plugin { } this._addFormView(); + + this.editor.model.change( writer => { + writer.addMarker( 'link-ui', { + usingOperation: false, + affectsData: false, + range: this.editor.model.document.selection.getFirstRange() + } ); + } ); } // If there's a link under the selection... else { @@ -430,6 +453,10 @@ export default class LinkUI extends Plugin { // Then remove the actions view because it's beneath the form. this._balloon.remove( this.actionsView ); + + editor.model.change( writer => { + writer.removeMarker( 'link-ui' ); + } ); } /** diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css index 8a392606461..45c35076d49 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css @@ -4,6 +4,14 @@ */ /* Class added to span element surrounding currently selected link. */ +.ck .ck-link-text-selection { + background: var(--ck-color-link-default); +} + +.ck .ck-link-text-selection_collapsed { + border: 1px solid var(--ck-color-link-selected-background); +} + .ck .ck-link_selected { background: var(--ck-color-link-selected-background); } From 2bdbfde045cce1fe9fa35051599bab42dcc5a051 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= Date: Mon, 15 Jun 2020 10:32:51 +0200 Subject: [PATCH 02/16] Improve marker on text link color. --- packages/ckeditor5-link/src/linkui.js | 14 +++++++++++--- .../theme/ckeditor5-link/link.css | 4 ++-- .../theme/ckeditor5-ui/globals/_colors.css | 3 ++- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/ckeditor5-link/src/linkui.js b/packages/ckeditor5-link/src/linkui.js index 0de1805b1b7..2338bef44dc 100644 --- a/packages/ckeditor5-link/src/linkui.js +++ b/packages/ckeditor5-link/src/linkui.js @@ -377,6 +377,12 @@ export default class LinkUI extends Plugin { // Because the form has an input which has focus, the focus must be brought back // to the editor. Otherwise, it would be lost. this.editor.editing.view.focus(); + + if ( this.editor.model.markers.has( 'link-ui' ) ) { + this.editor.model.change( writer => { + writer.removeMarker( 'link-ui' ); + } ); + } } } @@ -454,9 +460,11 @@ export default class LinkUI extends Plugin { // Then remove the actions view because it's beneath the form. this._balloon.remove( this.actionsView ); - editor.model.change( writer => { - writer.removeMarker( 'link-ui' ); - } ); + if ( editor.model.markers.has( 'link-ui' ) ) { + editor.model.change( writer => { + writer.removeMarker( 'link-ui' ); + } ); + } } /** diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css index 45c35076d49..6f9c2fc326d 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css @@ -9,9 +9,9 @@ } .ck .ck-link-text-selection_collapsed { - border: 1px solid var(--ck-color-link-selected-background); + border: 1px solid var(--ck-color-link-text-selection); } .ck .ck-link_selected { - background: var(--ck-color-link-selected-background); + background: var(--ck-color-link-text-selection); } diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css index 6e6239327db..4450d205aee 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css @@ -106,5 +106,6 @@ /* -- Link -------------------------------------------------------------------------------- */ --ck-color-link-default: hsl(240, 100%, 47%); - --ck-color-link-selected-background: hsla(201, 100%, 56%, 0.1); + --ck-color-link-selected-background: hsla(201, 100%, 56%, 0.1); + --ck-color-link-text-selection: hsla(201, 100%, 56%, 0.3); } From c748cdd5bdeb67f6fd3abf41b7024fa3ee7f3df1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= Date: Mon, 15 Jun 2020 13:29:18 +0200 Subject: [PATCH 03/16] Typo fix. --- packages/ckeditor5-link/src/linkui.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ckeditor5-link/src/linkui.js b/packages/ckeditor5-link/src/linkui.js index 2338bef44dc..ad83c7a87d8 100644 --- a/packages/ckeditor5-link/src/linkui.js +++ b/packages/ckeditor5-link/src/linkui.js @@ -175,7 +175,7 @@ export default class LinkUI extends Plugin { const { value } = formView.urlInputView.fieldView.element; // The regex checks for the protocol syntax ('xxxx://' or 'xxxx:') - // or non-word charecters at the begining of the link ('/', '#' etc.). + // or non-word characters at the beginning of the link ('/', '#' etc.). const isProtocolNeeded = !!defaultProtocol && !protocolRegExp.test( value ); const isEmail = emailRegExp.test( value ); From 885168367b7a338c43645d3add8ef27f707c4964 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= Date: Mon, 15 Jun 2020 14:01:19 +0200 Subject: [PATCH 04/16] Add tests for selection representation when link UI is opened. --- packages/ckeditor5-link/tests/linkui.js | 60 +++++++++++++++++++++++-- 1 file changed, 56 insertions(+), 4 deletions(-) diff --git a/packages/ckeditor5-link/tests/linkui.js b/packages/ckeditor5-link/tests/linkui.js index 1f09e43f672..f909cef91f2 100644 --- a/packages/ckeditor5-link/tests/linkui.js +++ b/packages/ckeditor5-link/tests/linkui.js @@ -8,7 +8,7 @@ import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor'; import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils'; import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard'; -import { setData as setModelData, getData as getModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model'; +import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model'; import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view'; import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; @@ -351,16 +351,16 @@ describe( 'LinkUI', () => { // https://github.com/ckeditor/ckeditor5-link/issues/113 it( 'updates the position of the panel – creating a new link, then the selection moved', () => { - setModelData( editor.model, 'f[]oo' ); + setModelData( editor.model, 'f[o]o' ); linkUIFeature._showUI(); const spy = testUtils.sinon.stub( balloon, 'updatePosition' ).returns( {} ); const root = viewDocument.getRoot(); - const text = root.getChild( 0 ).getChild( 0 ); + const text = root.getChild( 0 ).getChild( 2 ); view.change( writer => { - writer.setSelection( text, 3, true ); + writer.setSelection( text, 1, true ); } ); sinon.assert.calledOnce( spy ); @@ -465,6 +465,40 @@ describe( 'LinkUI', () => { sinon.assert.notCalled( spyUpdate ); } ); } ); + + it( 'should add fake visual selection when text fragment is selected', () => { + setModelData( editor.model, 'f[o]o' ); + + linkUIFeature._showUI(); + + expect( editor.model.markers.has( 'link-ui' ) ).to.be.true; + + const paragraph = editor.model.document.getRoot().getChild( 0 ); + const expectedRange = editor.model.createRange( + editor.model.createPositionAt( paragraph, 1 ), + editor.model.createPositionAt( paragraph, 2 ) + ); + const markerRange = editor.model.markers.get( 'link-ui' ).getRange(); + + expect( markerRange.isEqual( expectedRange ) ).to.be.true; + } ); + + it( 'should add fake visual selection on collapsed selection', () => { + setModelData( editor.model, 'f[]o' ); + + linkUIFeature._showUI(); + + expect( editor.model.markers.has( 'link-ui' ) ).to.be.true; + + const paragraph = editor.model.document.getRoot().getChild( 0 ); + const expectedRange = editor.model.createRange( + editor.model.createPositionAt( paragraph, 1 ), + editor.model.createPositionAt( paragraph, 1 ) + ); + const markerRange = editor.model.markers.get( 'link-ui' ).getRange(); + + expect( markerRange.isEqual( expectedRange ) ).to.be.true; + } ); } ); describe( '_hideUI()', () => { @@ -518,6 +552,14 @@ describe( 'LinkUI', () => { sinon.assert.notCalled( spy ); } ); + + it( 'should clear fake visual selection from selected text fragment', () => { + expect( editor.model.markers.has( 'link-ui' ) ).to.be.true; + + linkUIFeature._hideUI(); + + expect( editor.model.markers.has( 'link-ui' ) ).to.be.false; + } ); } ); describe( 'keyboard support', () => { @@ -1076,6 +1118,16 @@ describe( 'LinkUI', () => { expect( executeSpy.calledWithExactly( 'link', 'http://cksource.com', {} ) ).to.be.true; } ); + it( 'should should clear fake visual selection on formView#submit event', () => { + linkUIFeature._showUI(); + expect( editor.model.markers.has( 'link-ui' ) ).to.be.true; + + formView.urlInputView.fieldView.value = 'http://cksource.com'; + formView.fire( 'submit' ); + + expect( editor.model.markers.has( 'link-ui' ) ).to.be.false; + } ); + it( 'should hide and reveal the #actionsView on formView#submit event', () => { linkUIFeature._showUI(); formView.fire( 'submit' ); From c52c97c8f183b971981e7e33c026d191a2579f63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= Date: Mon, 15 Jun 2020 14:07:53 +0200 Subject: [PATCH 05/16] Refactor fake visual selection handling in LinkUI. --- packages/ckeditor5-link/src/linkui.js | 70 +++++++++++++++++++-------- 1 file changed, 50 insertions(+), 20 deletions(-) diff --git a/packages/ckeditor5-link/src/linkui.js b/packages/ckeditor5-link/src/linkui.js index ad83c7a87d8..edf4fd21163 100644 --- a/packages/ckeditor5-link/src/linkui.js +++ b/packages/ckeditor5-link/src/linkui.js @@ -23,6 +23,7 @@ import linkIcon from '../theme/icons/link.svg'; const linkKeystroke = 'Ctrl+K'; const protocolRegExp = /^((\w+:(\/{2,})?)|(\W))/i; const emailRegExp = /[\w-]+@[\w-]+\.+[\w-]+/i; +const VISUAL_SELECTION_MARKER_NAME = 'link-ui'; /** * The link UI plugin. It introduces the `'link'` and `'unlink'` buttons and support for the Ctrl+K keystroke. @@ -83,15 +84,17 @@ export default class LinkUI extends Plugin { // Attach lifecycle actions to the the balloon. this._enableUserBalloonInteractions(); + // Renders a fake visual selection marker on expanded selection. editor.conversion.for( 'downcast' ).markerToHighlight( { - model: 'link-ui', + model: VISUAL_SELECTION_MARKER_NAME, view: { classes: [ 'ck-link_selected' ] } } ); + // Renders a fake visual selection marker on collapsed selection. editor.conversion.for( 'downcast' ).markerToElement( { - model: 'link-ui', + model: VISUAL_SELECTION_MARKER_NAME, view: { name: 'span', classes: [ 'ck-link-text-selection', 'ck-link-text-selection_collapsed' ] @@ -378,11 +381,7 @@ export default class LinkUI extends Plugin { // to the editor. Otherwise, it would be lost. this.editor.editing.view.focus(); - if ( this.editor.model.markers.has( 'link-ui' ) ) { - this.editor.model.change( writer => { - writer.removeMarker( 'link-ui' ); - } ); - } + this._hideFakeVisualSelection(); } } @@ -403,14 +402,9 @@ export default class LinkUI extends Plugin { } this._addFormView(); - - this.editor.model.change( writer => { - writer.addMarker( 'link-ui', { - usingOperation: false, - affectsData: false, - range: this.editor.model.document.selection.getFirstRange() - } ); - } ); + // Show visual selection on text without link when contextual balloon is displayed. + // See https://github.com/ckeditor/ckeditor5/issues/4721. + this._showFakeVisualSelection(); } // If there's a link under the selection... else { @@ -460,11 +454,7 @@ export default class LinkUI extends Plugin { // Then remove the actions view because it's beneath the form. this._balloon.remove( this.actionsView ); - if ( editor.model.markers.has( 'link-ui' ) ) { - editor.model.change( writer => { - writer.removeMarker( 'link-ui' ); - } ); - } + this._hideFakeVisualSelection(); } /** @@ -644,6 +634,46 @@ export default class LinkUI extends Plugin { } } } + + /** + * Displays a fake visual selection when contextual balloon is displayed. + * + * This adds a 'link-ui' marker into the document that is rendered as a highlight on selected text fragment. + * + * @private + */ + _showFakeVisualSelection() { + const model = this.editor.model; + + model.change( writer => { + if ( model.markers.has( VISUAL_SELECTION_MARKER_NAME ) ) { + writer.updateMarker( VISUAL_SELECTION_MARKER_NAME, { + range: model.document.selection.getFirstRange() + } ); + } else { + writer.addMarker( VISUAL_SELECTION_MARKER_NAME, { + usingOperation: false, + affectsData: false, + range: model.document.selection.getFirstRange() + } ); + } + } ); + } + + /** + * Hides fake visual selection created with {@link #_showFakeVisualSelection} + * + * @private + */ + _hideFakeVisualSelection() { + const model = this.editor.model; + + if ( model.markers.has( VISUAL_SELECTION_MARKER_NAME ) ) { + model.change( writer => { + writer.removeMarker( VISUAL_SELECTION_MARKER_NAME ); + } ); + } + } } // Returns a link element if there's one among the ancestors of the provided `Position`. From 231f516f6e80b0948b053ac244e4c25791b5f441 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= Date: Mon, 15 Jun 2020 16:24:36 +0200 Subject: [PATCH 06/16] Typo fix. --- .../theme/ckeditor5-widget/widgettypearound.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widgettypearound.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widgettypearound.css index 5b19ef07d59..6f9b3c1c2a2 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widgettypearound.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widgettypearound.css @@ -132,7 +132,7 @@ animation: ck-widget-type-around-fake-caret-pulse linear 1s infinite normal forwards; /* - * The semit-transparent-outline+background combo improves the contrast + * The semi-transparent-outline+background combo improves the contrast * when the background underneath the fake caret is dark. */ outline: solid 1px hsla(0, 0%, 100%, .5); From 87a12f8047973664572584415d89e48cdbe3aeea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= Date: Mon, 15 Jun 2020 16:34:29 +0200 Subject: [PATCH 07/16] Update styles of the fake visual selection. --- packages/ckeditor5-link/src/linkui.js | 4 ++-- .../theme/ckeditor5-link/link.css | 19 +++++++++++++------ .../theme/ckeditor5-ui/globals/_colors.css | 2 +- 3 files changed, 16 insertions(+), 9 deletions(-) diff --git a/packages/ckeditor5-link/src/linkui.js b/packages/ckeditor5-link/src/linkui.js index edf4fd21163..227679bb6da 100644 --- a/packages/ckeditor5-link/src/linkui.js +++ b/packages/ckeditor5-link/src/linkui.js @@ -88,7 +88,7 @@ export default class LinkUI extends Plugin { editor.conversion.for( 'downcast' ).markerToHighlight( { model: VISUAL_SELECTION_MARKER_NAME, view: { - classes: [ 'ck-link_selected' ] + classes: [ 'ck-link_fake-selection' ] } } ); @@ -97,7 +97,7 @@ export default class LinkUI extends Plugin { model: VISUAL_SELECTION_MARKER_NAME, view: { name: 'span', - classes: [ 'ck-link-text-selection', 'ck-link-text-selection_collapsed' ] + classes: [ 'ck-link_fake-selection', 'ck-link_fake-selection_collapsed' ] } } ); } diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css index 6f9c2fc326d..21db6a6dac1 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css @@ -4,14 +4,21 @@ */ /* Class added to span element surrounding currently selected link. */ -.ck .ck-link-text-selection { - background: var(--ck-color-link-default); +.ck .ck-link_selected { + background: var(--ck-color-link-selected-background); } -.ck .ck-link-text-selection_collapsed { - border: 1px solid var(--ck-color-link-text-selection); +/* Classes for fake visual selection displayed on text when LinkUI has focus. */ +.ck .ck-link_fake-selection { + background: var(--ck-color-link-fake-selection); } -.ck .ck-link_selected { - background: var(--ck-color-link-text-selection); +/* Collapsed fake visual selection. */ +.ck .ck-link_fake-selection_collapsed { + display: inline-block; + height: .8em; + border-left: 1px solid var(--ck-color-base-text); + margin-left: -1px; + outline: solid 1px hsla(0, 0%, 100%, .5); + animation: ck-widget-type-around-fake-caret-pulse linear 1s infinite normal forwards; } diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css index 4450d205aee..7a00b5cffbe 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css @@ -107,5 +107,5 @@ --ck-color-link-default: hsl(240, 100%, 47%); --ck-color-link-selected-background: hsla(201, 100%, 56%, 0.1); - --ck-color-link-text-selection: hsla(201, 100%, 56%, 0.3); + --ck-color-link-fake-selection: hsla(201, 100%, 56%, 0.3); } From 1973c98ef8810c460cb4b31bb601aeb217802b78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= Date: Tue, 16 Jun 2020 10:09:25 +0200 Subject: [PATCH 08/16] Use proper BEM naming for fake visual selection. --- packages/ckeditor5-link/src/linkui.js | 4 ++-- packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/ckeditor5-link/src/linkui.js b/packages/ckeditor5-link/src/linkui.js index 227679bb6da..42cdc806bc0 100644 --- a/packages/ckeditor5-link/src/linkui.js +++ b/packages/ckeditor5-link/src/linkui.js @@ -88,7 +88,7 @@ export default class LinkUI extends Plugin { editor.conversion.for( 'downcast' ).markerToHighlight( { model: VISUAL_SELECTION_MARKER_NAME, view: { - classes: [ 'ck-link_fake-selection' ] + classes: [ 'ck-fake-link-selection' ] } } ); @@ -97,7 +97,7 @@ export default class LinkUI extends Plugin { model: VISUAL_SELECTION_MARKER_NAME, view: { name: 'span', - classes: [ 'ck-link_fake-selection', 'ck-link_fake-selection_collapsed' ] + classes: [ 'ck-fake-link-selection', 'ck-fake-link-selection_collapsed' ] } } ); } diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css index 21db6a6dac1..b5d48eba60c 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css @@ -9,12 +9,12 @@ } /* Classes for fake visual selection displayed on text when LinkUI has focus. */ -.ck .ck-link_fake-selection { +.ck .ck-fake-link-selection { background: var(--ck-color-link-fake-selection); } /* Collapsed fake visual selection. */ -.ck .ck-link_fake-selection_collapsed { +.ck .ck-fake-link-selection_collapsed { display: inline-block; height: .8em; border-left: 1px solid var(--ck-color-base-text); From 5f722b84726c09fb0c229f295806ec05fef140aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= Date: Tue, 16 Jun 2020 10:18:46 +0200 Subject: [PATCH 09/16] Move fake care pulse keyframes definition to a global animations CSS import. --- .../theme/ckeditor5-link/link.css | 2 +- .../ckeditor5-ui/globals/_animations.css | 22 +++++++++++++++++++ .../theme/ckeditor5-ui/globals/globals.css | 1 + .../ckeditor5-widget/widgettypearound.css | 20 +---------------- 4 files changed, 25 insertions(+), 20 deletions(-) create mode 100644 packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_animations.css diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css index b5d48eba60c..697489bb48a 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css @@ -20,5 +20,5 @@ border-left: 1px solid var(--ck-color-base-text); margin-left: -1px; outline: solid 1px hsla(0, 0%, 100%, .5); - animation: ck-widget-type-around-fake-caret-pulse linear 1s infinite normal forwards; + animation: ck-fake-caret-pulse linear 1s infinite normal forwards; } diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_animations.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_animations.css new file mode 100644 index 00000000000..a3913be9376 --- /dev/null +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_animations.css @@ -0,0 +1,22 @@ +/* + * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + +@keyframes ck-fake-caret-pulse { + 0% { + opacity: 1; + } + 49% { + opacity: 1; + } + 50% { + opacity: 0; + } + 99% { + opacity: 0; + } + 100% { + opacity: 1; + } +} diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/globals.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/globals.css index f34084cacc1..3a99477c625 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/globals.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/globals.css @@ -3,6 +3,7 @@ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ +@import "./_animations.css"; @import "./_colors.css"; @import "./_disabled.css"; @import "./_focus.css"; diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widgettypearound.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widgettypearound.css index 6f9b3c1c2a2..053c4182f11 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widgettypearound.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widgettypearound.css @@ -129,7 +129,7 @@ & .ck-widget__type-around__fake-caret { pointer-events: none; height: 1px; - animation: ck-widget-type-around-fake-caret-pulse linear 1s infinite normal forwards; + animation: ck-fake-caret-pulse linear 1s infinite normal forwards; /* * The semi-transparent-outline+background combo improves the contrast @@ -250,21 +250,3 @@ box-shadow: 0 0 0 5px hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-start-alpha)); } } - -@keyframes ck-widget-type-around-fake-caret-pulse { - 0% { - opacity: 1; - } - 49% { - opacity: 1; - } - 50% { - opacity: 0; - } - 99% { - opacity: 0; - } - 100% { - opacity: 1; - } -} From 1f8c4a42850f5b3e93a00b652a3718c4d048bae1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= Date: Tue, 16 Jun 2020 10:28:35 +0200 Subject: [PATCH 10/16] Use 100% height for collapsed fake link selection. --- packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css index 697489bb48a..78a1a6bbc09 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css @@ -15,8 +15,7 @@ /* Collapsed fake visual selection. */ .ck .ck-fake-link-selection_collapsed { - display: inline-block; - height: .8em; + height: 100%; border-left: 1px solid var(--ck-color-base-text); margin-left: -1px; outline: solid 1px hsla(0, 0%, 100%, .5); From 871b9084e2528455ecd326772a5d5862c85c0c5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= Date: Tue, 16 Jun 2020 10:29:00 +0200 Subject: [PATCH 11/16] Stick the fake selection to the right. --- packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css index 78a1a6bbc09..68ca2c11889 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css @@ -16,8 +16,8 @@ /* Collapsed fake visual selection. */ .ck .ck-fake-link-selection_collapsed { height: 100%; - border-left: 1px solid var(--ck-color-base-text); - margin-left: -1px; + border-right: 1px solid var(--ck-color-base-text); + margin-right: -1px; outline: solid 1px hsla(0, 0%, 100%, .5); animation: ck-fake-caret-pulse linear 1s infinite normal forwards; } From 447c142e402f1c00d76c9b45dc3165195df3126f Mon Sep 17 00:00:00 2001 From: Maciej Date: Tue, 16 Jun 2020 10:31:25 +0200 Subject: [PATCH 12/16] Apply linguistic suggestions from code review. Co-authored-by: Aleksander Nowodzinski --- packages/ckeditor5-link/src/linkui.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/ckeditor5-link/src/linkui.js b/packages/ckeditor5-link/src/linkui.js index 42cdc806bc0..ed74e0ccc78 100644 --- a/packages/ckeditor5-link/src/linkui.js +++ b/packages/ckeditor5-link/src/linkui.js @@ -84,7 +84,7 @@ export default class LinkUI extends Plugin { // Attach lifecycle actions to the the balloon. this._enableUserBalloonInteractions(); - // Renders a fake visual selection marker on expanded selection. + // Renders a fake visual selection marker on an expanded selection. editor.conversion.for( 'downcast' ).markerToHighlight( { model: VISUAL_SELECTION_MARKER_NAME, view: { @@ -92,7 +92,7 @@ export default class LinkUI extends Plugin { } } ); - // Renders a fake visual selection marker on collapsed selection. + // Renders a fake visual selection marker on a collapsed selection. editor.conversion.for( 'downcast' ).markerToElement( { model: VISUAL_SELECTION_MARKER_NAME, view: { @@ -402,7 +402,7 @@ export default class LinkUI extends Plugin { } this._addFormView(); - // Show visual selection on text without link when contextual balloon is displayed. + // Show visual selection on a text without a link when the contextual balloon is displayed. // See https://github.com/ckeditor/ckeditor5/issues/4721. this._showFakeVisualSelection(); } @@ -636,7 +636,7 @@ export default class LinkUI extends Plugin { } /** - * Displays a fake visual selection when contextual balloon is displayed. + * Displays a fake visual selection when the contextual balloon is displayed. * * This adds a 'link-ui' marker into the document that is rendered as a highlight on selected text fragment. * @@ -661,7 +661,7 @@ export default class LinkUI extends Plugin { } /** - * Hides fake visual selection created with {@link #_showFakeVisualSelection} + * Hides the fake visual selection created in {@link #_showFakeVisualSelection}. * * @private */ From 153d70806756ba5bc0452a6931e4979446968841 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 16 Jun 2020 14:37:42 +0200 Subject: [PATCH 13/16] Docs. --- packages/ckeditor5-link/src/linkui.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ckeditor5-link/src/linkui.js b/packages/ckeditor5-link/src/linkui.js index ed74e0ccc78..c24484e39ec 100644 --- a/packages/ckeditor5-link/src/linkui.js +++ b/packages/ckeditor5-link/src/linkui.js @@ -661,7 +661,7 @@ export default class LinkUI extends Plugin { } /** - * Hides the fake visual selection created in {@link #_showFakeVisualSelection}. + * Hides the fake visual selection created in {@link #_showFakeVisualSelection}. * * @private */ From 43b0d1cbced2d13d96e3d39b85194c784a49eea3 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 16 Jun 2020 14:45:31 +0200 Subject: [PATCH 14/16] Docs&Tests. --- packages/ckeditor5-link/tests/linkui.js | 8 ++++---- .../ckeditor5-theme-lark/theme/ckeditor5-link/link.css | 7 +++++-- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/ckeditor5-link/tests/linkui.js b/packages/ckeditor5-link/tests/linkui.js index f909cef91f2..5fad0dcb8d3 100644 --- a/packages/ckeditor5-link/tests/linkui.js +++ b/packages/ckeditor5-link/tests/linkui.js @@ -466,7 +466,7 @@ describe( 'LinkUI', () => { } ); } ); - it( 'should add fake visual selection when text fragment is selected', () => { + it( 'should display a fake visual selection when a text fragment is selected', () => { setModelData( editor.model, 'f[o]o' ); linkUIFeature._showUI(); @@ -483,7 +483,7 @@ describe( 'LinkUI', () => { expect( markerRange.isEqual( expectedRange ) ).to.be.true; } ); - it( 'should add fake visual selection on collapsed selection', () => { + it( 'should display a fake visual selection on a collapsed selection', () => { setModelData( editor.model, 'f[]o' ); linkUIFeature._showUI(); @@ -553,7 +553,7 @@ describe( 'LinkUI', () => { sinon.assert.notCalled( spy ); } ); - it( 'should clear fake visual selection from selected text fragment', () => { + it( 'should clear the fake visual selection from a selected text fragment', () => { expect( editor.model.markers.has( 'link-ui' ) ).to.be.true; linkUIFeature._hideUI(); @@ -1118,7 +1118,7 @@ describe( 'LinkUI', () => { expect( executeSpy.calledWithExactly( 'link', 'http://cksource.com', {} ) ).to.be.true; } ); - it( 'should should clear fake visual selection on formView#submit event', () => { + it( 'should should clear the fake visual selection on formView#submit event', () => { linkUIFeature._showUI(); expect( editor.model.markers.has( 'link-ui' ) ).to.be.true; diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css index 68ca2c11889..e253a38d876 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css @@ -8,12 +8,15 @@ background: var(--ck-color-link-selected-background); } -/* Classes for fake visual selection displayed on text when LinkUI has focus. */ +/* + * Classes used by the "fake visual selection" displayed in the content when an input + * in the link UI has focus (the browser does not render the native selection in this state). + */ .ck .ck-fake-link-selection { background: var(--ck-color-link-fake-selection); } -/* Collapsed fake visual selection. */ +/* A collapsed fake visual selection. */ .ck .ck-fake-link-selection_collapsed { height: 100%; border-right: 1px solid var(--ck-color-base-text); From fe0e7b0866948525a79647107a9e6da63f58283e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= Date: Tue, 16 Jun 2020 15:05:38 +0200 Subject: [PATCH 15/16] Revert "Move fake care pulse keyframes definition to a global animations CSS import." This reverts commit 5f722b84 --- .../theme/ckeditor5-link/link.css | 2 +- .../ckeditor5-ui/globals/_animations.css | 22 ------------------- .../theme/ckeditor5-ui/globals/globals.css | 1 - .../ckeditor5-widget/widgettypearound.css | 20 ++++++++++++++++- 4 files changed, 20 insertions(+), 25 deletions(-) delete mode 100644 packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_animations.css diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css index e253a38d876..d0520cb54ef 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css @@ -22,5 +22,5 @@ border-right: 1px solid var(--ck-color-base-text); margin-right: -1px; outline: solid 1px hsla(0, 0%, 100%, .5); - animation: ck-fake-caret-pulse linear 1s infinite normal forwards; + animation: ck-widget-type-around-fake-caret-pulse linear 1s infinite normal forwards; } diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_animations.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_animations.css deleted file mode 100644 index a3913be9376..00000000000 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_animations.css +++ /dev/null @@ -1,22 +0,0 @@ -/* - * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. - * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license - */ - -@keyframes ck-fake-caret-pulse { - 0% { - opacity: 1; - } - 49% { - opacity: 1; - } - 50% { - opacity: 0; - } - 99% { - opacity: 0; - } - 100% { - opacity: 1; - } -} diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/globals.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/globals.css index 3a99477c625..f34084cacc1 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/globals.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/globals.css @@ -3,7 +3,6 @@ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ -@import "./_animations.css"; @import "./_colors.css"; @import "./_disabled.css"; @import "./_focus.css"; diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widgettypearound.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widgettypearound.css index 053c4182f11..6f9b3c1c2a2 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widgettypearound.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widgettypearound.css @@ -129,7 +129,7 @@ & .ck-widget__type-around__fake-caret { pointer-events: none; height: 1px; - animation: ck-fake-caret-pulse linear 1s infinite normal forwards; + animation: ck-widget-type-around-fake-caret-pulse linear 1s infinite normal forwards; /* * The semi-transparent-outline+background combo improves the contrast @@ -250,3 +250,21 @@ box-shadow: 0 0 0 5px hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-start-alpha)); } } + +@keyframes ck-widget-type-around-fake-caret-pulse { + 0% { + opacity: 1; + } + 49% { + opacity: 1; + } + 50% { + opacity: 0; + } + 99% { + opacity: 0; + } + 100% { + opacity: 1; + } +} From ace6bbe857794972fa8a47122a81cd3ea3d3f3cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= Date: Tue, 16 Jun 2020 15:06:13 +0200 Subject: [PATCH 16/16] Remove fake link selection animation. --- packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css index d0520cb54ef..521ac5924fd 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css @@ -22,5 +22,4 @@ border-right: 1px solid var(--ck-color-base-text); margin-right: -1px; outline: solid 1px hsla(0, 0%, 100%, .5); - animation: ck-widget-type-around-fake-caret-pulse linear 1s infinite normal forwards; }