Add class based on widget type to the widget wrapper

[Marek Lewandowski]

This is a follow-up of #13200 issue.

As @Reinmar writes:

Inability to write rules matching certain widget wrapper + widget class

Once classes will be moved to wrappers it would be good if it was possible to write rules like:

.image.centered { ... }
.embed.centered { ... }

As I experienced recently centered image's wrapper may need very different styles than that of an embed widget. E.g. image's wrapper must have text-align: center. This affects embed widgets which may be unwanted if we only want to use margin-left/right: auto.

Hence, it will be useful if widget wrapper had classes based on widgets names - e.g. "widget-image", "widget-embed", etc.

[Marek Lewandowski]

Let's use prefixed class names so we'd end up with classes like cke-widget-image, cke-widget-codesnippet etc.

[Szymon Kupś]

Pushed ​branch:t/13829. Added CSS class based on pattern cke_widget_<widgetname> to the widget wrapper.

[Marek Lewandowski]

Your solution relied on widgetName param which (as doc says) is optional. This argument is not given e.g. in widget upcasting (happens when you paste a widget).

1. Open a page with editor and any widget plugin.
2. Add a widget.
3. Move selection to the other place of the document.
4. Type one letter.
5. Press ctrl + z once (undo).

Expected: Your widget should keep the cke_widget_<name> class.

Expected: The class is removed.

Other case might include copy & paste or drag & dropping the widget.

I've added some changes to ​t/13829 branch, please check it and tell if my patch looks fine. If so change ticket status to review_passed, add a changelog entry and merge branch to branch (​more info in docs).

[Szymon Kupś]

I've pushed one commit to ​branch:t/13829 - changed regular expression in widgetWrapperAtributes to match two tests in ​http://tests.ckeditor.dev:1030/tests/plugins/widget/widgetsintegration

[Tade0]

That last commit indeed fixes these tests.

As for the modifications by @m.lewandowski: I tested how this works with copying/pasting, drag & drop, mode switching and the class was there each time.

As for the code: I have one issue that I believe deserves attention: ​https://github.com/cksource/ckeditor-dev/blob/t/13829/plugins/widget/plugin.js#L644

This condition is always true.

[Tade0]

Fixed the always-true condition problem, since it's a minor thing.

Fixed with ​git:45f3e0e84afddbcfaeebe939a364a61bef905f15.