cke_widget_element CSS Class get wrongly returned by the drupallink plugin

Quoting plugins/widget/plugin.js in CKEditor:

		destroy: function( offline ) {
			…

			if ( !offline ) {
				if ( this.element.data( 'cke-widget-keep-attr' ) == '0' )
					this.element.removeAttribute( 'data-widget' );
				this.element.removeAttributes( [ 'data-cke-widget-data', 'data-cke-widget-keep-attr' ] );
				this.element.removeClass( 'cke_widget_element' );
				this.element.replace( this.wrapper );
			}

			…
		}, 

It is those attributes that are being picked up by drupallink's link parsing. This will be true for any widget that can be wrapped in a link.

The reason that CKEditor's image2 + link don't suffer from this, is because link is hardcoded to a limited set of attributes that it supports (i.e. also not class). Compare to Drupal 8's drupallink plugin, which supports any attribute (i.e. also class).

Needs feedback from the CKEditor team on how to best solve this, because AFAICT the Widget API does not have an API to determine which attributes and attribute values should be ignored. I suspect the answer will be: any class with the cke_widget_* prefix and any attribute with the data-cke-widgetprefix.

We're also preventing this class to leak into our link's advanced tab (it can be enabled using config). And just as you've assumed we're simply dropping cke_* classes and it's working just fine, see https://github.com/ckeditor/ckeditor-dev/blob/cce5ef6e8583e25392e3910b80...

Alright, thanks!

Working on a patch.

I don't seem able to replicate the issue on fresh 8.0.x with editor_advanced_link 8.x.1.0, so I haven't been able to manual test #5

Tried with Full HTML editor. Added a link and played around with it. Saved, edited and added class then saved, edited again removed class and added title, etc.

@DuaelFr could you please provide the steps to reproduce?

#8 I can't reproduce it when editing a linked image.

1. The link before editing:
   

   <a class="foo bar" href="http://image1" id="test"><img alt="Guust" data-align="center" data-caption="hoi, dit is een &lt;a href=&quot;http://caption2&quot;&gt;test&lt;/a&gt;" data-entity-type="file" data-entity-uuid="42960199-c264-468a-aa54-8423777396e3" src="/sites/default/files/inline-images/search.jpg" /></a>
   

2. After editing the link (note the new har class):
   

   <a class="foo bar har" href="http://image1" id="test"><img alt="Guust" data-align="center" data-caption="hoi, dit is een &lt;a href=&quot;http://caption2&quot;&gt;test&lt;/a&gt;" data-entity-type="file" data-entity-uuid="42960199-c264-468a-aa54-8423777396e3" src="/sites/default/files/inline-images/search.jpg" /></a>
   
   

Oh, it's in the dialog itself. That I also cannot reproduce… weird!

Thank you @DuaelFr

I can confirm that manual testing #6 works.

Attaching screenshots for the record.

NW for a nit:

+++ b/core/modules/ckeditor/js/plugins/drupallink/plugin.js
@@ -18,13 +18,8 @@
+      // Ignore data-cke-* attributes; they're CKEditor Widget internals.

This comment is now incorrect. It's not "CKEditor Widget internals" but just "CKEditor internals" now.

Here you go.

Committed/pushed to 8.1.x and cherry-picked to 8.0.x. Thanks!