From 45393b67d6497c9dce9819e4a7e420a0fbf0cc90 Mon Sep 17 00:00:00 2001 From: Mateusz Samsel Date: Fri, 28 Jun 2019 10:13:00 +0200 Subject: [PATCH 1/8] Add missing upcast converter for link decorators. --- src/linkediting.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/linkediting.js b/src/linkediting.js index 6a561ae..4d62979 100644 --- a/src/linkediting.js +++ b/src/linkediting.js @@ -167,6 +167,17 @@ export default class LinkEditing extends Plugin { return element; } } } ); + + editor.conversion.for( 'upcast' ).elementToAttribute( { + view: { + name: 'a', + attributes: manualDecorators.get( decorator.id ).attributes + }, + model: { + key: decorator.id, + value: true + } + } ); } ); } From 91d05fe37a9d2e01a2f422539e7f09cfedef6562 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= Date: Fri, 28 Jun 2019 10:45:01 +0200 Subject: [PATCH 2/8] Attach CKEditor inspector to all editors in link decorators manual test. --- tests/manual/linkdecorator.html | 2 +- tests/manual/linkdecorator.js | 15 +++++++-------- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/tests/manual/linkdecorator.html b/tests/manual/linkdecorator.html index c5a24fb..67e3efc 100644 --- a/tests/manual/linkdecorator.html +++ b/tests/manual/linkdecorator.html @@ -1,6 +1,6 @@

Manual decorators

-

This is CKEditor5 from CKSource.

+

This is CKEditor5 from CKSource.

This is CKEditor5 as schemaless url.

This is anchor on this page.

This is some random ftp address.

