From b0b4bc7cf37f8d65242e30fb082cd8e56d1e52b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Szymon=20Kup=C5=9B?= <szymonkups@gmail.com>
Date: Fri, 17 Mar 2017 14:35:29 +0100
Subject: [PATCH 1/8] Extracted nested editable styles and logic to widgets.

---
 src/imagecaption/utils.js                | 13 ++------
 src/widget/utils.js                      | 32 ++++++++++++++++++++
 src/widget/widget.js                     |  2 ++
 tests/imagecaption/imagecaptionengine.js | 18 +++++------
 tests/imagecaption/utils.js              | 12 --------
 tests/widget/utils.js                    | 36 +++++++++++++++++++++-
 theme/imagecaption/theme.scss            | 17 +----------
 theme/theme.scss                         | 18 -----------
 theme/widget/theme.scss                  | 38 ++++++++++++++++++++++++
 9 files changed, 119 insertions(+), 67 deletions(-)
 create mode 100644 theme/widget/theme.scss

diff --git a/src/imagecaption/utils.js b/src/imagecaption/utils.js
index 3a4dc7a9..4c524193 100644
--- a/src/imagecaption/utils.js
+++ b/src/imagecaption/utils.js
@@ -7,8 +7,8 @@
  * @module image/imagecaption/utils
  */
 
-import ViewEditableElement from '@ckeditor/ckeditor5-engine/src/view/editableelement';
 import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
+import { createNestedEditable } from '../widget/utils';
 
 const captionSymbol = Symbol( 'imageCaption' );
 
@@ -20,18 +20,9 @@ const captionSymbol = Symbol( 'imageCaption' );
  */
 export function captionElementCreator( viewDocument ) {
 	return () => {
-		const editable = new ViewEditableElement( 'figcaption', { contenteditable: true } );
-		editable.document = viewDocument;
+		const editable = createNestedEditable( 'figcaption', viewDocument );
 		editable.setCustomProperty( captionSymbol, true );
 
-		editable.on( 'change:isFocused', ( evt, property, is ) => {
-			if ( is ) {
-				editable.addClass( 'focused' );
-			} else {
-				editable.removeClass( 'focused' );
-			}
-		} );
-
 		return editable;
 	};
 }
diff --git a/src/widget/utils.js b/src/widget/utils.js
index 4e362c86..1b236879 100644
--- a/src/widget/utils.js
+++ b/src/widget/utils.js
@@ -7,6 +7,8 @@
  * @module image/widget/utils
  */
 
+import ViewEditableElement from '@ckeditor/ckeditor5-engine/src/view/editableelement';
+
 const widgetSymbol = Symbol( 'isWidget' );
 const labelSymbol = Symbol( 'label' );
 
@@ -17,6 +19,13 @@ const labelSymbol = Symbol( 'label' );
  */
 export const WIDGET_CLASS_NAME = 'ck-widget';
 
+/**
+ * CSS class added to each nested edtiable.
+ *
+ * @type {String}
+ */
+export const NESTED_EDITABLE_CLASS_NAME = 'ck-nested-editable';
+
 /**
  * CSS class added to currently selected widget element.
  *
@@ -89,6 +98,29 @@ export function getLabel( element ) {
 	return typeof labelCreator == 'function' ? labelCreator() : labelCreator;
 }
 
+/**
+ * Creates nested editable element with proper CSS classes.
+ *
+ * @param {String} elementName Name of the element to be created.
+ * @param {module:engine/view/document~Document} viewDocument
+ * @returns {module:engine/view/editableelement~EditableElement}
+ */
+export function createNestedEditable( elementName, viewDocument ) {
+	const editable = new ViewEditableElement( elementName, { contenteditable: true } );
+	editable.addClass( NESTED_EDITABLE_CLASS_NAME );
+	editable.document = viewDocument;
+
+	editable.on( 'change:isFocused', ( evt, property, is ) => {
+		if ( is ) {
+			editable.addClass( 'focused' );
+		} else {
+			editable.removeClass( 'focused' );
+		}
+	} );
+
+	return editable;
+}
+
 // Default filler offset function applied to all widget elements.
 //
 // @returns {null}
diff --git a/src/widget/widget.js b/src/widget/widget.js
index 33653f56..860f5aad 100644
--- a/src/widget/widget.js
+++ b/src/widget/widget.js
@@ -18,6 +18,8 @@ import RootEditableElement from '@ckeditor/ckeditor5-engine/src/view/rooteditabl
 import { isWidget } from './utils';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 
