Nested editables must have their classes

[Reinmar]

In ckeditor/ckeditor5-image#48 we introduced first nested editables, but they are styled as:

 +// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 +// For licensing, see LICENSE.md or http://ckeditor.com/license
 +
 +@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_colors.scss';
 +@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_shadow.scss';
 +@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_states.scss';
 +
 +.ck-widget.image {
 +	figcaption {
 +		background-color: ck-color( 'foreground' );
 +		padding: 10px;
 +
 +		// The `:focus` styles is applied before `.focused` class inside editables.
 +		// These styles show different border for a blink of an eye.
 +		&:focus {
 +			outline: none;
 +			box-shadow: none;
 +		}
 +
 +		&.focused {
 +			@include ck-focus-ring( 'outline' );
 +			@include ck-box-shadow( $ck-inner-shadow );
 +			background-color: ck-color( 'background' );;
 +		}
 +
 +	}
 +}

This is incorrect – part of these styles should be image styles and part of them should be generic widget styles. In order to style widget's nested editables in a generic way, we need to be able to identify nested editables in the DOM, hence, they need to be marked with classes.

[Reinmar]

This is the second part of the code which needs to be generalised as nested editable's functionality:

		editable.on( 'change:isFocused', ( evt, property, is ) => {
			if ( is ) {
				editable.addClass( 'focused' );
			} else {
				editable.removeClass( 'focused' );
			}
		} );