Bladeren bron

Extracted nested editable styles and logic to widgets.

Szymon Kupś 8 jaren geleden
bovenliggende
commit
c45d5ab4d1

+ 2 - 11
packages/ckeditor5-image/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;
 	};
 }

+ 32 - 0
packages/ckeditor5-image/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' );
 
@@ -18,6 +20,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.
  *
  * @const {String}
@@ -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}

+ 2 - 0
packages/ckeditor5-image/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.

+ 9 - 9
packages/ckeditor5-image/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>'
 				);
 			} );

+ 0 - 12
packages/ckeditor5-image/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', () => {

+ 35 - 1
packages/ckeditor5-image/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;
+		} );
+	} );
 } );

+ 1 - 16
packages/ckeditor5-image/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' );;
-		}
 	}
 }

+ 0 - 18
packages/ckeditor5-image/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;

+ 38 - 0
packages/ckeditor5-image/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' );;
+		}
+	}
+}