+import '../../theme/widget/theme.scss';
+
 /**
  * The widget plugin.
  * Adds default {@link module:engine/view/document~Document#event:mousedown mousedown} handling on widget elements.
diff --git a/tests/imagecaption/imagecaptionengine.js b/tests/imagecaption/imagecaptionengine.js
index 5110b76a..6ac6d63a 100644
--- a/tests/imagecaption/imagecaptionengine.js
+++ b/tests/imagecaption/imagecaptionengine.js
@@ -101,7 +101,7 @@ describe( 'ImageCaptionEngine', () => {
 				expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
 					'<figure class="image ck-widget" contenteditable="false">' +
 						'<img src="img.png"></img>' +
-						'<figcaption contenteditable="true">Foo bar baz.</figcaption>' +
+						'<figcaption class="ck-nested-editable" contenteditable="true">Foo bar baz.</figcaption>' +
 					'</figure>'
 				);
 			} );
@@ -214,7 +214,7 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
 				'<figure class="image ck-widget" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption contenteditable="true">foo bar baz</figcaption>' +
+					'<figcaption class="ck-nested-editable" contenteditable="true">foo bar baz</figcaption>' +
 				'</figure>'
 			);
 		} );
@@ -227,7 +227,7 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[<figure class="image ck-widget ck-widget_selected" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption contenteditable="true"></figcaption>' +
+					'<figcaption class="ck-nested-editable" contenteditable="true"></figcaption>' +
 				'</figure>]'
 			);
 		} );
@@ -248,7 +248,7 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[<figure class="image ck-widget ck-widget_selected" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption contenteditable="true">foo bar</figcaption>' +
+					'<figcaption class="ck-nested-editable" contenteditable="true">foo bar</figcaption>' +
 				'</figure>]'
 			);
 		} );
@@ -277,7 +277,7 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'<figure class="image ck-widget" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption contenteditable="true">[]</figcaption>' +
+					'<figcaption class="ck-nested-editable" contenteditable="true">[]</figcaption>' +
 				'</figure>'
 			);
 		} );
@@ -294,7 +294,7 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[<figure class="image ck-widget ck-widget_selected" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption contenteditable="true"></figcaption>' +
+					'<figcaption class="ck-nested-editable" contenteditable="true"></figcaption>' +
 				'</figure>]'
 			);
 		} );
@@ -310,11 +310,11 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'<figure class="image ck-widget" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption contenteditable="true">foo bar</figcaption>' +
+					'<figcaption class="ck-nested-editable" contenteditable="true">foo bar</figcaption>' +
 				'</figure>' +
 				'[<figure class="image ck-widget ck-widget_selected" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption contenteditable="true"></figcaption>' +
+					'<figcaption class="ck-nested-editable" contenteditable="true"></figcaption>' +
 				'</figure>]'
 			);
 		} );
@@ -346,7 +346,7 @@ describe( 'ImageCaptionEngine', () => {
 				expect( getViewData( viewDocument ) ).to.equal(
 					'<figure class="image ck-widget" contenteditable="false">' +
 						'<img src=""></img>' +
-						'<figcaption contenteditable="true">{foo bar baz}</figcaption>' +
+						'<figcaption class="ck-nested-editable" contenteditable="true">{foo bar baz}</figcaption>' +
 					'</figure>'
 				);
 			} );
diff --git a/tests/imagecaption/utils.js b/tests/imagecaption/utils.js
index bd50f6e2..d840f8af 100644
--- a/tests/imagecaption/utils.js
+++ b/tests/imagecaption/utils.js
@@ -29,18 +29,6 @@ describe( 'image captioning utils', () => {
 			expect( element.name ).to.equal( 'figcaption' );
 			expect( isCaption( element ) ).to.be.true;
 		} );
-
-		it( 'should be created in context of proper document', () => {
-			expect( element.document ).to.equal( document );
-		} );
-
-		it( 'should add proper class when element is focused', () => {
-			element.isFocused = true;
-			expect( element.hasClass( 'focused' ) ).to.be.true;
-
-			element.isFocused = false;
-			expect( element.hasClass( 'focused' ) ).to.be.false;
-		} );
 	} );
 
 	describe( 'isCaptionEditable', () => {
diff --git a/tests/widget/utils.js b/tests/widget/utils.js
index 02b0071a..8e17b0eb 100644
--- a/tests/widget/utils.js
+++ b/tests/widget/utils.js
@@ -4,7 +4,16 @@
  */
 
 import ViewElement from '@ckeditor/ckeditor5-engine/src/view/element';
-import { widgetize, isWidget, WIDGET_CLASS_NAME, setLabel, getLabel } from '../../src/widget/utils';
+import ViewDocument from '@ckeditor/ckeditor5-engine/src/view/document';
+import {
+	widgetize,
+	isWidget,
+	setLabel,
+	getLabel,
+	createNestedEditable,
+	WIDGET_CLASS_NAME,
+	NESTED_EDITABLE_CLASS_NAME
+} from '../../src/widget/utils';
 
 describe( 'widget utils', () => {
 	let element;
@@ -77,4 +86,29 @@ describe( 'widget utils', () => {
 			expect( getLabel( element ) ).to.equal( 'bar' );
 		} );
 	} );
+
+	describe( 'createNestedEditable', () => {
+		let viewDocument, element;
+
+		beforeEach( () => {
+			viewDocument = new ViewDocument();
+			element = createNestedEditable( 'div', viewDocument );
+		} );
+
+		it( 'should be created in context of proper document', () => {
+			expect( element.document ).to.equal( viewDocument );
+		} );
+
+		it( 'should add proper class', () => {
+			expect( element.hasClass( NESTED_EDITABLE_CLASS_NAME ) ).to.be.true;
+		} );
+
+		it( 'should add proper class when element is focused', () => {
+			element.isFocused = true;
+			expect( element.hasClass( 'focused' ) ).to.be.true;
+
+			element.isFocused = false;
+			expect( element.hasClass( 'focused' ) ).to.be.false;
+		} );
+	} );
 } );