diff --git a/tests/manual/linkdecorator.js b/tests/manual/linkdecorator.js index 31f9b16..e02a628 100644 --- a/tests/manual/linkdecorator.js +++ b/tests/manual/linkdecorator.js @@ -3,7 +3,7 @@ * For licensing, see LICENSE.md. */ -/* globals console:false, window, document */ +/* globals console:false, window, document, CKEditorInspector */ import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; import Enter from '@ckeditor/ckeditor5-enter/src/enter'; @@ -16,6 +16,10 @@ import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard'; // Just to have nicely styles switchbutton; import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css'; +if ( !window.editors ) { + window.editors = {}; +} + ClassicEditor .create( document.querySelector( '#editor' ), { plugins: [ Link, Typing, Paragraph, Clipboard, Undo, Enter ], @@ -48,10 +52,7 @@ ClassicEditor } } ) .then( editor => { - if ( !window.editors ) { - window.editors = {}; - } - window.editor = editor; + CKEditorInspector.attach( 'manual', editor ); window.editors.manualDecorators = editor; } ) .catch( err => { @@ -83,9 +84,7 @@ ClassicEditor } } ) .then( editor => { - if ( !window.editors ) { - window.editors = {}; - } + CKEditorInspector.attach( 'automatic', editor ); window.editors.automaticDecorators = editor; } ) .catch( err => { From 0587aa1627dd4713940199e6e64e850140177aef Mon Sep 17 00:00:00 2001 From: Mateusz Samsel Date: Fri, 28 Jun 2019 10:54:00 +0200 Subject: [PATCH 3/8] Add unit test for upcast converter and extend manual test with them as well --- tests/linkediting.js | 84 +++++++++++++++++++++++++++++++++ tests/manual/linkdecorator.html | 8 ++-- tests/manual/linkdecorator.md | 11 +++-- 3 files changed, 96 insertions(+), 7 deletions(-) diff --git a/tests/linkediting.js b/tests/linkediting.js index 712a9fc..94df7c8 100644 --- a/tests/linkediting.js +++ b/tests/linkediting.js @@ -587,5 +587,89 @@ describe( 'LinkEditing', () => { expect( editor.getData() ).to.equal( '

foobar

' ); } ); } ); + + describe( 'upcast converter', () => { + it( 'attributes from initial data are upcast to model', done => { + VirtualTestEditor + .create( { + initialData: '

Foo' + + 'Bar

', + plugins: [ Paragraph, LinkEditing, Enter ], + link: { + decorators: { + isExternal: { + mode: 'manual', + label: 'Open in a new window', + attributes: { + target: '_blank', + rel: 'noopener noreferrer' + } + }, + isDownloadable: { + mode: 'manual', + label: 'Downloadable', + attributes: { + download: 'file' + } + } + } + } + } ) + .then( newEditor => { + editor = newEditor; + model = editor.model; + + expect( getModelData( model, { withoutSelection: true } ) ).to.equal( + '' + + '<$text linkHref="url" linkIsDownloadable="true" linkIsExternal="true">Foo' + + '<$text linkHref="example.com" linkIsDownloadable="true">Bar' + + '' + ); + } ) + .then( done ) + .catch( done ); + } ); + + it( 'partial and incorrect attributes are not upcast to the model', done => { + VirtualTestEditor + .create( { + initialData: '

Foo' + + 'Bar

', + plugins: [ Paragraph, LinkEditing, Enter ], + link: { + decorators: { + isExternal: { + mode: 'manual', + label: 'Open in a new window', + attributes: { + target: '_blank', + rel: 'noopener noreferrer' + } + }, + isDownloadable: { + mode: 'manual', + label: 'Downloadable', + attributes: { + download: 'file' + } + } + } + } + } ) + .then( newEditor => { + editor = newEditor; + model = editor.model; + + expect( getModelData( model, { withoutSelection: true } ) ).to.equal( + '' + + '<$text linkHref="url">Foo' + + '<$text linkHref="example.com">Bar' + + '' + ); + } ) + .then( done ) + .catch( done ); + } ); + } ); } ); } ); diff --git a/tests/manual/linkdecorator.html b/tests/manual/linkdecorator.html index c5a24fb..af311c9 100644 --- a/tests/manual/linkdecorator.html +++ b/tests/manual/linkdecorator.html @@ -1,11 +1,11 @@

Manual decorators

-

This is CKEditor5 from CKSource.

-

This is CKEditor5 as schemaless url.

+

This is CKEditor5 from CKSource.

+

This is CKEditor5 as schemaless url.

This is anchor on this page.

-

This is some random ftp address.

+

This is some random ftp address.

This is some mail.

-

This is some phone number.

+

This is some phone number with gallery decorator

Automatic decorators

diff --git a/tests/manual/linkdecorator.md b/tests/manual/linkdecorator.md index 310854a..4f2aee6 100644 --- a/tests/manual/linkdecorator.md +++ b/tests/manual/linkdecorator.md @@ -4,12 +4,17 @@ 1. Should be available for every link. 2. Should be applied to the content only when "Save" was clicked. -3. There should be 3 manual decorators available: +3. There should be initially set some decorators over specific links based on source data of the editor: + * `CKEditor5` has: "Open in a new window" + * `CKSource` has: "Open in a new window" and "Downloadable" + * `CKEditor5` (schemaless) has: "Gallery" + * `ftp address` has: "Downloadable" +4. There should be 3 manual decorators available: * Open in new a new tab * Downloadable * Gallery link -4. State of the decorator switches should reflect the model of the currently selected link. -5. Switch buttons should be focusable (with the tab key), after the URL input. The "save" and "cancel" buttons should be focused last. +5. State of the decorator switches should reflect the model of the currently selected link. +6. Switch buttons should be focusable (with the tab key), after the URL input. The "save" and "cancel" buttons should be focused last. ### Automatic decorators (window.editors.automaticDecorators). From faf0255d6916315a65178618001f55276bd8751d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= Date: Fri, 28 Jun 2019 11:05:27 +0200 Subject: [PATCH 4/8] Do not check for window.editors before creating it. --- tests/manual/linkdecorator.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/tests/manual/linkdecorator.js b/tests/manual/linkdecorator.js index e02a628..d318f92 100644 --- a/tests/manual/linkdecorator.js +++ b/tests/manual/linkdecorator.js @@ -16,9 +16,7 @@ import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard'; // Just to have nicely styles switchbutton; import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css'; -if ( !window.editors ) { - window.editors = {}; -} +window.editors = {}; ClassicEditor .create( document.querySelector( '#editor' ), { From f027d8347963530f86fcc30124b459aff83d7345 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= Date: Fri, 28 Jun 2019 11:28:36 +0200 Subject: [PATCH 5/8] Update link decorator manual test. --- tests/manual/linkdecorator.html | 2 +- tests/manual/linkdecorator.md | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/tests/manual/linkdecorator.html b/tests/manual/linkdecorator.html index af311c9..ac30f22 100644 --- a/tests/manual/linkdecorator.html +++ b/tests/manual/linkdecorator.html @@ -10,7 +10,7 @@

Manual decorators

Automatic decorators

-

This is CKEditor5 from CKSource.

+

This is CKEditor5 from CKSource.

This is CKEditor5 as schemaless url.

This is anchor on this page.

This is some random ftp address.

diff --git a/tests/manual/linkdecorator.md b/tests/manual/linkdecorator.md index 4f2aee6..d68eca6 100644 --- a/tests/manual/linkdecorator.md +++ b/tests/manual/linkdecorator.md @@ -5,14 +5,14 @@ 1. Should be available for every link. 2. Should be applied to the content only when "Save" was clicked. 3. There should be initially set some decorators over specific links based on source data of the editor: - * `CKEditor5` has: "Open in a new window" - * `CKSource` has: "Open in a new window" and "Downloadable" - * `CKEditor5` (schemaless) has: "Gallery" - * `ftp address` has: "Downloadable" + * `CKEditor5` has: "Open in a new tab" + * `CKSource` has: "Open in a new tab" and "Downloadable" + * `CKEditor5` (schemaless) has: "Gallery" + * `ftp address` has: "Downloadable" 4. There should be 3 manual decorators available: - * Open in new a new tab - * Downloadable - * Gallery link + * Open in new a new tab + * Downloadable + * Gallery link 5. State of the decorator switches should reflect the model of the currently selected link. 6. Switch buttons should be focusable (with the tab key), after the URL input. The "save" and "cancel" buttons should be focused last. @@ -22,5 +22,5 @@ 2. There should be no changes to the model or the view of the editors. 3. Decorator data should be added during downcast (run `window.editors.automaticDecorators.getData()` to see how it works). 4. There are 2 additional decorators in this editor: - * phone, which detects all links starting with `tel:` and adds the `phone` CSS class to such link, - * internal, which adds the `internal` CSS class to all links starting with `#`. + * phone, which detects all links starting with `tel:` and adds the `phone` CSS class to such link, + * internal, which adds the `internal` CSS class to all links starting with `#`. From e24690bc791eb8748278de58e2744ede046451c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= Date: Fri, 28 Jun 2019 11:34:04 +0200 Subject: [PATCH 6/8] Refactor createAttributeElement call to one line. --- src/linkediting.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/linkediting.js b/src/linkediting.js index 4d62979..1d7f134 100644 --- a/src/linkediting.js +++ b/src/linkediting.js @@ -156,14 +156,10 @@ export default class LinkEditing extends Plugin { model: decorator.id, view: ( manualDecoratorName, writer ) => { if ( manualDecoratorName ) { - const element = writer.createAttributeElement( - 'a', - manualDecorators.get( decorator.id ).attributes, - { - priority: 5 - } - ); + const attributes = manualDecorators.get( decorator.id ).attributes; + const element = writer.createAttributeElement( 'a', attributes, { priority: 5 } ); writer.setCustomProperty( 'link', true, element ); + return element; } } } ); From 3e8ff1b804d5829ff49d245f7f64e5c7a3621a37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= Date: Fri, 28 Jun 2019 11:37:37 +0200 Subject: [PATCH 7/8] Rename link decorators upcast converter tests description. --- tests/linkediting.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/linkediting.js b/tests/linkediting.js index 94df7c8..0c07d35 100644 --- a/tests/linkediting.js +++ b/tests/linkediting.js @@ -589,7 +589,7 @@ describe( 'LinkEditing', () => { } ); describe( 'upcast converter', () => { - it( 'attributes from initial data are upcast to model', done => { + it( 'should upcast attributes from initial data', done => { VirtualTestEditor .create( { initialData: '

Foo' + @@ -630,7 +630,7 @@ describe( 'LinkEditing', () => { .catch( done ); } ); - it( 'partial and incorrect attributes are not upcast to the model', done => { + it( 'should not upcast partial and incorrect attributes', done => { VirtualTestEditor .create( { initialData: '

Foo' + From df03bf5adef413aa00c912f04c34057e945dd197 Mon Sep 17 00:00:00 2001 From: Mateusz Samsel Date: Fri, 28 Jun 2019 11:53:41 +0200 Subject: [PATCH 8/8] Simplify upcast converter. --- src/linkediting.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/linkediting.js b/src/linkediting.js index 1d7f134..b2275f7 100644 --- a/src/linkediting.js +++ b/src/linkediting.js @@ -170,8 +170,7 @@ export default class LinkEditing extends Plugin { attributes: manualDecorators.get( decorator.id ).attributes }, model: { - key: decorator.id, - value: true + key: decorator.id } } ); } );