diff --git a/theme/imagecaption/theme.scss b/theme/imagecaption/theme.scss
index 3546f578..1523bd05 100644
--- a/theme/imagecaption/theme.scss
+++ b/theme/imagecaption/theme.scss
@@ -2,27 +2,12 @@
 // 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 {
+	figcaption.ck-nested-editable {
 		background-color: ck-color( 'foreground' );
 		padding: 10px;
 		font-size: .8em;
 		color: ck-color( 'text', 40 );
-
-		// 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' );;
-		}
 	}
 }
diff --git a/theme/theme.scss b/theme/theme.scss
index f6ca039f..2cc0813a 100644
--- a/theme/theme.scss
+++ b/theme/theme.scss
@@ -1,24 +1,6 @@
 // Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
-// Common styles applied to all widgets.
-.ck-widget {
-	margin: 10px 0;
-	padding: 0;
-
-	&.ck-widget_selected, &.ck-widget_selected:hover {
-		outline: 2px solid #ace;
-	}
-
-	.ck-editor__editable.ck-blurred &.ck-widget_selected {
-		outline: 2px solid #ddd;
-	}
-
-	&:hover {
-		outline: 2px solid yellow;
-	}
-}
-
 // Image widget's styles.
 .image {
 	text-align: center;
diff --git a/theme/widget/theme.scss b/theme/widget/theme.scss
new file mode 100644
index 00000000..564643a5
--- /dev/null
+++ b/theme/widget/theme.scss
@@ -0,0 +1,38 @@
+// 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 {
+	margin: 10px 0;
+	padding: 0;
+
+	&.ck-widget_selected, &.ck-widget_selected:hover {
+		outline: 2px solid #ace;
+	}
+
+	.ck-editor__editable.ck-blurred &.ck-widget_selected {
+		outline: 2px solid #ddd;
+	}
+
+	&:hover {
+		outline: 2px solid yellow;
+	}
+
+	.ck-nested-editable {
+		// 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' );;
+		}
+	}
+}

From a80dff3b0c5d00c08d82eeb626a734969864bd75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Szymon=20Kup=C5=9B?= <szymonkups@gmail.com>
Date: Mon, 20 Mar 2017 14:54:57 +0100
Subject: [PATCH 2/8] Renamed utils functions: widgetize to toWidget and
 createNestedEditable to toWidgetEditable.

---
 src/image/utils.js           |  6 +++---
 src/imagecaption/utils.js    |  4 ++--
 src/widget/utils.js          |  6 +++---
 tests/widget/utils.js        | 16 ++++++++--------
 tests/widget/widget.js       |  4 ++--
 tests/widget/widgetengine.js |  4 ++--
 6 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/image/utils.js b/src/image/utils.js
index 56a3d223..336ff716 100644
--- a/src/image/utils.js
+++ b/src/image/utils.js
@@ -7,7 +7,7 @@
  * @module image/image/utils
  */
 
-import { widgetize, isWidget } from '../widget/utils';
+import { toWidget, isWidget } from '../widget/utils';
 import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
 
 const imageSymbol = Symbol( 'isImage' );
@@ -15,7 +15,7 @@ const imageSymbol = Symbol( 'isImage' );
 /**
  * Converts given {@link module:engine/view/element~Element} to image widget:
  * * adds {@link module:engine/view/element~Element#setCustomProperty custom property} allowing to recognize image widget element,
- * * calls {@link module:image/widget/utils~widgetize widgetize} function with proper element's label creator.
+ * * calls {@link module:image/widget/utils~toWidget toWidget} function with proper element's label creator.
  *
  * @param {module:engine/view/element~Element} viewElement
  * @param {String} label Element's label. It will be concatenated with image's `alt` attribute if one is present.
@@ -24,7 +24,7 @@ const imageSymbol = Symbol( 'isImage' );
 export function toImageWidget( viewElement, label ) {
 	viewElement.setCustomProperty( imageSymbol, true );
 
-	return widgetize( viewElement, { label: labelCreator } );
+	return toWidget( viewElement, { label: labelCreator } );
 
 	function labelCreator() {
 		const imgElement = viewElement.getChild( 0 );
diff --git a/src/imagecaption/utils.js b/src/imagecaption/utils.js
index 4c524193..d895c9b6 100644
--- a/src/imagecaption/utils.js
+++ b/src/imagecaption/utils.js
@@ -8,7 +8,7 @@
  */
 
 import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
-import { createNestedEditable } from '../widget/utils';
+import { toWidgetEditable } from '../widget/utils';
 
 const captionSymbol = Symbol( 'imageCaption' );
 
@@ -20,7 +20,7 @@ const captionSymbol = Symbol( 'imageCaption' );
  */
 export function captionElementCreator( viewDocument ) {
 	return () => {
-		const editable = createNestedEditable( 'figcaption', viewDocument );
+		const editable = toWidgetEditable( 'figcaption', viewDocument );
 		editable.setCustomProperty( captionSymbol, true );
 
 		return editable;
diff --git a/src/widget/utils.js b/src/widget/utils.js
index 1b236879..0dd35bf1 100644
--- a/src/widget/utils.js
+++ b/src/widget/utils.js
@@ -44,7 +44,7 @@ export function isWidget( element ) {
 }
 
 /**
- * "Widgetizes" given {@link module:engine/view/element~Element}:
+ * Converts given {@link module:engine/view/element~Element} to widget in following way:
  * * sets `contenteditable` attribute to `true`,
  * * adds custom `getFillerOffset` method returning `null`,
  * * adds `ck-widget` CSS class,
@@ -56,7 +56,7 @@ export function isWidget( element ) {
  * a plain string or a function returning a string.
  * @returns {module:engine/view/element~Element} Returns same element.
  */
-export function widgetize( element, options ) {
+export function toWidget( element, options ) {
 	options = options || {};
 	element.setAttribute( 'contenteditable', false );
 	element.getFillerOffset = getFillerOffset;
@@ -105,7 +105,7 @@ export function getLabel( element ) {
  * @param {module:engine/view/document~Document} viewDocument
  * @returns {module:engine/view/editableelement~EditableElement}
  */
-export function createNestedEditable( elementName, viewDocument ) {
+export function toWidgetEditable( elementName, viewDocument ) {
 	const editable = new ViewEditableElement( elementName, { contenteditable: true } );
 	editable.addClass( NESTED_EDITABLE_CLASS_NAME );
 	editable.document = viewDocument;
diff --git a/tests/widget/utils.js b/tests/widget/utils.js
index 8e17b0eb..f9551beb 100644
--- a/tests/widget/utils.js
+++ b/tests/widget/utils.js
@@ -6,11 +6,11 @@
 import ViewElement from '@ckeditor/ckeditor5-engine/src/view/element';
 import ViewDocument from '@ckeditor/ckeditor5-engine/src/view/document';
 import {
-	widgetize,
+	toWidget,
 	isWidget,
 	setLabel,
 	getLabel,
-	createNestedEditable,
+	toWidgetEditable,
 	WIDGET_CLASS_NAME,
 	NESTED_EDITABLE_CLASS_NAME
 } from '../../src/widget/utils';
@@ -20,10 +20,10 @@ describe( 'widget utils', () => {
 
 	beforeEach( () => {
 		element = new ViewElement( 'div' );
-		widgetize( element );
+		toWidget( element );
 	} );
 
-	describe( 'widgetize()', () => {
+	describe( 'toWidget()', () => {
 		it( 'should set contenteditable to false', () => {
 			expect( element.getAttribute( 'contenteditable' ) ).to.be.false;
 		} );
@@ -39,14 +39,14 @@ describe( 'widget utils', () => {
 
 		it( 'should add element\'s label if one is provided', () => {
 			element = new ViewElement( 'div' );
-			widgetize( element, { label: 'foo bar baz label' } );
+			toWidget( element, { label: 'foo bar baz label' } );
 
 			expect( getLabel( element ) ).to.equal( 'foo bar baz label' );
 		} );
 
 		it( 'should add element\'s label if one is provided as function', () => {
 			element = new ViewElement( 'div' );
-			widgetize( element, { label: () => 'foo bar baz label' } );
+			toWidget( element, { label: () => 'foo bar baz label' } );
 
 			expect( getLabel( element ) ).to.equal( 'foo bar baz label' );
 		} );
@@ -87,12 +87,12 @@ describe( 'widget utils', () => {
 		} );
 	} );
 
-	describe( 'createNestedEditable', () => {
+	describe( 'toWidgetEditable', () => {
 		let viewDocument, element;
 
 		beforeEach( () => {
 			viewDocument = new ViewDocument();
-			element = createNestedEditable( 'div', viewDocument );
+			element = toWidgetEditable( 'div', viewDocument );
 		} );
 
 		it( 'should be created in context of proper document', () => {
diff --git a/tests/widget/widget.js b/tests/widget/widget.js
index 62e98724..dc0b057a 100644
--- a/tests/widget/widget.js
+++ b/tests/widget/widget.js
@@ -7,7 +7,7 @@ import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtest
 import Widget from '../../src/widget/widget';
 import MouseObserver from '@ckeditor/ckeditor5-engine/src/view/observer/mouseobserver';
 import buildModelConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildmodelconverter';
-import { widgetize } from '../../src/widget/utils';
+import { toWidget } from '../../src/widget/utils';
 import ViewContainer from '@ckeditor/ckeditor5-engine/src/view/containerelement';
 import ViewEditable from '@ckeditor/ckeditor5-engine/src/view/editableelement';
 import DomEventData from '@ckeditor/ckeditor5-engine/src/view/observer/domeventdata';
@@ -48,7 +48,7 @@ describe( 'Widget', () => {
 						const b = new AttributeContainer( 'b' );
 						const div = new ViewContainer( 'div', null, b );
 
-						return widgetize( div );
+						return toWidget( div );
 					} );
 
 				buildModelConverter().for( editor.editing.modelToView )
diff --git a/tests/widget/widgetengine.js b/tests/widget/widgetengine.js
index b76b9b74..96227ea3 100644
--- a/tests/widget/widgetengine.js
+++ b/tests/widget/widgetengine.js
@@ -10,7 +10,7 @@ import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-util
 import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
 import ViewContainer from '@ckeditor/ckeditor5-engine/src/view/containerelement';
 import ViewEditable from '@ckeditor/ckeditor5-engine/src/view/editableelement';
-import { widgetize } from '../../src/widget/utils';
+import { toWidget } from '../../src/widget/utils';
 
 describe( 'WidgetEngine', () => {
 	let editor, document, viewDocument;
@@ -32,7 +32,7 @@ describe( 'WidgetEngine', () => {
 				buildModelConverter().for( editor.editing.modelToView )
 					.fromElement( 'widget' )
 					.toElement( () => {
-						const element = widgetize( new ViewContainer( 'div' ), { label: 'element label' } );
+						const element = toWidget( new ViewContainer( 'div' ), { label: 'element label' } );
 
 						return element;
 					} );

From 7ef489557ebdc3fddc6f69b8dd7603d7b55058fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Szymon=20Kup=C5=9B?= <szymonkups@gmail.com>
Date: Tue, 21 Mar 2017 10:14:05 +0100
Subject: [PATCH 3/8] CSS classes name refactoring in widgets.

---
 src/widget/utils.js                      | 13 +++----------
 tests/imagecaption/imagecaptionengine.js | 18 +++++++++---------
 tests/widget/utils.js                    |  9 ++++-----
 theme/imagecaption/theme.scss            |  2 +-
 theme/widget/theme.scss                  | 13 ++++++-------
 5 files changed, 23 insertions(+), 32 deletions(-)

diff --git a/src/widget/utils.js b/src/widget/utils.js
index 0dd35bf1..655332f1 100644
--- a/src/widget/utils.js
+++ b/src/widget/utils.js
@@ -19,13 +19,6 @@ const labelSymbol = Symbol( 'label' );
  */
 export const WIDGET_CLASS_NAME = 'ck-widget';
 
-/**
- * CSS class added to each nested edtiable.
- *
- * @type {String}
- */
-export const NESTED_EDITABLE_CLASS_NAME = 'ck-nested-editable';
-
 /**
  * CSS class added to currently selected widget element.
  *
@@ -107,14 +100,14 @@ export function getLabel( element ) {
  */
 export function toWidgetEditable( elementName, viewDocument ) {
 	const editable = new ViewEditableElement( elementName, { contenteditable: true } );
-	editable.addClass( NESTED_EDITABLE_CLASS_NAME );
+	editable.addClass( 'ck-editable' );
 	editable.document = viewDocument;
 
 	editable.on( 'change:isFocused', ( evt, property, is ) => {
 		if ( is ) {
-			editable.addClass( 'focused' );
+			editable.addClass( 'ck-editable_focused' );
 		} else {
-			editable.removeClass( 'focused' );
+			editable.removeClass( 'ck-editable_focused' );
 		}
 	} );
 
diff --git a/tests/imagecaption/imagecaptionengine.js b/tests/imagecaption/imagecaptionengine.js
index 6ac6d63a..30552348 100644
--- a/tests/imagecaption/imagecaptionengine.js
+++ b/tests/imagecaption/imagecaptionengine.js
@@ -101,7 +101,7 @@ describe( 'ImageCaptionEngine', () => {
 				expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
 					'<figure class="image ck-widget" contenteditable="false">' +
 						'<img src="img.png"></img>' +
-						'<figcaption class="ck-nested-editable" contenteditable="true">Foo bar baz.</figcaption>' +
+						'<figcaption class="ck-editable" contenteditable="true">Foo bar baz.</figcaption>' +
 					'</figure>'
 				);
 			} );
@@ -214,7 +214,7 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
 				'<figure class="image ck-widget" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-nested-editable" contenteditable="true">foo bar baz</figcaption>' +
+					'<figcaption class="ck-editable" contenteditable="true">foo bar baz</figcaption>' +
 				'</figure>'
 			);
 		} );
@@ -227,7 +227,7 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[<figure class="image ck-widget ck-widget_selected" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-nested-editable" contenteditable="true"></figcaption>' +
+					'<figcaption class="ck-editable" contenteditable="true"></figcaption>' +
 				'</figure>]'
 			);
 		} );
@@ -248,7 +248,7 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[<figure class="image ck-widget ck-widget_selected" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-nested-editable" contenteditable="true">foo bar</figcaption>' +
+					'<figcaption class="ck-editable" contenteditable="true">foo bar</figcaption>' +
 				'</figure>]'
 			);
 		} );
@@ -277,7 +277,7 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'<figure class="image ck-widget" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-nested-editable" contenteditable="true">[]</figcaption>' +
+					'<figcaption class="ck-editable" contenteditable="true">[]</figcaption>' +
 				'</figure>'
 			);
 		} );
@@ -294,7 +294,7 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[<figure class="image ck-widget ck-widget_selected" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-nested-editable" contenteditable="true"></figcaption>' +
+					'<figcaption class="ck-editable" contenteditable="true"></figcaption>' +
 				'</figure>]'
 			);
 		} );
@@ -310,11 +310,11 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'<figure class="image ck-widget" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-nested-editable" contenteditable="true">foo bar</figcaption>' +
+					'<figcaption class="ck-editable" contenteditable="true">foo bar</figcaption>' +
 				'</figure>' +
 				'[<figure class="image ck-widget ck-widget_selected" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-nested-editable" contenteditable="true"></figcaption>' +
+					'<figcaption class="ck-editable" contenteditable="true"></figcaption>' +
 				'</figure>]'
 			);
 		} );
@@ -346,7 +346,7 @@ describe( 'ImageCaptionEngine', () => {
 				expect( getViewData( viewDocument ) ).to.equal(
 					'<figure class="image ck-widget" contenteditable="false">' +
 						'<img src=""></img>' +
-						'<figcaption class="ck-nested-editable" contenteditable="true">{foo bar baz}</figcaption>' +
+						'<figcaption class="ck-editable" contenteditable="true">{foo bar baz}</figcaption>' +
 					'</figure>'
 				);
 			} );
diff --git a/tests/widget/utils.js b/tests/widget/utils.js
index f9551beb..a6fbc9c0 100644
--- a/tests/widget/utils.js
+++ b/tests/widget/utils.js
@@ -11,8 +11,7 @@ import {
 	setLabel,
 	getLabel,
 	toWidgetEditable,
-	WIDGET_CLASS_NAME,
-	NESTED_EDITABLE_CLASS_NAME
+	WIDGET_CLASS_NAME
 } from '../../src/widget/utils';
 
 describe( 'widget utils', () => {
@@ -100,15 +99,15 @@ describe( 'widget utils', () => {
 		} );
 
 		it( 'should add proper class', () => {
-			expect( element.hasClass( NESTED_EDITABLE_CLASS_NAME ) ).to.be.true;
+			expect( element.hasClass( 'ck-editable' ) ).to.be.true;
 		} );
 
 		it( 'should add proper class when element is focused', () => {
 			element.isFocused = true;
-			expect( element.hasClass( 'focused' ) ).to.be.true;
+			expect( element.hasClass( 'ck-editable_focused' ) ).to.be.true;
 
 			element.isFocused = false;
-			expect( element.hasClass( 'focused' ) ).to.be.false;
+			expect( element.hasClass( 'ck-editable_focused' ) ).to.be.false;
 		} );
 	} );
 } );
diff --git a/theme/imagecaption/theme.scss b/theme/imagecaption/theme.scss
index 1523bd05..010d931d 100644
--- a/theme/imagecaption/theme.scss
+++ b/theme/imagecaption/theme.scss
@@ -4,7 +4,7 @@
 @import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_colors.scss';
 
 .ck-widget.image {
-	figcaption.ck-nested-editable {
+	figcaption.ck-editable {
 		background-color: ck-color( 'foreground' );
 		padding: 10px;
 		font-size: .8em;
diff --git a/theme/widget/theme.scss b/theme/widget/theme.scss
index 564643a5..2cc7adf8 100644
--- a/theme/widget/theme.scss
+++ b/theme/widget/theme.scss
@@ -21,18 +21,17 @@
 		outline: 2px solid yellow;
 	}
 
-	.ck-nested-editable {
+	.ck-editable {
 		// The `:focus` styles is applied before `.focused` class inside editables.
 		// These styles show different border for a blink of an eye.
 		&:focus {
+			&.ck-editable_focused {
+				@include ck-focus-ring( 'outline' );
+				@include ck-box-shadow( $ck-inner-shadow );
+				background-color: ck-color( 'background' );;
+			}
 			outline: none;
 			box-shadow: none;
 		}
-
-		&.focused {
-			@include ck-focus-ring( 'outline' );
-			@include ck-box-shadow( $ck-inner-shadow );
-			background-color: ck-color( 'background' );;
-		}
 	}
 }

From a426d5a4e86dadfaf1b466361fab0a89be670070 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Szymon=20Kup=C5=9B?= <szymonkups@gmail.com>
Date: Tue, 21 Mar 2017 10:32:52 +0100
Subject: [PATCH 4/8] Widget util function toWidgetEditable now accepts element
 to have similar parameter as toWidget function. Small docs fixes.

---
 src/imagecaption/utils.js |  6 ++++--
 src/widget/utils.js       | 17 ++++++++---------
 tests/widget/utils.js     |  5 ++++-
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/imagecaption/utils.js b/src/imagecaption/utils.js
index d895c9b6..ab5781f5 100644
--- a/src/imagecaption/utils.js
+++ b/src/imagecaption/utils.js
@@ -8,6 +8,7 @@
  */
 
 import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
+import ViewEditableElement from '@ckeditor/ckeditor5-engine/src/view/editableelement';
 import { toWidgetEditable } from '../widget/utils';
 
 const captionSymbol = Symbol( 'imageCaption' );
@@ -20,10 +21,11 @@ const captionSymbol = Symbol( 'imageCaption' );
  */
 export function captionElementCreator( viewDocument ) {
 	return () => {
-		const editable = toWidgetEditable( 'figcaption', viewDocument );
+		const editable = new ViewEditableElement( 'figcaption' );
+		editable.document = viewDocument;
 		editable.setCustomProperty( captionSymbol, true );
 
-		return editable;
+		return toWidgetEditable( editable );
 	};
 }
 
diff --git a/src/widget/utils.js b/src/widget/utils.js
index 655332f1..a83f7bdb 100644
--- a/src/widget/utils.js
+++ b/src/widget/utils.js
@@ -7,8 +7,6 @@
  * @module image/widget/utils
  */
 
-import ViewEditableElement from '@ckeditor/ckeditor5-engine/src/view/editableelement';
-
 const widgetSymbol = Symbol( 'isWidget' );
 const labelSymbol = Symbol( 'label' );
 
@@ -92,16 +90,17 @@ export function getLabel( element ) {
 }
 
 /**
- * Creates nested editable element with proper CSS classes.
+ * Adds functionality to provided {module:engine/view/editableelement~EditableElement} to act as a widget's editable:
+ * * sets `contenteditable` attribute to `true`,
+ * * adds `ck-editable` CSS class,
+ * * adds `ck-editable_focused` CSS class when editable is focused and removes it when it's blurred.
  *
- * @param {String} elementName Name of the element to be created.
- * @param {module:engine/view/document~Document} viewDocument
- * @returns {module:engine/view/editableelement~EditableElement}
+ * @param {module:engine/view/editableelement~EditableElement} editable
+ * @returns {module:engine/view/editableelement~EditableElement} Returns same element that was provided in `editable` param.
  */
-export function toWidgetEditable( elementName, viewDocument ) {
-	const editable = new ViewEditableElement( elementName, { contenteditable: true } );
+export function toWidgetEditable( editable ) {
+	editable.setAttribute( 'contenteditable', 'true' );
 	editable.addClass( 'ck-editable' );
-	editable.document = viewDocument;
 
 	editable.on( 'change:isFocused', ( evt, property, is ) => {
 		if ( is ) {
diff --git a/tests/widget/utils.js b/tests/widget/utils.js
index a6fbc9c0..61f81799 100644
--- a/tests/widget/utils.js
+++ b/tests/widget/utils.js
@@ -4,6 +4,7 @@
  */
 
 import ViewElement from '@ckeditor/ckeditor5-engine/src/view/element';
+import ViewEditableElement from '@ckeditor/ckeditor5-engine/src/view/editableelement';
 import ViewDocument from '@ckeditor/ckeditor5-engine/src/view/document';
 import {
 	toWidget,
@@ -91,7 +92,9 @@ describe( 'widget utils', () => {
 
 		beforeEach( () => {
 			viewDocument = new ViewDocument();
-			element = toWidgetEditable( 'div', viewDocument );
+			element = new ViewEditableElement( 'div' );
+			element.document = viewDocument;
+			toWidgetEditable( element );
 		} );
 
 		it( 'should be created in context of proper document', () => {

From 3be87181ac131e153ac296aca62aa603919a163d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Szymon=20Kup=C5=9B?= <szymonkups@gmail.com>
Date: Mon, 27 Mar 2017 17:17:42 +0200
Subject: [PATCH 5/8] Fixed widget and caption styles.

---
 theme/imagecaption/theme.scss |  8 +++++---
 theme/widget/theme.scss       | 36 +++++++++++++++++++----------------
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/theme/imagecaption/theme.scss b/theme/imagecaption/theme.scss
index 010d931d..c837eb57 100644
--- a/theme/imagecaption/theme.scss
+++ b/theme/imagecaption/theme.scss
@@ -2,12 +2,14 @@
 // 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/_spacing.scss';
+@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_fonts.scss';
 
 .ck-widget.image {
-	figcaption.ck-editable {
+	.ck-editable {
 		background-color: ck-color( 'foreground' );
-		padding: 10px;
-		font-size: .8em;
+		padding: ck-spacing();
+		font-size: ck-font-size( -1 );
 		color: ck-color( 'text', 40 );
 	}
 }
diff --git a/theme/widget/theme.scss b/theme/widget/theme.scss
index 2cc7adf8..a97954a8 100644
--- a/theme/widget/theme.scss
+++ b/theme/widget/theme.scss
@@ -4,34 +4,38 @@
 @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';
+@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_spacing.scss';
+
+@include ck-color-add( (
+	'widget-blurred': #ddd,
+	'widget-hover': yellow
+) );
+
+$widget-outline-thickness: 2px;
 
 .ck-widget {
-	margin: 10px 0;
+	margin: ck-spacing() 0;
 	padding: 0;
 
 	&.ck-widget_selected, &.ck-widget_selected:hover {
-		outline: 2px solid #ace;
+		outline: $widget-outline-thickness solid ck-color( 'focus' );
 	}
 
 	.ck-editor__editable.ck-blurred &.ck-widget_selected {
-		outline: 2px solid #ddd;
+		outline: $widget-outline-thickness solid ck-color( 'widget-blurred' );
 	}
 
 	&:hover {
-		outline: 2px solid yellow;
+		outline: $widget-outline-thickness solid ck-color( 'widget-hover' );
 	}
 
-	.ck-editable {
-		// The `:focus` styles is applied before `.focused` class inside editables.
-		// These styles show different border for a blink of an eye.
-		&:focus {
-			&.ck-editable_focused {
-				@include ck-focus-ring( 'outline' );
-				@include ck-box-shadow( $ck-inner-shadow );
-				background-color: ck-color( 'background' );;
-			}
-			outline: none;
-			box-shadow: none;
-		}
+.ck-editable {
+	// The `:focus` style is applied before `.ck-editable_focused` class is rendered in the view.
+	// These styles show a different border for a blink of an eye, so `:focus` need to have same styles applied.
+	&.ck-editable_focused, &:focus {
+		@include ck-focus-ring( 'outline' );
+		@include ck-box-shadow( $ck-inner-shadow );
+		background-color: ck-color( 'background' );
 	}
 }
+}

From aeb276b88e50ed3aceaef625d8c5ecee00777ba4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Szymon=20Kup=C5=9B?= <szymonkups@gmail.com>
Date: Tue, 28 Mar 2017 14:49:39 +0200
Subject: [PATCH 6/8] Added ck-editor__editable prefix to content styles.

---
 theme/imagecaption/theme.scss | 14 ++++++++------
 theme/theme.scss              | 32 +++++++++++++++++---------------
 2 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/theme/imagecaption/theme.scss b/theme/imagecaption/theme.scss
index c837eb57..bd4c3a31 100644
--- a/theme/imagecaption/theme.scss
+++ b/theme/imagecaption/theme.scss
@@ -5,11 +5,13 @@
 @import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_spacing.scss';
 @import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_fonts.scss';
 
-.ck-widget.image {
-	.ck-editable {
-		background-color: ck-color( 'foreground' );
-		padding: ck-spacing();
-		font-size: ck-font-size( -1 );
-		color: ck-color( 'text', 40 );
+.ck-editor__editable {
+	.image {
+		.ck-editable {
+			background-color: ck-color( 'foreground' );
+			padding: ck-spacing();
+			font-size: ck-font-size( -1 );
+			color: ck-color( 'text', 40 );
+		}
 	}
 }
diff --git a/theme/theme.scss b/theme/theme.scss
index 2cc0813a..d10d28cb 100644
--- a/theme/theme.scss
+++ b/theme/theme.scss
@@ -2,24 +2,26 @@
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 // Image widget's styles.
-.image {
-	text-align: center;
-	clear: both;
+.ck-editor__editable {
+	.image {
+		text-align: center;
+		clear: both;
 
-	&.image-style-side {
-		float: right;
-		margin-left: 0.8em;
-		max-width: 50%;
+		&.image-style-side {
+			float: right;
+			margin-left: 0.8em;
+			max-width: 50%;
+		}
 	}
-}
 
-.image > img {
-	// Prevent unnecessary margins caused by line-height (see #44).
-	display: block;
+	.image > img {
+		// Prevent unnecessary margins caused by line-height (see #44).
+		display: block;
 
-	// Center the image if its width is smaller than content's width.
-	margin: 0 auto;
+		// Center the image if its width is smaller than content's width.
+		margin: 0 auto;
 
-	// Make sure the image never exceeds the size of the parent container (#67).
-	max-width: 100%;
+		// Make sure the image never exceeds the size of the parent container (#67).
+		max-width: 100%;
+	}
 }

From c025e495764b00dc4d6d6e2fa482c1d2070c98ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Szymon=20Kup=C5=9B?= <szymonkups@gmail.com>
Date: Tue, 28 Mar 2017 15:16:24 +0200
Subject: [PATCH 7/8] Fixed indentation in theme file.

---
 theme/widget/theme.scss | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/theme/widget/theme.scss b/theme/widget/theme.scss
index a97954a8..780a8cb0 100644
--- a/theme/widget/theme.scss
+++ b/theme/widget/theme.scss
@@ -29,13 +29,13 @@ $widget-outline-thickness: 2px;
 		outline: $widget-outline-thickness solid ck-color( 'widget-hover' );
 	}
 
-.ck-editable {
-	// The `:focus` style is applied before `.ck-editable_focused` class is rendered in the view.
-	// These styles show a different border for a blink of an eye, so `:focus` need to have same styles applied.
-	&.ck-editable_focused, &:focus {
-		@include ck-focus-ring( 'outline' );
-		@include ck-box-shadow( $ck-inner-shadow );
-		background-color: ck-color( 'background' );
+	.ck-editable {
+		// The `:focus` style is applied before `.ck-editable_focused` class is rendered in the view.
+		// These styles show a different border for a blink of an eye, so `:focus` need to have same styles applied.
+		&.ck-editable_focused, &:focus {
+			@include ck-focus-ring( 'outline' );
+			@include ck-box-shadow( $ck-inner-shadow );
+			background-color: ck-color( 'background' );
+		}
 	}
 }
-}

From d7979936843cd805666a506aa49ef3de158a75ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= <pkoszulinski@gmail.com>
Date: Tue, 28 Mar 2017 15:50:02 +0200
Subject: [PATCH 8/8] Use data classes to style the content. Removed invalid
 comment.

---
 theme/imagecaption/theme.scss | 12 +++++-------
 theme/theme.scss              |  1 -
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/theme/imagecaption/theme.scss b/theme/imagecaption/theme.scss
index bd4c3a31..ce1a02e1 100644
--- a/theme/imagecaption/theme.scss
+++ b/theme/imagecaption/theme.scss
@@ -6,12 +6,10 @@
 @import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_fonts.scss';
 
 .ck-editor__editable {
-	.image {
-		.ck-editable {
-			background-color: ck-color( 'foreground' );
-			padding: ck-spacing();
-			font-size: ck-font-size( -1 );
-			color: ck-color( 'text', 40 );
-		}
+	.image > figcaption {
+		background-color: ck-color( 'foreground' );
+		padding: ck-spacing();
+		font-size: ck-font-size( -1 );
+		color: ck-color( 'text', 40 );
 	}
 }
diff --git a/theme/theme.scss b/theme/theme.scss
index d10d28cb..89803bba 100644
--- a/theme/theme.scss
+++ b/theme/theme.scss
@@ -1,7 +1,6 @@
 // Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
-// Image widget's styles.
 .ck-editor__editable {
 	.image {
 		text-align: center;